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();
    print('===== GroupContent: initState =====');
    
    // Charger immédiatement sans attendre le prochain frame
    WidgetsBinding.instance.addPostFrameCallback((_) {
      print('===== PostFrameCallback déclenché =====');
      _loadInitialData();
    });
  }

  void _loadInitialData() {
    print('===== _loadInitialData START =====');
    try {
      final userState = context.read<UserBloc>().state;
      print('UserBloc state type: ${userState.runtimeType}');
      print('UserBloc state: $userState');
      
      if (userState is user_state.UserLoaded) {
        final userId = userState.user.id;
        print('✓ User chargé, ID: $userId');
        print('>>> Envoi de LoadGroupsByUserId <<<');
        context.read<GroupBloc>().add(LoadGroupsByUserId(userId));
        print('>>> LoadGroupsByUserId envoyé <<<');
      } else {
        print('✗ UserState n\'est pas UserLoaded');
      }
    } catch (e, stackTrace) {
      print('===== ERREUR _loadInitialData =====');
      print('Exception: $e');
      print('StackTrace: $stackTrace');
    }
  }

  @override
  Widget build(BuildContext context) {
    print('===== GroupContent: build =====');
    
    return BlocBuilder<UserBloc, user_state.UserState>(
      builder: (context, userState) {
        print('>>> UserBloc builder - state type: ${userState.runtimeType}');
        
        if (userState is user_state.UserLoading) {
          print('État: UserLoading');
          return const Scaffold(
            body: Center(child: CircularProgressIndicator()),
          );
        }

        if (userState is user_state.UserError) {
          print('État: UserError - ${userState.message}');
          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) {
          print('État: Utilisateur non connecté');
          return const Scaffold(
            body: Center(child: Text('Utilisateur non connecté')),
          );
        }

        print('✓ État: UserLoaded');
        final user = userState.user;

        return BlocConsumer<GroupBloc, GroupState>(
          listener: (context, groupState) {
            print('===== GroupBloc LISTENER =====');
            print('State type: ${groupState.runtimeType}');
            print('State: $groupState');
            
            if (groupState is GroupOperationSuccess) {
              print('>>> GroupOperationSuccess: ${groupState.message}');
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(
                  content: Text(groupState.message),
                  backgroundColor: Colors.green,
                ),
              );
            } else if (groupState is GroupError) {
              print('>>> GroupError: ${groupState.message}');
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(
                  content: Text(groupState.message),
                  backgroundColor: Colors.red,
                ),
              );
            }
          },
          builder: (context, groupState) {
            print('===== GroupBloc BUILDER =====');
            print('State type: ${groupState.runtimeType}');
            print('State: $groupState');
            
            // TEST: Afficher le type exact
            if (groupState is GroupsLoaded) {
              print('✓✓✓ GroupsLoaded détecté ! ✓✓✓');
              print('Nombre de groupes: ${groupState.groups.length}');
              for (var i = 0; i < groupState.groups.length; i++) {
                print('  Groupe $i: ${groupState.groups[i].name}');
              }
            }
            
            return Scaffold(
              body: SafeArea(
                child: _buildContent(groupState, user.id),
              ),
            );
          },
        );
      },
    );
  }

  Widget _buildContent(GroupState groupState, String userId) {
    print('===== _buildContent =====');
    print('State type: ${groupState.runtimeType}');
    
    if (groupState is GroupLoading) {
      print('>>> Affichage: Loading');
      return const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CircularProgressIndicator(),
            SizedBox(height: 16),
            Text('Chargement des groupes...'),
          ],
        ),
      );
    }

    if (groupState is GroupError) {
      print('>>> Affichage: Error');
      return _buildErrorState(groupState.message, userId);
    }

    if (groupState is GroupsLoaded) {
      print('>>> Affichage: GroupsLoaded');
      print('Groupes: ${groupState.groups.length}');
      
      if (groupState.groups.isEmpty) {
        print('>>> Affichage: Empty');
        return _buildEmptyState();
      }
      
      print('>>> Affichage: Liste des groupes');
      return _buildGroupsList(groupState.groups, userId);
    }

    print('>>> Affichage: Initial/Unknown');
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const Text('État inconnu'),
          const SizedBox(height: 16),
          ElevatedButton(
            onPressed: () {
              print('>>> Bouton refresh cliqué');
              context.read<GroupBloc>().add(LoadGroupsByUserId(userId));
            },
            child: const Text('Charger les groupes'),
          ),
        ],
      ),
    );
  }

  Widget _buildGroupsList(List<Group> groups, String userId) {
    print('===== _buildGroupsList =====');
    print('Nombre de groupes à afficher: ${groups.length}');
    
    return RefreshIndicator(
      onRefresh: () async {
        print('>>> Pull to refresh');
        context.read<GroupBloc>().add(LoadGroupsByUserId(userId));
        await Future.delayed(const Duration(milliseconds: 500));
      },
      child: ListView(
        padding: const EdgeInsets.all(16),
        children: [
          const Text(
            'Mes groupes',
            style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold),
          ),
          const SizedBox(height: 8),
          Text(
            'Discutez avec les participants',
            style: TextStyle(fontSize: 14, color: Colors.grey[600]),
          ),
          const SizedBox(height: 24),
          
          // IMPORTANT: Utiliser un simple Column au lieu de GridView pour tester
          ...groups.map((group) {
            print('Création widget pour: ${group.name}');
            return Padding(
              padding: const EdgeInsets.only(bottom: 12),
              child: _buildSimpleGroupCard(group),
            );
          }).toList(),
        ],
      ),
    );
  }

  Widget _buildSimpleGroupCard(Group group) {
    print('===== _buildSimpleGroupCard: ${group.name} =====');
    
    try {
      final colors = [Colors.blue, Colors.purple, Colors.green, Colors.orange];
      final color = colors[group.name.hashCode.abs() % colors.length];
      
      // Membres de manière simple
      String memberInfo = '${group.members.length} membre(s)';
      if (group.members.isNotEmpty) {
        final names = group.members
            .take(2)
            .map((m) => m.pseudo.isNotEmpty ? m.pseudo : m.firstName)
            .join(', ');
        memberInfo += '\n$names';
      }

      print('Card créée avec succès');
      
      return Card(
        elevation: 2,
        child: ListTile(
          leading: CircleAvatar(
            backgroundColor: color,
            child: const Icon(Icons.group, color: Colors.white),
          ),
          title: Text(
            group.name,
            style: const TextStyle(fontWeight: FontWeight.bold),
          ),
          subtitle: Text(memberInfo),
          trailing: const Icon(Icons.chevron_right),
          onTap: () {
            print('Tap sur: ${group.name}');
            _openGroupChat(group);
          },
        ),
      );
    } catch (e, stackTrace) {
      print('ERREUR dans _buildSimpleGroupCard: $e');
      print('StackTrace: $stackTrace');
      return Card(
        color: Colors.red[100],
        child: const ListTile(
          leading: Icon(Icons.error, color: Colors.red),
          title: Text('Erreur d\'affichage'),
        ),
      );
    }
  }

  Widget _buildEmptyState() {
    print('===== _buildEmptyState =====');
    return Center(
      child: Padding(
        padding: const EdgeInsets.all(32),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          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',
              textAlign: TextAlign.center,
              style: TextStyle(fontSize: 14, color: Colors.grey[600]),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildErrorState(String error, String userId) {
    print('===== _buildErrorState =====');
    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', style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500)),
            const SizedBox(height: 8),
            Text(error, textAlign: TextAlign.center, style: const TextStyle(fontSize: 12)),
            const SizedBox(height: 16),
            ElevatedButton.icon(
              onPressed: () {
                print('>>> Bouton réessayer cliqué');
                context.read<GroupBloc>().add(LoadGroupsByUserId(userId));
              },
              icon: const Icon(Icons.refresh),
              label: const Text('Réessayer'),
            ),
          ],
        ),
      ),
    );
  }

    void _openGroupChat(Group group) {
    print('===== _openGroupChat: ${group.name} =====');
    print('Group ID: ${group.id}');
    print('Group members: ${group.members.length}');
    
    try {
      // Afficher juste un message, pas de navigation pour l'instant
      if (mounted) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
            content: Text('Chat: ${group.name} (${group.members.length} membres)'),
            duration: const Duration(seconds: 2),
          ),
        );
      }
      
      // TODO: Navigation vers la page de chat
      // Navigator.push(
      //   context,
      //   MaterialPageRoute(
      //     builder: (context) => GroupChatPage(group: group),
      //   ),
      // );
      
    } catch (e) {
      print('ERREUR openGroupChat: $e');
    }
  }
}