import 'package:prosapp_web_app/models/pro_state.dart';
import 'package:prosapp_web_app/providers/auth_provider.dart';
import 'package:prosapp_web_app/providers/professional_provider.dart';
import 'package:prosapp_web_app/providers/services_provider.dart';
import 'package:prosapp_web_app/providers/sidemenu_provider.dart';
import 'package:prosapp_web_app/router/router.dart';
import 'package:prosapp_web_app/services/navigation_service.dart';
import 'package:prosapp_web_app/services/notifications_service.dart';
import 'package:prosapp_web_app/ui/shared/widgets/menu_item.dart';
import 'package:prosapp_web_app/ui/shared/widgets/text_separator.dart';
import 'package:flutter/material.dart';
import 'package:prosapp_web_app/ui/shared/widgets/logo.dart';
import 'package:provider/provider.dart';

class Sidebar extends StatelessWidget {
  const Sidebar({super.key});

  void navigateTo(String routeName) {
    NavigationService.replaceTo(routeName);
    SideMenuProvider.closeMenu();
  }

  @override
  Widget build(BuildContext context) {
    final sideMenuProvider = Provider.of<SideMenuProvider>(context);
    final authProvider = Provider.of<AuthProvider>(context, listen: false);
    final professionalProvider = Provider.of<ProfessionalProvider>(context);

    return Container(
      width: 220,
      height: double.infinity,
      decoration: buildBoxDecoration(),
      child: ListView(
        physics: const ClampingScrollPhysics(),
        children: [
          const Logo(),
          const SizedBox(height: 8),

          if (professionalProvider.isProModeActive) ...[
            const TextSeparator(text: 'Profesional'),
            MenuItem(
              isActive: sideMenuProvider.currentPage == Flurorouter.profileRoute ||
                  sideMenuProvider.currentPage == Flurorouter.professionalProfileRoute,
              text: 'Perfil',
              icon: Icons.person_outlined,
              onPressed: () {
                if (professionalProvider.isProModeActive) {
                  navigateTo(Flurorouter.professionalProfileRoute);
                } else {
                  navigateTo(Flurorouter.profileRoute);
                }
              },
            ),
            MenuItem(
              isActive: sideMenuProvider.currentPage == Flurorouter.professionalServicesRequestsRoute,
              text: 'Mis solicitudes',
              icon: Icons.room_service_outlined,
              onPressed: () {
                Provider.of<ServicesProvider>(context, listen: false).clearServices();
                navigateTo(Flurorouter.professionalServicesRequestsRoute);
              },
            ),
            MenuItem(
              isActive: sideMenuProvider.currentPage == Flurorouter.professionalServicesRoute,
              text: 'Mis servicios',
              icon: Icons.list_alt_outlined,
              onPressed: () {
                Provider.of<ServicesProvider>(context, listen: false).clearServices();
                navigateTo(Flurorouter.professionalServicesRoute);
              },
            ),
            MenuItem(
              isActive: sideMenuProvider.currentPage == Flurorouter.professionalServicesHistoryRoute,
              text: 'Historial',
              icon: Icons.restore_outlined,
              onPressed: () {
                Provider.of<ServicesProvider>(context, listen: false).clearServices();
                navigateTo(Flurorouter.professionalServicesHistoryRoute);
              },
            ),
            MenuItem(
              text: 'Calendario',
              icon: Icons.calendar_month_outlined,
              onPressed: () => navigateTo(Flurorouter.professionalCalendarRoute),
            ),
          ] else ...[
            const TextSeparator(text: 'Usuario'),
            MenuItem(
              isActive: sideMenuProvider.currentPage == Flurorouter.profileRoute,
              text: 'Perfil',
              icon: Icons.person_outlined,
              onPressed: () => navigateTo(Flurorouter.profileRoute),
            ),
            MenuItem(
              isActive: sideMenuProvider.currentPage == Flurorouter.dashboardRoute,
              text: 'Solicitar',
              icon: Icons.room_service_outlined,
              onPressed: () => navigateTo(Flurorouter.dashboardRoute),
            ),
            MenuItem(
              isActive: sideMenuProvider.currentPage == Flurorouter.userServicesRoute,
              text: 'Mis servicios',
              icon: Icons.list_alt_outlined,
              onPressed: () {
                Provider.of<ServicesProvider>(context, listen: false).clearServices();
                navigateTo(Flurorouter.userServicesRoute);
              },
            ),
            MenuItem(
              isActive: sideMenuProvider.currentPage == Flurorouter.userServicesHistoryRoute,
              text: 'Historial',
              icon: Icons.restore_outlined,
              onPressed: () {
                Provider.of<ServicesProvider>(context, listen: false).clearServices();
                navigateTo(Flurorouter.userServicesHistoryRoute);
              },
            ),
            MenuItem(
              isActive: sideMenuProvider.currentPage == Flurorouter.supportRoute,
              text: 'Soporte',
              icon: Icons.support_agent_outlined,
              onPressed: () => navigateTo(Flurorouter.supportRoute),
            ),
          ],

          const SizedBox(height: 16),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16),
            child: MouseRegion(
              cursor: SystemMouseCursors.click,
              child: GestureDetector(
                onTap: () {
                  if (authProvider.user?.name == null ||
                      authProvider.user?.name == '') {
                    NotificationsService.showSnackBarError('Primero completa tu perfil');
                    navigateTo(Flurorouter.profileRoute);
                    return;
                  }
                  if (authProvider.user?.proState == ProState.active) {
                    professionalProvider.toggleProMode();
                    if (professionalProvider.isProModeActive) {
                      navigateTo(Flurorouter.professionalServicesRequestsRoute);
                    } else {
                      navigateTo(Flurorouter.dashboardRoute);
                    }
                  } else {
                    navigateTo(Flurorouter.requestProfessionalRoute);
                  }
                },
                child: Container(
                  padding: const EdgeInsets.symmetric(vertical: 11),
                  decoration: BoxDecoration(
                    gradient: const LinearGradient(
                      colors: [Color(0xFF42A4EF), Color(0xFF1565C0)],
                    ),
                    borderRadius: BorderRadius.circular(10),
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Icon(
                        professionalProvider.isProModeActive
                            ? Icons.person_outlined
                            : Icons.work_outline,
                        color: Colors.white,
                        size: 16,
                      ),
                      const SizedBox(width: 8),
                      Text(
                        'Modo ${professionalProvider.isProModeActive ? 'Usuario' : 'Profesional'}',
                        style: const TextStyle(
                          color: Colors.white,
                          fontSize: 13,
                          fontWeight: FontWeight.w600,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),
          const SizedBox(height: 24),
          const TextSeparator(text: 'Sesion'),
          MenuItem(
            text: 'Cerrar sesion',
            icon: Icons.exit_to_app_outlined,
            onPressed: () => authProvider.logout(),
          ),
          const SizedBox(height: 20),
        ],
      ),
    );
  }

  BoxDecoration buildBoxDecoration() => const BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [
            Color(0xFF0D1B3E),
            Color(0xFF0A1628),
          ],
        ),
        boxShadow: [
          BoxShadow(
            color: Colors.black38,
            blurRadius: 12,
            offset: Offset(2, 0),
          ),
        ],
      );
}