// Main app — routes between modes, hosts global state, mounts Tweaks panel.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "mode": "home",
  "language": "is",
  "density": "comfortable",
  "signedIn": false,
  "b2b": false
}/*EDITMODE-END*/;

function App() {
  const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS);

  const { mode, language: lang, density, signedIn, b2b } = tw;
  const setMode = (m) => setTweak("mode", m);
  const setLang = (l) => setTweak("language", l);
  const setSignedIn = (v) => setTweak("signedIn", v);
  const setB2b = (v) => setTweak("b2b", v);

  // Expose a global "go to mode" for inline CTAs in pages
  React.useEffect(() => {
    window.PENNINN_GOTO = setMode;
    return () => { window.PENNINN_GOTO = null; };
  });

  // Density on body
  React.useEffect(() => {
    document.body.setAttribute("data-density", density || "comfortable");
  }, [density]);

  // Mode → CSS vars
  React.useEffect(() => {
    const a = window.PENNINN_DATA.accents[mode] || window.PENNINN_DATA.accents.home;
    const r = document.documentElement;
    r.style.setProperty("--bg", a.bg);
    r.style.setProperty("--ink", a.ink);
    r.style.setProperty("--soft", a.soft);
    r.style.setProperty("--accent", a.accent);
    r.style.setProperty("--muted", a.muted);
  }, [mode]);

  let view;
  switch (mode) {
    case "books":      view = <BooksPage      lang={lang} setMode={setMode} b2b={b2b} />; break;
    case "stationery": view = <StationeryPage lang={lang} setMode={setMode} b2b={b2b} />; break;
    case "office":     view = <OfficePage     lang={lang} setMode={setMode} b2b={b2b} />; break;
    case "furniture":  view = <FurniturePage  lang={lang} setMode={setMode} b2b={b2b} />; break;
    case "giftware":   view = <GiftwarePage   lang={lang} setMode={setMode} b2b={b2b} />; break;
    case "bundle":     view = <BundlePage     lang={lang} onBack={() => setMode("home")} />; break;
    case "giftquiz":   view = <GiftQuizPage   lang={lang} onBack={() => setMode("giftware")} onPicked={() => setMode("giftware")} />; break;
    case "quote":      view = <QuotePage      lang={lang} onBack={() => setMode("office")} />; break;
    case "deals":      view = <DealsPage      lang={lang} setMode={setMode} />; break;
    default:           view = <HomePage       lang={lang} setMode={setMode} b2b={b2b} />;
  }

  return (
    <div className="app" data-mode={mode}>
      <Header
        mode={mode} setMode={setMode}
        lang={lang} setLang={setLang}
        b2b={b2b} setB2b={setB2b}
        signedIn={signedIn} setSignedIn={setSignedIn}
      />
      {b2b && <B2BBar lang={lang} />}
      {view}
      <Footer lang={lang} />

      <TweaksPanel title={lang === "en" ? "Tweaks" : "Stillingar"}>
        <TweakSection title={lang === "en" ? "Mode" : "Hluti"}>
          <TweakSelect
            label={lang === "en" ? "Category mode" : "Deild"}
            value={mode}
            onChange={(v) => setMode(v)}
            options={[
              { value: "home",       label: lang === "en" ? "Home (landing)" : "Forsíða" },
              { value: "books",      label: lang === "en" ? "Books"          : "Bækur" },
              { value: "stationery", label: lang === "en" ? "Stationery"     : "Ritföng" },
              { value: "office",     label: lang === "en" ? "Office"         : "Skrifstofa" },
              { value: "furniture",  label: lang === "en" ? "Home & Furniture" : "Heimili & Húsgögn" },
              { value: "giftware",   label: lang === "en" ? "Gifts & Toys"   : "Gjafavara" },
              { value: "bundle",     label: lang === "en" ? "★ Bundle builder" : "★ Pakkasmiður" },
              { value: "giftquiz",   label: lang === "en" ? "★ Gift finder"    : "★ Gjafaleitin" },
              { value: "quote",      label: lang === "en" ? "★ B2B quote"      : "★ B2B tilboð" },
              { value: "deals",      label: lang === "en" ? "★ Deals of the month" : "★ Tilboð mánaðarins" },
            ]}
          />
        </TweakSection>

        <TweakSection title={lang === "en" ? "Display" : "Birting"}>
          <TweakRadio
            label={lang === "en" ? "Density" : "Þéttleiki"}
            value={density}
            onChange={(v) => setTweak("density", v)}
            options={[
              { value: "comfortable", label: lang === "en" ? "Comfy" : "Þægilegt" },
              { value: "compact",     label: lang === "en" ? "Compact" : "Þétt" },
            ]}
          />
          <TweakRadio
            label={lang === "en" ? "Language" : "Tungumál"}
            value={lang}
            onChange={(v) => setLang(v)}
            options={[
              { value: "is", label: "ÍS" },
              { value: "en", label: "EN" },
            ]}
          />
        </TweakSection>

        <TweakSection title={lang === "en" ? "Account" : "Aðgangur"}>
          <TweakToggle
            label={lang === "en" ? "Signed in" : "Innskráð"}
            value={signedIn}
            onChange={(v) => setSignedIn(v)}
          />
          <TweakToggle
            label={lang === "en" ? "Business view (B2B)" : "Fyrirtækjasýn (B2B)"}
            value={b2b}
            onChange={(v) => setB2b(v)}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

function B2BBar({ lang }) {
  return (
    <div className="b2b-bar">
      <div className="shell">
        <strong>{lang === "en" ? "Business view active" : "Fyrirtækjasýn virk"}</strong>
        <span>{lang === "en"
          ? "Net prices shown · 30-day invoice · Bulk tiers"
          : "Nettóverð · 30 daga reikningur · Magnafsláttur"}</span>
        <span className="util-flex" />
        <code>KT 581009-0210</code>
        <span>· Acme ehf</span>
      </div>
    </div>
  );
}

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