'use client';

import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { AlertTriangle, Trash2 } from 'lucide-react';
import { BaseModal } from './base/BaseModal';
import { ErrorDisplay } from './base/ErrorDisplay';

interface ClearAllPropositionsModalProps {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: () => Promise<void>;
  campaignTitle?: string;
  propositionCount: number;
}

export default function ClearAllPropositionsModal({ 
  isOpen, 
  onClose, 
  onConfirm,
  campaignTitle,
  propositionCount 
}: ClearAllPropositionsModalProps) {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const handleConfirm = async () => {
    setLoading(true);
    setError('');
    
    try {
      await onConfirm();
      onClose();
    } catch (error) {
      console.error('Erreur lors de la suppression des propositions:', error);
      setError('Erreur lors de la suppression des propositions.');
    } finally {
      setLoading(false);
    }
  };

  const handleClose = () => {
    if (!loading) {
      setError('');
      onClose();
    }
  };

  const footer = (
    <>
      <Button variant="outline" onClick={handleClose} disabled={loading}>
        Annuler
      </Button>
      <Button 
        variant="destructive" 
        onClick={handleConfirm} 
        disabled={loading}
        className="bg-red-600 hover:bg-red-700"
      >
        {loading ? (
          <>
            <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
            Suppression...
          </>
        ) : (
          <>
            <Trash2 className="w-4 h-4 mr-2" />
            Tout effacer
          </>
        )}
      </Button>
    </>
  );

  return (
    <BaseModal
      isOpen={isOpen}
      onClose={handleClose}
      title="Effacer toutes les propositions"
      description={`Cette action supprimera définitivement toutes les propositions de la campagne.${campaignTitle ? ` Campagne : ${campaignTitle}` : ''}`}
      footer={footer}
      maxWidth="sm:max-w-md"
    >
      <ErrorDisplay error={error} />

      <Alert className="border-red-200 bg-red-50 dark:bg-red-900/20 dark:border-red-800">
        <AlertTriangle className="h-4 w-4 text-red-600 dark:text-red-400" />
        <AlertDescription className="text-red-800 dark:text-red-200">
          <strong>Attention :</strong> Cette action est irréversible. 
          {propositionCount > 0 && (
            <>
              {' '}Vous êtes sur le point de supprimer <strong>{propositionCount} proposition{propositionCount > 1 ? 's' : ''}</strong>.
            </>
          )}
        </AlertDescription>
      </Alert>

      <div className="mt-4 p-4 bg-slate-50 dark:bg-slate-800 rounded-lg">
        <h4 className="font-medium text-slate-900 dark:text-slate-100 mb-2">
          Que sera supprimé :
        </h4>
        <ul className="text-sm text-slate-600 dark:text-slate-300 space-y-1">
          <li>• Toutes les propositions de la campagne</li>
          <li>• Les titres et descriptions des propositions</li>
          <li>• Les informations des auteurs (noms, emails)</li>
          <li>• Toutes les données associées</li>
        </ul>
      </div>

      <div className="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
        <h4 className="font-medium text-blue-900 dark:text-blue-100 mb-2">
          Ce qui sera conservé :
        </h4>
        <ul className="text-sm text-blue-800 dark:text-blue-200 space-y-1">
          <li>• La campagne elle-même</li>
          <li>• Les participants</li>
          <li>• Les votes déjà effectués</li>
          <li>• Les paramètres de la campagne</li>
        </ul>
      </div>
    </BaseModal>
  );
}