'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';

export function FeedbackSection() {
  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' }
  ];

  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
            items={alertItems}
            onDismiss={(id) => console.log('Dismiss alert:', id)}
            onAction={(id, action) => console.log('Alert action:', id, action)}
          />
        </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>

        {/* 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>
    </section>
  );
}