feat: Redesign calendar page with default week view, improved app bar, and a consolidated activity timeline.

lib/components/home/show_trip_details_content.dart

@@ -9,7 +9,6 @@ import 'package:travel_mate/components/home/create_trip_content.dart';
 import 'package:travel_mate/models/trip.dart';
 import 'package:travel_mate/components/map/map_content.dart';
 import 'package:travel_mate/services/error_service.dart';
-import 'package:travel_mate/services/activity_cache_service.dart';
 import 'package:travel_mate/repositories/group_repository.dart';
 import 'package:travel_mate/repositories/user_repository.dart';
 import 'package:travel_mate/repositories/account_repository.dart';
@@ -17,6 +16,19 @@ import 'package:travel_mate/models/group_member.dart';
 import 'package:travel_mate/components/activities/activities_page.dart';
 import 'package:travel_mate/components/home/calendar/calendar_page.dart';
 import 'package:url_launcher/url_launcher.dart';
+import 'package:intl/intl.dart';
+import 'package:travel_mate/models/activity.dart';
+import 'package:travel_mate/blocs/activity/activity_state.dart';
+import 'package:travel_mate/blocs/balance/balance_bloc.dart';
+import 'package:travel_mate/blocs/balance/balance_event.dart';
+import 'package:travel_mate/blocs/balance/balance_state.dart';
+import 'package:travel_mate/models/settlement.dart';
+import 'package:travel_mate/blocs/user/user_bloc.dart';
+import 'package:travel_mate/blocs/user/user_state.dart' as user_state;
+import 'package:travel_mate/components/account/group_expenses_page.dart';
+import 'package:travel_mate/models/group.dart';
+import 'package:travel_mate/models/account.dart';
+import 'package:travel_mate/models/user_balance.dart';
 
 class ShowTripDetailsContent extends StatefulWidget {
   final Trip trip;
@@ -28,49 +40,48 @@ class ShowTripDetailsContent extends StatefulWidget {
 
 class _ShowTripDetailsContentState extends State<ShowTripDetailsContent> {
   final ErrorService _errorService = ErrorService();
-  final ActivityCacheService _cacheService = ActivityCacheService();
   final GroupRepository _groupRepository = GroupRepository();
   final UserRepository _userRepository = UserRepository();
   final AccountRepository _accountRepository = AccountRepository();
 
+  Group? _group;
+  Account? _account;
+
   @override
   void initState() {
     super.initState();
-    // Lancer la recherche d'activités Google en arrière-plan
-    _preloadGoogleActivities();
+    // Charger les activités du voyage depuis la DB
+    if (widget.trip.id != null) {
+      context.read<ActivityBloc>().add(LoadActivities(widget.trip.id!));
+      _loadGroupAndAccount();
+    }
   }
 
-  /// Précharger les activités Google en arrière-plan
-  void _preloadGoogleActivities() {
-    // Attendre un moment avant de lancer la recherche pour ne pas bloquer l'UI
-    Future.delayed(const Duration(milliseconds: 500), () {
-      if (mounted && widget.trip.id != null) {
-        // Vérifier si on a déjà des activités en cache
-        if (_cacheService.hasCachedActivities(widget.trip.id!)) {
-          return; // Utiliser le cache
-        }
+  Future<void> _loadGroupAndAccount() async {
+    if (widget.trip.id == null) return;
 
-        // Sinon, lancer la recherche avec le maximum d'activités
-        context.read<ActivityBloc>().add(
-          widget.trip.hasCoordinates
-              ? SearchActivitiesWithCoordinates(
-                  tripId: widget.trip.id!,
-                  latitude: widget.trip.latitude!,
-                  longitude: widget.trip.longitude!,
-                  category: null,
-                  maxResults: 100, // Charger le maximum d'activités possible
-                  reset: true,
-                )
-              : SearchActivities(
-                  tripId: widget.trip.id!,
-                  destination: widget.trip.location,
-                  category: null,
-                  maxResults: 100, // Charger le maximum d'activités possible
-                  reset: true,
-                ),
-        );
+    try {
+      final group = await _groupRepository.getGroupByTripId(widget.trip.id!);
+      final account = await _accountRepository.getAccountByTripId(
+        widget.trip.id!,
+      );
+
+      if (mounted) {
+        setState(() {
+          _group = group;
+          _account = account;
+        });
+
+        if (group != null) {
+          context.read<BalanceBloc>().add(LoadGroupBalances(group.id));
+        }
       }
-    });
+    } catch (e) {
+      _errorService.logError(
+        'ShowTripDetailsContent',
+        'Error loading group/account: $e',
+      );
+    }
   }
 
   // Calculer les jours restants avant le voyage
@@ -446,7 +457,19 @@ class _ShowTripDetailsContentState extends State<ShowTripDetailsContent> {
                         icon: Icons.account_balance_wallet,
                         title: 'Dépenses',
                         color: Colors.orange,
-                        onTap: () => _showComingSoon('Dépenses'),
+                        onTap: () {
+                          if (_group != null && _account != null) {
+                            Navigator.push(
+                              context,
+                              MaterialPageRoute(
+                                builder: (context) => GroupExpensesPage(
+                                  group: _group!,
+                                  account: _account!,
+                                ),
+                              ),
+                            );
+                          }
+                        },
                       ),
                       _buildActionButton(
                         icon: Icons.map,
@@ -546,13 +569,6 @@ class _ShowTripDetailsContentState extends State<ShowTripDetailsContent> {
     );
   }
 
-  void _showComingSoon(String feature) {
-    _errorService.showSnackbar(
-      message: '$feature - Fonctionnalité à venir',
-      isError: false,
-    );
-  }
-
   void _showOptionsMenu() {
     final theme = Theme.of(context);
 
@@ -963,46 +979,87 @@ class _ShowTripDetailsContentState extends State<ShowTripDetailsContent> {
 
   Widget _buildNextActivitiesSection() {
     final theme = Theme.of(context);
-    return Column(
-      children: [
-        Row(
-          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+
+    return BlocBuilder<ActivityBloc, ActivityState>(
+      builder: (context, state) {
+        List<Activity> activities = [];
+        if (state is ActivityLoaded) {
+          activities = state.activities;
+        }
+
+        // Filter scheduled activities and sort by date
+        final scheduledActivities = activities
+            .where((a) => a.date != null && a.date!.isAfter(DateTime.now()))
+            .toList();
+
+        scheduledActivities.sort((a, b) => a.date!.compareTo(b.date!));
+
+        // Take next 3 activities
+        final nextActivities = scheduledActivities.take(3).toList();
+
+        if (nextActivities.isEmpty) {
+          return const SizedBox.shrink();
+        }
+
+        return Column(
           children: [
-            Text(
-              'Prochaines activités',
-              style: theme.textTheme.titleMedium?.copyWith(
-                fontWeight: FontWeight.bold,
-                color: theme.colorScheme.onSurface,
-              ),
-            ),
-            TextButton(
-              onPressed: () => _navigateToActivities(),
-              child: Text(
-                'Tout voir',
-                style: TextStyle(
-                  color: Colors.teal,
-                  fontWeight: FontWeight.w600,
+            Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                Text(
+                  'Prochaines activités',
+                  style: theme.textTheme.titleMedium?.copyWith(
+                    fontWeight: FontWeight.bold,
+                    color: theme.colorScheme.onSurface,
+                  ),
                 ),
-              ),
+                TextButton(
+                  onPressed: () => Navigator.push(
+                    context,
+                    MaterialPageRoute(
+                      builder: (context) => CalendarPage(trip: widget.trip),
+                    ),
+                  ),
+                  child: Text(
+                    'Voir calendrier',
+                    style: TextStyle(
+                      color: Colors.teal,
+                      fontWeight: FontWeight.w600,
+                    ),
+                  ),
+                ),
+              ],
             ),
+            const SizedBox(height: 8),
+            ...nextActivities.map((activity) {
+              if (activity.date == null) return const SizedBox.shrink();
+              return Padding(
+                padding: const EdgeInsets.only(bottom: 12),
+                child: _buildActivityCard(
+                  title: activity.name,
+                  date: DateFormat(
+                    'd MMM, HH:mm',
+                    'fr_FR',
+                  ).format(activity.date!),
+                  icon: _getCategoryIcon(activity.category),
+                ),
+              );
+            }),
           ],
-        ),
-        const SizedBox(height: 8),
-        _buildActivityCard(
-          title: 'Visite du Colisée',
-          date: '11 août, 10:00',
-          icon: Icons.museum,
-        ),
-        const SizedBox(height: 12),
-        _buildActivityCard(
-          title: 'Dîner à Trastevere',
-          date: '11 août, 20:30',
-          icon: Icons.restaurant,
-        ),
-      ],
+        );
+      },
     );
   }
 
+  IconData _getCategoryIcon(String category) {
+    if (category.toLowerCase().contains('musée')) return Icons.museum;
+    if (category.toLowerCase().contains('restaurant')) return Icons.restaurant;
+    if (category.toLowerCase().contains('nature')) return Icons.nature;
+    if (category.toLowerCase().contains('photo')) return Icons.camera_alt;
+    if (category.toLowerCase().contains('détente')) return Icons.icecream;
+    return Icons.place;
+  }
+
   Widget _buildActivityCard({
     required String title,
     required String date,
@@ -1074,61 +1131,193 @@ class _ShowTripDetailsContentState extends State<ShowTripDetailsContent> {
   Widget _buildExpensesCard() {
     final theme = Theme.of(context);
 
-    return Container(
-      margin: const EdgeInsets.only(top: 24),
-      padding: const EdgeInsets.all(16),
-      decoration: BoxDecoration(
-        color: const Color(0xFFFDF4E3), // Light beige background
-        borderRadius: BorderRadius.circular(16),
-      ),
-      child: Row(
-        children: [
-          Container(
-            padding: const EdgeInsets.all(10),
-            decoration: const BoxDecoration(
-              color: Colors.orange,
-              shape: BoxShape.circle,
+    return BlocBuilder<BalanceBloc, BalanceState>(
+      builder: (context, state) {
+        String balanceText = 'Chargement...';
+        bool isLoading = state is BalanceLoading;
+        bool isPositive = true;
+
+        if (state is GroupBalancesLoaded) {
+          final userState = context.read<UserBloc>().state;
+          if (userState is user_state.UserLoaded) {
+            final currentUserId = userState.user.id;
+
+            // Filter settlements involving the current user
+            final mySettlements = state.settlements
+                .where(
+                  (s) =>
+                      !s.isCompleted &&
+                      (s.fromUserId == currentUserId ||
+                          s.toUserId == currentUserId),
+                )
+                .toList();
+
+            if (mySettlements.isEmpty) {
+              // Check if user has a balance of 0
+              final myBalanceObj = state.balances.firstWhere(
+                (b) => b.userId == currentUserId,
+                orElse: () => const UserBalance(
+                  userId: '',
+                  userName: '',
+                  totalPaid: 0,
+                  totalOwed: 0,
+                  balance: 0,
+                ),
+              );
+
+              if (myBalanceObj.balance.abs() < 0.01) {
+                balanceText = 'Vous êtes à jour';
+              } else {
+                // Fallback to total balance if no settlements found but balance exists
+                isPositive = myBalanceObj.balance >= 0;
+                final amountStr =
+                    '${myBalanceObj.balance.abs().toStringAsFixed(2)} €';
+                balanceText = isPositive
+                    ? 'On vous doit $amountStr'
+                    : 'Vous devez $amountStr';
+              }
+            } else {
+              // Construct detailed string
+              final debtsToPay = mySettlements
+                  .where((s) => s.fromUserId == currentUserId)
+                  .toList();
+              final debtsToReceive = mySettlements
+                  .where((s) => s.toUserId == currentUserId)
+                  .toList();
+
+              if (debtsToPay.isNotEmpty) {
+                isPositive = false;
+                final details = debtsToPay
+                    .map(
+                      (s) =>
+                          '${s.amount.toStringAsFixed(2)}€ à ${s.toUserName}',
+                    )
+                    .join(' et ');
+                balanceText = 'Vous devez $details';
+              } else if (debtsToReceive.isNotEmpty) {
+                isPositive = true;
+                final details = debtsToReceive
+                    .map(
+                      (s) =>
+                          '${s.amount.toStringAsFixed(2)}€ de ${s.fromUserName}',
+                    )
+                    .join(' et ');
+                balanceText =
+                    'On vous doit $details'; // Or "X owes you..." but "On vous doit" is generic enough or we can be specific
+                // Let's be specific as requested: "X doit vous payer..." or similar?
+                // The user asked: "vous devez 21 euros à John..." (active voice for user paying).
+                // For receiving, "John vous doit 21 euros..." would be symmetric.
+                // Let's try to match the requested format for paying first.
+
+                if (debtsToReceive.length == 1) {
+                  balanceText =
+                      '${debtsToReceive.first.fromUserName} vous doit ${debtsToReceive.first.amount.toStringAsFixed(2)}€';
+                } else {
+                  balanceText =
+                      debtsToReceive
+                          .map(
+                            (s) =>
+                                '${s.fromUserName} (${s.amount.toStringAsFixed(2)}€)',
+                          )
+                          .join(' et ') +
+                      ' vous doivent de l\'argent';
+                }
+              }
+            }
+          }
+        }
+
+        return GestureDetector(
+          onTap: () {
+            if (_group != null && _account != null) {
+              Navigator.push(
+                context,
+                MaterialPageRoute(
+                  builder: (context) =>
+                      GroupExpensesPage(group: _group!, account: _account!),
+                ),
+              );
+            }
+          },
+          child: Container(
+            margin: const EdgeInsets.only(top: 24),
+            padding: const EdgeInsets.all(16),
+            decoration: BoxDecoration(
+              color: const Color(0xFFFDF4E3), // Light beige background
+              borderRadius: BorderRadius.circular(16),
             ),
-            child: const Icon(
-              Icons.warning_amber_rounded,
-              color: Colors.white,
-              size: 24,
-            ),
-          ),
-          const SizedBox(width: 16),
-          Expanded(
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
+            child: Row(
               children: [
-                Text(
-                  'Dépenses',
-                  style: theme.textTheme.bodyLarge?.copyWith(
-                    fontWeight: FontWeight.bold,
-                    color: const Color(0xFF5D4037), // Brown text
+                Container(
+                  padding: const EdgeInsets.all(10),
+                  decoration: const BoxDecoration(
+                    color: Colors.orange,
+                    shape: BoxShape.circle,
+                  ),
+                  child: const Icon(
+                    Icons.warning_amber_rounded,
+                    color: Colors.white,
+                    size: 24,
                   ),
                 ),
-                const SizedBox(height: 4),
-                Text(
-                  'Vous devez 25€ à Clara',
-                  style: theme.textTheme.bodyMedium?.copyWith(
-                    color: const Color(0xFF8D6E63), // Lighter brown
+                const SizedBox(width: 16),
+                Expanded(
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Text(
+                        'Dépenses',
+                        style: theme.textTheme.bodyLarge?.copyWith(
+                          fontWeight: FontWeight.bold,
+                          color: const Color(0xFF5D4037), // Brown text
+                        ),
+                      ),
+                      const SizedBox(height: 4),
+                      if (isLoading)
+                        const SizedBox(
+                          height: 20,
+                          width: 20,
+                          child: CircularProgressIndicator(strokeWidth: 2),
+                        )
+                      else
+                        Text(
+                          balanceText,
+                          style: theme.textTheme.bodyMedium?.copyWith(
+                            color: const Color(0xFF8D6E63), // Lighter brown
+                          ),
+                          maxLines: 2,
+                          overflow: TextOverflow.ellipsis,
+                        ),
+                    ],
+                  ),
+                ),
+                TextButton(
+                  onPressed: () {
+                    if (_group != null && _account != null) {
+                      Navigator.push(
+                        context,
+                        MaterialPageRoute(
+                          builder: (context) => GroupExpensesPage(
+                            group: _group!,
+                            account: _account!,
+                          ),
+                        ),
+                      );
+                    }
+                  },
+                  child: Text(
+                    'Régler',
+                    style: TextStyle(
+                      color: const Color(0xFF5D4037),
+                      fontWeight: FontWeight.bold,
+                    ),
                   ),
                 ),
               ],
             ),
           ),
-          TextButton(
-            onPressed: () => _showComingSoon('Régler les dépenses'),
-            child: Text(
-              'Régler',
-              style: TextStyle(
-                color: const Color(0xFF5D4037),
-                fontWeight: FontWeight.bold,
-              ),
-            ),
-          ),
-        ],
-      ),
+        );
+      },
     );
   }
 }