// src/components/AddAgrupacionForm.tsx
import { useState } from 'react';
import { createAgrupacion } from '../services/apiService';
import type { CreateAgrupacionData } from '../services/apiService';
// Importa el nuevo archivo CSS si lo creaste, o el existente
import './FormStyles.css';

interface Props {
  onSuccess: () => void;
}

export const AddAgrupacionForm = ({ onSuccess }: Props) => {
  const [nombre, setNombre] = useState('');
  const [nombreCorto, setNombreCorto] = useState('');
  const [color, setColor] = useState('#000000');
  const [error, setError] = useState('');
  const [isLoading, setIsLoading] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!nombre.trim()) {
      setError('El nombre es obligatorio.');
      return;
    }
    setIsLoading(true);
    setError('');

    const payload: CreateAgrupacionData = {
      nombre: nombre.trim(),
      nombreCorto: nombreCorto.trim() || null,
      color: color,
    };

    try {
      await createAgrupacion(payload);
      alert(`Partido '${payload.nombre}' creado con éxito.`);
      // Limpiar formulario
      setNombre('');
      setNombreCorto('');
      setColor('#000000');
      // Notificar al componente padre para que refresque los datos
      onSuccess();
    } catch (err: any) {
      const errorMessage = err.response?.data?.message || 'Ocurrió un error inesperado.';
      setError(errorMessage);
      console.error(err);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="add-entity-form-container">
      <h4>Añadir Partido Manualmente</h4>
      <form onSubmit={handleSubmit} className="add-entity-form">

        <div className="form-field">
          <label>Nombre Completo</label>
          <input type="text" value={nombre} onChange={e => setNombre(e.target.value)} required />
        </div>

        <div className="form-field">
          <label>Nombre Corto</label>
          <input type="text" value={nombreCorto} onChange={e => setNombreCorto(e.target.value)} />
        </div>

        <div className="form-field">
          <label>Color</label>
          <input type="color" value={color} onChange={e => setColor(e.target.value)} />
        </div>

        <button type="submit" disabled={isLoading}>
          {isLoading ? 'Guardando...' : 'Guardar Partido'}
        </button>
      </form>
      {error && <p style={{ color: 'red', marginTop: '0.5rem', textAlign: 'left' }}>{error}</p>}
    </div>
  );
};