'use client';
import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { AlertTriangle } from 'lucide-react';
import { participantService } from '@/lib/services';
import { Participant } from '@/types';

interface DeleteParticipantModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSuccess: () => void;
  participant: Participant | null;
}

export default function DeleteParticipantModal({ isOpen, onClose, onSuccess, participant }: DeleteParticipantModalProps) {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const handleDelete = async () => {
    if (!participant) return;

    setLoading(true);
    setError('');

    try {
      await participantService.delete(participant.id);
      onSuccess();
    } catch (err: any) {
      const errorMessage = err?.message || err?.details || 'Erreur lors de la suppression du participant';
      setError(`Erreur lors de la suppression du participant: ${errorMessage}`);
      console.error('Erreur lors de la suppression du participant:', err);
    } finally {
      setLoading(false);
    }
  };

  if (!participant) return null;

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <AlertTriangle className="h-5 w-5 text-red-500" />
            Supprimer le participant
          </DialogTitle>
          <DialogDescription>
            Cette action est irréversible. Le participant sera définitivement supprimé.
          </DialogDescription>
        </DialogHeader>
        
        <div className="space-y-4">
          {error && (
            <div className="p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
              <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
            </div>
          )}
          
          <div className="p-4 bg-slate-50 dark:bg-slate-800 rounded-lg">
            <h4 className="font-medium text-slate-900 dark:text-slate-100 mb-2">
              Participant à supprimer :
            </h4>
            <p className="text-sm text-slate-600 dark:text-slate-300">
              <strong>Nom :</strong> {participant.first_name} {participant.last_name}
            </p>
            <p className="text-sm text-slate-600 dark:text-slate-300">
              <strong>Email :</strong> {participant.email}
            </p>
          </div>
          
          <div className="p-3 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg">
            <p className="text-sm text-amber-700 dark:text-amber-300">
              ⚠️ Cette action supprimera également tous les votes associés à ce participant.
            </p>
          </div>
        </div>
        
        <DialogFooter>
          <Button type="button" variant="outline" onClick={onClose}>
            Annuler
          </Button>
          <Button 
            type="button" 
            variant="destructive" 
            onClick={handleDelete}
            disabled={loading}
          >
            {loading ? 'Suppression...' : 'Supprimer définitivement'}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}