import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import '../../../../../shared/design_system/unionflow_design_v2.dart';
import '../../../../authentication/presentation/bloc/auth_bloc.dart';
import '../../widgets/dashboard_drawer.dart';

/// Dashboard Visiteur - Design UnionFlow Version Publique
class VisitorDashboard extends StatelessWidget {
  const VisitorDashboard({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: SingleChildScrollView(
          padding: const EdgeInsets.all(24),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // Message de bienvenue
              AnimatedFadeIn(
                delay: const Duration(milliseconds: 100),
                child: _buildWelcomeCard(),
              ),
              const SizedBox(height: 24),

              // Fonctionnalités UnionFlow
              AnimatedSlideIn(
                delay: const Duration(milliseconds: 200),
                child: const Text(
                  'Découvrez UnionFlow',
                  style: TextStyle(
                    fontSize: 18,
                    fontWeight: FontWeight.w700,
                    color: UnionFlowColors.textPrimary,
                  ),
                ),
              ),
              const SizedBox(height: 16),

              AnimatedFadeIn(
                delay: const Duration(milliseconds: 300),
                child: Row(
                  children: [
                    Expanded(
                      child: UnionStatWidget(
                        label: 'Organisations',
                        value: '500+',
                        icon: Icons.business_outlined,
                        color: UnionFlowColors.unionGreen,
                      ),
                    ),
                    const SizedBox(width: 12),
                    Expanded(
                      child: UnionStatWidget(
                        label: 'Utilisateurs',
                        value: '10K+',
                        icon: Icons.people_outlined,
                        color: UnionFlowColors.gold,
                      ),
                    ),
                  ],
                ),
              ),
              const SizedBox(height: 12),

              AnimatedFadeIn(
                delay: const Duration(milliseconds: 400),
                child: Row(
                  children: [
                    Expanded(
                      child: UnionStatWidget(
                        label: 'Transactions',
                        value: '1M+',
                        icon: Icons.payment_outlined,
                        color: UnionFlowColors.indigo,
                      ),
                    ),
                    const SizedBox(width: 12),
                    Expanded(
                      child: UnionStatWidget(
                        label: 'Confiance',
                        value: '99%',
                        icon: Icons.verified_outlined,
                        color: UnionFlowColors.success,
                      ),
                    ),
                  ],
                ),
              ),
              const SizedBox(height: 24),

              // Avantages
              AnimatedSlideIn(
                delay: const Duration(milliseconds: 500),
                child: const Text(
                  'Nos Avantages',
                  style: TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.w700,
                    color: UnionFlowColors.textPrimary,
                  ),
                ),
              ),
              const SizedBox(height: 16),

              AnimatedFadeIn(
                delay: const Duration(milliseconds: 600),
                child: _buildFeature(
                  'Gestion Simplifiée',
                  'Gérez vos cotisations, épargnes et crédits en un seul endroit',
                  Icons.dashboard_customize,
                  UnionFlowColors.unionGreen,
                ),
              ),
              const SizedBox(height: 12),

              AnimatedFadeIn(
                delay: const Duration(milliseconds: 700),
                child: _buildFeature(
                  'Sécurité Optimale',
                  'Vos données sont protégées avec un chiffrement de niveau bancaire',
                  Icons.security,
                  UnionFlowColors.indigo,
                ),
              ),
              const SizedBox(height: 12),

              AnimatedFadeIn(
                delay: const Duration(milliseconds: 800),
                child: _buildFeature(
                  'Solidarité Africaine',
                  'Entraide, tontines, mutuelles et coopératives à votre portée',
                  Icons.favorite_outline,
                  UnionFlowColors.terracotta,
                ),
              ),
              const SizedBox(height: 12),

              AnimatedFadeIn(
                delay: const Duration(milliseconds: 900),
                child: _buildFeature(
                  'Rapports Détaillés',
                  'Suivi en temps réel avec exports PDF, Excel et CSV',
                  Icons.analytics_outlined,
                  UnionFlowColors.gold,
                ),
              ),
              const SizedBox(height: 32),

              // Call to Action
              AnimatedSlideIn(
                delay: const Duration(milliseconds: 1000),
                child: Container(
                  padding: const EdgeInsets.all(24),
                  decoration: BoxDecoration(
                    gradient: UnionFlowColors.primaryGradient,
                    borderRadius: BorderRadius.circular(20),
                    boxShadow: UnionFlowColors.greenGlowShadow,
                  ),
                  child: Column(
                    children: [
                      const Icon(
                        Icons.rocket_launch,
                        size: 48,
                        color: Colors.white,
                      ),
                      const SizedBox(height: 16),
                      const Text(
                        'Prêt à Commencer ?',
                        style: TextStyle(
                          fontSize: 20,
                          fontWeight: FontWeight.w800,
                          color: Colors.white,
                        ),
                        textAlign: TextAlign.center,
                      ),
                      const SizedBox(height: 8),
                      Text(
                        'Rejoignez des milliers d\'organisations qui nous font confiance',
                        style: TextStyle(
                          fontSize: 13,
                          color: Colors.white.withOpacity(0.9),
                        ),
                        textAlign: TextAlign.center,
                      ),
                      const SizedBox(height: 20),
                      SizedBox(
                        width: double.infinity,
                        child: ElevatedButton(
                          onPressed: () {
                            Navigator.of(context).pushNamed('/login');
                          },
                          style: ElevatedButton.styleFrom(
                            backgroundColor: Colors.white,
                            foregroundColor: UnionFlowColors.unionGreen,
                            padding: const EdgeInsets.symmetric(vertical: 16),
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(12),
                            ),
                            elevation: 0,
                          ),
                          child: const Text(
                            'Créer un Compte',
                            style: TextStyle(
                              fontSize: 15,
                              fontWeight: FontWeight.w800,
                            ),
                          ),
                        ),
                      ),
                      const SizedBox(height: 12),
                      TextButton(
                        onPressed: () {
                          Navigator.of(context).pushNamed('/login');
                        },
                        child: Text(
                          'Déjà membre ? Se connecter',
                          style: TextStyle(
                            fontSize: 13,
                            fontWeight: FontWeight.w600,
                            color: Colors.white.withOpacity(0.9),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  PreferredSizeWidget _buildAppBar() {
    return AppBar(
      backgroundColor: UnionFlowColors.surface,
      elevation: 0,
      title: Row(
        children: [
          Hero(
            tag: 'unionflow_logo',
            child: 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(
                'Découverte',
                style: TextStyle(
                  fontSize: 11,
                  fontWeight: FontWeight.w400,
                  color: UnionFlowColors.textSecondary,
                ),
              ),
            ],
          ),
        ],
      ),
      iconTheme: const IconThemeData(color: UnionFlowColors.textPrimary),
    );
  }

  Widget _buildWelcomeCard() {
    return Container(
      padding: const EdgeInsets.all(24),
      decoration: BoxDecoration(
        gradient: UnionFlowColors.subtleGradient,
        borderRadius: BorderRadius.circular(20),
        border: const Border(
          top: BorderSide(color: UnionFlowColors.unionGreen, width: 3),
        ),
        boxShadow: UnionFlowColors.mediumShadow,
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              Container(
                padding: const EdgeInsets.all(12),
                decoration: BoxDecoration(
                  gradient: UnionFlowColors.primaryGradient,
                  borderRadius: BorderRadius.circular(12),
                ),
                child: const Icon(
                  Icons.waving_hand,
                  color: Colors.white,
                  size: 28,
                ),
              ),
              const SizedBox(width: 16),
              const Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      'Bienvenue sur UnionFlow',
                      style: TextStyle(
                        fontSize: 18,
                        fontWeight: FontWeight.w800,
                        color: UnionFlowColors.textPrimary,
                      ),
                    ),
                    SizedBox(height: 4),
                    Text(
                      'Votre plateforme de gestion mutualiste et associative',
                      style: TextStyle(
                        fontSize: 13,
                        color: UnionFlowColors.textSecondary,
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
          const SizedBox(height: 16),
          Text(
            'Gérez vos mutuelles, tontines, coopératives et associations en toute simplicité. UnionFlow est la solution complète pour la solidarité africaine.',
            style: TextStyle(
              fontSize: 14,
              height: 1.5,
              color: UnionFlowColors.textPrimary.withOpacity(0.8),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildFeature(String title, String description, IconData icon, Color color) {
    return Container(
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: UnionFlowColors.surface,
        borderRadius: BorderRadius.circular(16),
        border: Border(
          left: BorderSide(color: color, width: 4),
        ),
        boxShadow: UnionFlowColors.softShadow,
      ),
      child: Row(
        children: [
          Container(
            padding: const EdgeInsets.all(12),
            decoration: BoxDecoration(
              color: color.withOpacity(0.1),
              borderRadius: BorderRadius.circular(12),
            ),
            child: Icon(icon, color: color, size: 24),
          ),
          const SizedBox(width: 16),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  title,
                  style: const TextStyle(
                    fontSize: 14,
                    fontWeight: FontWeight.w700,
                    color: UnionFlowColors.textPrimary,
                  ),
                ),
                const SizedBox(height: 4),
                Text(
                  description,
                  style: const TextStyle(
                    fontSize: 12,
                    color: UnionFlowColors.textSecondary,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
