import 'package:em2rp/views/widgets/nav/main_drawer.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:em2rp/providers/users_provider.dart';
import 'package:em2rp/models/user_model.dart';
import 'package:em2rp/views/widgets/user_management/user_card.dart';
import 'package:em2rp/views/widgets/user_management/edit_user_dialog.dart';
import 'package:em2rp/utils/colors.dart';

class UserManagementPage extends StatefulWidget {
  const UserManagementPage({Key? key}) : super(key: key);

  @override
  State<UserManagementPage> createState() => _UserManagementPageState();
}

class _UserManagementPageState extends State<UserManagementPage> {
  @override
  void initState() {
    super.initState();
    Future.microtask(
        () => Provider.of<UsersProvider>(context, listen: false).fetchUsers());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Gestion des utilisateurs'),
        backgroundColor: AppColors.rouge,
      ),
      drawer: const MainDrawer(currentPage: '/account_management'),
      body: Consumer<UsersProvider>(
        builder: (context, usersProvider, child) {
          if (usersProvider.isLoading) {
            return const Center(child: CircularProgressIndicator());
          }
          final users = usersProvider.users;
          if (users.isEmpty) {
            return const Center(child: Text("Aucun utilisateur trouvé"));
          }

          // Détermine le nombre de colonnes selon la largeur
          final width = MediaQuery.of(context).size.width;
          int crossAxisCount = 1;
          if (width > 1200)
            crossAxisCount = 4;
          else if (width > 800)
            crossAxisCount = 3;
          else if (width > 600) crossAxisCount = 2;

          return Padding(
            padding: const EdgeInsets.all(16),
            child: GridView.builder(
              itemCount: users.length,
              // Dans GridView.builder
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: width > 1200
                    ? 4
                    : width > 800
                        ? 3
                        : width > 600
                            ? 2
                            : 1,
                crossAxisSpacing: 16,
                mainAxisSpacing: 16,
                // childAspectRatio fixé pour desktop ; mobile ignore car row layout
              ),

              itemBuilder: (context, i) {
                final user = users[i];
                return UserCard(
                  user: user,
                  onEdit: () => showDialog(
                      context: context,
                      builder: (_) => EditUserDialog(user: user)),
                  onDelete: () => usersProvider.deleteUser(user.uid),
                );
              },
            ),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        backgroundColor: AppColors.rouge,
        child: const Icon(Icons.add, color: AppColors.blanc),
        onPressed: () => _showCreateUserDialog(context),
      ),
    );
  }

  void _showCreateUserDialog(BuildContext context) {
    final firstNameController = TextEditingController();
    final lastNameController = TextEditingController();
    final emailController = TextEditingController();
    final phoneController = TextEditingController();
    final roleController = TextEditingController();

    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: const Text('Créer un utilisateur'),
        content: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            TextField(
                controller: firstNameController,
                decoration: const InputDecoration(labelText: 'Prénom')),
            TextField(
                controller: lastNameController,
                decoration: const InputDecoration(labelText: 'Nom')),
            TextField(
                controller: emailController,
                decoration: const InputDecoration(labelText: 'Email')),
            TextField(
                controller: phoneController,
                decoration: const InputDecoration(labelText: 'Téléphone')),
            TextField(
                controller: roleController,
                decoration: const InputDecoration(labelText: 'Rôle')),
          ],
        ),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: const Text('Annuler'),
          ),
          TextButton(
            onPressed: () {
              final newUser = UserModel(
                uid: '',
                firstName: firstNameController.text,
                lastName: lastNameController.text,
                email: emailController.text,
                phoneNumber: phoneController.text,
                role: roleController.text,
                profilePhotoUrl: '',
              );
              Navigator.pop(context);
            },
            child: const Text('Créer'),
          ),
        ],
      ),
    );
  }
}