"use client";

import { FormEvent, useCallback, useState } from "react";
import { Turnstile } from "../../components/Turnstile";
import { userMessage } from "../../lib/messages";

const apiBase=process.env.NEXT_PUBLIC_API_BASE_URL||"/api/v1";

export default function ContactForm(){
  const[captcha,setCaptcha]=useState("");
  const[busy,setBusy]=useState(false);
  const[error,setError]=useState("");
  const[success,setSuccess]=useState("");
  const onToken=useCallback((token:string)=>setCaptcha(token),[]);
  async function submit(event:FormEvent<HTMLFormElement>){
    event.preventDefault();setBusy(true);setError("");setSuccess("");
    const form=event.currentTarget,data=new FormData(form);
    try{
      const response=await fetch(`${apiBase}/portal/contacto`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({tema:data.get("tema"),nombre:data.get("nombre"),email:data.get("email"),telefono:data.get("telefono")||null,organizacion:data.get("organizacion")||null,mensaje:data.get("mensaje"),website:data.get("website")||null,captcha_token:captcha})});
      const body=await response.json();if(!response.ok)throw new Error(typeof body.detail==="string"?body.detail:"No fue posible enviar el mensaje.");
      setSuccess(`Recibimos tu mensaje. Referencia ${body.referencia}.`);form.reset();setCaptcha("");
    }catch(reason){setError(userMessage(reason,"No fue posible enviar el mensaje."))}finally{setBusy(false)}
  }
  return <form className="portal-contact-form" onSubmit={submit}>
    <div><span className="portal-eyebrow">ESCRÍBENOS</span><h2>¿En qué podemos ayudarte?</h2><p>Cuéntanos el contexto y derivaremos tu consulta al equipo adecuado.</p></div>
    <label>Área de interés<select name="tema" required defaultValue=""><option value="" disabled>Selecciona una opción</option><option value="TRAMITES">Trámites en línea</option><option value="PERSONAS">Portal Personas</option><option value="PRO">Documenta Pro</option><option value="ENTIDADES">Notaría, conservador o archivero</option><option value="INTEGRACIONES">API o integración</option><option value="OTRO">Otra consulta</option></select></label>
    <div className="portal-contact-row"><label>Nombre<input name="nombre" required minLength={2}/></label><label>Correo<input name="email" type="email" required/></label></div>
    <div className="portal-contact-row"><label>Teléfono <small>(opcional)</small><input name="telefono" inputMode="tel"/></label><label>Organización <small>(opcional)</small><input name="organizacion"/></label></div>
    <label>Mensaje<textarea name="mensaje" required minLength={10} maxLength={3000} rows={6}/></label>
    <label className="portal-contact-honeypot" aria-hidden="true">Sitio web<input name="website" tabIndex={-1} autoComplete="off"/></label>
    <Turnstile onToken={onToken}/>
    {error&&<div className="finder-message is-error" role="alert">{error}</div>}{success&&<div className="portal-contact-success" role="status">{success}</div>}
    <button className="portal-button portal-button-primary" disabled={busy||!captcha}>{busy?"Enviando…":"Enviar consulta"}</button>
  </form>;
}