/* =========================================================
   Funnel Labs IA — Form Steps + Data
   ========================================================= */
/* Aliases curtos pra usar nesse arquivo. (Header/Hero/etc já são globais via components.jsx;
   useEffect/Fragment também). */
const FF = window.FormField;
const Sel = window.Select;
const RCG = window.RadioCardGroup;
const CG = window.ChipGroup;
const CN = window.ContextNote;
const PC = window.PlanCard;

/* ---------- DATA ---------- */
const OPTIONS = {
  nivelIA: [
    { value: "basico", label: "Básico", sub: "Uso eventual, prompts simples" },
    { value: "intermediario", label: "Intermediário", sub: "Uso diário, prompts estruturados" },
    { value: "avancado", label: "Avançado", sub: "Automações, agentes, pipelines" },
  ],
  area: [
    { value: "estrategista", label: "Estrategista de Marketing" },
    { value: "infoprodutor", label: "Infoprodutor / Expert" },
    { value: "copywriter", label: "Copywriter" },
    { value: "trafego", label: "Gestor de Tráfego" },
    { value: "automacao", label: "Gestor de Automação" },
    { value: "designer", label: "Designer" },
    { value: "webdesigner", label: "Webdesigner / Dev" },
    { value: "offline", label: "Empresário Offline" },
    { value: "ecommerce", label: "E-commerce" },
    { value: "agencia", label: "Agência" },
    { value: "outros", label: "Outros" },
  ],
  faturamento: [
    { value: "ate-100k", label: "Até R$ 100k / ano" },
    { value: "100k-500k", label: "R$ 100k – R$ 500k / ano" },
    { value: "500k-1m", label: "R$ 500k – R$ 1M / ano" },
    { value: "1m-3m", label: "R$ 1M – R$ 3M / ano" },
    { value: "3m-5m", label: "R$ 3M – R$ 5M / ano" },
    { value: "5m+", label: "Acima de R$ 5M / ano", tag: "Top" },
  ],
  tempo: [
    { value: "ate-1", label: "< 1 ano" },
    { value: "1-3", label: "1 – 3 anos" },
    { value: "3-7", label: "3 – 7 anos" },
    { value: "7+", label: "7+ anos" },
  ],
  ias: [
    { value: "claude", label: "Claude" },
    { value: "gpt", label: "ChatGPT / GPT" },
    { value: "gemini", label: "Gemini" },
    { value: "perplexity", label: "Perplexity" },
    { value: "manus", label: "Manus" },
    { value: "n8n", label: "n8n / Make" },
    { value: "outros", label: "Outros" },
  ],
  atribuicao: [
    { value: "indicacao", label: "Indicação de aluno ou cliente" },
    { value: "ig-anthony", label: "Instagram do Anthony" },
    { value: "ig-andre", label: "Instagram do André Cia" },
    { value: "comunidade", label: "Comunidade COPY S/A" },
    { value: "youtube", label: "YouTube" },
    { value: "evento", label: "Evento presencial" },
    { value: "outros", label: "Outros" },
  ],
  caixa: [
    { value: "agora", label: "Sim, agora" },
    { value: "30d", label: "Nos próximos 30 dias" },
    { value: "60-90d", label: "Preciso planejar 60–90 dias" },
    { value: "nao-clareza", label: "Ainda não tenho clareza" },
  ],
};

const PLANS = [
  {
    id: "acelerador",
    name: "Acelerador",
    duration: "6 meses",
    priceCash: "15.000",
    priceInstall: "18.000",
    installments: 6,
    benefits: [
      "12 encontros ao vivo (2x/mês)",
      "Onboarding individual com fundadores",
      "37 agentes de I.A configurados (3 times)",
      "18 templates de funil prontos",
      "Skills e comandos exclusivos COPY S/A",
      "Grupo de WhatsApp exclusivo",
    ],
  },
  {
    id: "parceiro",
    name: "Parceiro",
    duration: "12 meses",
    priceCash: "22.000",
    priceInstall: "25.000",
    installments: 12,
    benefits: [
      "24 encontros ao vivo (2x/mês)",
      "Onboarding individual com fundadores",
      "37 agentes de I.A configurados (3 times)",
      "18 templates de funil prontos",
      "Suporte prioritário",
      "Botão de emergência (1/semestre)",
    ],
  },
];

/* ---------- STEP 1 — Identificação ---------- */
function Step1({ data, set, errors }) {
  return (
    <section className="step" data-screen-label="01 Identificação">
      <div className="step__head">
        <div className="step__num">
          <span className="digit">01</span>
          <span className="step__num__lbl">Identificação</span>
        </div>
        <div>
          <h2 className="step__title">Quem você é.</h2>
          <p className="step__lead">
            Três dados de contato direto. Ficam apenas com a banca de seleção — Anthony, André Cia e o time de operação da COPY S/A.
          </p>
        </div>
      </div>

      <div className="step__body">
        <FF
          id="nome"
          label="Nome completo"
          required
          value={data.nome}
          onChange={(v) => set("nome", v)}
          error={errors.nome}
          autoComplete="name"
        />
        <FF
          id="email"
          label="E-mail principal"
          type="email"
          required
          value={data.email}
          onChange={(v) => set("email", v)}
          error={errors.email}
          autoComplete="email"
          inputMode="email"
        />
        <FF
          id="whatsapp"
          label="WhatsApp (com DDD)"
          type="tel"
          required
          value={data.whatsapp}
          onChange={(v) => set("whatsapp", maskPhone(v))}
          error={errors.whatsapp}
          autoComplete="tel"
          inputMode="tel"
          hint="É por aqui que Anthony ou André respondem em até 48h úteis."
          maxLength={16}
        />
      </div>
    </section>
  );
}

/* ---------- STEP 2 — Qualificação ---------- */
function Step2({ data, set, errors, ctxShown, markCtxShown }) {
  // microcopy contextual rules (max 2 total in form)
  const showFatCtx = data.faturamento === "5m+" && (ctxShown.includes("fat-5m") || !ctxLimitReached(ctxShown));
  const showIACtx = data.nivelIA === "avancado" && !data.faturamento && !ctxLimitReached(ctxShown);

  useEffect(() => {
    if (data.faturamento === "5m+" && !ctxShown.includes("fat-5m") && !ctxLimitReached(ctxShown)) {
      markCtxShown("fat-5m");
    }
    if (data.nivelIA === "avancado" && !data.faturamento && !ctxShown.includes("ia-adv") && !ctxLimitReached(ctxShown)) {
      markCtxShown("ia-adv");
    }
  }, [data.faturamento, data.nivelIA]);

  return (
    <section className="step" data-screen-label="02 Qualificação">
      <div className="step__head">
        <div className="step__num">
          <span className="digit">02</span>
          <span className="step__num__lbl">Qualificação</span>
        </div>
        <div>
          <h2 className="step__title">Onde você opera.</h2>
          <p className="step__lead">
            A banca lê estas respostas para calibrar a conversa. Não existe resposta "certa" — existe a real.
          </p>
        </div>
      </div>

      <div className="step__body">
        <div>
          <div className="fieldset-label">Nível de uso de I.A <span className="req">*</span></div>
          <RCG
            name="nivelIA"
            options={OPTIONS.nivelIA}
            value={data.nivelIA}
            onChange={(v) => set("nivelIA", v)}
            cols={3}
          />
          <CN visible={ctxShown.includes("ia-adv")} mark="// Nota da banca">
            Avançado de verdade. O programa foi desenhado para destravar este perfil mais rápido.
          </CN>
        </div>

        <Sel
          id="area"
          label="Área de atuação principal"
          required
          options={OPTIONS.area}
          value={data.area}
          onChange={(v) => set("area", v)}
          error={errors.area}
        />

        <Sel
          id="faturamento"
          label="Faturamento médio anual"
          required
          options={OPTIONS.faturamento}
          value={data.faturamento}
          onChange={(v) => set("faturamento", v)}
          error={errors.faturamento}
        />
        <CN visible={ctxShown.includes("fat-5m")} mark="// Nota da banca">
          Operação acima de R$ 5M. O programa foi desenhado exatamente para esse porte — agência inteira em um prompt.
        </CN>

        <div>
          <div className="fieldset-label">Tempo no marketing digital <span className="req">*</span></div>
          <RCG
            name="tempo"
            options={OPTIONS.tempo}
            value={data.tempo}
            onChange={(v) => set("tempo", v)}
            cols={4}
          />
        </div>

        <div>
          <div className="fieldset-label">I.A's que você já usa (selecione todas)</div>
          <CG
            options={OPTIONS.ias}
            value={data.ias}
            onChange={(v) => set("ias", v)}
          />
        </div>
      </div>
    </section>
  );
}

function ctxLimitReached(list) { return list.length >= 2; }

/* ---------- STEP 3 — Comprometimento ---------- */
function Step3({ data, set, errors }) {
  return (
    <section className="step" data-screen-label="03 Comprometimento">
      <div className="step__head">
        <div className="step__num">
          <span className="digit">03</span>
          <span className="step__num__lbl">Comprometimento</span>
        </div>
        <div>
          <h2 className="step__title">Duas perguntas <em>que pesam.</em></h2>
          <p className="step__lead">
            Estas são as respostas que Anthony e André leem com mais atenção. Quem chega aqui com clareza acelera a entrada. Quem chega genérico, espera.
          </p>
        </div>
      </div>

      <div className="step__body">
        <FF
          id="projeto"
          label="Que projeto exato você quer ter rodando até o final do ciclo?"
          multiline
          required
          value={data.projeto}
          onChange={(v) => set("projeto", v)}
          error={errors.projeto}
          showCounterFrom={150}
          maxLength={1200}
          hint="Quanto mais específico — produto, audiência, prazo, ticket alvo — melhor a avaliação."
        />

        <FF
          id="renovar"
          label="O que precisa acontecer durante o ciclo para você dizer que valeu a pena e renovar?"
          multiline
          required
          value={data.renovar}
          onChange={(v) => set("renovar", v)}
          error={errors.renovar}
          showCounterFrom={150}
          maxLength={1200}
          hint="Métrica, marco, resultado. O que define sucesso pra você neste programa."
        />
      </div>
    </section>
  );
}

/* ---------- STEP 4 — Investimento + Atribuição + Envio ---------- */
function Step4({ data, set, errors, allData, isSubmitting, submitError, onSubmit, onToggleSummary, summaryOpen }) {
  const showIndicacao = data.atribuicao === "indicacao";

  return (
    <section className="step" data-screen-label="04 Investimento e envio">
      <div className="step__head">
        <div className="step__num">
          <span className="digit">04</span>
          <span className="step__num__lbl">Investimento e envio</span>
        </div>
        <div>
          <h2 className="step__title">Plano, contexto, <em>envio.</em></h2>
          <p className="step__lead">
            Escolha o plano que se alinha ao seu projeto. Se houver match na avaliação, a banca confirma valores e formas de pagamento na conversa.
          </p>
        </div>
      </div>

      <div className="step__body" style={{maxWidth: 'none'}}>
        {/* Plans */}
        <div>
          <div className="fieldset-label">Plano de interesse <span className="req">*</span></div>
          <div className={"plans " + (data.plano ? "has-selection" : "")}>
            {PLANS.map(p => (
              <PC key={p.id} plan={p} selected={data.plano === p.id} onSelect={(id) => set("plano", id)} />
            ))}
          </div>
          {errors.plano && <div className="field__error is-visible" style={{opacity:1, marginTop:14}}>{errors.plano}</div>}
          <button
            type="button"
            className="plan__alt"
            onClick={() => set("plano", "conversar")}
            style={{ color: data.plano === "conversar" ? "var(--accent)" : "" }}
          >
            Quero conversar sobre outras formas de pagamento
          </button>
        </div>

        {/* Atribuição */}
        <div style={{maxWidth: 'var(--form-max)'}}>
          <Sel
            id="atribuicao"
            label="Como você chegou até aqui?"
            required
            options={OPTIONS.atribuicao}
            value={data.atribuicao}
            onChange={(v) => set("atribuicao", v)}
            error={errors.atribuicao}
          />
        </div>

        {showIndicacao && (
          <div style={{maxWidth: 'var(--form-max)'}} className="step-enter">
            <FF
              id="indicacao"
              label="Quem indicou? (nome ou @)"
              value={data.indicacao}
              onChange={(v) => set("indicacao", v)}
              required
              error={errors.indicacao}
            />
          </div>
        )}

        {/* Caixa */}
        <div style={{maxWidth: 'var(--form-max)'}}>
          <div className="fieldset-label">Caixa disponível para iniciar este ciclo <span className="req">*</span></div>
          <RCG
            name="caixa"
            options={OPTIONS.caixa}
            value={data.caixa}
            onChange={(v) => set("caixa", v)}
            cols={2}
          />
          {errors.caixa && <div className="field__error" style={{opacity:1, marginTop:14}}>{errors.caixa}</div>}
        </div>

        {/* Summary + Submit */}
        <div className="submit-block">
          <ApplicationSummary
            data={allData}
            open={summaryOpen}
            onToggle={onToggleSummary}
          />

          <div className="lgpd">
            <strong>LGPD.</strong> Ao enviar, você concorda que seus dados sejam usados <strong>apenas</strong> para esta avaliação. Nada é compartilhado com terceiros. Você pode pedir exclusão dos dados a qualquer momento por <span style={{color:"var(--accent)"}}>contato@copysa.com.br</span>.
          </div>

          {/* Honeypot */}
          <input
            type="text"
            name="company_url"
            tabIndex={-1}
            autoComplete="off"
            value={data.company_url || ""}
            onChange={(e) => set("company_url", e.target.value)}
            style={{
              position: "absolute",
              left: "-9999px",
              opacity: 0,
              pointerEvents: "none",
              height: 0,
              width: 0,
            }}
            aria-hidden="true"
          />

          <button
            type="button"
            className={"btn-submit " + (isSubmitting ? "is-loading" : "")}
            onClick={onSubmit}
            disabled={isSubmitting}
          >
            {isSubmitting ? (
              <Fragment>
                <span className="spinner" />
                <span>Enviando para a banca…</span>
              </Fragment>
            ) : (
              <Fragment>
                <span>Enviar aplicação para a banca</span>
                <span className="btn-submit__arrow">→</span>
              </Fragment>
            )}
          </button>

          {submitError && (
            <div className="field__error" style={{opacity:1, marginTop:14, justifyContent:"center"}} role="alert">
              {submitError}
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

/* ---------- Application Summary ---------- */
function ApplicationSummary({ data, open, onToggle }) {
  const lookup = (arr, val) => (arr.find(o => o.value === val) || {}).label || "";
  const rows = [
    ["Nome", data.nome],
    ["E-mail", data.email],
    ["WhatsApp", data.whatsapp],
    ["Nível de I.A", lookup(OPTIONS.nivelIA, data.nivelIA)],
    ["Área", lookup(OPTIONS.area, data.area)],
    ["Faturamento anual", lookup(OPTIONS.faturamento, data.faturamento)],
    ["Tempo no marketing", lookup(OPTIONS.tempo, data.tempo)],
    ["I.A's em uso", (data.ias || []).map(v => lookup(OPTIONS.ias, v)).filter(Boolean).join(", ")],
    ["Projeto até o fim do ciclo", data.projeto],
    ["O que precisa acontecer", data.renovar],
    ["Plano de interesse",
      data.plano === "conversar"
        ? "Quer conversar sobre outras formas de pagamento"
        : data.plano === "acelerador" ? "Acelerador — R$ 15.000 à vista / R$ 18.000 em 6x"
        : data.plano === "parceiro"   ? "Parceiro — R$ 22.000 à vista / R$ 25.000 em 12x"
        : ""],
    ["Como chegou", lookup(OPTIONS.atribuicao, data.atribuicao) + (data.atribuicao === "indicacao" && data.indicacao ? ` — ${data.indicacao}` : "")],
    ["Caixa disponível", lookup(OPTIONS.caixa, data.caixa)],
  ];
  return (
    <div className={"summary " + (open ? "is-open" : "")}>
      <button type="button" className="summary__head" onClick={onToggle}>
        <span className="marker">
          {open ? "Ocultar resumo da aplicação" : "Conferir minha aplicação"}
        </span>
        <span className="summary__caret">
          <svg width="12" height="8" viewBox="0 0 12 8" fill="none"><path d="M1 1.5L6 6.5L11 1.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
        </span>
      </button>
      <div className="summary__body">
        <div className="summary__list">
          {rows.map(([k, v]) => (
            <div className="summary__row" key={k}>
              <div className="summary__key">{k}</div>
              <div className={"summary__val " + (!v ? "is-empty" : "")}>{v || "— não preenchido —"}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ---------- Phone mask ---------- */
function maskPhone(v) {
  const d = String(v || "").replace(/\D/g, "").slice(0, 11);
  if (d.length <= 2) return d.length ? `(${d}` : 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)}`;
}

/* ---------- Export to window ---------- */
Object.assign(window, {
  Step1, Step2, Step3, Step4, OPTIONS, PLANS, maskPhone,
});