'use client';

import { ToastProvider, useToast } from '@/components/ui/Toast';
import { Button } from '@/components/ui/Button';

function ToastDemo() {
  const { showToast } = useToast();

  return (
    <section id="toast" className="space-y-8">
      <h2 className="text-2xl font-mono font-semibold text-[var(--foreground)] border-b border-[var(--border)] pb-3">
        Toast Notifications
      </h2>

      <div className="space-y-8">
        {/* Toast Types */}
        <div className="space-y-4">
          <h3 className="text-lg font-medium text-[var(--foreground)]">
            Types de Toast
          </h3>
          <div className="flex flex-wrap gap-4">
            <Button
              onClick={() =>
                showToast(
                  'Succès ! Votre action a été effectuée avec succès.',
                  5000,
                  '✅'
                )
              }
            >
              Toast Success
            </Button>
            <Button
              onClick={() =>
                showToast(
                  "Erreur: Une erreur est survenue lors de l'opération.",
                  7000,
                  '❌'
                )
              }
            >
              Toast Error
            </Button>
            <Button
              onClick={() =>
                showToast(
                  'Attention: Veuillez vérifier vos informations.',
                  6000,
                  '⚠️'
                )
              }
            >
              Toast Warning
            </Button>
            <Button
              onClick={() =>
                showToast(
                  'Information: Voici une information importante.',
                  5000,
                  'ℹ️'
                )
              }
            >
              Toast Info
            </Button>
          </div>
        </div>

        {/* Toast avec différentes durées */}
        <div className="space-y-4">
          <h3 className="text-lg font-medium text-[var(--foreground)]">
            Durées différentes
          </h3>
          <div className="flex flex-wrap gap-4">
            <Button
              onClick={() =>
                showToast('Toast court - Disparaît rapidement', 2000, '⚡')
              }
            >
              Durée courte (2s)
            </Button>
            <Button
              onClick={() =>
                showToast('Toast normal - Durée par défaut', 5000, '📝')
              }
            >
              Durée normale (5s)
            </Button>
            <Button
              onClick={() =>
                showToast('Toast long - Disparaît lentement', 10000, '⏰')
              }
            >
              Durée longue (10s)
            </Button>
          </div>
        </div>

        {/* Toast multiples */}
        <div className="space-y-4">
          <h3 className="text-lg font-medium text-[var(--foreground)]">
            Toast multiples
          </h3>
          <div className="flex flex-wrap gap-4">
            <Button
              onClick={() => {
                showToast('Tâche 1 terminée', 5000, '✅');
                showToast('Tâche 2 terminée', 5000, '✅');
                showToast('Tâche 3 terminée', 5000, '✅');
              }}
            >
              Ajouter 3 toasts
            </Button>
            <Button
              onClick={() => {
                showToast('Erreur critique', 5000, '❌');
                showToast('Attention requise', 5000, '⚠️');
                showToast('Information importante', 5000, 'ℹ️');
                showToast('Opération réussie', 5000, '✅');
              }}
            >
              Ajouter 4 toasts différents
            </Button>
          </div>
        </div>

        {/* Toast dans différents contextes */}
        <div className="space-y-4">
          <h3 className="text-lg font-medium text-[var(--foreground)]">
            Contextes d&apos;utilisation
          </h3>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="space-y-3">
              <h4 className="text-md font-medium text-[var(--foreground)]">
                Actions utilisateur
              </h4>
              <div className="space-y-2">
                <Button
                  size="sm"
                  onClick={() =>
                    showToast('Tâche créée avec succès', 3000, '✅')
                  }
                >
                  Créer une tâche
                </Button>
                <Button
                  size="sm"
                  onClick={() =>
                    showToast('Tâche supprimée définitivement', 3000, '🗑️')
                  }
                >
                  Supprimer une tâche
                </Button>
                <Button
                  size="sm"
                  onClick={() =>
                    showToast('Synchronisation en cours...', 3000, '🔄')
                  }
                >
                  Synchroniser
                </Button>
              </div>
            </div>

            <div className="space-y-3">
              <h4 className="text-md font-medium text-[var(--foreground)]">
                Notifications système
              </h4>
              <div className="space-y-2">
                <Button
                  size="sm"
                  onClick={() =>
                    showToast('Connexion faible détectée', 5000, '📶')
                  }
                >
                  Connexion faible
                </Button>
                <Button
                  size="sm"
                  onClick={() => showToast('Erreur de sauvegarde', 5000, '💾')}
                >
                  Erreur de sauvegarde
                </Button>
                <Button
                  size="sm"
                  onClick={() =>
                    showToast('Mise à jour disponible', 5000, '🔄')
                  }
                >
                  Mise à jour
                </Button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

export function ToastSection() {
  return (
    <ToastProvider>
      <ToastDemo />
    </ToastProvider>
  );
}
