'use client';

import {
  Alert as ShadcnAlert,
  AlertTitle,
  AlertDescription,
} from '@/components/ui/Alert';
import { AlertBanner, AlertItem } from '@/components/ui/AlertBanner';
import { LoadingSpinner } from '@/components/ui/LoadingSpinner';
import { ProgressBar } from '@/components/ui/ProgressBar';
import { EmptyState } from '@/components/ui/EmptyState';
import { DropZone } from '@/components/ui/DropZone';
import { Modal } from '@/components/ui/Modal';
import { ConfirmModal } from '@/components/ui/ConfirmModal';
import { Button } from '@/components/ui/Button';
import { useState } from 'react';

export function FeedbackSection() {
  const [showModal, setShowModal] = useState(false);
  const [showConfirmModal, setShowConfirmModal] = useState(false);
  const [showDestructiveConfirm, setShowDestructiveConfirm] = useState(false);
  const [isLoading, setIsLoading] = useState(false);

  const alertItems: AlertItem[] = [
    {
      id: '1',
      title: 'Tâche critique',
      icon: '🔴',
      urgency: 'critical',
      metadata: 'Dans 1 jour',
    },
    {
      id: '2',
      title: 'Réunion urgente',
      icon: '🟠',
      urgency: 'high',
      metadata: 'Dans 2 jours',
    },
    {
      id: '3',
      title: 'Rappel',
      icon: '🟡',
      urgency: 'medium',
      metadata: 'Dans 5 jours',
    },
  ];

  const handleConfirm = () => {
    setIsLoading(true);
    setTimeout(() => {
      setIsLoading(false);
      setShowConfirmModal(false);
    }, 2000);
  };

  const handleDestructiveConfirm = () => {
    setIsLoading(true);
    setTimeout(() => {
      setIsLoading(false);
      setShowDestructiveConfirm(false);
    }, 2000);
  };

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

      <div className="space-y-8">
        {/* Alerts */}
        <div className="space-y-4">
          <h3 className="text-lg font-medium text-[var(--foreground)]">
            Alerts
          </h3>
          <div className="space-y-4">
            <ShadcnAlert>
              <AlertTitle>Information</AlertTitle>
              <AlertDescription>
                This is an informational alert with some important details.
              </AlertDescription>
            </ShadcnAlert>

            <ShadcnAlert variant="success">
              <AlertTitle>Success</AlertTitle>
              <AlertDescription>
                Your action was completed successfully.
              </AlertDescription>
            </ShadcnAlert>

            <ShadcnAlert variant="warning">
              <AlertTitle>Warning</AlertTitle>
              <AlertDescription>
                Please review this information before proceeding.
              </AlertDescription>
            </ShadcnAlert>

            <ShadcnAlert variant="info">
              <AlertTitle>Info</AlertTitle>
              <AlertDescription>
                Additional information about this process.
              </AlertDescription>
            </ShadcnAlert>

            <ShadcnAlert variant="destructive">
              <AlertTitle>Error</AlertTitle>
              <AlertDescription>
                Something went wrong. Please try again.
              </AlertDescription>
            </ShadcnAlert>
          </div>
        </div>

        {/* Alert Banner */}
        <div className="space-y-4">
          <h3 className="text-lg font-medium text-[var(--foreground)]">
            Alert Banner
          </h3>
          <AlertBanner
            title="Alertes importantes"
            items={alertItems}
            variant="warning"
            onItemClick={(item) => console.log('Alert clicked:', item)}
          />
        </div>

        {/* Loading States */}
        <div className="space-y-4">
          <h3 className="text-lg font-medium text-[var(--foreground)]">
            Loading States
          </h3>
          <div className="space-y-4">
            <div>
              <p className="text-sm text-[var(--muted-foreground)] mb-2">
                Tailles différentes
              </p>
              <div className="flex items-center gap-4">
                <LoadingSpinner size="sm" />
                <LoadingSpinner size="md" />
                <LoadingSpinner size="lg" />
                <span className="text-[var(--muted-foreground)]">
                  Loading...
                </span>
              </div>
            </div>

            <div>
              <p className="text-sm text-[var(--muted-foreground)] mb-2">
                Avec texte
              </p>
              <div className="space-y-2">
                <LoadingSpinner size="sm" text="Chargement..." />
                <LoadingSpinner size="md" text="Synchronisation en cours..." />
                <LoadingSpinner size="lg" text="Traitement des données..." />
              </div>
            </div>
          </div>
        </div>

        {/* Progress Bars */}
        <div className="space-y-4">
          <h3 className="text-lg font-medium text-[var(--foreground)]">
            Progress Bars
          </h3>
          <div className="space-y-4">
            <div>
              <p className="text-sm text-[var(--muted-foreground)] mb-2">
                Couleurs différentes
              </p>
              <div className="space-y-3">
                <ProgressBar
                  value={75}
                  label="Default Progress"
                  color="default"
                />
                <ProgressBar
                  value={60}
                  label="Success Progress"
                  color="success"
                />
                <ProgressBar
                  value={45}
                  label="Warning Progress"
                  color="warning"
                />
                <ProgressBar
                  value={90}
                  label="Destructive Progress"
                  color="destructive"
                />
              </div>
            </div>
            <div>
              <p className="text-sm text-[var(--muted-foreground)] mb-2">
                Avec et sans pourcentage
              </p>
              <div className="space-y-3">
                <ProgressBar
                  value={50}
                  label="Avec pourcentage"
                  showPercentage={true}
                />
                <ProgressBar
                  value={50}
                  label="Sans pourcentage"
                  showPercentage={false}
                />
              </div>
            </div>
            <div>
              <p className="text-sm text-[var(--muted-foreground)] mb-2">
                Sans label
              </p>
              <ProgressBar value={80} showPercentage={true} />
            </div>
          </div>
        </div>

        {/* Empty States */}
        <div className="space-y-4">
          <h3 className="text-lg font-medium text-[var(--foreground)]">
            Empty States
          </h3>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <EmptyState
              icon="📋"
              title="No tasks found"
              description="Create your first task to get started"
            />
            <EmptyState
              icon="🔍"
              title="No search results"
              description="Try adjusting your search criteria"
            />
          </div>
        </div>

        {/* Modals */}
        <div className="space-y-4">
          <h3 className="text-lg font-medium text-[var(--foreground)]">
            Modals
          </h3>
          <div className="space-y-4">
            <div>
              <p className="text-sm text-[var(--muted-foreground)] mb-3">
                Modal de base
              </p>
              <Button onClick={() => setShowModal(true)}>Ouvrir Modal</Button>
            </div>

            <div>
              <p className="text-sm text-[var(--muted-foreground)] mb-3">
                Modal de confirmation
              </p>
              <div className="flex gap-2">
                <Button
                  variant="primary"
                  onClick={() => setShowConfirmModal(true)}
                >
                  Confirmation Standard
                </Button>
                <Button
                  variant="destructive"
                  onClick={() => setShowDestructiveConfirm(true)}
                >
                  Confirmation Destructive
                </Button>
              </div>
            </div>
          </div>
        </div>

        {/* Drop Zone */}
        <div className="space-y-4">
          <h3 className="text-lg font-medium text-[var(--foreground)]">
            Drop Zone
          </h3>
          <DropZone>
            <div className="text-center p-8">
              <div className="text-4xl mb-4">📁</div>
              <p className="text-[var(--foreground)] font-medium mb-2">
                Drop files here
              </p>
              <p className="text-[var(--muted-foreground)] text-sm">
                Or click to browse files
              </p>
            </div>
          </DropZone>
        </div>
      </div>

      {/* Modals */}
      <Modal
        isOpen={showModal}
        onClose={() => setShowModal(false)}
        title="Modal de démonstration"
        size="md"
      >
        <div className="space-y-4">
          <p className="text-[var(--foreground)]">
            Ceci est un exemple de modal de base. Vous pouvez y mettre
            n&apos;importe quel contenu.
          </p>
          <div className="flex justify-end">
            <Button onClick={() => setShowModal(false)}>Fermer</Button>
          </div>
        </div>
      </Modal>

      <ConfirmModal
        isOpen={showConfirmModal}
        onClose={() => setShowConfirmModal(false)}
        onConfirm={handleConfirm}
        title="Confirmer l'action"
        message="Êtes-vous sûr de vouloir effectuer cette action ?"
        confirmText="Confirmer"
        cancelText="Annuler"
        variant="primary"
        isLoading={isLoading}
      />

      <ConfirmModal
        isOpen={showDestructiveConfirm}
        onClose={() => setShowDestructiveConfirm(false)}
        onConfirm={handleDestructiveConfirm}
        title="Supprimer définitivement"
        message="Cette action est irréversible. Êtes-vous sûr de vouloir continuer ?"
        confirmText="Supprimer"
        cancelText="Annuler"
        variant="destructive"
        isLoading={isLoading}
      />
    </section>
  );
}
