/// UnionFlow Stat Card - Card de statistiques
/// 
/// Card affichant une statistique avec icône, titre, valeur et sous-titre optionnel
/// Utilisé dans le dashboard pour afficher les métriques clés
library uf_stat_card;

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

/// Card de statistiques UnionFlow
/// 
/// Usage:
/// ```dart
/// UFStatCard(
///   title: 'Membres',
///   value: '142',
///   icon: Icons.people,
///   iconColor: ColorTokens.primary,
///   subtitle: '+5 ce mois',
///   onTap: () => navigateToMembers(),
/// )
/// ```
class UFStatCard extends StatelessWidget {
  /// Titre de la statistique (ex: "Membres")
  final String title;
  
  /// Valeur de la statistique (ex: "142")
  final String value;
  
  /// Icône représentant la statistique
  final IconData icon;
  
  /// Couleur de l'icône (par défaut: primary)
  final Color? iconColor;
  
  /// Sous-titre optionnel (ex: "+5 ce mois")
  final String? subtitle;
  
  /// Callback appelé lors du clic sur la card
  final VoidCallback? onTap;
  
  /// Couleur de fond de l'icône (par défaut: iconColor avec opacité)
  final Color? iconBackgroundColor;

  const UFStatCard({
    super.key,
    required this.title,
    required this.value,
    required this.icon,
    this.iconColor,
    this.subtitle,
    this.onTap,
    this.iconBackgroundColor,
  });

  @override
  Widget build(BuildContext context) {
    final effectiveIconColor = iconColor ?? ColorTokens.primary;
    final effectiveIconBgColor = iconBackgroundColor ?? 
        effectiveIconColor.withOpacity(0.1);

    return Card(
      elevation: SpacingTokens.elevationSm,
      shadowColor: ColorTokens.shadow,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(SpacingTokens.radiusLg),
      ),
      child: InkWell(
        onTap: onTap,
        borderRadius: BorderRadius.circular(SpacingTokens.radiusLg),
        child: Padding(
          padding: const EdgeInsets.all(SpacingTokens.cardPadding),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: [
              // Header avec icône et flèche
              Row(
                children: [
                  // Icône avec background coloré
                  Container(
                    padding: const EdgeInsets.all(SpacingTokens.md),
                    decoration: BoxDecoration(
                      color: effectiveIconBgColor,
                      borderRadius: BorderRadius.circular(SpacingTokens.radiusMd),
                    ),
                    child: Icon(
                      icon,
                      color: effectiveIconColor,
                      size: 24,
                    ),
                  ),
                  const Spacer(),
                  // Flèche si cliquable
                  if (onTap != null)
                    const Icon(
                      Icons.arrow_forward_ios,
                      size: 16,
                      color: ColorTokens.onSurfaceVariant,
                    ),
                ],
              ),
              
              const SizedBox(height: SpacingTokens.lg),
              
              // Titre
              Text(
                title,
                style: TypographyTokens.labelLarge.copyWith(
                  color: ColorTokens.onSurfaceVariant,
                ),
              ),
              
              const SizedBox(height: SpacingTokens.sm),
              
              // Valeur
              Text(
                value,
                style: TypographyTokens.cardValue.copyWith(
                  color: ColorTokens.onSurface,
                ),
              ),
              
              // Sous-titre optionnel
              if (subtitle != null) ...[
                const SizedBox(height: SpacingTokens.sm),
                Text(
                  subtitle!,
                  style: TypographyTokens.bodySmall.copyWith(
                    color: ColorTokens.onSurfaceVariant,
                  ),
                ),
              ],
            ],
          ),
        ),
      ),
    );
  }
}

