/**
 * DropdownUp — select customizado que SEMPRE abre pra cima.
 * Substitui <select> nativo onde a direção do dropdown precisa ser controlada.
 */
const DropdownUp = ({ label, value, onChange, options, placeholder = 'Selecione' }) => {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);

  // Fecha clicando fora
  React.useEffect(() => {
    if (!open) return;
    const onClick = (e) => {
      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
    };
    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
    document.addEventListener('mousedown', onClick);
    document.addEventListener('keydown', onKey);
    return () => {
      document.removeEventListener('mousedown', onClick);
      document.removeEventListener('keydown', onKey);
    };
  }, [open]);

  const selected = options.find((o) => o.value === value);

  return (
    <div className="demo-field" ref={ref}>
      <span>{label}</span>
      <div className={`dropdown-up ${open ? 'open' : ''}`}>
        <button
          type="button"
          className="dropdown-up-trigger"
          onClick={() => setOpen((v) => !v)}
          aria-haspopup="listbox"
          aria-expanded={open}
        >
          <span className={selected ? '' : 'placeholder'}>
            {selected ? selected.label : placeholder}
          </span>
          <span className="dropdown-up-arrow" aria-hidden="true">▾</span>
        </button>
        {open && (
          <ul className="dropdown-up-menu" role="listbox">
            {options.map((opt) => (
              <li
                key={opt.value}
                role="option"
                aria-selected={opt.value === value}
                className={opt.value === value ? 'selected' : ''}
                onClick={() => { onChange(opt.value); setOpen(false); }}
              >
                {opt.label}
              </li>
            ))}
          </ul>
        )}
      </div>
    </div>
  );
};

window.DropdownUp = DropdownUp;

/**
 * DemoFormModal — formulário de contato que abre ao clicar em "Quero conhecer esta IA".
 * Campos: nome completo, WhatsApp, e-mail.
 *
 * Trigger: window.dispatchEvent(new CustomEvent('open-demo-modal'))
 * Fechar:  ESC, click no overlay, ou no botão X.
 *
 * ===================== WEBHOOK =====================
 * Ao enviar, faz POST (JSON) com os dados do form + metadata para o seu endpoint.
 * Defina a URL de UMA destas formas:
 *   1) Cole a URL na constante DEMO_WEBHOOK_URL abaixo, OU
 *   2) Sem editar este arquivo — no index.html, antes dos <script>, adicione:
 *        <script>window.CONVERSAPP_WEBHOOK_URL = "https://SEU-ENDPOINT";</script>
 * Compatível com Zapier, Make, n8n, Pipedream ou backend próprio.
 * ===================================================
 */
const DEMO_WEBHOOK_URL = ''; // <-- COLE AQUI A URL DO SEU WEBHOOK

const DemoFormModal = () => {
  const [open, setOpen] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [submitted, setSubmitted] = React.useState(false);
  const [error, setError] = React.useState(null);
  const [form, setForm] = React.useState({
    nome: '',
    whatsapp: '',
    email: '',
    areaDireito: '',
    leadsPorDia: '',
  });

  // Abre via custom event global
  React.useEffect(() => {
    const onOpen = () => { setOpen(true); setSubmitted(false); };
    window.addEventListener('open-demo-modal', onOpen);
    return () => window.removeEventListener('open-demo-modal', onOpen);
  }, []);

  // Fecha com ESC + bloqueia scroll do body quando aberto
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
    document.body.style.overflow = 'hidden';
    window.addEventListener('keydown', onKey);
    return () => {
      document.body.style.overflow = '';
      window.removeEventListener('keydown', onKey);
    };
  }, [open]);

  const updateField = (field, value) => {
    setForm((prev) => ({ ...prev, [field]: value }));
  };

  // Máscara progressiva (00) 0000-0000 / (00) 00000-0000 conforme digita
  const maskWhatsapp = (raw) => {
    const d = (raw || '').replace(/\D/g, '').slice(0, 11);
    if (d.length === 0) return '';
    if (d.length <= 2) return `(${d}`;
    if (d.length <= 6) return `(${d.slice(0, 2)}) ${d.slice(2)}`;
    if (d.length <= 10) return `(${d.slice(0, 2)}) ${d.slice(2, 6)}-${d.slice(6)}`;
    return `(${d.slice(0, 2)}) ${d.slice(2, 7)}-${d.slice(7, 11)}`;
  };

  // Valida WhatsApp brasileiro: DDD válido (11–99) + 8 ou 9 dígitos.
  // Celular novo (móvel) sempre começa com 9; fixo aceita 8 dígitos.
  const isValidWhatsapp = (raw) => {
    const d = (raw || '').replace(/\D/g, '');
    if (d.length < 10 || d.length > 11) return false;
    const ddd = parseInt(d.slice(0, 2), 10);
    if (ddd < 11 || ddd > 99) return false;
    // 11 dígitos → 3º dígito deve ser 9 (celular)
    if (d.length === 11 && d[2] !== '9') return false;
    return true;
  };

  const onSubmit = async (e) => {
    e.preventDefault();
    setSubmitting(true);
    setError(null);

    // Validação client-side antes de enviar
    if (!isValidWhatsapp(form.whatsapp)) {
      setError('Informe um WhatsApp válido com DDD — ex.: (11) 99999-9999.');
      setSubmitting(false);
      return;
    }

    // Payload enviado pro webhook — campos do form + metadata útil
    const payload = {
      ...form,
      origem: 'landing-conversapp',
      url: typeof window !== 'undefined' ? window.location.href : '',
      referrer: typeof document !== 'undefined' ? document.referrer : '',
      userAgent: typeof navigator !== 'undefined' ? navigator.userAgent : '',
      enviadoEm: new Date().toISOString(),
    };

    // URL do webhook: window.CONVERSAPP_WEBHOOK_URL tem prioridade sobre a constante.
    const webhookUrl =
      (typeof window !== 'undefined' && window.CONVERSAPP_WEBHOOK_URL) || DEMO_WEBHOOK_URL;

    if (!webhookUrl) {
      console.warn(
        '[DemoFormModal] Nenhum webhook configurado. Defina DEMO_WEBHOOK_URL ' +
        'ou window.CONVERSAPP_WEBHOOK_URL. Payload que seria enviado:', payload
      );
      setSubmitted(true);
      setSubmitting(false);
      return;
    }

    try {
      const res = await fetch(webhookUrl, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      setSubmitted(true);
    } catch (err) {
      console.error('[DemoFormModal] erro no envio:', err);
      setError('Não foi possível enviar agora. Tenta de novo em instantes ou nos chama no WhatsApp.');
    } finally {
      setSubmitting(false);
    }
  };

  if (!open) return null;

  return (
    <div
      className="demo-modal-overlay"
      onClick={(e) => { if (e.target === e.currentTarget) setOpen(false); }}
      role="dialog"
      aria-modal="true"
      aria-labelledby="demo-modal-title"
    >
      <div className="demo-modal">
        <button
          type="button"
          className="demo-modal-close"
          onClick={() => setOpen(false)}
          aria-label="Fechar"
        >
          ×
        </button>

        {!submitted ? (
          <>
            <div className="demo-modal-head">
              <div className="eyebrow"><span className="dot"></span>QUERO CONHECER A IA</div>
              <h3 id="demo-modal-title">Deixe seus dados de contato.</h3>
              <p>Em até 24h um especialista entra em contato no seu WhatsApp pra te mostrar a IA funcionando.</p>
            </div>

            <form className="demo-form" onSubmit={onSubmit}>
              <label className="demo-field">
                <span>Nome completo</span>
                <input
                  type="text"
                  required
                  autoComplete="name"
                  value={form.nome}
                  onChange={(e) => updateField('nome', e.target.value)}
                  placeholder="Dr(a). Seu nome"
                />
              </label>

              <label className="demo-field">
                <span>WhatsApp</span>
                <input
                  type="tel"
                  required
                  autoComplete="tel"
                  inputMode="tel"
                  value={form.whatsapp}
                  onChange={(e) => updateField('whatsapp', maskWhatsapp(e.target.value))}
                  placeholder="(11) 99999-9999"
                  maxLength={16}
                  pattern="\(\d{2}\)\s\d{4,5}-\d{4}"
                  title="Use o formato (DDD) número — ex.: (11) 99999-9999"
                />
              </label>

              <label className="demo-field">
                <span>E-mail profissional</span>
                <input
                  type="email"
                  required
                  autoComplete="email"
                  inputMode="email"
                  value={form.email}
                  onChange={(e) => updateField('email', e.target.value)}
                  placeholder="voce@email.com"
                />
              </label>

              <label className="demo-field">
                <span>Área do direito</span>
                <input
                  type="text"
                  required
                  value={form.areaDireito}
                  onChange={(e) => updateField('areaDireito', e.target.value)}
                  placeholder="Ex.: Previdenciário, Trabalhista, Família..."
                />
              </label>

              <label className="demo-field">
                <span>Volume de leads por dia</span>
                <input
                  type="text"
                  required
                  inputMode="numeric"
                  value={form.leadsPorDia}
                  onChange={(e) => updateField('leadsPorDia', e.target.value)}
                  placeholder="Ex.: 20 leads/dia"
                />
              </label>

              <button
                type="submit"
                className="btn btn-primary demo-submit"
                disabled={submitting}
              >
                {submitting ? 'Enviando...' : 'Quero conhecer esta IA'}
                {!submitting && <Icon.Arrow/>}
              </button>

              {error && (
                <p className="demo-error" role="alert">
                  {error}
                </p>
              )}

              <p className="demo-disclaimer">
                Seus dados ficam só com a gente. Em conformidade com a LGPD.
              </p>
            </form>
          </>
        ) : (
          <div className="demo-success">
            <div className="demo-success-icon"><Icon.Check size={32}/></div>
            <h3>Recebido!</h3>
            <p>Em até 24h um especialista entra em contato no seu WhatsApp <strong>{form.whatsapp}</strong> pra marcar a demonstração.</p>
            <button
              type="button"
              className="btn btn-ghost"
              onClick={() => setOpen(false)}
            >
              Fechar
            </button>
          </div>
        )}
      </div>
    </div>
  );
};

window.DemoFormModal = DemoFormModal;