import 'package:be_happy/presentation/viewmodel/map_bloc.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:go_router/go_router.dart';
import '../../core/app_colors.dart';
import '../event/map_event.dart';

class SideMenu extends StatelessWidget {

  const SideMenu({super.key,});

  @override
  Widget build(BuildContext context) {

    final state = context.watch<MapBloc>().state;

    return Drawer(
        child: Container(
          decoration: BoxDecoration(
            gradient: AppColors.phoneScreenBg,
          ),
          child: SafeArea(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // Заголовок
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 30),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        'Добро пожаловать!',
                        style: TextStyle(
                          color: AppColors.smsDigit,
                          fontSize: 16,
                          fontWeight: FontWeight.w600,
                        ),
                      ),
                      const SizedBox(height: 4),
                      Text(
                        state.phoneNumber ?? "Загрузка...",
                        style: const TextStyle(
                          color: Colors.white70,
                          fontSize: 14,
                        ),
                      ),
                      const SizedBox(height: 4),
                      Text(
                        'Баланс ${state.balance} руб.',
                        style: const TextStyle(
                          color: Colors.white70,
                          fontSize: 14,
                        ),
                      ),
                    ],
                  ),
                ),

                const Divider(color: Colors.white30, height: 1),

                Expanded(
                  child: SingleChildScrollView(
                    child: Column(
                      children: [
                        // Пункты меню
                        Column(
                          children: [
                            _MenuItem(
                              icon: 'assets/icons/person_icon.png',
                              title: 'Профиль',
                              onTap: () => {
                                context.go('/home/profile'),
                              },
                            ),
                            _MenuItem(
                              icon: 'assets/icons/list_star_icon.png',
                              title: 'История поездок',
                              onTap: () => context.go("/home/order-history"),
                            ),
                            const Divider(color: Colors.white30, height: 1),
                            _MenuItem(
                              icon: 'assets/icons/creditcard_icon.png',
                              title: 'Способ оплаты',
                              onTap: () => context.go("/home/payment-methods"),
                            ),
                            _MenuItem(
                              icon: 'assets/icons/promo_icon.png',
                              title: 'Промокоды',
                              onTap: () => context.go("/home/promo"),
                            ),
                            _MenuItem(
                              icon: 'assets/icons/plans_icon.png',
                              title: 'Абонементы',
                              onTap: () => context.push("/home/subscriptions"),
                            ),
                            const Divider(color: Colors.white30, height: 1),
                            _MenuItem(
                              icon: 'assets/icons/magazine_icon.png',
                              title: 'Правила пользования самокатом',
                              onTap: () => context.go("/home/rules")
                            ),
                            _MenuItem(
                              icon: 'assets/icons/headphones_icon.png',
                              title: 'Техподдержка',
                              onTap: () => {
                                context.go('/home/support'),
                              },
                            ),
                            _MenuItem(
                              icon: 'assets/icons/doc_icon.png',
                              title: 'Документы',
                              onTap: () => context.go("/home/documents"),
                            ),
                            _MenuItem(
                              icon: 'assets/icons/news_icon.png',
                              title: 'Новости',
                              onTap: () => context.go("/home/news"),
                            ),
                            const Divider(color: Colors.white30, height: 1),
                            _MenuItem(
                              icon: 'assets/icons/logout_icon.png',
                              title: 'Выход',
                              onTap: () => {
                                context.go('/login'),
                                context.read<MapBloc>().stopNotificationStream(),
                                context.read<MapBloc>().add(LogoutPressed()),
                              },
                            ),
                          ],
                        ),

                        // Картинка внизу (внутри скролла)
                        Padding(
                          padding: const EdgeInsets.only(top: 2),
                          child: Image.asset(
                            'assets/wave.png',
                            width: double.infinity,
                            fit: BoxFit.fitWidth,
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
        )
    );
  }
}

class _MenuItem extends StatelessWidget {
  final String icon;
  final String title;
  final Color? color;
  final VoidCallback onTap;

  const _MenuItem({
    required this.icon,
    required this.title,
    required this.onTap,
    this.color,
  });

  @override
  Widget build(BuildContext context) {
    return ListTile(
      leading: Image.asset(
          icon,
          width: 24,
          height: 24
      ),
      title: Text(
        title,
        style: TextStyle(
          color: color ?? Colors.white,
          fontSize: 14,
          fontWeight: FontWeight.w500,
        ),
      ),
      onTap: onTap,
      contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 5),
    );
  }
}