// ====================================================================
// OK-Suite — App entry (multi-page)
// ====================================================================
const { useState, useEffect, useMemo } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#C9F23A",
  "lang": "it",
  "typoPair": "bricolage"
}/*EDITMODE-END*/;

const ACCENT_SWATCHES = ["#C9F23A", "#FF7A4D", "#7BE6FF", "#FFD23A"];

const TYPE_PAIRS = {
  bricolage: { display: "'Bricolage Grotesque', sans-serif", sans: "'Geist', sans-serif" },
  geist:     { display: "'Geist', sans-serif",               sans: "'Geist', sans-serif" },
  mono:      { display: "'Geist Mono', monospace",           sans: "'Geist', sans-serif" },
};

function useTweaks(defaults) {
  const [state, setState] = React.useState(defaults);
  const set = (k, v) => {
    setState((prev) => {
      const next = typeof k === "object" ? { ...prev, ...k } : { ...prev, [k]: v };
      try {
        window.parent.postMessage({ type: "__edit_mode_set_keys", edits: typeof k === "object" ? k : { [k]: v } }, "*");
      } catch (_) {}
      return next;
    });
  };
  return { ...state, set };
}

function App() {
  const t = useTweaks(TWEAK_DEFAULTS);
  const lang = t.lang === "en" ? "en" : "it";
  const copy = window.COPY[lang];
  const page = window.PAGE || "home";

  useEffect(() => {
    document.documentElement.style.setProperty("--accent", t.accent);
    const pair = TYPE_PAIRS[t.typoPair] || TYPE_PAIRS.bricolage;
    document.documentElement.style.setProperty("--display", pair.display);
    document.documentElement.style.setProperty("--sans", pair.sans);
  }, [t.accent, t.typoPair]);

  const setLang = (v) => t.set("lang", v);

  let PageComp;
  switch (page) {
    case "ok-docs": PageComp = HomePage && DocsPage; PageComp = DocsPage; break;
    case "ok-otp":  PageComp = OtpPage; break;
    case "ok-rec":  PageComp = RecPage; break;
    case "ok-cards": PageComp = CardsPage; break;
    case "privacy": PageComp = PrivacyPage; break;
    default:        PageComp = HomePage;
  }

  return (
    <>
      <Nav t={copy} lang={lang} setLang={setLang} current={page} />
      <PageComp t={copy} lang={lang} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Look">
          <TweakColor label="Accent" value={t.accent} onChange={(v) => t.set("accent", v)} options={ACCENT_SWATCHES} />
          <TweakRadio
            label="Typography"
            value={t.typoPair}
            onChange={(v) => t.set("typoPair", v)}
            options={[
              { value: "bricolage", label: "Bricolage" },
              { value: "geist", label: "Geist" },
              { value: "mono", label: "Mono" },
            ]}
          />
        </TweakSection>
        <TweakSection title="Content">
          <TweakRadio
            label="Language"
            value={lang}
            onChange={(v) => t.set("lang", v)}
            options={[
              { value: "it", label: "Italiano" },
              { value: "en", label: "English" },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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