/* ═══════════════════════════════════════════════════════════════════
   MODAL COMPONENT
   Application form with multi-step flow
   — Máscara de telefone BR: (XX) XXXX-XXXX / (XX) 9 XXXX-XXXX
   — Validação de e-mail com regex + feedback visual em tempo real
═══════════════════════════════════════════════════════════════════ */

/* ─── Helpers de validação e máscara ─────────────────────────────── */

function maskPhone(raw) {
  const d = raw.replace(/\D/g, "").slice(0, 11);
  if (!d)       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)}`;
  /* 11 dígitos → celular: (XX) 9 XXXX-XXXX */
  return `(${d.slice(0,2)}) ${d.slice(2,3)} ${d.slice(3,7)}-${d.slice(7)}`;
}

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

function isValidPhone(v) {
  const d = v.replace(/\D/g, "");
  return d.length === 0 || d.length === 10 || d.length === 11;
}

/* ─── Campo com estado de validação ─────────────────────────────── */
function Field({ label, error, valid, children }) {
  return (
    <div className={`field ${error ? "field--error" : valid ? "field--valid" : ""}`}>
      <label>{label}</label>
      {children}
      {error && (
        <span className="field-msg field-msg--error" role="alert">{error}</span>
      )}
    </div>
  );
}

/* ─── Modal principal ────────────────────────────────────────────── */
function ApplyModal({ open, onClose }) {
  const [step, setStep] = useState(0);
  const [data, setData] = useState({
    revenue: "", challenge: "", name: "",
    company: "", role: "", site: "",
    email: "", phone: "",
  });
  /* Rastreia quais campos já foram tocados (blur) para mostrar erros */
  const [touched, setTouched] = useState({});
  const modalRef = useRef(null);

  const totalSteps = 4;

  useEffect(() => {
    if (open) {
      setStep(0);
      setTouched({});
      /* Foca o primeiro elemento interativo ao abrir */
      const tid = setTimeout(() => {
        const focusable = modalRef.current?.querySelector(
          'button:not([disabled]), input, select, textarea, [tabindex]:not([tabindex="-1"])'
        );
        focusable?.focus();
      }, 80);
      return () => clearTimeout(tid);
    }
  }, [open]);

  /* Escape + focus trap */
  useEffect(() => {
    if (!open) return;
    const handleKey = (e) => {
      if (e.key === "Escape") { onClose(); return; }
      if (e.key !== "Tab" || !modalRef.current) return;
      const focusable = Array.from(
        modalRef.current.querySelectorAll(
          'button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
        )
      );
      if (!focusable.length) return;
      const first = focusable[0];
      const last  = focusable[focusable.length - 1];
      if (e.shiftKey) {
        if (document.activeElement === first) { e.preventDefault(); last.focus(); }
      } else {
        if (document.activeElement === last)  { e.preventDefault(); first.focus(); }
      }
    };
    document.addEventListener("keydown", handleKey);
    return () => document.removeEventListener("keydown", handleKey);
  }, [open, onClose]);

  const update = (k, v) => setData((d) => ({ ...d, [k]: v }));
  const touch  = (k)    => setTouched((t) => ({ ...t, [k]: true }));

  /* Máscara de telefone aplicada no onChange */
  const handlePhone = (raw) => update("phone", maskPhone(raw));

  /* ── Erros do step 3 ── */
  const emailError = (() => {
    if (!touched.email) return null;
    if (!data.email.trim()) return "E-mail é obrigatório.";
    if (!isValidEmail(data.email)) return "Informe um e-mail válido (ex: nome@empresa.com).";
    return null;
  })();

  const phoneError = (() => {
    if (!touched.phone || !data.phone) return null;
    if (!isValidPhone(data.phone)) return "Telefone incompleto. Ex: (11) 9 8765-4321.";
    return null;
  })();

  const canAdvance = () => {
    if (step === 0) return !!data.revenue;
    if (step === 1) return data.challenge.trim().length > 10;
    if (step === 2) return data.name.trim() && data.company.trim() && data.role;
    if (step === 3) return isValidEmail(data.email) && isValidPhone(data.phone);
    return true;
  };

  /* Ao tentar avançar no step 3, marca todos os campos como tocados */
  const handleNext = () => {
    if (step === 3) {
      setTouched((t) => ({ ...t, email: true, phone: !!data.phone }));
    }
    if (canAdvance()) setStep((s) => Math.min(totalSteps, s + 1));
  };

  const back = () => setStep((s) => Math.max(0, s - 1));

  return (
    <div
      className={`modal-overlay ${open ? "open" : ""}`}
      role="dialog"
      aria-modal="true"
      aria-labelledby="apply-modal-title"
      aria-hidden={!open}
      onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
    >
      <div className="modal" ref={modalRef} data-screen-label="Modal Aplicação">
        {step < totalSteps && (
          <>
            <div className="modal-head">
              <div>
                <div className="step-tag" aria-hidden="true">
                  Etapa {String(step + 1).padStart(2, "0")} / 0{totalSteps}
                </div>
                <h3 id="apply-modal-title">
                  {[
                    "Sobre sua operação atual",
                    "O maior desafio hoje",
                    "Quem está aplicando",
                    "Como podemos te contatar",
                  ][step]}
                </h3>
              </div>
              <button
                className="modal-close"
                onClick={onClose}
                aria-label="Fechar janela de aplicação"
              >×</button>
            </div>

            <div className="modal-body">

              {/* ── Step 0: Faturamento ── */}
              {step === 0 && (
                <div className="field">
                  <label id="revenue-label">Faturamento médio mensal</label>
                  <div
                    className="radio-group"
                    role="radiogroup"
                    aria-labelledby="revenue-label"
                  >
                    {[
                      "Abaixo de R$ 100k/mês",
                      "R$ 100k — R$ 500k/mês",
                      "R$ 500k — R$ 1M/mês",
                      "R$ 1M — R$ 5M/mês",
                      "Acima de R$ 5M/mês",
                    ].map((opt) => (
                      <div
                        key={opt}
                        className={`radio-row ${data.revenue === opt ? "sel" : ""}`}
                        role="radio"
                        aria-checked={data.revenue === opt}
                        tabIndex={0}
                        onClick={() => update("revenue", opt)}
                        onKeyDown={(e) => {
                          if (e.key === "Enter" || e.key === " ") {
                            e.preventDefault();
                            update("revenue", opt);
                          }
                        }}
                      >
                        <div className="dot" aria-hidden="true"></div>
                        <span>{opt}</span>
                      </div>
                    ))}
                  </div>
                </div>
              )}

              {/* ── Step 1: Desafio ── */}
              {step === 1 && (
                <>
                  <div className="field">
                    <label htmlFor="field-challenge">Descreva o maior gargalo do seu negócio hoje</label>
                    <textarea
                      id="field-challenge"
                      value={data.challenge}
                      onChange={(e) => update("challenge", e.target.value)}
                      placeholder="Ex: temos um produto superior, mas o CAC está fora de controle..."
                      rows={5}
                    />
                  </div>
                  <p className="small" style={{ marginTop: "-8px" }}>
                    Quanto mais específico, melhor o diagnóstico na sessão.
                  </p>
                </>
              )}

              {/* ── Step 2: Identidade ── */}
              {step === 2 && (
                <>
                  <div className="field">
                    <label htmlFor="field-name">Nome completo</label>
                    <input
                      id="field-name"
                      autoComplete="name"
                      value={data.name}
                      onChange={(e) => update("name", e.target.value)}
                      placeholder="Seu nome"
                    />
                  </div>
                  <div className="field">
                    <label htmlFor="field-company">Empresa</label>
                    <input
                      id="field-company"
                      autoComplete="organization"
                      value={data.company}
                      onChange={(e) => update("company", e.target.value)}
                      placeholder="Razão social ou marca"
                    />
                  </div>
                  <div className="field">
                    <label htmlFor="field-role">Cargo</label>
                    <select
                      id="field-role"
                      value={data.role}
                      onChange={(e) => update("role", e.target.value)}
                    >
                      <option value="">Selecione…</option>
                      <option value="CEO/Fundador">CEO / Fundador(a)</option>
                      <option value="Diretor">Diretor(a)</option>
                      <option value="Sócio">Sócio(a)</option>
                      <option value="C-Level">C-Level</option>
                      <option value="Outro">Outro</option>
                    </select>
                  </div>
                  <div className="field" style={{ marginBottom: 0 }}>
                    <label htmlFor="field-site">URL do site (opcional)</label>
                    <input
                      id="field-site"
                      type="url"
                      inputMode="url"
                      autoComplete="url"
                      value={data.site}
                      onChange={(e) => update("site", e.target.value)}
                      placeholder="https://"
                    />
                  </div>
                </>
              )}

              {/* ── Step 3: Contato — validação + máscara ── */}
              {step === 3 && (
                <>
                  <Field
                    label="E-mail corporativo"
                    error={emailError}
                    valid={!emailError && touched.email && isValidEmail(data.email)}
                  >
                    <div className="input-wrap">
                      <input
                        type="email"
                        inputMode="email"
                        autoComplete="email"
                        value={data.email}
                        onChange={(e) => update("email", e.target.value.trim())}
                        onBlur={() => touch("email")}
                        placeholder="nome@empresa.com"
                        aria-invalid={!!emailError}
                        aria-describedby={emailError ? "email-err" : undefined}
                      />
                      {touched.email && isValidEmail(data.email) && (
                        <span className="input-check" aria-hidden="true">✓</span>
                      )}
                    </div>
                  </Field>

                  <Field
                    label="Telefone / WhatsApp (opcional)"
                    error={phoneError}
                    valid={!phoneError && touched.phone && data.phone && isValidPhone(data.phone)}
                    style={{ marginBottom: 0 }}
                  >
                    <div className="input-wrap">
                      <input
                        type="tel"
                        inputMode="numeric"
                        autoComplete="tel"
                        value={data.phone}
                        onChange={(e) => handlePhone(e.target.value)}
                        onBlur={() => touch("phone")}
                        placeholder="(11) 9 8765-4321"
                        maxLength={16}
                        aria-invalid={!!phoneError}
                      />
                      {touched.phone && data.phone && isValidPhone(data.phone) && (
                        <span className="input-check" aria-hidden="true">✓</span>
                      )}
                    </div>
                  </Field>

                  <p className="small" style={{ marginTop: "20px" }}>
                    Suas informações são confidenciais. Em até{" "}
                    <em style={{ color: "var(--gold)", fontStyle: "normal" }}>48h úteis</em>,
                    um de nossos sócios responde se há fit.
                  </p>
                </>
              )}
            </div>

            <div className="modal-foot">
              <div style={{ display: "flex", alignItems: "center", gap: "24px" }}>
                {step > 0
                  ? (
                    <button
                      className="modal-back"
                      onClick={back}
                      aria-label={`Voltar para etapa ${step}`}
                    >← Voltar</button>
                  )
                  : <div style={{ width: 60 }}></div>
                }
                <div
                  className="progress"
                  role="progressbar"
                  aria-label={`Etapa ${step + 1} de ${totalSteps}`}
                  aria-valuenow={step + 1}
                  aria-valuemin={1}
                  aria-valuemax={totalSteps}
                >
                  {Array.from({ length: totalSteps }).map((_, i) => (
                    <div key={i} className={`pip ${i <= step ? "done" : ""}`}></div>
                  ))}
                </div>
              </div>
              <button
                className="btn"
                disabled={!canAdvance()}
                onClick={handleNext}
                aria-label={step === totalSteps - 1 ? "Enviar aplicação" : `Continuar para etapa ${step + 2}`}
              >
                {step === totalSteps - 1 ? "Enviar aplicação" : "Continuar"}{" "}
                <span className="arrow" aria-hidden="true">→</span>
              </button>
            </div>
          </>
        )}

        {/* ── Sucesso ── */}
        {step === totalSteps && (
          <>
            <div className="modal-head" style={{ justifyContent: "flex-end" }}>
              <button
                className="modal-close"
                onClick={onClose}
                aria-label="Fechar janela de confirmação"
              >×</button>
            </div>
            <div className="modal-body">
              <div className="success" role="status" aria-live="polite">
                <div className="check" aria-hidden="true"></div>
                <h3 id="apply-modal-title">Aplicação recebida.</h3>
                <p className="body" style={{ marginTop: "16px", maxWidth: "460px", margin: "16px auto 0" }}>
                  Obrigado,{" "}
                  <em style={{ color: "var(--gold)", fontStyle: "normal" }}>
                    {data.name.split(" ")[0] || "estrategista"}
                  </em>
                  . Se houver fit com nossa metodologia, retornaremos em até{" "}
                  <em style={{ color: "var(--gold)", fontStyle: "normal" }}>48h úteis</em>.
                </p>
                <div style={{
                  marginTop: "32px",
                  fontFamily: "var(--mono)", fontSize: "10px",
                  letterSpacing: "0.22em", color: "var(--slate-2)", textTransform: "uppercase",
                }}>
                  Ref · AGP-{Math.floor(Math.random() * 9000 + 1000)}-{new Date().getFullYear()}
                </div>
                <button className="btn ghost" onClick={onClose} style={{ marginTop: "32px" }}>
                  Fechar
                </button>
              </div>
            </div>
          </>
        )}
      </div>
    </div>
  );
}