unionflow-mobile-apps/lib/presentation/notifications/notification_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

import '../widgets/shared/mini_header_bar.dart';
import '../../shared/widgets/core_card.dart';
import '../../shared/widgets/core_shimmer.dart';
import '../../shared/design_system/tokens/app_typography.dart';
import '../../shared/design_system/tokens/app_colors.dart';

import '../../core/di/injection.dart';
import '../../features/notifications/presentation/bloc/notification_bloc.dart';
import '../../features/notifications/presentation/bloc/notification_event.dart';
import '../../features/notifications/presentation/bloc/notification_state.dart';
import '../../features/contributions/presentation/pages/contributions_page_wrapper.dart';
import '../../features/epargne/presentation/pages/epargne_page.dart';
import '../../features/events/presentation/pages/events_page_wrapper.dart';
import '../../features/adhesions/presentation/pages/adhesions_page_wrapper.dart';
import '../../features/organizations/presentation/pages/organizations_page_wrapper.dart';
import '../../features/members/presentation/pages/members_page_wrapper.dart';

void _navigateForCategory(BuildContext context, String category) {
  switch (category.toLowerCase()) {
    case 'finance':
    case 'cotisation':
      Navigator.of(context).push(
        MaterialPageRoute<void>(builder: (_) => const ContributionsPageWrapper()),
      );
      break;
    case 'event':
    case 'events':
      Navigator.of(context).push(
        MaterialPageRoute<void>(builder: (_) => const EventsPageWrapper()),
      );
      break;
    case 'epargne':
      Navigator.of(context).push(
        MaterialPageRoute<void>(builder: (_) => const EpargnePage()),
      );
      break;
    case 'adhesion':
    case 'adhesions':
      Navigator.of(context).push(
        MaterialPageRoute<void>(builder: (_) => const AdhesionsPageWrapper()),
      );
      break;
    case 'organisation':
    case 'organization':
    case 'organisations':
    case 'organizations':
      Navigator.of(context).push(
        MaterialPageRoute<void>(builder: (_) => const OrganizationsPageWrapper()),
      );
      break;
    case 'member':
    case 'membre':
    case 'members':
    case 'membres':
      Navigator.of(context).push(
        MaterialPageRoute<void>(builder: (_) => const MembersPageWrapper()),
      );
      break;
    default:
      break;
  }
}

/// UnionFlow Mobile - Onglet Notifications (Mode DRY)
/// Liste de notifications avec coloration subtile pour les non-lues.
class NotificationPage extends StatelessWidget {
  const NotificationPage({super.key});

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (_) => getIt<NotificationBloc>()..add(LoadNotificationsRequested()),
      child: const _NotificationView(),
    );
  }
}

class _NotificationView extends StatelessWidget {
  const _NotificationView();

  @override
  Widget build(BuildContext context) {
    final isDark = Theme.of(context).brightness == Brightness.dark;

    return Scaffold(
      appBar: const MiniHeaderBar(title: 'Notifications'),
      body: BlocBuilder<NotificationBloc, NotificationState>(
        builder: (context, state) {
          if (state is NotificationInitial || state is NotificationLoading) {
            return const Padding(
              padding: EdgeInsets.all(8.0),
              child: CoreShimmer(itemCount: 8),
            );
          }

          if (state is NotificationError) {
            return Center(
              child: Text(
                state.message,
                style: AppTypography.bodyTextSmall.copyWith(color: AppColors.error),
              ),
            );
          }

          if (state is NotificationLoaded) {
            if (state.items.isEmpty) {
              return const Center(
                child: Text('Aucune notification.', style: AppTypography.subtitleSmall),
              );
            }

            return ListView.builder(
              itemCount: state.items.length,
              itemBuilder: (context, index) {
                final item = state.items[index];
                final unreadColor = isDark ? const Color(0xFF1A1F2E) : const Color(0xFFEFF6FF); 

                return InkWell(
                  onTap: () {
                    if (!item.isRead) {
                      context.read<NotificationBloc>().add(NotificationMarkedAsRead(item.id));
                    }
                    _navigateForCategory(context, item.category);
                  },
                  child: Container(
                    color: item.isRead ? Colors.transparent : unreadColor,
                    child: CoreCard(
                      margin: EdgeInsets.zero, // Retire la marge pour coller les items de liste
                      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Icon(
                            item.category == 'finance' ? Icons.payment : Icons.event,
                            color: item.isRead 
                                ? (isDark ? AppColors.textSecondaryDark : AppColors.textSecondary)
                                : AppColors.primary,
                            size: 20,
                          ),
                          const SizedBox(width: 12),
                          Expanded(
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Row(
                                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                  children: [
                                    Expanded(
                                      child: Text(
                                        item.title,
                                        style: AppTypography.actionText,
                                        maxLines: 1,
                                        overflow: TextOverflow.ellipsis,
                                      ),
                                    ),
                                    Text(
                                      _formatDate(item.date),
                                      style: AppTypography.subtitleSmall,
                                    ),
                                  ],
                                ),
                                const SizedBox(height: 4),
                                Text(
                                  item.body,
                                  style: AppTypography.bodyTextSmall,
                                  maxLines: 2,
                                  overflow: TextOverflow.ellipsis,
                                ),
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                );
              },
            );
          }

          return const SizedBox.shrink();
        },
      ),
    );
  }

  String _formatDate(DateTime date) {
    // Mock simple (dans un vrai cas, utiliser 'intl' ou 'timeago')
    final diff = DateTime.now().difference(date);
    if (diff.inHours < 24) return 'il y a ${diff.inHours}h';
    return '${date.day}/${date.month}';
  }
}