import 'package:flutter/material.dart';
import '../../../../../shared/design_system/unionflow_design_system.dart';

/// Widget réutilisable pour les en-têtes de section
///
/// Composant standardisé pour tous les titres de section dans les dashboards
/// avec support pour actions, sous-titres et styles personnalisés.
///
/// REFACTORISÉ pour utiliser le Design System UnionFlow.
class SectionHeader extends StatelessWidget {
  /// Titre principal de la section
  final String title;
  
  /// Sous-titre optionnel
  final String? subtitle;
  
  /// Widget d'action à droite (bouton, icône, etc.)
  final Widget? action;
  
  /// Icône optionnelle à gauche du titre
  final IconData? icon;
  
  /// Couleur du titre et de l'icône
  final Color? color;
  
  /// Taille du titre
  final double? fontSize;
  
  /// Style de l'en-tête
  final SectionHeaderStyle style;
  
  /// Espacement en bas de l'en-tête
  final double bottomSpacing;

  const SectionHeader({
    super.key,
    required this.title,
    this.subtitle,
    this.action,
    this.icon,
    this.color,
    this.fontSize,
    this.style = SectionHeaderStyle.normal,
    this.bottomSpacing = 12,
  });

  /// Constructeur pour un en-tête principal
  const SectionHeader.primary({
    super.key,
    required this.title,
    this.subtitle,
    this.action,
    this.icon,
  }) : color = ColorTokens.primary,
       fontSize = 20,
       style = SectionHeaderStyle.primary,
       bottomSpacing = 16;

  /// Constructeur pour un en-tête de section
  const SectionHeader.section({
    super.key,
    required this.title,
    this.subtitle,
    this.action,
    this.icon,
  }) : color = ColorTokens.primary,
       fontSize = 16,
       style = SectionHeaderStyle.normal,
       bottomSpacing = 12;

  /// Constructeur pour un en-tête de sous-section
  const SectionHeader.subsection({
    super.key,
    required this.title,
    this.subtitle,
    this.action,
    this.icon,
  }) : color = const Color(0xFF374151),
       fontSize = 14,
       style = SectionHeaderStyle.minimal,
       bottomSpacing = 8;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.only(bottom: bottomSpacing),
      child: _buildContent(),
    );
  }

  Widget _buildContent() {
    switch (style) {
      case SectionHeaderStyle.primary:
        return _buildPrimaryHeader();
      case SectionHeaderStyle.normal:
        return _buildNormalHeader();
      case SectionHeaderStyle.minimal:
        return _buildMinimalHeader();
      case SectionHeaderStyle.card:
        return _buildCardHeader();
    }
  }

  /// En-tête principal avec fond coloré
  Widget _buildPrimaryHeader() {
    final effectiveColor = color ?? ColorTokens.primary;

    return Container(
      padding: const EdgeInsets.all(SpacingTokens.lg),
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [
            effectiveColor,
            effectiveColor.withOpacity(0.8),
          ],
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
        ),
        borderRadius: BorderRadius.circular(SpacingTokens.radiusLg),
        boxShadow: ShadowTokens.primary,
      ),
      child: Row(
        children: [
          if (icon != null) ...[
            Container(
              padding: const EdgeInsets.all(8),
              decoration: BoxDecoration(
                color: Colors.white.withOpacity(0.2),
                borderRadius: BorderRadius.circular(8),
              ),
              child: Icon(
                icon,
                color: Colors.white,
                size: 20,
              ),
            ),
            const SizedBox(width: 12),
          ],
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  title,
                  style: TextStyle(
                    fontSize: fontSize ?? 20,
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  ),
                ),
                if (subtitle != null) ...[
                  const SizedBox(height: 4),
                  Text(
                    subtitle!,
                    style: TextStyle(
                      fontSize: 14,
                      color: Colors.white.withOpacity(0.8),
                    ),
                  ),
                ],
              ],
            ),
          ),
          if (action != null) action!,
        ],
      ),
    );
  }

  /// En-tête normal avec icône et action
  Widget _buildNormalHeader() {
    return Row(
      children: [
        if (icon != null) ...[
          Icon(
            icon,
            color: color ?? ColorTokens.primary,
            size: 20,
          ),
          const SizedBox(width: SpacingTokens.md),
        ],
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                title,
                style: TextStyle(
                  fontSize: fontSize ?? 16,
                  fontWeight: FontWeight.bold,
                  color: color ?? ColorTokens.primary,
                ),
              ),
              if (subtitle != null) ...[
                const SizedBox(height: 2),
                Text(
                  subtitle!,
                  style: TextStyle(
                    fontSize: 12,
                    color: Colors.grey[600],
                  ),
                ),
              ],
            ],
          ),
        ),
        if (action != null) action!,
      ],
    );
  }

  /// En-tête minimal simple
  Widget _buildMinimalHeader() {
    return Row(
      children: [
        if (icon != null) ...[
          Icon(
            icon,
            color: color ?? const Color(0xFF374151),
            size: 16,
          ),
          const SizedBox(width: 6),
        ],
        Expanded(
          child: Text(
            title,
            style: TextStyle(
              fontSize: fontSize ?? 14,
              fontWeight: FontWeight.w600,
              color: color ?? const Color(0xFF374151),
            ),
          ),
        ),
        if (action != null) action!,
      ],
    );
  }

  /// En-tête avec fond de carte
  Widget _buildCardHeader() {
    return Container(
      padding: const EdgeInsets.all(12),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.05),
            blurRadius: 4,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      child: Row(
        children: [
          if (icon != null) ...[
            Icon(
              icon,
              color: color ?? ColorTokens.primary,
              size: 20,
            ),
            const SizedBox(width: SpacingTokens.md),
          ],
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  title,
                  style: TextStyle(
                    fontSize: fontSize ?? 16,
                    fontWeight: FontWeight.bold,
                    color: color ?? ColorTokens.primary,
                  ),
                ),
                if (subtitle != null) ...[
                  const SizedBox(height: 2),
                  Text(
                    subtitle!,
                    style: TextStyle(
                      fontSize: 12,
                      color: Colors.grey[600],
                    ),
                  ),
                ],
              ],
            ),
          ),
          if (action != null) action!,
        ],
      ),
    );
  }
}

/// Énumération des styles d'en-tête
enum SectionHeaderStyle {
  primary,
  normal,
  minimal,
  card,
}