import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart' show kIsWeb;
import 'package:intl/intl.dart';
import 'package:geosector_app/core/constants/app_keys.dart';
import 'package:geosector_app/core/data/models/payment_link_result.dart';
import 'package:geosector_app/presentation/widgets/qr_code_payment_dialog.dart';

/// Un widget réutilisable pour afficher une liste de passages (affichage pur)
class PassagesListWidget extends StatelessWidget {
  /// Liste des passages à afficher (déjà filtrés)
  final List<Map<String, dynamic>> passages;

  /// Titre de la section (optionnel)
  final String? title;

  /// Si vrai, les boutons d'action (détails, modifier, etc.) seront affichés
  final bool showActions;

  /// Si vrai, affiche un bouton pour ajouter un nouveau passage
  final bool showAddButton;

  /// Callback appelé lorsqu'un passage est sélectionné
  final Function(Map<String, dynamic>)? onPassageSelected;

  /// Callback appelé lorsqu'un passage est modifié
  final Function(Map<String, dynamic>)? onPassageEdit;

  /// Callback appelé lorsqu'un reçu est demandé
  final Function(Map<String, dynamic>)? onReceiptView;

  /// Callback appelé lorsque les détails sont demandés
  final Function(Map<String, dynamic>)? onDetailsView;

  /// Callback appelé lorsqu'un passage est supprimé (optionnel)
  final Function(Map<String, dynamic>)? onPassageDelete;

  /// Callback appelé lorsque le bouton d'ajout est cliqué
  final VoidCallback? onAddPassage;

  /// Type de passage filtré (optionnel, pour affichage dans le titre)
  final String? filteredPassageType;

  const PassagesListWidget({
    super.key,
    required this.passages,
    this.title,
    this.showActions = true,
    this.showAddButton = false,
    this.onPassageSelected,
    this.onPassageEdit,
    this.onReceiptView,
    this.onDetailsView,
    this.onPassageDelete,
    this.onAddPassage,
    this.filteredPassageType,
  });

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final size = MediaQuery.of(context).size;
    final isDesktop = size.width > 900;

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // Titre (si fourni)
        if (title != null)
          Padding(
            padding: const EdgeInsets.all(10.0),
            child: Text(
              title!,
              style: theme.textTheme.headlineMedium?.copyWith(
                fontWeight: FontWeight.bold,
                color: theme.colorScheme.primary,
              ),
            ),
          ),

        // Liste des passages
        Expanded(
          child: Column(
              children: [
                // Header avec le nombre de passages
                Container(
                  width: double.infinity,
                  padding: const EdgeInsets.all(16.0),
                  decoration: BoxDecoration(
                    color: Color.alphaBlend(
                      theme.colorScheme.primary.withOpacity(0.1),
                      theme.colorScheme.surface,
                    ),
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Row(
                        children: [
                          Icon(
                            Icons.route,
                            size: 20,
                            color: theme.colorScheme.primary,
                          ),
                          const SizedBox(width: 8),
                          Text(
                            _buildPassageCountText(),
                            style: theme.textTheme.titleMedium?.copyWith(
                              fontWeight: FontWeight.bold,
                              color: theme.colorScheme.primary,
                            ),
                          ),
                        ],
                      ),
                      // Bouton d'ajout adaptatif
                      if (showAddButton && onAddPassage != null)
                        isDesktop
                          ? ElevatedButton.icon(
                              onPressed: onAddPassage,
                              icon: const Icon(Icons.add, size: 18),
                              label: const Text('Ajouter'),
                              style: ElevatedButton.styleFrom(
                                backgroundColor: theme.colorScheme.primary,
                                foregroundColor: theme.colorScheme.onPrimary,
                                padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
                              ),
                            )
                          : IconButton.filled(
                              onPressed: onAddPassage,
                              icon: const Icon(Icons.add, size: 20),
                              style: IconButton.styleFrom(
                                backgroundColor: theme.colorScheme.primary,
                                foregroundColor: theme.colorScheme.onPrimary,
                              ),
                              tooltip: 'Ajouter un passage',
                            ),
                    ],
                  ),
                ),

                // Liste des passages
                Expanded(
                  child: passages.isEmpty
                      ? _buildEmptyState(theme)
                      : _buildPassagesList(theme, isDesktop),
                ),
              ],
            ),
        ),
      ],
    );
  }

  /// Construire l'état vide
  Widget _buildEmptyState(ThemeData theme) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(
            Icons.inbox_outlined,
            size: 64,
            color: theme.colorScheme.outline,
          ),
          const SizedBox(height: 16),
          Text(
            'Aucun passage trouvé',
            style: theme.textTheme.titleMedium?.copyWith(
              color: theme.colorScheme.onSurfaceVariant,
            ),
          ),
          const SizedBox(height: 8),
          Text(
            'Modifiez vos filtres pour voir plus de résultats',
            style: theme.textTheme.bodyMedium?.copyWith(
              color: theme.colorScheme.onSurfaceVariant,
            ),
          ),
        ],
      ),
    );
  }

  /// Construire la liste des passages
  Widget _buildPassagesList(ThemeData theme, bool isDesktop) {
    return ListView.builder(
      padding: const EdgeInsets.all(8.0),
      itemCount: passages.length,
      itemBuilder: (context, index) {
        final passage = passages[index];
        return _buildPassageCard(context, passage, theme, isDesktop);
      },
    );
  }

  /// Construire une card de passage
  Widget _buildPassageCard(
    BuildContext context,
    Map<String, dynamic> passage,
    ThemeData theme,
    bool isDesktop,
  ) {
    final typeId = passage['type'] as int? ?? passage['fk_type'] as int? ?? 1;
    final typeInfo = AppKeys.typesPassages[typeId] ?? {
      'titre': 'Inconnu',
      'couleur2': 0xFF9E9E9E,
      'icon_data': Icons.help_outline,
    };

    // Récupérer nbPassages pour le type 2
    final nbPassages = passage['nb_passages'] as int? ?? passage['nbPassages'] as int? ?? 0;

    // Récupérer la couleur de fond selon le type et nbPassages
    Color backgroundColor;
    Color iconColor;
    bool useOutlinedIcon = false;

    if (typeId == 2) {
      // Type 2 (À finaliser) : adapter la couleur selon nbPassages
      if (nbPassages == 0) {
        backgroundColor = Color(typeInfo['couleur1'] as int? ?? 0xFFFFFFFF);
        iconColor = Color(typeInfo['couleur2'] as int? ?? 0xFFFFB978);
        useOutlinedIcon = true; // Utiliser l'icône outlined pour la visibilité
      } else if (nbPassages == 1) {
        backgroundColor = Color(typeInfo['couleur2'] as int? ?? 0xFFFFB978);
        iconColor = backgroundColor;
        useOutlinedIcon = false;
      } else {
        // nbPassages > 1
        backgroundColor = Color(typeInfo['couleur3'] as int? ?? 0xFFE66F00);
        iconColor = backgroundColor;
        useOutlinedIcon = false;
      }
    } else {
      // Autres types : utiliser couleur2 par défaut
      backgroundColor = Color(typeInfo['couleur2'] as int? ?? 0xFF9E9E9E);
      iconColor = backgroundColor;
      useOutlinedIcon = false;
    }

    final typeIcon = typeInfo['icon_data'] as IconData? ?? Icons.help_outline;

    // Informations du passage
    final date = passage['datePassage'] ?? passage['date'];
    final amount = passage['montant'] ?? passage['amount'] ?? 0.0;

    // Construire l'adresse : numero + rueBis + rue (+ ville si desktop web)
    final numero = passage['numero'] as String? ?? '';
    final rueBis = passage['rue_bis'] as String? ?? '';
    final rue = passage['rue'] as String? ?? '';
    final ville = passage['ville'] as String? ?? '';

    String shortAddress = '';
    if (numero.isNotEmpty) shortAddress += numero;
    if (rueBis.isNotEmpty) shortAddress += (shortAddress.isNotEmpty ? ' ' : '') + rueBis;
    if (rue.isNotEmpty) shortAddress += (shortAddress.isNotEmpty ? ' ' : '') + rue;

    // Ajouter la ville si on est sur web desktop
    if (kIsWeb && isDesktop && ville.isNotEmpty) {
      shortAddress += (shortAddress.isNotEmpty ? ', ' : '') + ville;
    }

    if (shortAddress.isEmpty) shortAddress = 'Adresse non renseignée';

    // Formatage de la date (si définie)
    String? formattedDate;
    if (date != null) {
      if (date is DateTime) {
        formattedDate = DateFormat('dd/MM/yyyy à HH:mm').format(date);
      } else if (date is String) {
        try {
          final parsedDate = DateTime.parse(date);
          formattedDate = DateFormat('dd/MM/yyyy à HH:mm').format(parsedDate);
        } catch (e) {
          formattedDate = null;
        }
      }
    }

    // Formatage du montant
    String formattedAmount = '0,00 €';
    bool isPaid = false;

    if (amount != null) {
      if (amount is double) {
        formattedAmount = '${amount.toStringAsFixed(2).replaceAll('.', ',')} €';
        isPaid = amount > 0;
      } else if (amount is String && amount.isNotEmpty) {
        final doubleAmount = double.tryParse(amount) ?? 0.0;
        formattedAmount = '${doubleAmount.toStringAsFixed(2).replaceAll('.', ',')} €';
        isPaid = doubleAmount > 0;
      } else if (amount is int) {
        final doubleAmount = amount.toDouble();
        formattedAmount = '${doubleAmount.toStringAsFixed(2).replaceAll('.', ',')} €';
        isPaid = doubleAmount > 0;
      }
    }

    return Card(
      margin: const EdgeInsets.only(bottom: 8),
      elevation: 2,
      child: InkWell(
        onTap: onPassageEdit != null ? () => onPassageEdit!(passage) : null,
        borderRadius: BorderRadius.circular(8),
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              // Icône du type de passage à gauche sur toute la hauteur
              Container(
                height: 50,
                width: 50,
                decoration: BoxDecoration(
                  color: backgroundColor.withOpacity(0.5),
                  borderRadius: BorderRadius.circular(8),
                ),
                child: Icon(
                  useOutlinedIcon ? Icons.refresh_outlined : typeIcon,
                  size: 28,
                  color: iconColor.withOpacity(1.0),
                ),
              ),
              const SizedBox(width: 12),

              // Contenu principal (2 lignes)
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    // Ligne 1 : Date (si définie) + Nom + Actions à droite
                    Row(
                      children: [
                        // Date et nom
                        Expanded(
                          child: Row(
                            children: [
                              // Date (si définie)
                              if (formattedDate != null)
                                Text(
                                  formattedDate,
                                  style: theme.textTheme.bodySmall?.copyWith(
                                    color: theme.colorScheme.onSurfaceVariant,
                                    fontWeight: FontWeight.w500,
                                  ),
                                ),

                              // Nom du passage (si défini)
                              if (passage['name'] != null &&
                                  (passage['name'] as String).trim().isNotEmpty) ...[
                                if (formattedDate != null)
                                  Text(
                                    ' - ',
                                    style: theme.textTheme.bodySmall?.copyWith(
                                      color: theme.colorScheme.onSurfaceVariant,
                                    ),
                                  ),
                                Flexible(
                                  child: Text(
                                    passage['name'] as String,
                                    style: theme.textTheme.bodySmall?.copyWith(
                                      color: theme.colorScheme.onSurfaceVariant,
                                      fontWeight: FontWeight.w500,
                                    ),
                                    overflow: TextOverflow.ellipsis,
                                  ),
                                ),
                              ],
                            ],
                          ),
                        ),

                        // Actions
                        if (showActions) ...[
                          if (onPassageDelete != null)
                            IconButton(
                              onPressed: () => onPassageDelete!(passage),
                              icon: const Icon(Icons.delete_outlined),
                              iconSize: 18,
                              tooltip: 'Supprimer',
                              color: Colors.red,
                              padding: EdgeInsets.zero,
                              constraints: const BoxConstraints(),
                            ),
                        ],
                      ],
                    ),
                    const SizedBox(height: 4),

                    // Ligne 2 : Adresse courte + Icônes + Badge montant à droite
                    Row(
                      children: [
                        // Adresse courte
                        Expanded(
                          child: Text(
                            shortAddress,
                            style: theme.textTheme.bodyMedium?.copyWith(
                              fontWeight: FontWeight.w600,
                            ),
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                          ),
                        ),
                        const SizedBox(width: 8),

                        // Icône remarque (si présente)
                        if (passage['remarque'] != null &&
                            (passage['remarque'] as String).trim().isNotEmpty)
                          Padding(
                            padding: const EdgeInsets.only(right: 8),
                            child: Tooltip(
                              message: passage['remarque'],
                              preferBelow: false,
                              child: Icon(
                                Icons.comment_outlined,
                                size: 16,
                                color: theme.colorScheme.primary.withOpacity(0.7),
                              ),
                            ),
                          ),

                        // Icône email (si présent)
                        if (passage['email'] != null &&
                            (passage['email'] as String).trim().isNotEmpty)
                          Padding(
                            padding: const EdgeInsets.only(right: 8),
                            child: InkWell(
                              onTap: () {
                                final email = passage['email'] as String;
                                ScaffoldMessenger.of(context).showSnackBar(
                                  SnackBar(
                                    content: Text('Email: $email'),
                                    duration: const Duration(seconds: 3),
                                    action: SnackBarAction(
                                      label: 'OK',
                                      onPressed: () {},
                                    ),
                                  ),
                                );
                              },
                              borderRadius: BorderRadius.circular(4),
                              child: Tooltip(
                                message: passage['email'],
                                preferBelow: false,
                                child: Padding(
                                  padding: const EdgeInsets.all(4),
                                  child: Icon(
                                    Icons.alternate_email,
                                    size: 16,
                                    color: (passage['emailErreur'] != null &&
                                            (passage['emailErreur'] as String).trim().isNotEmpty)
                                        ? Colors.red.withOpacity(0.7)
                                        : Colors.blue.withOpacity(0.7),
                                  ),
                                ),
                              ),
                            ),
                          ),

                        // Icône reçu (si présent)
                        if (passage['nomRecu'] != null &&
                            (passage['nomRecu'] as String).trim().isNotEmpty)
                          Padding(
                            padding: const EdgeInsets.only(right: 8),
                            child: Tooltip(
                              message: 'Reçu disponible',
                              preferBelow: false,
                              child: Icon(
                                Icons.receipt_outlined,
                                size: 16,
                                color: theme.colorScheme.secondary.withOpacity(0.7),
                              ),
                            ),
                          ),

                        // Badge montant (si > 0 et type 1 ou 5)
                        if (isPaid && (typeId == 1 || typeId == 5))
                          Builder(
                            builder: (context) {
                              // Récupérer le type de règlement
                              final typeReglement = passage['fk_type_reglement'] as int? ??
                                                   passage['payment'] as int? ??
                                                   4; // 4 = Non renseigné par défaut

                              // Récupérer l'icône ET la couleur du type de règlement
                              final reglementInfo = AppKeys.typesReglements[typeReglement];
                              final reglementIcon = reglementInfo?['icon_data'] as IconData? ?? Icons.help_outline;
                              final reglementColor = Color(reglementInfo?['couleur'] as int? ?? 0xFF9E9E9E); // Gris par défaut

                              return Container(
                                padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
                                decoration: BoxDecoration(
                                  color: reglementColor.withOpacity(0.15),
                                  borderRadius: BorderRadius.circular(8),
                                  border: Border.all(
                                    color: reglementColor.withOpacity(0.4),
                                  ),
                                ),
                                child: Row(
                                  mainAxisSize: MainAxisSize.min,
                                  children: [
                                    Icon(
                                      reglementIcon,
                                      size: 12,
                                      color: reglementColor,
                                    ),
                                    const SizedBox(width: 4),
                                    Text(
                                      formattedAmount,
                                      style: theme.textTheme.bodySmall?.copyWith(
                                        color: reglementColor,
                                        fontWeight: FontWeight.bold,
                                        fontSize: 11,
                                      ),
                                    ),
                                  ],
                                ),
                              );
                            },
                          ),

                        // Icône QR Code (si Payment Link généré)
                        if (passage['stripe_payment_link_id'] != null &&
                            (passage['stripe_payment_link_id'] as String).trim().isNotEmpty)
                          Padding(
                            padding: const EdgeInsets.only(left: 4),
                            child: InkWell(
                              onTap: () => _showQRCodeDialog(context, passage),
                              borderRadius: BorderRadius.circular(4),
                              child: Tooltip(
                                message: 'Afficher le QR Code',
                                preferBelow: false,
                                child: Padding(
                                  padding: const EdgeInsets.all(4),
                                  child: Icon(
                                    Icons.qr_code_2,
                                    size: 16,
                                    color: Colors.blue.withOpacity(0.7),
                                  ),
                                ),
                              ),
                            ),
                          ),
                      ],
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  /// Construit le texte du nombre de passages avec le type si filtré
  String _buildPassageCountText() {
    final count = passages.length;
    final baseText = '$count passage${count > 1 ? 's' : ''}';

    // Si un type de passage est filtré et différent de "Tous les types"
    if (filteredPassageType != null && filteredPassageType!.isNotEmpty) {
      final typeLowerCase = filteredPassageType!.toLowerCase();

      // Gérer le pluriel selon le type
      String typeWithPlural;
      if (count > 1) {
        // Gestion des pluriels spécifiques
        if (typeLowerCase == 'à finaliser') {
          typeWithPlural = 'à finaliser'; // Invariable
        } else if (typeLowerCase.endsWith('é')) {
          typeWithPlural = '${typeLowerCase}s'; // effectué → effectués, refusé → refusés
        } else if (typeLowerCase == 'maison vide') {
          typeWithPlural = 'maisons vides';
        } else {
          typeWithPlural = '${typeLowerCase}s'; // don → dons, lot → lots
        }
      } else {
        typeWithPlural = typeLowerCase;
      }

      return '$count passage${count > 1 ? 's' : ''} $typeWithPlural';
    }

    return baseText;
  }

  /// Afficher le QR Code pour un passage avec Payment Link
  void _showQRCodeDialog(BuildContext context, Map<String, dynamic> passage) {
    final paymentLinkUrl = passage['stripe_payment_link_url'] as String?;
    final paymentLinkId = passage['stripe_payment_link_id'] as String?;

    if (paymentLinkUrl == null || paymentLinkUrl.isEmpty) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(
          content: Text('URL du QR Code non disponible'),
          duration: Duration(seconds: 2),
        ),
      );
      return;
    }

    // Récupérer le montant du passage
    final montantStr = passage['montant'] as String? ?? '0';
    final montant = double.tryParse(montantStr.replaceAll(',', '.')) ?? 0;
    final amountInCents = (montant * 100).round();

    // Créer un PaymentLinkResult avec les données du passage
    final paymentLink = PaymentLinkResult(
      paymentLinkId: paymentLinkId ?? '',
      url: paymentLinkUrl,
      amount: amountInCents,
      passageId: passage['id'] as int?,
    );

    // Afficher le QR Code
    QRCodePaymentDialog.show(
      context: context,
      paymentLink: paymentLink,
    );
  }
}