/* ============================================================
   app.jsx — flow controller + intro + final report
   ============================================================ */
const { useState, useEffect, useRef, useCallback } = React;

const LS_A = "p2_onb_answers_v1";
const LS_S = "p2_onb_step_v1";
const LS_SUB = "p2_admin_submissions_v1";

function loadLS(key, fallback) {
  try { const v = localStorage.getItem(key); return v ? JSON.parse(v) : fallback; }
  catch { return fallback; }
}

function saveSubmission(answers) {
  const list = loadLS(LS_SUB, []);
  const id = "sub_" + Date.now().toString(36);
  const entry = {
    id,
    submittedAt: new Date().toISOString(),
    nome_empresa: (answers.nome_empresa || "Sem nome").trim(),
    responsavel: (answers.responsavel || "").trim(),
    answers,
  };
  list.unshift(entry);
  localStorage.setItem(LS_SUB, JSON.stringify(list));
  return entry;
}

/* milestones for the journey timeline — fluxo P2 Growth */
const JOURNEY = [
  { n: "01", label: "Reunião de Onboarding",  sub: "Alinhamento de contexto, metas, oferta e operação.", meta: "1h",       state: "here" },
  { n: "02", label: "Call de acessos",         sub: "Liberação das contas e ativos necessários.",         meta: "30 min",   state: "next" },
  { n: "03", label: "Plano de ação",           sub: "Estratégia, criativos e estrutura de campanha.",     meta: "até 3 dias", state: "next" },
  { n: "04", label: "Validação do cliente",    sub: "Você aprova o plano antes de subir as campanhas.",   meta: "",         state: "next" },
  { n: "05", label: "Ongoing",                 sub: "Execução, leitura de dados e otimização contínua.",  meta: "",         state: "next" },
];

/* ---------- INTRO ---------- */
function Intro({ onStart, hasProgress }) {
  return (
    <div className="block intro anim-in">
      <div className="big-mark">P2 <span className="dot">Growth.</span></div>
      <div className="tagline">Estratégia &amp; Crescimento</div>
      <h1>Vamos montar o seu <em>diagnóstico de growth</em>.</h1>
      <p>São algumas perguntas, agrupadas por tema. Conforme você responde, montamos seu dossiê estratégico ao vivo aqui do lado — com canais, ângulos de criativo e os próximos passos.</p>
      <div className="intro-meta">
        <div className="im"><b>11</b><span>Blocos</span></div>
        <div className="im"><b>~7</b><span>Minutos</span></div>
        <div className="im"><b>1</b><span>Diagnóstico</span></div>
      </div>
      <button className="btn btn-primary" onClick={onStart}>
        {hasProgress ? "Continuar de onde parei" : "Começar diagnóstico"}
        <span className="kbd">Enter</span>
      </button>
    </div>
  );
}

/* ---------- QUESTION STEP ---------- */
function QuestionStep({ step, answers, setAnswer, idx, total }) {
  return (
    <div className="block anim-in" key={step.id}>
      <div className="eyebrow"><span className="num">{step.eyebrow}</span></div>
      <h2 className="q-title">{step.title}</h2>
      {step.sub && <p className="q-sub">{step.sub}</p>}
      <FieldGroup step={step} answers={answers} setAnswer={setAnswer} />
    </div>
  );
}

/* ---------- JOURNEY TIMELINE ---------- */
function JourneyTimeline() {
  return (
    <div className="journey">
      <div className="journey-head">
        <div className="rc-l"><span className="n">00</span>Roadmap · sua jornada</div>
        <h3>De onde você veio, onde está e <em>pra onde vamos</em>.</h3>
      </div>
      <div className="journey-rail" role="list">
        {JOURNEY.map((m, i) => {
          const isLast = i === JOURNEY.length - 1;
          return (
            <div key={m.n} className={"j-node j-" + m.state} style={{ "--d": (i * 130) + "ms" }} role="listitem">
              <span className={"j-dot" + (m.state === "here" ? " j-pulse" : "")}>
                {m.state === "here"
                  ? <svg viewBox="0 0 12 12"><path d="M2.5 6.2 L5 8.6 L9.5 3.4" stroke="#F3ECD6" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
                  : isLast ? "∞" : "→"}
              </span>
              <span className="j-num">{m.n}{m.meta && <span className="j-meta"> · {m.meta}</span>}</span>
              <span className="j-lbl">{m.label}</span>
              <span className="j-sub">{m.sub}</span>
              {m.state === "here" && <span className="j-here-tag">você está aqui</span>}
            </div>
          );
        })}
      </div>
    </div>
  );
}

const LS_DONE = "p2_onb_submitted_v1";

function ThankYou({ answers, onRestart, onEdit }) {
  const a = answers;
  const name = (a.nome_empresa && a.nome_empresa.trim()) || "Seu negócio";
  const responsavel = (a.responsavel && a.responsavel.trim().split(" ")[0]) || "";

  /* auto-submit on mount — only once per filled-form */
  useEffect(() => {
    if (localStorage.getItem(LS_DONE)) return;
    const entry = saveSubmission(a);
    localStorage.setItem(LS_DONE, JSON.stringify(Date.now()));
    if (window.dbSaveDiagnostic) {
      window.dbSaveDiagnostic(entry).catch((err) => {
        console.error("[Supabase] Falha ao salvar diagnóstico:", err);
      });
    }
  }, []);

  return (
    <div className="report-side">
      <div className="report-wrap thanks-wrap">
        <div className="thanks-head anim-in">
          <div className="big-mark" style={{ fontFamily: "var(--ff-sans)", fontWeight: 800, fontSize: 32, color: "var(--green)", letterSpacing: "-0.03em", marginBottom: 6 }}>
            P2 <span style={{ color: "var(--clay)" }}>Growth.</span>
          </div>
          <div className="eyebrow"><span className="num">Diagnóstico recebido · {name}</span></div>
          <h1 className="thanks-title">
            Obrigado{responsavel ? `, ${responsavel}` : ""}. <em>Recebemos seu diagnóstico.</em>
          </h1>
          <p className="thanks-sub">
            A equipe da P2 Growth já tem suas respostas em mãos. Vamos analisar tudo,
            preparar a próxima reunião com você e seguir o fluxo abaixo até deixar suas campanhas no ar.
          </p>
          <div className="thanks-check anim-in">
            <span className="thanks-check-dot">
              <svg viewBox="0 0 16 16" fill="none"><path d="M3.5 8.4 L6.6 11.4 L12.5 4.6" stroke="#F3ECD6" strokeWidth="2.3" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </span>
            <div>
              <div className="thanks-check-l">Diagnóstico enviado pra equipe</div>
              <div className="thanks-check-s">Você vai receber em breve um contato pra agendar a call de acessos.</div>
            </div>
          </div>
        </div>

        <JourneyTimeline />

        <div className="next-cta anim-in">
          <div className="next-cta-l">
            <div className="eyebrow"><span className="num">Próxima etapa</span></div>
            <h3>Agende sua <em>call de acessos</em>.</h3>
            <p>Conversa rápida de 30 minutos pra liberar contas, pixel e ativos. Quanto antes você marcar, antes a gente sobe suas campanhas.</p>
          </div>
          <a className="btn btn-primary btn-wa" href="https://wa.link/9ocjq8" target="_blank" rel="noopener noreferrer">
            <svg viewBox="0 0 24 24" fill="currentColor" style={{ width: 18, height: 18 }}>
              <path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.1-.7.1-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6.1-1.7-.9-2.9-1.6-4-3.6-.3-.5.3-.5.8-1.5.1-.2 0-.4 0-.5-.1-.1-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.1.2 2.1 3.3 5.2 4.6.7.3 1.3.5 1.7.6.7.2 1.4.2 1.9.1.6-.1 1.7-.7 2-1.4.2-.7.2-1.2.2-1.4-.1-.1-.3-.2-.6-.3zM12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.5 1.3 5L2 22l5.2-1.3c1.4.8 3.1 1.2 4.8 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2zm0 18.2c-1.5 0-3-.4-4.3-1.2l-.3-.2-3.1.8.8-3-.2-.3c-.8-1.3-1.3-2.9-1.3-4.5 0-4.5 3.7-8.2 8.2-8.2S20.2 7.5 20.2 12c.1 4.5-3.7 8.2-8.2 8.2z"/>
            </svg>
            Agendar pelo WhatsApp
          </a>
        </div>

        <div className="thanks-foot no-print">
          <button className="btn btn-ghost" onClick={onEdit}>Voltar a editar respostas</button>
          <button className="btn btn-ghost" onClick={onRestart} style={{ marginLeft: "auto" }}>Iniciar novo diagnóstico</button>
        </div>
      </div>
    </div>
  );
}

/* ---------- APP ---------- */
function App() {
  const [answers, setAnswers] = useState(() => loadLS(LS_A, {}));
  const [step, setStep] = useState(() => loadLS(LS_S, 0));

  useEffect(() => { localStorage.setItem(LS_A, JSON.stringify(answers)); }, [answers]);
  useEffect(() => { localStorage.setItem(LS_S, JSON.stringify(step)); }, [step]);

  const cur = STEPS[step];
  const setAnswer = useCallback((id, v) => setAnswers((p) => ({ ...p, [id]: v })), []);

  const canNext = stepComplete(cur, answers);

  const goNext = useCallback(() => {
    setStep((s) => Math.min(s + 1, STEPS.length - 1));
    const body = document.querySelector(".form-body"); if (body) body.scrollTop = 0;
  }, []);
  const goPrev = useCallback(() => {
    setStep((s) => Math.max(s - 1, 0));
    const body = document.querySelector(".form-body"); if (body) body.scrollTop = 0;
  }, []);

  /* Enter to advance (not in textarea) */
  useEffect(() => {
    const h = (e) => {
      if (e.key !== "Enter" || e.shiftKey) return;
      const t = document.activeElement;
      if (t && (t.tagName === "TEXTAREA")) return;
      if (cur.kind === "report") return;
      if (cur.kind === "intro") { e.preventDefault(); goNext(); return; }
      if (canNext) { e.preventDefault(); goNext(); }
    };
    window.addEventListener("keydown", h);
    return () => window.removeEventListener("keydown", h);
  }, [cur, canNext, goNext]);

  /* progress fill across question steps */
  const qIndex = Math.max(0, Math.min(step, LAST_Q + 1) - FIRST_Q);
  const qTotal = LAST_Q - FIRST_Q + 1;
  const railPct = cur.kind === "report" ? 100 : Math.round((qIndex / qTotal) * 100);

  if (cur.kind === "report") {
    return <ThankYou
      answers={answers}
      onRestart={() => { localStorage.removeItem(LS_DONE); setAnswers({}); setStep(0); }}
      onEdit={() => setStep(LAST_Q)} />;
  }

  const isIntro = cur.kind === "intro";

  return (
    <div className="shell">
      <section className="form-side">
        <div className="form-top">
          <div className="brandmark">
            <span>P2 Growth<span className="dot">.</span></span>
          </div>
          {!isIntro && (
            <div className="step-count"><b>{String(qIndex + 1).padStart(2, "0")}</b> / {String(qTotal).padStart(2, "0")}</div>
          )}
        </div>

        {!isIntro && (
          <div className="progress-rail"><div className="progress-fill" style={{ width: railPct + "%" }} /></div>
        )}

        <div className="form-body">
          {isIntro ? (
            <Intro onStart={goNext} hasProgress={Object.keys(answers).length > 0} />
          ) : (
            <QuestionStep step={cur} answers={answers} setAnswer={setAnswer} />
          )}
        </div>

        {!isIntro && (
          <div className="form-foot">
            <button className="btn btn-ghost" onClick={goPrev}>← Voltar</button>
            <button className="btn btn-primary" onClick={goNext} disabled={!canNext}>
              {step === LAST_Q ? "Gerar diagnóstico" : "Continuar"}
              <span className="kbd">Enter</span>
            </button>
            {!canNext && <div className="foot-hint">Responda pra seguir</div>}
            {canNext && <div className="foot-hint"><span className="enter">↵</span> Enter pra avançar</div>}
          </div>
        )}
      </section>

      <Dossier answers={answers} stepId={cur.id} />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);