import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import '../../blocs/user/user_bloc.dart';
import '../../blocs/user/user_state.dart' as user_state;
import '../../blocs/group/group_bloc.dart';
import '../../blocs/group/group_state.dart';
import '../../blocs/group/group_event.dart';
import '../../data/models/group.dart';

class GroupContent extends StatefulWidget {
  const GroupContent({super.key});

  @override
  State<GroupContent> createState() => _GroupContentState();
}

class _GroupContentState extends State<GroupContent> {
  @override
  void initState() {
    super.initState();
    _loadInitialData();
  }

  void _loadInitialData() {
    final userState = context.read<UserBloc>().state;
    if (userState is user_state.UserLoaded) {
      // Charger les groupes de l'utilisateur connecté
      context.read<GroupBloc>().add(LoadGroupsByUserId(userState.user.id));
    }
  }

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<UserBloc, user_state.UserState>(
      builder: (context, userState) {
        if (userState is user_state.UserLoading) {
          return const Scaffold(
            body: Center(child: CircularProgressIndicator()),
          );
        }

        if (userState is user_state.UserError) {
          return Scaffold(
            body: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  const Icon(Icons.error, size: 64, color: Colors.red),
                  const SizedBox(height: 16),
                  Text('Erreur: ${userState.message}'),
                ],
              ),
            ),
          );
        }

        if (userState is! user_state.UserLoaded) {
          return const Scaffold(
            body: Center(child: Text('Utilisateur non connecté')),
          );
        }

        final user = userState.user;

        return BlocConsumer<GroupBloc, GroupState>(
          listener: (context, groupState) {
            if (groupState is GroupOperationSuccess) {
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(
                  content: Text(groupState.message),
                  backgroundColor: Colors.green,
                ),
              );
              // Recharger les groupes après une opération réussie
              context.read<GroupBloc>().add(LoadGroupsByUserId(user.id));
            } else if (groupState is GroupError) {
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(
                  content: Text(groupState.message),
                  backgroundColor: Colors.red,
                ),
              );
            }
          },
          builder: (context, groupState) {
            return Scaffold(
              body: RefreshIndicator(
                onRefresh: () async {
                  context.read<GroupBloc>().add(LoadGroupsByUserId(user.id));
                },
                child: SingleChildScrollView(
                  physics: const AlwaysScrollableScrollPhysics(),
                  padding: const EdgeInsets.all(16.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      // En-tête
                      Text(
                        'Mes groupes',
                        style: TextStyle(
                          fontSize: 28,
                          fontWeight: FontWeight.bold,
                          color: Theme.of(context).brightness == Brightness.dark
                              ? Colors.white
                              : Colors.black,
                        ),
                      ),
                      const SizedBox(height: 8),
                      Text(
                        'Discutez avec les participants de vos voyages',
                        style: TextStyle(
                          fontSize: 14,
                          color: Colors.grey[600],
                        ),
                      ),
                      const SizedBox(height: 24),

                      // Contenu principal
                      if (groupState is GroupLoading)
                        _buildLoadingState()
                      else if (groupState is GroupError)
                        _buildErrorState(groupState.message, user.id)
                      else if (groupState is GroupsLoaded)
                        groupState.groups.isEmpty
                            ? _buildEmptyState()
                            : _buildGroupGrid(groupState.groups)
                      else
                        _buildEmptyState(),

                      const SizedBox(height: 80),
                    ],
                  ),
                ),
              ),
            );
          },
        );
      },
    );
  }

  Widget _buildLoadingState() {
    return const Center(
      child: Padding(
        padding: EdgeInsets.all(32),
        child: CircularProgressIndicator(),
      ),
    );
  }

  Widget _buildErrorState(String error, String userId) {
    return Center(
      child: Padding(
        padding: const EdgeInsets.all(32),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Icon(Icons.error, size: 64, color: Colors.red),
            const SizedBox(height: 16),
            const Text(
              'Erreur lors du chargement des groupes',
              style: TextStyle(
                fontSize: 16,
                fontWeight: FontWeight.w500,
              ),
            ),
            const SizedBox(height: 8),
            Text(
              error,
              textAlign: TextAlign.center,
              style: const TextStyle(fontSize: 12, color: Colors.grey),
            ),
            const SizedBox(height: 16),
            ElevatedButton.icon(
              onPressed: () {
                context.read<GroupBloc>().add(LoadGroupsByUserId(userId));
              },
              icon: const Icon(Icons.refresh),
              label: const Text('Réessayer'),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildEmptyState() {
    return Center(
      child: Padding(
        padding: const EdgeInsets.all(32),
        child: Column(
          children: [
            Icon(
              Icons.forum_outlined,
              size: 80,
              color: Colors.grey[400],
            ),
            const SizedBox(height: 16),
            const Text(
              'Aucun groupe',
              style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
            ),
            const SizedBox(height: 8),
            Text(
              'Les groupes sont créés automatiquement lorsque vous créez ou rejoignez un voyage',
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: 14,
                color: Colors.grey[600],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildGroupGrid(List<Group> groups) {
    return GridView.builder(
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        crossAxisSpacing: 12,
        mainAxisSpacing: 12,
        childAspectRatio: 0.85,
      ),
      itemCount: groups.length,
      itemBuilder: (context, index) => _buildGroupCard(groups[index]),
    );
  }

  Widget _buildGroupCard(Group group) {
    final isDarkMode = Theme.of(context).brightness == Brightness.dark;
    final colors = [
      Colors.blue,
      Colors.purple,
      Colors.green,
      Colors.orange,
      Colors.teal,
      Colors.pink,
    ];
    final color = colors[group.name.hashCode.abs() % colors.length];

    return Card(
      elevation: 3,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(16),
      ),
      child: InkWell(
        onTap: () => _openGroupChat(group),
        borderRadius: BorderRadius.circular(16),
        child: Container(
          padding: const EdgeInsets.all(16),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(16),
            gradient: LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: [
                color.withOpacity(0.1),
                color.withOpacity(0.05),
              ],
            ),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // Avatar du groupe
              Container(
                padding: const EdgeInsets.all(12),
                decoration: BoxDecoration(
                  color: color.withOpacity(0.2),
                  borderRadius: BorderRadius.circular(12),
                ),
                child: Icon(
                  Icons.group,
                  color: color,
                  size: 32,
                ),
              ),

              const Spacer(),

              // Nom du groupe
              Text(
                group.name,
                style: TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.bold,
                  color: isDarkMode ? Colors.white : Colors.black87,
                ),
                maxLines: 2,
                overflow: TextOverflow.ellipsis,
              ),

              const SizedBox(height: 8),

              // Nombre de membres
              Row(
                children: [
                  Icon(
                    Icons.people,
                    size: 16,
                    color: Colors.grey[600],
                  ),
                  const SizedBox(width: 4),
                  Text(
                    '${group.members.length} membre${group.members.length > 1 ? 's' : ''}',
                    style: TextStyle(
                      fontSize: 13,
                      color: Colors.grey[600],
                    ),
                  ),
                ],
              ),

              const SizedBox(height: 4),

              // Afficher les premiers membres
              if (group.members.isNotEmpty)
                Text(
                  group.members.take(3).map((m) => m.pseudo).join(', ') +
                      (group.members.length > 3 ? '...' : ''),
                  style: TextStyle(
                    fontSize: 11,
                    color: Colors.grey[500],
                  ),
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                ),
            ],
          ),
        ),
      ),
    );
  }

  void _openGroupChat(Group group) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text('Ouverture du chat: ${group.name}'),
        duration: const Duration(seconds: 1),
      ),
    );
    
    // TODO: Navigation vers la page de chat
    // Navigator.push(
    //   context,
    //   MaterialPageRoute(
    //     builder: (context) => GroupChatPage(group: group),
    //   ),
    // );
  }
}