import 'package:flutter/material.dart';

/// Dashboard simple pour Membre Actif
class ActiveMemberDashboard extends StatelessWidget {
  const ActiveMemberDashboard({super.key});

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // En-tête de bienvenue
            Container(
              width: double.infinity,
              padding: const EdgeInsets.all(20),
              decoration: BoxDecoration(
                gradient: const LinearGradient(
                  colors: [Color(0xFF00B894), Color(0xFF00CEC9)],
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                ),
                borderRadius: BorderRadius.circular(16),
              ),
              child: const Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    'Bonjour !',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 24,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  SizedBox(height: 8),
                  Text(
                    'Bienvenue sur votre espace membre',
                    style: TextStyle(
                      color: Colors.white70,
                      fontSize: 16,
                    ),
                  ),
                ],
              ),
            ),
            
            const SizedBox(height: 24),
            
            // Statistiques rapides
            const Text(
              'Mes Statistiques',
              style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
            ),
            const SizedBox(height: 16),
            
            GridView.count(
              shrinkWrap: true,
              physics: const NeverScrollableScrollPhysics(),
              crossAxisCount: 2,
              childAspectRatio: 1.2,
              crossAxisSpacing: 16,
              mainAxisSpacing: 16,
              children: [
                _buildStatCard(
                  icon: Icons.event_available,
                  value: '12',
                  title: 'Événements',
                  color: const Color(0xFF00B894),
                ),
                _buildStatCard(
                  icon: Icons.volunteer_activism,
                  value: '3',
                  title: 'Solidarité',
                  color: const Color(0xFF00CEC9),
                ),
                _buildStatCard(
                  icon: Icons.payment,
                  value: 'À jour',
                  title: 'Cotisations',
                  color: const Color(0xFF0984E3),
                ),
                _buildStatCard(
                  icon: Icons.star,
                  value: '4.8',
                  title: 'Engagement',
                  color: const Color(0xFFE17055),
                ),
              ],
            ),
            
            const SizedBox(height: 24),
            
            // Actions rapides
            const Text(
              'Actions Rapides',
              style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
            ),
            const SizedBox(height: 16),
            
            GridView.count(
              shrinkWrap: true,
              physics: const NeverScrollableScrollPhysics(),
              crossAxisCount: 2,
              childAspectRatio: 1.5,
              crossAxisSpacing: 16,
              mainAxisSpacing: 16,
              children: [
                _buildActionCard(
                  icon: Icons.event,
                  title: 'Créer Événement',
                  color: const Color(0xFF00B894),
                  onTap: () {},
                ),
                _buildActionCard(
                  icon: Icons.volunteer_activism,
                  title: 'Demande Aide',
                  color: const Color(0xFF00CEC9),
                  onTap: () {},
                ),
                _buildActionCard(
                  icon: Icons.account_circle,
                  title: 'Mon Profil',
                  color: const Color(0xFF0984E3),
                  onTap: () {},
                ),
                _buildActionCard(
                  icon: Icons.message,
                  title: 'Contacter',
                  color: const Color(0xFFE17055),
                  onTap: () {},
                ),
              ],
            ),
            
            const SizedBox(height: 24),
            
            // Activités récentes
            const Text(
              'Activités Récentes',
              style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
            ),
            const SizedBox(height: 16),
            
            Card(
              child: Column(
                children: [
                  _buildActivityItem(
                    icon: Icons.check_circle,
                    title: 'Participation confirmée',
                    subtitle: 'Assemblée Générale - Il y a 2h',
                    color: const Color(0xFF00B894),
                  ),
                  const Divider(height: 1),
                  _buildActivityItem(
                    icon: Icons.payment,
                    title: 'Cotisation payée',
                    subtitle: 'Décembre 2024 - Il y a 1j',
                    color: const Color(0xFF0984E3),
                  ),
                  const Divider(height: 1),
                  _buildActivityItem(
                    icon: Icons.event,
                    title: 'Événement créé',
                    subtitle: 'Sortie ski de fond - Il y a 3j',
                    color: const Color(0xFF00CEC9),
                  ),
                ],
              ),
            ),
          ],
        ),
      );
  }

  Widget _buildStatCard({
    required IconData icon,
    required String value,
    required String title,
    required Color color,
  }) {
    return Card(
      elevation: 2,
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(icon, color: color, size: 32),
            const SizedBox(height: 8),
            Text(
              value,
              style: const TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.bold,
              ),
            ),
            const SizedBox(height: 4),
            Text(
              title,
              style: TextStyle(
                fontSize: 12,
                color: Colors.grey[600],
              ),
              textAlign: TextAlign.center,
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildActionCard({
    required IconData icon,
    required String title,
    required Color color,
    required VoidCallback onTap,
  }) {
    return Card(
      elevation: 2,
      child: InkWell(
        onTap: onTap,
        borderRadius: BorderRadius.circular(8),
        child: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(icon, color: color, size: 28),
              const SizedBox(height: 8),
              Text(
                title,
                style: const TextStyle(
                  fontSize: 14,
                  fontWeight: FontWeight.w500,
                ),
                textAlign: TextAlign.center,
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildActivityItem({
    required IconData icon,
    required String title,
    required String subtitle,
    required Color color,
  }) {
    return ListTile(
      leading: CircleAvatar(
        backgroundColor: color.withOpacity(0.1),
        child: Icon(icon, color: color, size: 20),
      ),
      title: Text(
        title,
        style: const TextStyle(fontWeight: FontWeight.w500),
      ),
      subtitle: Text(subtitle),
      trailing: const Icon(Icons.arrow_forward_ios, size: 16),
    );
  }
}
