import 'package:em2rp/providers/user_provider.dart'; // Import UserProvider
import 'package:em2rp/utils/colors.dart';
import 'package:em2rp/views/calendar_page.dart';
import 'package:em2rp/views/my_account_page.dart';
import 'package:em2rp/views/user_management_page.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart'; // Import Provider

class MainDrawer extends StatelessWidget {
  final String currentPage;
  final UserProvider userProvider;

  const MainDrawer(
      {super.key, required this.currentPage, required this.userProvider});

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: <Widget>[
          DrawerHeader(
            // Header du drawer amélioré
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage('assets/EM2_NsurB.jpg'),
                fit: BoxFit.cover,
                colorFilter: ColorFilter.mode(
                  AppColors.noir.withOpacity(0.4),
                  BlendMode.darken,
                ),
              ),
            ),
            child: Container(
              padding: const EdgeInsets.all(16.0),
              alignment: Alignment.bottomLeft,
              child: Column(
                // Use Column to arrange logo and user name
                crossAxisAlignment:
                    CrossAxisAlignment.start, // Align text to the left
                mainAxisAlignment:
                    MainAxisAlignment.end, // Align content to the bottom
                children: [
                  Image.asset('assets/EM2_NsurB.jpg',
                      height: 50), // Smaller logo in header
                  const SizedBox(height: 8),
                  Text(
                    'Bonjour, ${userProvider.firstName ?? 'Erreur'}', // Display user's first name from provider
                    style: TextStyle(
                      color: AppColors.blanc,
                      fontSize: 18,
                      fontWeight: FontWeight.bold,
                      shadows: [
                        Shadow(
                          blurRadius: 3.0,
                          color: AppColors.noir,
                          offset: Offset(1.0, 1.0),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
          ListTile(
            // Lien vers la page Calendrier
            leading: const Icon(Icons.calendar_today),
            title: const Text('Calendrier'),
            selected: currentPage == '/calendar',
            selectedColor: AppColors.rouge,
            onTap: () {
              Navigator.pop(context);
              Navigator.pushReplacement(
                context,
                MaterialPageRoute(builder: (context) => CalendarPage()),
              );
            },
          ),
          ExpansionTileTheme(
            data: const ExpansionTileThemeData(
              iconColor: AppColors.noir,
              collapsedIconColor: AppColors.noir,
            ),
            child: ExpansionTile(
              leading: const Icon(Icons.settings),
              title: const Text('Paramètres'),
              children: <Widget>[
                ListTile(
                  leading: const Icon(Icons.account_circle),
                  // Lien vers "Mon Compte"
                  title: const Text('Mon Compte'),
                  selected: currentPage == '/my_acount',
                  selectedColor: AppColors.rouge,
                  onTap: () {
                    Navigator.pop(context);
                    Navigator.pushReplacement(
                      context,
                      MaterialPageRoute(
                          builder: (context) => const MyAccountPage()),
                    );
                  },
                ),
                ListTile(
                  leading: const Icon(Icons.group),
                  // Lien vers "Gestion des Utilisateurs"
                  title: const Text('Gestion des Utilisateurs'),
                  selected: currentPage ==
                      '/user_management', // Check if current page is UserManagementPage
                  selectedColor: AppColors.rouge, // Color when selected
                  onTap: () {
                    Navigator.pop(context); // Ferme le drawer
                    Navigator.pushReplacement(
                      // Navigue vers UserManagementPage
                      context,
                      MaterialPageRoute(
                          builder: (context) => const UserManagementPage()),
                    );
                  },
                ),
              ],
            ),
          ),
          // Tu peux ajouter d'autres liens ici si besoin
        ],
      ),
    );
  }
}