import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter/material.dart';
import '../../../../../shared/design_system/unionflow_design_v2.dart';
import '../../bloc/dashboard_bloc.dart';
import '../../../../authentication/presentation/bloc/auth_bloc.dart';
import '../../../../contributions/presentation/pages/contributions_page_wrapper.dart';
import '../../../../epargne/presentation/pages/epargne_page.dart';
import '../../../../profile/presentation/pages/profile_page_wrapper.dart';
import '../../../../events/presentation/pages/events_page_wrapper.dart';
import '../../../../solidarity/presentation/pages/demandes_aide_page_wrapper.dart';
import '../../widgets/dashboard_drawer.dart';

/// Dashboard Membre Actif - Design UnionFlow Enrichi
class ActiveMemberDashboard extends StatelessWidget {
  const ActiveMemberDashboard({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: UnionFlowColors.background,
      appBar: _buildAppBar(),
      drawer: DashboardDrawer(
        onNavigate: (route) {
          Navigator.of(context).pushNamed(route);
        },
        onLogout: () {
          context.read<AuthBloc>().add(const AuthLogoutRequested());
        },
      ),
      body: AfricanPatternBackground(
        child: BlocBuilder<AuthBloc, AuthState>(
          builder: (context, authState) {
            final user = (authState is AuthAuthenticated) ? authState.user : null;

            return BlocBuilder<DashboardBloc, DashboardState>(
              builder: (context, dashboardState) {
                if (dashboardState is DashboardLoading) {
                  return const Center(
                    child: CircularProgressIndicator(color: UnionFlowColors.unionGreen),
                  );
                }

                final dashboardData = (dashboardState is DashboardLoaded)
                    ? dashboardState.dashboardData
                    : null;
                final stats = dashboardData?.stats;

                return SingleChildScrollView(
                  padding: const EdgeInsets.all(24),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      // En-tête
                      AnimatedFadeIn(
                        delay: const Duration(milliseconds: 100),
                        child: _buildUserHeader(user),
                      ),
                      const SizedBox(height: 24),

                      // Balance principale ou Vue Unifiée (Compte Adhérent)
                      AnimatedSlideIn(
                        delay: const Duration(milliseconds: 200),
                        child: dashboardData?.monCompte != null
                            ? UnionUnifiedAccountCard(
                                numeroMembre: dashboardData!.monCompte!.numeroMembre,
                                organisationNom: dashboardData.monCompte!.organisationNom ?? 'UnionFlow',
                                soldeTotal: _formatAmount(dashboardData.monCompte!.soldeTotalDisponible),
                                capaciteEmprunt: _formatAmount(dashboardData.monCompte!.capaciteEmprunt),
                                epargneBloquee: _formatAmount(dashboardData.monCompte!.soldeBloque),
                                engagementRate: dashboardData.monCompte!.engagementRate,
                              )
                            : UnionBalanceCard(
                                label: 'Mon Solde Total',
                                amount: _formatAmount(stats?.totalContributionAmount ?? 0),
                                trend: stats != null && stats.monthlyGrowth != 0
                                    ? '${stats.monthlyGrowth > 0 ? '+' : ''}${stats.monthlyGrowth.toStringAsFixed(1)}% ce mois'
                                    : 'Aucune variation',
                                isTrendPositive: (stats?.monthlyGrowth ?? 0) >= 0,
                              ),
                      ),

                      const SizedBox(height: 24),

                      // Bloc KPI unifié (4 stats regroupées)
                      AnimatedFadeIn(
                        delay: const Duration(milliseconds: 300),
                        child: Container(
                          padding: const EdgeInsets.all(16),
                          decoration: BoxDecoration(
                            color: UnionFlowColors.surface,
                            borderRadius: BorderRadius.circular(16),
                            border: Border.all(color: UnionFlowColors.border, width: 1),
                            boxShadow: UnionFlowColors.softShadow,
                          ),
                          child: Column(
                            children: [
                              Row(
                                children: [
                                  Expanded(
                                    child: UnionStatWidget(
                                      label: 'Cotisations',
                                      value: '${stats?.totalContributions ?? 0}',
                                      icon: Icons.check_circle,
                                      color: (stats?.totalContributions ?? 0) > 0
                                          ? UnionFlowColors.success
                                          : UnionFlowColors.textTertiary,
                                      trend: stats != null && stats.totalContributions > 0 && stats.engagementRate > 0
                                          ? (stats.engagementRate >= 1.0
                                              ? 'Tout payé'
                                              : '${(stats.engagementRate * 100).toStringAsFixed(0)}% payé')
                                          : null,
                                      isTrendUp: (stats?.engagementRate ?? 0) >= 1.0,
                                    ),
                                  ),
                                  const SizedBox(width: 12),
                                  Expanded(
                                    child: UnionStatWidget(
                                      label: 'Engagement',
                                      value: stats != null && stats.engagementRate > 0
                                          ? '${(stats.engagementRate * 100).toStringAsFixed(0)}%'
                                          : stats != null && stats.totalContributions > 0
                                              ? '—'
                                              : '0%',
                                      icon: Icons.trending_up,
                                      color: UnionFlowColors.gold,
                                      trend: stats != null && stats.engagementRate > 0.9
                                          ? 'Excellent'
                                          : stats != null && stats.engagementRate > 0.5
                                              ? 'Bon'
                                              : null,
                                      isTrendUp: (stats?.engagementRate ?? 0) > 0.7,
                                    ),
                                  ),
                                ],
                              ),
                              const SizedBox(height: 12),
                              Row(
                                children: [
                                  Expanded(
                                    child: UnionStatWidget(
                                      label: 'Contribution Totale',
                                      value: _formatAmount(stats?.contributionsAmountOnly ?? stats?.totalContributionAmount ?? 0),
                                      icon: Icons.savings,
                                      color: UnionFlowColors.amber,
                                    ),
                                  ),
                                  const SizedBox(width: 12),
                                  Expanded(
                                    child: UnionStatWidget(
                                      label: 'Événements',
                                      value: '${stats?.upcomingEvents ?? 0}',
                                      icon: Icons.event_available,
                                      color: UnionFlowColors.terracotta,
                                    ),
                                  ),
                                ],
                              ),
                            ],
                          ),
                        ),
                      ),
                      const SizedBox(height: 24),

                      // Activité récente (données backend)
                      if (dashboardData != null && dashboardData.hasRecentActivity) ...[
                        const AnimatedFadeIn(
                          delay: Duration(milliseconds: 500),
                          child: Text(
                            'Activité Récente',
                            style: TextStyle(
                              fontSize: 16,
                              fontWeight: FontWeight.w700,
                              color: UnionFlowColors.textPrimary,
                            ),
                          ),
                        ),
                        const SizedBox(height: 16),
                        AnimatedSlideIn(
                          delay: const Duration(milliseconds: 600),
                          child: Column(
                            children: dashboardData.recentActivities.take(3).map((activity) =>
                              Container(
                                margin: const EdgeInsets.only(bottom: 12),
                                padding: const EdgeInsets.all(12),
                                decoration: BoxDecoration(
                                  color: UnionFlowColors.surface,
                                  borderRadius: BorderRadius.circular(12),
                                  border: Border.all(color: UnionFlowColors.border, width: 1),
                                ),
                                child: Row(
                                  children: [
                                    CircleAvatar(
                                      radius: 20,
                                      backgroundColor: activity.type == 'contribution'
                                          ? UnionFlowColors.success.withOpacity(0.2)
                                          : activity.type == 'event'
                                              ? UnionFlowColors.gold.withOpacity(0.2)
                                              : UnionFlowColors.indigo.withOpacity(0.2),
                                      child: Icon(
                                        activity.type == 'contribution'
                                            ? Icons.payment
                                            : activity.type == 'event'
                                                ? Icons.event
                                                : Icons.person_add,
                                        size: 18,
                                        color: activity.type == 'contribution'
                                            ? UnionFlowColors.success
                                            : activity.type == 'event'
                                                ? UnionFlowColors.gold
                                                : UnionFlowColors.indigo,
                                      ),
                                    ),
                                    const SizedBox(width: 12),
                                    Expanded(
                                      child: Column(
                                        crossAxisAlignment: CrossAxisAlignment.start,
                                        children: [
                                          Text(
                                            activity.title,
                                            style: const TextStyle(
                                              fontSize: 13,
                                              fontWeight: FontWeight.w600,
                                              color: UnionFlowColors.textPrimary,
                                            ),
                                            maxLines: 1,
                                            overflow: TextOverflow.ellipsis,
                                          ),
                                          const SizedBox(height: 2),
                                          Text(
                                            activity.description,
                                            style: const TextStyle(
                                              fontSize: 11,
                                              color: UnionFlowColors.textSecondary,
                                            ),
                                            maxLines: 1,
                                            overflow: TextOverflow.ellipsis,
                                          ),
                                        ],
                                      ),
                                    ),
                                    Text(
                                      activity.timeAgo,
                                      style: const TextStyle(
                                        fontSize: 11,
                                        color: UnionFlowColors.textTertiary,
                                      ),
                                    ),
                                  ],
                                ),
                              )
                            ).toList(),
                          ),
                        ),
                        const SizedBox(height: 24),
                      ],

                      // Bloc Actions rapides unifié (6 boutons regroupés)
                      AnimatedSlideIn(
                        delay: const Duration(milliseconds: 700),
                        child: Container(
                          padding: const EdgeInsets.all(16),
                          decoration: BoxDecoration(
                            color: UnionFlowColors.surface,
                            borderRadius: BorderRadius.circular(16),
                            border: Border.all(color: UnionFlowColors.border, width: 1),
                            boxShadow: UnionFlowColors.softShadow,
                          ),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              const Text(
                                'Actions Rapides',
                                style: TextStyle(
                                  fontSize: 16,
                                  fontWeight: FontWeight.w700,
                                  color: UnionFlowColors.textPrimary,
                                ),
                              ),
                              const SizedBox(height: 16),
                              Row(
                                children: [
                                  Expanded(
                                    child: UnionActionButton(
                                      label: 'Cotiser',
                                      icon: Icons.payment,
                                      onTap: () {
                                        Navigator.of(context).push(
                                          MaterialPageRoute<void>(
                                            builder: (_) => const CotisationsPageWrapper(),
                                          ),
                                        );
                                      },
                                      backgroundColor: UnionFlowColors.unionGreen,
                                    ),
                                  ),
                                  const SizedBox(width: 12),
                                  Expanded(
                                    child: UnionActionButton(
                                      label: 'Épargner',
                                      icon: Icons.savings_outlined,
                                      onTap: () {
                                        Navigator.of(context).push(
                                          MaterialPageRoute<void>(
                                            builder: (_) => const EpargnePage(),
                                          ),
                                        );
                                      },
                                      backgroundColor: UnionFlowColors.gold,
                                    ),
                                  ),
                                  const SizedBox(width: 12),
                                  Expanded(
                                    child: UnionActionButton(
                                      label: 'Crédit',
                                      icon: Icons.account_balance_wallet,
                                      onTap: () {
                                        Navigator.of(context).push(
                                          MaterialPageRoute<void>(
                                            builder: (_) => const EpargnePage(),
                                          ),
                                        );
                                      },
                                      backgroundColor: UnionFlowColors.amber,
                                    ),
                                  ),
                                ],
                              ),
                              const SizedBox(height: 12),
                              Row(
                                children: [
                                  Expanded(
                                    child: UnionActionButton(
                                      label: 'Événements',
                                      icon: Icons.event,
                                      onTap: () {
                                        Navigator.of(context).push(
                                          MaterialPageRoute<void>(
                                            builder: (_) => const EventsPageWrapper(),
                                          ),
                                        );
                                      },
                                      backgroundColor: UnionFlowColors.terracotta,
                                    ),
                                  ),
                                  const SizedBox(width: 12),
                                  Expanded(
                                    child: UnionActionButton(
                                      label: 'Solidarité',
                                      icon: Icons.favorite_outline,
                                      onTap: () {
                                        Navigator.of(context).push(
                                          MaterialPageRoute<void>(
                                            builder: (_) => const DemandesAidePageWrapper(),
                                          ),
                                        );
                                      },
                                      backgroundColor: UnionFlowColors.error,
                                    ),
                                  ),
                                  const SizedBox(width: 12),
                                  Expanded(
                                    child: UnionActionButton(
                                      label: 'Profil',
                                      icon: Icons.person_outline,
                                      onTap: () {
                                        Navigator.of(context).push(
                                          MaterialPageRoute<void>(
                                            builder: (_) => const ProfilePageWrapper(),
                                          ),
                                        );
                                      },
                                      backgroundColor: UnionFlowColors.indigo,
                                    ),
                                  ),
                                ],
                              ),
                            ],
                          ),
                        ),
                      ),
                    ],
                  ),
                );
              },
            );
          },
        ),
      ),
    );
  }

  PreferredSizeWidget _buildAppBar() {
    return AppBar(
      backgroundColor: UnionFlowColors.surface,
      elevation: 0,
      title: Row(
        children: [
          Container(
            width: 32,
            height: 32,
            decoration: BoxDecoration(
              gradient: UnionFlowColors.primaryGradient,
              borderRadius: BorderRadius.circular(8),
            ),
            alignment: Alignment.center,
            child: const Text(
              'U',
              style: TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.w900,
                fontSize: 18,
              ),
            ),
          ),
          const SizedBox(width: 12),
          const Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                'UnionFlow',
                style: TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.w700,
                  color: UnionFlowColors.textPrimary,
                ),
              ),
              Text(
                'Membre Actif',
                style: TextStyle(
                  fontSize: 11,
                  fontWeight: FontWeight.w400,
                  color: UnionFlowColors.textSecondary,
                ),
              ),
            ],
          ),
        ],
      ),
      iconTheme: const IconThemeData(color: UnionFlowColors.textPrimary),
    );
  }

  Widget _buildUserHeader(dynamic user) {
    return Container(
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        gradient: UnionFlowColors.warmGradient,
        borderRadius: BorderRadius.circular(16),
        border: const Border(
          top: BorderSide(color: UnionFlowColors.gold, width: 3),
        ),
        boxShadow: UnionFlowColors.goldGlowShadow,
      ),
      child: Row(
        children: [
          CircleAvatar(
            radius: 28,
            backgroundColor: Colors.white.withOpacity(0.3),
            child: Text(
              user?.initials ?? 'MA',
              style: const TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.w700,
                color: Colors.white,
              ),
            ),
          ),
          const SizedBox(width: 16),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  user?.fullName ?? 'Membre Actif',
                  style: const TextStyle(
                    fontSize: 15,
                    fontWeight: FontWeight.w700,
                    color: Colors.white,
                  ),
                ),
                const SizedBox(height: 4),
                Text(
                  'Depuis ${user?.createdAt.year ?? 2024} • Très Actif',
                  style: TextStyle(
                    fontSize: 12,
                    color: Colors.white.withOpacity(0.9),
                  ),
                ),
              ],
            ),
          ),
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(8),
            ),
            child: const Text(
              'ACTIF',
              style: TextStyle(
                fontSize: 10,
                fontWeight: FontWeight.w800,
                color: UnionFlowColors.gold,
                letterSpacing: 0.5,
              ),
            ),
          ),
        ],
      ),
    );
  }

  String _formatAmount(double amount) {
    if (amount >= 1000000) {
      return '${(amount / 1000000).toStringAsFixed(1)}M FCFA';
    } else if (amount >= 1000) {
      return '${(amount / 1000).toStringAsFixed(0)}K FCFA';
    }
    return '${amount.toStringAsFixed(0)} FCFA';
  }
}
