feat: Implement group management features with Firestore integration and loading states

lib/components/group/group_content.dart

@@ -1,26 +1,125 @@
 import 'package:flutter/material.dart';
+import 'package:travel_mate/models/group.dart';
+import 'package:provider/provider.dart';
+import '../../providers/user_provider.dart';
+import '../../services/group_service.dart';
 
-class GroupContent extends StatelessWidget {
+class GroupContent extends StatefulWidget {
   const GroupContent({super.key});
 
+  @override
+  State<GroupContent> createState() => _GroupContentState();
+}
+
+class _GroupContentState extends State<GroupContent> {
+
   @override
   Widget build(BuildContext context) {
+    return Scaffold(
+      body: Consumer<UserProvider>(
+        builder: (context, userProvider, child) {
+          final user = userProvider.currentUser;
+          if (user == null || user.id == null) {
+            return const Center(
+              child: Text('Utilisateur non connecté'),
+              );
+          }
+
+          return StreamBuilder<List<Group>>(
+            stream: GroupService().getGroupsStream(),
+            builder: (context, snapshot) {
+              if (snapshot.connectionState == ConnectionState.waiting) {
+                return _buildLoadingState();
+              } else if (snapshot.hasError) {
+                print('Erreur du stream: ${snapshot.error}');
+                return Center(
+                  child: Column(
+                    mainAxisAlignment: MainAxisAlignment.center,
+                    children: [
+                      const Text('Erreur lors du chargement des groupes.'),
+                      const SizedBox(height: 8),
+                      ElevatedButton(
+                        onPressed: () {
+                          setState(() {
+                            // Forcer le rechargement du stream
+                          });
+                        },
+                        child: const Text('Réessayer'),
+                      ),
+                    ],
+                  ),
+                );
+              } 
+
+              final groups = snapshot.data ?? [];
+              print("Groupes reçus: ${groups.length}");
+
+              return RefreshIndicator(
+                onRefresh: () async {
+                  setState() {};
+                },
+                child: SingleChildScrollView(
+                  physics: const AlwaysScrollableScrollPhysics(),
+                  padding: const EdgeInsets.all(16.0),
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Text(
+                        'Vos Groupes',
+                        style: TextStyle(
+                          fontSize: 24,
+                          fontWeight: FontWeight.bold,
+                          color: Theme.of(context).brightness == Brightness.dark ? Colors.white : Colors.black,
+                        ),
+                      ),
+                      const SizedBox(height: 20),
+                      groups.isEmpty ? _buildEmptyState() : _buildGroupList(groups),
+                    ],
+                  ),
+                ),
+              );
+            },
+          );
+      }),
+    );
+  }
+
+  Widget _buildLoadingState() {
     return const Center(
-      child: Column(
-        mainAxisAlignment: MainAxisAlignment.center,
-        children: [
-          Icon(Icons.group, size: 64, color: Colors.blue),
-          SizedBox(height: 16),
-          Text(
-            'Chat de Groupe',
-            style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
-          ),
-          SizedBox(height: 8),
-          Text(
-            'Communiquez avec vos compagnons de voyage',
-            style: TextStyle(fontSize: 16, color: Colors.grey),
-          ),
-        ],
+      child: Padding(padding: EdgeInsets.all(16.0),
+        child: CircularProgressIndicator(),
+      ),
+    );
+  }
+
+  Widget _buildEmptyState() {
+    return const Center(
+      child: Text(
+        'Aucun groupe disponible. Créez ou rejoignez un voyage pour commencer à discuter!',
+        style: TextStyle(fontSize: 16, color: Colors.grey),
+        textAlign: TextAlign.center,
+      ),
+    );
+  }
+
+  Widget _buildGroupList(List<Group> groups) {
+    return Column(
+      children: groups.map((group) => _buildGroupCard(group)).toList(),
+    );
+  }
+
+  Widget _buildGroupCard(Group group) {
+    return Card(
+      margin: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
+      child: ListTile(
+        leading: CircleAvatar(
+          child: Text(group.name.isNotEmpty ? group.name[0] : '?'),
+        ),
+        title: Text(group.name),
+        subtitle: Text('${group.members.length} membres'),
+        onTap: () {
+          // Logique pour ouvrir le chat de groupe
+        },
       ),
     );
   }