/* Contact form with validation */
const { useState } = React;

window.ContactForm = function ContactForm() {
  const [data, setData] = useState({ nome: "", cognome: "", email: "", ruolo: "" });
  const [errors, setErrors] = useState({});
  const [submitting, setSubmitting] = useState(false);
  const [submitted, setSubmitted] = useState(false);
  const [secondsLeft, setSecondsLeft] = useState(0);

  React.useEffect(() => {
    if (!submitted) return;
    setSecondsLeft(30);
    const t = setInterval(() => {
      setSecondsLeft(s => {
        if (s <= 1) { clearInterval(t); return 0; }
        return s - 1;
      });
    }, 1000);
    return () => clearInterval(t);
  }, [submitted]);

  const update = (k) => (e) => {
    setData(d => ({ ...d, [k]: e.target.value }));
    setErrors(er => ({ ...er, [k]: undefined }));
  };

  const validate = () => {
    const er = {};
    if (!data.nome.trim()) er.nome = "Inserisci il tuo nome";
    if (!data.cognome.trim()) er.cognome = "Inserisci il tuo cognome";
    if (!data.email.trim()) er.email = "Inserisci l'email";
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email)) er.email = "Email non valida";
    if (!data.ruolo) er.ruolo = "Seleziona un'opzione";
    return er;
  };

  const submit = async (e) => {
    e.preventDefault();
    const er = validate();
    setErrors(er);
    if (Object.keys(er).length > 0) return;
    setSubmitting(true);
    const params = {
      nome:    data.nome,
      cognome: data.cognome,
      email:   data.email,
      ruolo:   data.ruolo === 'titolare' ? 'Titolare / investitore' : 'Consulente',
    };
    try {
      await emailjs.send('service_3f4wmwz', 'template_43pnp3j', params); // notifica a te
      await emailjs.send('service_3f4wmwz', 'template_osc3jck', params); // auto-reply all'utente
      setSubmitted(true);
    } catch {
      setErrors({ _server: "Invio fallito. Riprova o scrivici a info@sportellobalneari.it." });
    } finally {
      setSubmitting(false);
    }
  };

  if (submitted) {
    return (
      <div className="contact-form">
        <div className="form-success">
          <div className="icon">✓</div>
          <h3>Richiesta ricevuta</h3>
          <p className="success-lede">
            Grazie {data.nome}. Ti abbiamo inviato un'email di conferma all'indirizzo <strong className="success-email">{data.email}</strong>.
          </p>
          <div className="success-hint">
            <div className="hint-title">Non hai ricevuto nulla?</div>
            <div className="hint-body">Controlla la cartella Spam o verifica di aver inserito correttamente il tuo indirizzo email.</div>
          </div>
          {(() => {
            const total = 30;
            const disabled = secondsLeft > 0;
            const r = 11;
            const C = 2 * Math.PI * r;
            const progress = (total - secondsLeft) / total;
            return (
              <button
                type="button"
                className={"btn btn-ghost-nav success-back " + (disabled ? "is-waiting" : "")}
                onClick={() => !disabled && setSubmitted(false)}
                disabled={disabled}
                aria-disabled={disabled}>
                {disabled && (
                  <span className="success-spinner" aria-hidden="true">
                    <svg width="26" height="26" viewBox="0 0 26 26">
                      <circle cx="13" cy="13" r={r} fill="none" stroke="var(--line)" strokeWidth="2" />
                      <circle
                        cx="13" cy="13" r={r}
                        fill="none"
                        stroke="var(--giallo)"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeDasharray={C}
                        strokeDashoffset={C * (1 - progress)}
                        transform="rotate(-90 13 13)"
                      />
                    </svg>
                    <span className="success-spinner-num">{secondsLeft}</span>
                  </span>
                )}
                <span>← Modifica i dati e invia di nuovo</span>
              </button>
            );
          })()}
        </div>
      </div>
    );
  }

  return (
    <form className="contact-form" onSubmit={submit} noValidate>
      <div className="form-row">
        <div className={"form-group " + (errors.nome ? "error" : "")}>
          <label>Nome<span className="req">*</span></label>
          <input type="text" value={data.nome} onChange={update("nome")} placeholder="Marco" />
          {errors.nome && <span className="err">{errors.nome}</span>}
        </div>
        <div className={"form-group " + (errors.cognome ? "error" : "")}>
          <label>Cognome<span className="req">*</span></label>
          <input type="text" value={data.cognome} onChange={update("cognome")} placeholder="Bianchi" />
          {errors.cognome && <span className="err">{errors.cognome}</span>}
        </div>
      </div>
      <div className={"form-group " + (errors.email ? "error" : "")}>
        <label>Email<span className="req">*</span></label>
        <input type="email" value={data.email} onChange={update("email")} placeholder="marco.bianchi@esempio.it" />
        {errors.email && <span className="err">{errors.email}</span>}
      </div>
      <div className={"form-group " + (errors.ruolo ? "error" : "")}>
        <label>In che veste sei interessato?<span className="req">*</span></label>
        <select value={data.ruolo} onChange={update("ruolo")}>
          <option value="">— Seleziona —</option>
          <option value="titolare">Sono titolare / investitore</option>
          <option value="consulente">Sono un consulente</option>
        </select>
        {errors.ruolo && <span className="err">{errors.ruolo}</span>}
      </div>
      <button className="form-submit" type="submit" disabled={submitting}>
        {submitting ? "Invio in corso…" : "Richiedi informazioni"}
        {!submitting && <span style={{fontSize:18, lineHeight:1}}>→</span>}
      </button>
      {errors._server && (
        <div className="err" style={{marginTop: 10, textAlign: 'center', fontSize: 13}}>
          {errors._server}
        </div>
      )}
      <div className="form-privacy">
        Inviando il form accetti la nostra <a href="privacy.html">Privacy Policy</a>. I dati sono trattati esclusivamente per rispondere alla tua richiesta e non vengono condivisi con terzi per finalità commerciali.
      </div>
    </form>
  );
};