import 'package:flutter/material.dart';

/// Widget d'aide commun pour toute l'application
/// Affiche une boîte de dialogue modale avec une aide contextuelle
/// basée sur la page courante
class HelpDialog extends StatelessWidget {
  /// Nom de la page courante pour laquelle l'aide est demandée
  final String currentPage;

  const HelpDialog({
    super.key,
    required this.currentPage,
  });

  /// Affiche la boîte de dialogue d'aide
  static void show(BuildContext context, String currentPage) {
    showDialog(
      context: context,
      builder: (context) => HelpDialog(currentPage: currentPage),
    );
  }

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

    // Déterminer si nous sommes sur un appareil mobile ou un ordinateur de bureau
    final isDesktop = size.width > 900;

    // Calculer la largeur de la boîte de dialogue
    // 90% de la largeur de l'écran pour les mobiles
    // 50% de la largeur de l'écran pour les ordinateurs de bureau (max 600px)
    final dialogWidth = isDesktop
        ? size.width * 0.5 > 600
            ? 600.0
            : size.width * 0.5
        : size.width * 0.9;

    return Dialog(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(16),
      ),
      // Définir la largeur de la boîte de dialogue
      child: Container(
        width: dialogWidth,
        padding: const EdgeInsets.all(24),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // Titre de l'aide avec le nom de la page courante
            Row(
              children: [
                Icon(
                  Icons.help_outline,
                  color: theme.colorScheme.primary,
                  size: 28,
                ),
                const SizedBox(width: 12),
                Expanded(
                  child: Text(
                    'Aide - Page $currentPage',
                    style: theme.textTheme.titleLarge?.copyWith(
                      color: theme.colorScheme.primary,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
                IconButton(
                  icon: const Icon(Icons.close),
                  onPressed: () => Navigator.of(context).pop(),
                  tooltip: 'Fermer',
                ),
              ],
            ),
            const Divider(height: 32),
            // Contenu de l'aide (à personnaliser selon la page)
            Text(
              'Contenu d\'aide pour la page "$currentPage".',
              style: theme.textTheme.bodyLarge,
            ),
            const SizedBox(height: 16),
            Text(
              'Cette section sera personnalisée avec des instructions spécifiques pour chaque page de l\'application.',
              style: theme.textTheme.bodyMedium,
            ),
            const SizedBox(height: 24),
            // Bouton pour fermer la boîte de dialogue
            Align(
              alignment: Alignment.centerRight,
              child: TextButton(
                onPressed: () => Navigator.of(context).pop(),
                style: TextButton.styleFrom(
                  backgroundColor: theme.colorScheme.primary,
                  foregroundColor: theme.colorScheme.onPrimary,
                  padding: const EdgeInsets.symmetric(
                    horizontal: 24,
                    vertical: 12,
                  ),
                ),
                child: const Text('Fermer'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}