import 'package:flutter/material.dart';

/// Widget de dialogue pour informer l'utilisateur qu'il doit vider le cache de son navigateur
/// et recharger l'application en raison d'une incompatibilité après une mise à jour.
class ClearCacheDialog extends StatelessWidget {
  /// Callback appelé lorsque l'utilisateur ferme le dialogue
  final VoidCallback? onClose;

  const ClearCacheDialog({
    super.key,
    this.onClose,
  });

  /// Affiche le dialogue de nettoyage du cache
  static Future<void> show(BuildContext context,
      {VoidCallback? onClose}) async {
    return showDialog<void>(
      context: context,
      barrierDismissible:
          false, // L'utilisateur doit appuyer sur un bouton pour fermer le dialogue
      builder: (BuildContext dialogContext) {
        return ClearCacheDialog(onClose: onClose);
      },
    );
  }

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

    return AlertDialog(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(16),
      ),
      title: Row(
        children: [
          const Icon(
            Icons.warning_amber_rounded,
            color: Colors.orange,
            size: 28,
          ),
          const SizedBox(width: 12),
          Text(
            'Mise à jour requise',
            style: theme.textTheme.titleLarge?.copyWith(
              fontWeight: FontWeight.bold,
              color: theme.colorScheme.onSurface,
            ),
          ),
        ],
      ),
      content: SingleChildScrollView(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Une incompatibilité a été détectée avec les données stockées localement. Veuillez suivre ces étapes pour résoudre le problème :',
              style: theme.textTheme.bodyLarge,
            ),
            const SizedBox(height: 16),
            _buildInstructionStep(
                context,
                1,
                'Videz le cache de votre navigateur',
                'Dans Chrome : Menu > Plus d\'outils > Effacer les données de navigation > Sélectionnez "Cookies et données de site" > Effacer les données'),
            const SizedBox(height: 12),
            _buildInstructionStep(
                context,
                2,
                'Fermez complètement le navigateur',
                'Assurez-vous de fermer toutes les fenêtres du navigateur'),
            const SizedBox(height: 12),
            _buildInstructionStep(context, 3, 'Rouvrez l\'application',
                'Reconnectez-vous à l\'application pour récupérer vos données depuis le serveur'),
            const SizedBox(height: 16),
            Text(
              'Note : Cette opération est nécessaire en raison d\'une mise à jour de la structure des données. Toutes vos données seront récupérées depuis le serveur après reconnexion.',
              style: theme.textTheme.bodySmall?.copyWith(
                fontStyle: FontStyle.italic,
                color: theme.colorScheme.onSurface.withValues(alpha: 0.7),
              ),
            ),
          ],
        ),
      ),
      actions: [
        TextButton(
          onPressed: () {
            Navigator.of(context).pop();
            if (onClose != null) {
              onClose!();
            }
          },
          style: TextButton.styleFrom(
            foregroundColor: theme.colorScheme.primary,
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
          ),
          child: const Text('J\'ai compris'),
        ),
      ],
    );
  }

  /// Construit une étape d'instruction avec un numéro, un titre et une description
  Widget _buildInstructionStep(
      BuildContext context, int stepNumber, String title, String description) {
    final theme = Theme.of(context);

    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          width: 24,
          height: 24,
          decoration: BoxDecoration(
            color: theme.colorScheme.primary,
            shape: BoxShape.circle,
          ),
          child: Center(
            child: Text(
              '$stepNumber',
              style: const TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.bold,
                fontSize: 14,
              ),
            ),
          ),
        ),
        const SizedBox(width: 12),
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                title,
                style: theme.textTheme.titleSmall?.copyWith(
                  fontWeight: FontWeight.bold,
                ),
              ),
              const SizedBox(height: 4),
              Text(
                description,
                style: theme.textTheme.bodyMedium,
              ),
            ],
          ),
        ),
      ],
    );
  }
}