'use client';
import React, { useState, useEffect } from 'react';
import InputText from '@/components/Form/InputText';
import SelectChoice from '@/components/Form/SelectChoice';
import Button from '@/components/Form/Button';
import { Plus, Save, X } from 'lucide-react';

export default function EvaluationForm({
  specialities,
  period,
  schoolClassId,
  establishmentId,
  initialValues,
  onSubmit,
  onCancel,
}) {
  const isEditing = !!initialValues;
  
  const [form, setForm] = useState({
    name: '',
    speciality: '',
    date: '',
    max_score: '20',
    coefficient: '1',
    description: '',
  });

  useEffect(() => {
    if (initialValues) {
      setForm({
        name: initialValues.name || '',
        speciality: initialValues.speciality?.toString() || '',
        date: initialValues.date || '',
        max_score: initialValues.max_score?.toString() || '20',
        coefficient: initialValues.coefficient?.toString() || '1',
        description: initialValues.description || '',
      });
    }
  }, [initialValues]);

  const [errors, setErrors] = useState({});

  const validate = () => {
    const newErrors = {};
    if (!form.name.trim()) newErrors.name = 'Le nom est requis';
    if (!form.speciality) newErrors.speciality = 'La matière est requise';
    return newErrors;
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const validationErrors = validate();
    if (Object.keys(validationErrors).length > 0) {
      setErrors(validationErrors);
      return;
    }

    onSubmit({
      name: form.name,
      speciality: Number(form.speciality),
      school_class: schoolClassId,
      establishment: establishmentId,
      period: period,
      date: form.date || null,
      max_score: parseFloat(form.max_score) || 20,
      coefficient: parseFloat(form.coefficient) || 1,
      description: form.description,
    });
  };

  return (
    <form
      onSubmit={handleSubmit}
      className="space-y-4 p-4 bg-white rounded-lg border border-gray-200 shadow-sm"
    >
      <div className="flex items-center justify-between">
        <h3 className="font-headline font-semibold text-lg text-gray-800">
          {isEditing ? 'Modifier l\'évaluation' : 'Nouvelle évaluation'}
        </h3>
        <button
          type="button"
          onClick={onCancel}
          className="p-1 hover:bg-gray-100 rounded"
        >
          <X size={20} className="text-gray-500" />
        </button>
      </div>

      <InputText
        name="name"
        label="Nom de l'évaluation"
        placeholder="Ex: Contrôle de mathématiques"
        value={form.name}
        onChange={(e) => setForm({ ...form, name: e.target.value })}
        errorMsg={errors.name}
        required
      />

      <SelectChoice
        name="speciality"
        label="Matière"
        placeHolder="Sélectionner une matière"
        choices={specialities.map((s) => ({ value: s.id, label: s.name }))}
        selected={form.speciality}
        callback={(e) => setForm({ ...form, speciality: e.target.value })}
        errorMsg={errors.speciality}
        required
      />

      <InputText
        name="date"
        type="date"
        label="Date de l'évaluation"
        value={form.date}
        onChange={(e) => setForm({ ...form, date: e.target.value })}
      />

      <div className="flex gap-4">
        <div className="flex-1">
          <InputText
            name="max_score"
            type="number"
            label="Note maximale"
            value={form.max_score}
            onChange={(e) => setForm({ ...form, max_score: e.target.value })}
          />
        </div>
        <div className="flex-1">
          <InputText
            name="coefficient"
            type="number"
            label="Coefficient"
            value={form.coefficient}
            onChange={(e) => setForm({ ...form, coefficient: e.target.value })}
          />
        </div>
      </div>

      <InputText
        name="description"
        label="Description (optionnel)"
        placeholder="Détails de l'évaluation..."
        value={form.description}
        onChange={(e) => setForm({ ...form, description: e.target.value })}
      />

      <div className="flex gap-2 pt-2">
        <Button
          primary
          type="submit"
          text={isEditing ? 'Enregistrer' : 'Créer l\'évaluation'}
          icon={isEditing ? <Save size={16} /> : <Plus size={16} />}
        />
        <Button type="button" text="Annuler" onClick={onCancel} />
      </div>
    </form>
  );
}