/* =====================================================================
   app.jsx — state router + brand tweaks + prototype navigator + mount
   ===================================================================== */

/* Four brand skins. ffb = green; gunmetal = gunmetal->black gradient;
   clay = terracotta earth; ffm = Mastermind charcoal + gold. CSS recolours
   via [data-theme]; charts read the accent off window.__ffpTheme. */
const BRANDS = {
  ffb:      { id: "ffb",      menu: "Business",   accent: "#6e8e77", dark: "#1e3735", label: "Freedom Filled\u00ae Business",    swatch: "linear-gradient(135deg,#1e3735 0%,#2c4a45 55%,#6e8e77 100%)" },
  gunmetal: { id: "gunmetal", menu: "Gunmetal",   accent: "#84949e", dark: "#2c343a", label: "Freedom Filled\u00ae \u00b7 Gunmetal", swatch: "linear-gradient(135deg,#0d0e10 0%,#3e4951 60%,#84949e 100%)" },
  clay:     { id: "clay",     menu: "Clay",       accent: "#bd7149", dark: "#41302a", label: "Freedom Filled\u00ae \u00b7 Clay",     swatch: "linear-gradient(135deg,#281d19 0%,#5a4339 55%,#bd7149 100%)" },
  ffm:      { id: "ffm",      menu: "Mastermind", accent: "#c9a46c", dark: "#161616", label: "Freedom Filled\u00ae Mastermind",   swatch: "linear-gradient(135deg,#161616 0%,#3a2f1d 55%,#c9a46c 100%)" },
};
const BRAND_ORDER = ["ffb", "gunmetal", "clay", "ffm"];

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "brand": "ffb",
  "resultsTreatment": "editorial",
  "showPrototypeMap": true
}/*EDITMODE-END*/;

function PrototypeNav({ screen, go }) {
  const [open, setOpen] = useState(false);
  const items = [
    { group: "Public flow" },
    { s: "landing", n: "1", label: "Audit landing" },
    { s: "profile", n: "2", label: "Profile capture" },
    { s: "question", n: "3", label: "Question flow" },
    { s: "generating", n: "4", label: "Generating report" },
    { s: "results", n: "5", label: "Results page" },
    { s: "thankyou", n: "6", label: "Thank you" },
    { group: "Admin" },
    { s: "admin", n: "7", label: "Submissions dashboard" },
    { s: "adminDetail", n: "8", label: "Submission detail" },
  ];
  return (
    <div className="pnav">
      {open && (
        <div className="pnav__panel">
          {items.map((it, i) => it.group
            ? <div className="pnav__group" key={i}>{it.group}</div>
            : <button key={i} className="pnav__item" aria-current={screen === it.s} onClick={() => { go(it.s); setOpen(false); }}>
                <span className="n">{it.n}</span>{it.label}
              </button>
          )}
        </div>
      )}
      <button className="pnav__toggle" onClick={() => setOpen(o => !o)}>
        <Brandmark height={15} />Prototype map
      </button>
    </div>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [screen, setScreen] = useState("landing");
  const [profile, setProfile] = useState({ firstName: "", lastName: "", email: "", country: "", businessStage: "", offerType: "", source: "", consent: false });
  const [answers, setAnswers] = useState({});
  const [variant, setVariant] = useState(t.resultsTreatment || "editorial");
  const [detailRow, setDetailRow] = useState(window.FFP.SUBMISSIONS[0]);

  // apply the active brand skin (synchronously, so charts read it this render)
  const brand = BRANDS[t.brand] || BRANDS.ffb;
  window.__ffpTheme = brand;
  if (typeof document !== "undefined") document.documentElement.setAttribute("data-theme", brand.id);

  // keep the results treatment in sync with the tweak
  useEffect(() => { setVariant(t.resultsTreatment || "editorial"); }, [t.resultsTreatment]);

  const go = (s) => { setScreen(s); window.scrollTo(0, 0); };
  const openDetail = (row) => { setDetailRow(row); go("adminDetail"); };
  useEffect(() => { window.__ffpGo = go; window.__ffpVar = setVariant; window.__ffpSetBrand = (b) => setTweak("brand", b); }, []);

  let view;
  switch (screen) {
    case "landing":    view = <Landing go={go} />; break;
    case "profile":    view = <Profile go={go} profile={profile} setProfile={setProfile} />; break;
    case "question":   view = <QuestionFlow go={go} answers={answers} setAnswers={setAnswers} />; break;
    case "generating": view = <Generating go={go} />; break;
    case "results":    view = <Results go={go} variant={variant} setVariant={(v) => { setVariant(v); setTweak("resultsTreatment", v); }} />; break;
    case "thankyou":   view = <ThankYou go={go} result={window.FFP.SAMPLE_RESULT} />; break;
    case "admin":      view = <AdminDashboard go={go} openDetail={openDetail} />; break;
    case "adminDetail":view = <AdminDetail go={go} row={detailRow} back={() => go("admin")} />; break;
    default:           view = <Landing go={go} />;
  }

  return (
    <>
      <div key={brand.id}>{view}</div>
      {t.showPrototypeMap && <PrototypeNav screen={screen} go={go} />}

      <TweaksPanel>
        <TweakSection label="Branding" />
        <TweakRow label="Brand skin" value={brand.menu}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 7, width: "100%" }}>
            {BRAND_ORDER.map((id) => {
              const b = BRANDS[id];
              const on = t.brand === id;
              return (
                <button key={id} onClick={() => setTweak("brand", id)}
                  style={{ textAlign: "left", cursor: "pointer", padding: 6, borderRadius: 8,
                    border: on ? ("1.5px solid " + b.accent) : "1px solid rgba(125,125,125,0.28)",
                    background: on ? "rgba(125,125,125,0.10)" : "transparent" }}>
                  <span style={{ display: "block", height: 24, borderRadius: 5, background: b.swatch }}></span>
                  <span style={{ display: "block", fontSize: 11.5, marginTop: 6, fontWeight: on ? 600 : 500 }}>{b.menu}</span>
                </button>
              );
            })}
          </div>
        </TweakRow>

        <TweakSection label="Results page" />
        <TweakRadio
          label="Default treatment"
          value={t.resultsTreatment}
          options={[
            { value: "editorial", label: "Editorial" },
            { value: "dashboard", label: "Diagnostic" },
            { value: "premium", label: "Premium" },
          ]}
          onChange={(v) => { setTweak("resultsTreatment", v); setVariant(v); }}
        />

        <TweakSection label="Review" />
        <TweakToggle label="Prototype map" value={t.showPrototypeMap} onChange={(v) => setTweak("showPrototypeMap", v)} />
      </TweaksPanel>
    </>
  );
}

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