'use client';
import { useEffect } from 'react';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { participantService } from '@/lib/services';
import { Participant } from '@/types';
import { useFormState } from '@/hooks/useFormState';
import { FormModal } from './base/FormModal';
import { handleFormError } from '@/lib/form-utils';

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

export default function EditParticipantModal({ isOpen, onClose, onSuccess, participant }: EditParticipantModalProps) {
  const initialData = {
    first_name: '',
    last_name: '',
    email: ''
  };

  const { formData, setFormData, loading, setLoading, error, setError, handleChange } = useFormState(initialData);

  useEffect(() => {
    if (participant) {
      setFormData({
        first_name: participant.first_name,
        last_name: participant.last_name,
        email: participant.email
      });
    }
  }, [participant, setFormData]);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!participant) return;

    setLoading(true);
    setError('');

    try {
      await participantService.update(participant.id, {
        first_name: formData.first_name,
        last_name: formData.last_name,
        email: formData.email
      });
      
      onSuccess();
    } catch (err: any) {
      setError(handleFormError(err, 'la modification du participant'));
    } finally {
      setLoading(false);
    }
  };

  if (!participant) return null;

  return (
    <FormModal
      isOpen={isOpen}
      onClose={onClose}
      onSubmit={handleSubmit}
      title="Modifier le participant"
      description="Modifiez les informations de ce participant."
      loading={loading}
      error={error}
      submitText="Modifier le participant"
      loadingText="Modification..."
    >
      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
        <div className="space-y-2">
          <Label htmlFor="first_name">Prénom *</Label>
          <Input
            id="first_name"
            name="first_name"
            value={formData.first_name}
            onChange={handleChange}
            placeholder="Prénom"
            required
          />
        </div>
        <div className="space-y-2">
          <Label htmlFor="last_name">Nom *</Label>
          <Input
            id="last_name"
            name="last_name"
            value={formData.last_name}
            onChange={handleChange}
            placeholder="Nom"
            required
          />
        </div>
      </div>
      
      <div className="space-y-2">
        <Label htmlFor="email">Email *</Label>
        <Input
          id="email"
          name="email"
          type="email"
          value={formData.email}
          onChange={handleChange}
          placeholder="email@example.com"
          required
        />
      </div>
    </FormModal>
  );
}