/// Dashboard Visiteur - Landing Experience Accueillante
/// Interface publique pour découvrir l'organisation
library visitor_dashboard;

import 'package:flutter/material.dart';
import '../../../../../shared/design_system/tokens/color_tokens.dart';
import '../../../../../shared/design_system/tokens/radius_tokens.dart';
import '../../../../../shared/design_system/tokens/spacing_tokens.dart';
import '../../../../../shared/design_system/tokens/typography_tokens.dart';

/// Dashboard Landing Experience pour Visiteur
class VisitorDashboard extends StatelessWidget {
  const VisitorDashboard({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: ColorTokens.surface,
      body: CustomScrollView(
        slivers: [
          // App Bar Visiteur
          SliverAppBar(
            expandedHeight: 200,
            floating: false,
            pinned: true,
            backgroundColor: const Color(0xFF6C5CE7), // Indigo accueillant
            flexibleSpace: FlexibleSpaceBar(
              title: const Text(
                'Découvrir UnionFlow',
                style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
              ),
              background: Container(
                decoration: const BoxDecoration(
                  gradient: LinearGradient(
                    colors: [Color(0xFF6C5CE7), Color(0xFF5A4FCF)],
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                  ),
                ),
                child: Stack(
                  children: [
                    // Motif d'accueil
                    Positioned.fill(
                      child: CustomPaint(
                        painter: _WelcomePatternPainter(),
                      ),
                    ),
                    const Center(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Icon(Icons.waving_hand, color: Colors.white, size: 60),
                          SizedBox(height: 8),
                          Text(
                            'Bienvenue !',
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 24,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
          
          SliverToBoxAdapter(
            child: Padding(
              padding: const EdgeInsets.all(SpacingTokens.md),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  // Message d'accueil
                  _buildWelcomeMessage(),
                  const SizedBox(height: SpacingTokens.xl),
                  
                  // À propos de l'organisation
                  _buildAboutOrganization(),
                  const SizedBox(height: SpacingTokens.xl),
                  
                  // Événements publics
                  _buildPublicEvents(),
                  const SizedBox(height: SpacingTokens.xl),
                  
                  // Comment rejoindre
                  _buildHowToJoin(),
                  const SizedBox(height: SpacingTokens.xl),
                  
                  // Contact
                  _buildContactInfo(),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildWelcomeMessage() {
    return Container(
      padding: const EdgeInsets.all(SpacingTokens.lg),
      decoration: BoxDecoration(
        gradient: const LinearGradient(
          colors: [Color(0xFF6C5CE7), Color(0xFF5A4FCF)],
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
        ),
        borderRadius: BorderRadius.circular(RadiusTokens.lg),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              const Icon(Icons.info_outline, color: Colors.white, size: 30),
              const SizedBox(width: SpacingTokens.sm),
              Expanded(
                child: Text(
                  'Découvrez notre communauté',
                  style: TypographyTokens.headlineMedium.copyWith(
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ],
          ),
          const SizedBox(height: SpacingTokens.md),
          Text(
            'Bienvenue sur UnionFlow ! Explorez notre organisation, découvrez nos événements publics et apprenez comment nous rejoindre.',
            style: TypographyTokens.bodyLarge.copyWith(
              color: Colors.white.withOpacity(0.9),
            ),
          ),
          const SizedBox(height: SpacingTokens.md),
          ElevatedButton(
            onPressed: () => _onJoinNow(),
            style: ElevatedButton.styleFrom(
              backgroundColor: Colors.white,
              foregroundColor: const Color(0xFF6C5CE7),
              padding: const EdgeInsets.symmetric(
                horizontal: SpacingTokens.lg,
                vertical: SpacingTokens.md,
              ),
            ),
            child: const Text(
              'Nous Rejoindre',
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildAboutOrganization() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          'À Propos de Nous',
          style: TypographyTokens.headlineMedium.copyWith(fontWeight: FontWeight.bold),
        ),
        const SizedBox(height: SpacingTokens.md),
        
        Container(
          padding: const EdgeInsets.all(SpacingTokens.lg),
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(RadiusTokens.md),
            boxShadow: [
              BoxShadow(
                color: Colors.black.withOpacity(0.05),
                blurRadius: 10,
                offset: const Offset(0, 2),
              ),
            ],
          ),
          child: Column(
            children: [
              Row(
                children: [
                  Container(
                    width: 60,
                    height: 60,
                    decoration: BoxDecoration(
                      color: const Color(0xFF6C5CE7).withOpacity(0.1),
                      borderRadius: BorderRadius.circular(30),
                    ),
                    child: const Icon(
                      Icons.business,
                      color: Color(0xFF6C5CE7),
                      size: 30,
                    ),
                  ),
                  const SizedBox(width: SpacingTokens.md),
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          'Association des Développeurs',
                          style: TypographyTokens.headlineSmall.copyWith(
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        Text(
                          'Communauté tech passionnée',
                          style: TypographyTokens.bodyMedium.copyWith(
                            color: ColorTokens.textSecondary,
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
              const SizedBox(height: SpacingTokens.md),
              const Text(
                'Nous sommes une association dynamique qui rassemble les passionnés de technologie. Notre mission est de favoriser l\'apprentissage, le partage de connaissances et l\'entraide dans le domaine du développement.',
                style: TypographyTokens.bodyMedium,
              ),
              const SizedBox(height: SpacingTokens.md),
              
              // Statistiques publiques
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  _buildPublicStat('156', 'Membres'),
                  _buildPublicStat('24', 'Événements/an'),
                  _buildPublicStat('5', 'Ans d\'existence'),
                ],
              ),
            ],
          ),
        ),
      ],
    );
  }

  Widget _buildPublicStat(String value, String label) {
    return Column(
      children: [
        Text(
          value,
          style: TypographyTokens.headlineMedium.copyWith(
            color: const Color(0xFF6C5CE7),
            fontWeight: FontWeight.bold,
          ),
        ),
        Text(
          label,
          style: TypographyTokens.bodySmall.copyWith(
            color: ColorTokens.textSecondary,
          ),
        ),
      ],
    );
  }

  Widget _buildPublicEvents() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          'Événements Publics',
          style: TypographyTokens.headlineMedium.copyWith(fontWeight: FontWeight.bold),
        ),
        const SizedBox(height: SpacingTokens.md),
        
        Container(
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(RadiusTokens.md),
            boxShadow: [
              BoxShadow(
                color: Colors.black.withOpacity(0.05),
                blurRadius: 10,
                offset: const Offset(0, 2),
              ),
            ],
          ),
          child: Column(
            children: [
              ListTile(
                leading: Container(
                  width: 50,
                  height: 50,
                  decoration: BoxDecoration(
                    color: const Color(0xFF00B894).withOpacity(0.1),
                    borderRadius: BorderRadius.circular(25),
                  ),
                  child: const Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text('15', style: TextStyle(fontWeight: FontWeight.bold)),
                      Text('DÉC', style: TextStyle(fontSize: 10)),
                    ],
                  ),
                ),
                title: const Text('Assemblée Générale Publique'),
                subtitle: const Text('Salle communale • 19h00 • Gratuit'),
                trailing: Container(
                  padding: const EdgeInsets.symmetric(
                    horizontal: SpacingTokens.sm,
                    vertical: SpacingTokens.xs,
                  ),
                  decoration: BoxDecoration(
                    color: const Color(0xFF00B894).withOpacity(0.1),
                    borderRadius: BorderRadius.circular(RadiusTokens.sm),
                  ),
                  child: const Text(
                    'OUVERT',
                    style: TextStyle(
                      color: Color(0xFF00B894),
                      fontSize: 10,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ),
              const Divider(height: 1),
              ListTile(
                leading: Container(
                  width: 50,
                  height: 50,
                  decoration: BoxDecoration(
                    color: const Color(0xFF6C5CE7).withOpacity(0.1),
                    borderRadius: BorderRadius.circular(25),
                  ),
                  child: const Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text('20', style: TextStyle(fontWeight: FontWeight.bold)),
                      Text('DÉC', style: TextStyle(fontSize: 10)),
                    ],
                  ),
                ),
                title: const Text('Conférence Tech Trends 2025'),
                subtitle: const Text('Amphithéâtre Université • 14h00 • Gratuit'),
                trailing: Container(
                  padding: const EdgeInsets.symmetric(
                    horizontal: SpacingTokens.sm,
                    vertical: SpacingTokens.xs,
                  ),
                  decoration: BoxDecoration(
                    color: const Color(0xFF6C5CE7).withOpacity(0.1),
                    borderRadius: BorderRadius.circular(RadiusTokens.sm),
                  ),
                  child: const Text(
                    'OUVERT',
                    style: TextStyle(
                      color: Color(0xFF6C5CE7),
                      fontSize: 10,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }

  Widget _buildHowToJoin() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          'Comment Nous Rejoindre',
          style: TypographyTokens.headlineMedium.copyWith(fontWeight: FontWeight.bold),
        ),
        const SizedBox(height: SpacingTokens.md),
        
        Container(
          padding: const EdgeInsets.all(SpacingTokens.lg),
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(RadiusTokens.md),
            boxShadow: [
              BoxShadow(
                color: Colors.black.withOpacity(0.05),
                blurRadius: 10,
                offset: const Offset(0, 2),
              ),
            ],
          ),
          child: Column(
            children: [
              _buildJoinStep('1', 'Créer un compte', 'Inscription gratuite en 2 minutes'),
              const SizedBox(height: SpacingTokens.md),
              _buildJoinStep('2', 'Compléter le profil', 'Partagez vos centres d\'intérêt'),
              const SizedBox(height: SpacingTokens.md),
              _buildJoinStep('3', 'Validation', 'Approbation par nos modérateurs'),
              const SizedBox(height: SpacingTokens.lg),
              
              SizedBox(
                width: double.infinity,
                child: ElevatedButton(
                  onPressed: () => _onStartRegistration(),
                  style: ElevatedButton.styleFrom(
                    backgroundColor: const Color(0xFF6C5CE7),
                    padding: const EdgeInsets.symmetric(vertical: SpacingTokens.md),
                  ),
                  child: const Text(
                    'Commencer l\'inscription',
                    style: TextStyle(
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }

  Widget _buildJoinStep(String number, String title, String description) {
    return Row(
      children: [
        Container(
          width: 30,
          height: 30,
          decoration: BoxDecoration(
            color: const Color(0xFF6C5CE7),
            borderRadius: BorderRadius.circular(15),
          ),
          child: Center(
            child: Text(
              number,
              style: const TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ),
        const SizedBox(width: SpacingTokens.md),
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                title,
                style: TypographyTokens.bodyMedium.copyWith(
                  fontWeight: FontWeight.w600,
                ),
              ),
              Text(
                description,
                style: TypographyTokens.bodySmall.copyWith(
                  color: ColorTokens.textSecondary,
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }

  Widget _buildContactInfo() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          'Nous Contacter',
          style: TypographyTokens.headlineMedium.copyWith(fontWeight: FontWeight.bold),
        ),
        const SizedBox(height: SpacingTokens.md),
        
        Container(
          padding: const EdgeInsets.all(SpacingTokens.lg),
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(RadiusTokens.md),
            boxShadow: [
              BoxShadow(
                color: Colors.black.withOpacity(0.05),
                blurRadius: 10,
                offset: const Offset(0, 2),
              ),
            ],
          ),
          child: const Column(
            children: [
              ListTile(
                leading: Icon(Icons.email, color: Color(0xFF6C5CE7)),
                title: Text('Email'),
                subtitle: Text('contact@association-dev.fr'),
                contentPadding: EdgeInsets.zero,
              ),
              ListTile(
                leading: Icon(Icons.phone, color: Color(0xFF6C5CE7)),
                title: Text('Téléphone'),
                subtitle: Text('+33 1 23 45 67 89'),
                contentPadding: EdgeInsets.zero,
              ),
              ListTile(
                leading: Icon(Icons.location_on, color: Color(0xFF6C5CE7)),
                title: Text('Adresse'),
                subtitle: Text('123 Rue de la Tech, 75001 Paris'),
                contentPadding: EdgeInsets.zero,
              ),
            ],
          ),
        ),
      ],
    );
  }

  // === CALLBACKS ===

  void _onJoinNow() {
    // Navigation vers l'inscription
  }

  void _onStartRegistration() {
    // Démarrer le processus d'inscription
  }
}

/// Painter pour le motif d'accueil
class _WelcomePatternPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.white.withOpacity(0.1)
      ..strokeWidth = 1
      ..style = PaintingStyle.stroke;

    // Dessiner des cercles concentriques
    for (int i = 1; i <= 5; i++) {
      canvas.drawCircle(
        Offset(size.width / 2, size.height / 2),
        i * size.width / 10,
        paint,
      );
    }
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}
