'use client';

import { useState, FormEvent } from 'react';
import { useRouter } from 'next/navigation';
import { api } from '@/services/api';
import toast from 'react-hot-toast';

export default function NuevoLeadPage() {
  const router = useRouter();
  const [nombre, setNombre] = useState('');
  const [mail, setMail] = useState('');
  const [fono, setFono] = useState('');
  const [producto, setProducto] = useState('');

  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();
    try {
      await api.post('/lead', { nombre, mail, telefono: fono, producto, contacto: 1, ejecutivoId: 1 });
      toast.success('Lead creado');
      router.push('/leads');
    } catch {
      toast.error('Error al crear lead');
    }
  };

  return (
    <div className="card shadow p-4">
      <h3 className="mb-4">Nuevo Lead</h3>
      <form onSubmit={handleSubmit}>
        <div className="mb-3">
          <label className="form-label">Nombre</label>
          <input className="form-control" value={nombre} onChange={e => setNombre(e.target.value)} required />
        </div>
        <div className="mb-3">
          <label className="form-label">Mail</label>
          <input type="email" className="form-control" value={mail} onChange={e => setMail(e.target.value)} />
        </div>
        <div className="mb-3">
          <label className="form-label">Teléfono</label>
          <input className="form-control" value={fono} onChange={e => setFono(e.target.value)} />
        </div>
        <div className="mb-3">
          <label className="form-label">Producto</label>
          <input className="form-control" value={producto} onChange={e => setProducto(e.target.value)} />
        </div>
        <button type="submit" className="btn btn-primary">Guardar</button>
        <button type="button" className="btn btn-secondary ms-2" onClick={() => router.back()}>Cancelar</button>
      </form>
    </div>
  );
}