import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:turquessa_mesas_hoster/mvvm/viewmodels/home_view_model.dart';

class CustomDrawer extends StatelessWidget {
  const CustomDrawer({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: Container(
        color: Colors.white,
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            // Cabecera del drawer
            DrawerHeader(
              decoration: const BoxDecoration(
                color: Colors.blue,
                borderRadius: BorderRadius.only(
                  bottomLeft: Radius.circular(20),
                  bottomRight: Radius.circular(20),
                ),
              ),
              padding: EdgeInsets.zero,
              margin: EdgeInsets.zero,
              child: Stack(
                children: [
                  const Positioned(
                    left: 20,
                    top: 40,
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          'Menú',
                          style: TextStyle(
                            fontSize: 28,
                            fontWeight: FontWeight.bold,
                            color: Colors.white,
                          ),
                        ),
                        SizedBox(height: 8),
                        Text(
                          'Opciones disponibles',
                          style: TextStyle(
                            fontSize: 16,
                            color: Colors.white,
                          ),
                        ),
                      ],
                    ),
                  ),
                  // Icono decorativo
                  Positioned(
                    right: 20,
                    top: 40,
                    child: Container(
                      padding: const EdgeInsets.all(8),
                      decoration: const BoxDecoration(
                        color: Colors.yellow,
                        shape: BoxShape.circle,
                      ),
                      child: const Icon(
                        Icons.menu_book,
                        color: Colors.white,
                        size: 24,
                      ),
                    ),
                  ),
                ],
              ),
            ),

            // Tarjeta de perfil del usuario
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
              child: Container(
                width: double.infinity,
                padding: const EdgeInsets.all(20),
                decoration: BoxDecoration(
                  color: const Color(0xFFF5F5F5),
                  borderRadius: BorderRadius.circular(16),
                ),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          const Text(
                            'Usuario Conocido',
                            style: TextStyle(
                              fontSize: 22,
                              fontWeight: FontWeight.bold,
                              color: Colors.black87,
                            ),
                          ),
                          const SizedBox(height: 8),
                          const Text(
                            'usuario@gmail.com',
                            style: TextStyle(
                              fontSize: 16,
                              color: Colors.black54,
                            ),
                          ),
                          const SizedBox(height: 12),
                          GestureDetector(
                            onTap: () {
                              // Acción al pulsar en Ver perfil
                            },
                            child: const Text(
                              'Ver perfil',
                              style: TextStyle(
                                fontSize: 16,
                                fontWeight: FontWeight.w500,
                                color: Colors.blue,
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                    Container(
                      width: 60,
                      height: 60,
                      decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        color: Colors.grey[200],
                      ),
                      child: const Icon(
                        Icons.person,
                        size: 36,
                        color: Colors.blue,
                      ),
                    ),
                  ],
                ),
              ),
            ),

            // Opciones del menú
            _buildMenuItem(
              icon: Icons.home_outlined,
              title: "Inicio",
              onTap: () {
                Navigator.pop(context);
                // Navegación a la pantalla de inicio
              },
            ),

            _buildMenuItem(
              icon: Icons.shopping_bag_outlined,
              title: "Mis Pedidos",
              onTap: () {
                Navigator.pop(context);
                // Navegación a pedidos
              },
            ),

            _buildMenuItem(
              icon: Icons.favorite_outline,
              title: "Favoritos",
              onTap: () {
                Navigator.pop(context);
                // Navegación a favoritos
              },
            ),

            _buildMenuItem(
              icon: Icons.notifications_outlined,
              title: "Notificaciones",
              onTap: () {
                Navigator.pop(context);
                // Navegación a notificaciones
              },
            ),

            _buildMenuItem(
              icon: Icons.settings_outlined,
              title: "Configuración",
              onTap: () {
                Navigator.pop(context);
                // Navegación a configuración
              },
            ),

            const SizedBox(height: 20),

            // Opción para modo oscuro
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(16),
                child: Container(
                  height: 80,
                  padding: const EdgeInsets.symmetric(horizontal: 16),
                  width: double.infinity,
                  color: Colors.white,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      const Row(
                        children: [
                          Icon(Icons.nights_stay_rounded, size: 28),
                          Padding(
                            padding: EdgeInsets.only(left: 8),
                            child: Text(
                              "Modo oscuro",
                              style: TextStyle(
                                fontSize: 20,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                          ),
                        ],
                      ),
                      Switch(
                        activeColor: Theme.of(context).primaryColor,
                        value: false,
                        onChanged: (value) {
                          // Cambiar tema claro/oscuro
                        },
                      ),
                    ],
                  ),
                ),
              ),
            ),

            // Botón de cerrar sesión
            Padding(
              padding: const EdgeInsets.all(16),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(16),
                child: Container(
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(16),
                    border: Border.all(color: Colors.red, width: 3),
                  ),
                  height: 60,
                  padding: const EdgeInsets.symmetric(horizontal: 16),
                  width: double.infinity,
                  child: InkWell(
                    onTap: () {
                      // Acción para cerrar sesión
                    },
                    child: const Center(
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          Icon(
                            Icons.logout_outlined,
                            size: 24,
                            color: Colors.red,
                          ),
                          SizedBox(width: 8),
                          Text(
                            "Cerrar Sesión",
                            style: TextStyle(
                              fontWeight: FontWeight.bold,
                              fontSize: 18,
                              color: Colors.red,
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildMenuItem({
    required IconData icon,
    required String title,
    required VoidCallback onTap,
  }) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(16),
        child: Container(
          height: 60,
          color: Colors.white,
          child: InkWell(
            onTap: onTap,
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16),
              child: Row(
                children: [
                  Icon(icon, size: 24),
                  const SizedBox(width: 12),
                  Text(
                    title,
                    style: const TextStyle(
                      fontSize: 18,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  const Spacer(),
                  const Icon(Icons.arrow_forward_ios_rounded, size: 16),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}