/* global React, ReactDOM */
/* ============================================================
   FRESTA — Captura de contato antes do download do material.

   COMO LIGAR O SERVIÇO (Formspree, Getform, Basin, etc.):
   1. Crie um formulário no serviço e copie a URL do endpoint.
   2. Cole essa URL em FRESTA_LEAD_ENDPOINT abaixo.
   Pronto. Enquanto estiver vazio, roda em "modo demonstração":
   valida, guarda o contato no navegador (localStorage, chave
   "fresta_leads") e abre o material assim mesmo.
   ============================================================ */

const FRESTA_LEAD_ENDPOINT = 'https://formspree.io/f/mwvjvvzr'; // ex.: 'https://formspree.io/f/xxxxxxx'
const MATERIAL_URL = 'assets/FRESTA-Mentoria.pdf';

const { useState, useEffect, useRef } = React;

function isEmail(v) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v.trim());
}

function DownloadGate() {
  const [open, setOpen] = useState(false);
  const [sending, setSending] = useState(false);
  const [done, setDone] = useState(false);
  const [nome, setNome] = useState('');
  const [email, setEmail] = useState('');
  const [consent, setConsent] = useState(false);
  const [touched, setTouched] = useState(false);
  const nomeRef = useRef(null);

  // pré-preenche se a pessoa já deixou os dados antes
  useEffect(() => {
    try {
      const last = JSON.parse(localStorage.getItem('fresta_last_lead') || 'null');
      if (last) { setNome(last.nome || ''); setEmail(last.email || ''); }
    } catch (e) {}
  }, []);

  // foco + trava de scroll + Esc quando abre
  useEffect(() => {
    if (!open) return;
    const t = setTimeout(() => { if (nomeRef.current) nomeRef.current.focus(); }, 60);
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    const onKey = (e) => { if (e.key === 'Escape') close(); };
    window.addEventListener('keydown', onKey);
    return () => {
      clearTimeout(t);
      document.body.style.overflow = prev;
      window.removeEventListener('keydown', onKey);
    };
  }, [open]);

  function close() {
    setOpen(false);
    setSending(false);
    setTouched(false);
    // mantém os campos preenchidos; reseta só o estado de "enviado" após fechar
    setTimeout(() => setDone(false), 250);
  }

  const nomeOk = nome.trim().length >= 2;
  const emailOk = isEmail(email);
  const valid = nomeOk && emailOk && consent;

  function openMaterial() {
    // download direto, mesmo domínio: evita popup/extensão bloqueando nova aba
    const a = document.createElement('a');
    a.href = MATERIAL_URL;
    a.download = 'FRESTA - Mentoria pessoal e de carreira.pdf';
    a.rel = 'noopener';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  }

  function recordLocally(lead) {
    try {
      localStorage.setItem('fresta_last_lead', JSON.stringify({ nome: lead.nome, email: lead.email }));
      const all = JSON.parse(localStorage.getItem('fresta_leads') || '[]');
      all.push(lead);
      localStorage.setItem('fresta_leads', JSON.stringify(all));
    } catch (e) {}
  }

  function handleSubmit(e) {
    e.preventDefault();
    setTouched(true);
    if (!valid) return;

    const lead = {
      nome: nome.trim(),
      email: email.trim(),
      consentimento: 'Sim, aceito receber contato da FRESTA',
      origem: 'Material da Mentoria',
      data: new Date().toLocaleString('pt-BR'),
      _subject: `Novo contato da FRESTA: ${nome.trim()}`,
    };

    // abre o material AGORA (dentro do clique) pra não ser bloqueado pelo navegador
    openMaterial();
    recordLocally(lead);
    setDone(true);

    // envia ao serviço em segundo plano (se configurado)
    if (FRESTA_LEAD_ENDPOINT) {
      setSending(true);
      fetch(FRESTA_LEAD_ENDPOINT, {
        method: 'POST',
        headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
        body: JSON.stringify(lead),
      }).catch(() => {}).finally(() => setSending(false));
    }
  }

  return (
    <React.Fragment>
      <button type="button" className="btn btn-ghost btn-lg lg-trigger" onClick={() => setOpen(true)}>
        Baixar o material <span aria-hidden="true">↓</span>
      </button>

      {open && ReactDOM.createPortal(
        <div className="lg-backdrop" onMouseDown={(e) => { if (e.target === e.currentTarget) close(); }}>
          <div className="lg-modal" role="dialog" aria-modal="true" aria-labelledby="lg-title">
            <button type="button" className="lg-close" aria-label="Fechar" onClick={close}>
              <span aria-hidden="true">×</span>
            </button>

            {!done ? (
              <form onSubmit={handleSubmit} noValidate>
                <img src="assets/symbol-gold.png" alt="" aria-hidden="true" className="lg-sym" />
                <h3 id="lg-title" className="lg-title">Receba o material</h3>
                <p className="lg-sub">Deixe seu nome e e-mail. O material abre na sequência.</p>

                <div className="lg-field">
                  <label htmlFor="lg-nome">Nome</label>
                  <input
                    id="lg-nome" ref={nomeRef} type="text" autoComplete="name"
                    className={`lg-input ${touched && !nomeOk ? 'lg-input--err' : ''}`}
                    value={nome} onChange={(e) => setNome(e.target.value)}
                    placeholder="Como podemos te chamar?"
                  />
                  {touched && !nomeOk && <span className="lg-err">Conta pra gente seu nome.</span>}
                </div>

                <div className="lg-field">
                  <label htmlFor="lg-email">E-mail</label>
                  <input
                    id="lg-email" type="email" autoComplete="email" inputMode="email"
                    className={`lg-input ${touched && !emailOk ? 'lg-input--err' : ''}`}
                    value={email} onChange={(e) => setEmail(e.target.value)}
                    placeholder="seu@email.com"
                  />
                  {touched && !emailOk && <span className="lg-err">Confere o e-mail, parece incompleto.</span>}
                </div>

                <label className={`lg-consent ${touched && !consent ? 'lg-consent--err' : ''}`}>
                  <input type="checkbox" checked={consent} onChange={(e) => setConsent(e.target.checked)} />
                  <span>Aceito receber contato da FRESTA e concordo com o uso dos meus dados para esse fim.</span>
                </label>

                <button type="submit" className="btn btn-solid btn-lg lg-submit" disabled={touched && !valid}>
                  Baixar o material <span aria-hidden="true">↓</span>
                </button>
              </form>
            ) : (
              <div className="lg-done">
                <img src="assets/symbol-gold.png" alt="" aria-hidden="true" className="lg-sym" />
                <h3 className="lg-title">Tudo certo, {nome.trim().split(' ')[0]}.</h3>
                <p className="lg-sub">
                  O download do material começou. Se não iniciar,{' '}
                  <button type="button" className="lg-relink" onClick={openMaterial}>baixe por aqui</button>.
                </p>
                <button type="button" className="btn btn-ghost btn-lg lg-submit" onClick={close}>Fechar</button>
              </div>
            )}
          </div>
        </div>,
        document.body
      )}
    </React.Fragment>
  );
}

Object.assign(window, { DownloadGate });