/* App shell: routing + tweaks + render */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "Blauw",
  "sidebar": "Wijnrood",
  "density": "Gebalanceerd",
  "font": "IBM Plex Sans",
  "showTip": true
}/*EDITMODE-END*/;

const ACCENTS = {
  "Blauw":    { base:"#2a62cc", strong:"#1f4fb0", soft:"#eaf1fc", line:"#c9dbf6" },
  "Indigo":   { base:"#4f46c4", strong:"#3f38a8", soft:"#ecebfb", line:"#d2cff3" },
  "Teal":     { base:"#0f7d6b", strong:"#0a6457", soft:"#e3f4f0", line:"#b9e3da" },
  "Wijnrood": { base:"#8f0009", strong:"#6f0008", soft:"#fbe9e8", line:"#f1c7c5" },
};
const SIDEBARS = {
  "Wijnrood":    { ink:"#5c0a10", ink2:"#3f070c", brand:"#8f0009" },
  "Antraciet":   { ink:"#262a30", ink2:"#191c21", brand:"#8f0009" },
  "Donkergroen": { ink:"#1f3a2e", ink2:"#142a20", brand:"#2e6b4f" },
  "Donkerblauw": { ink:"#1b2a45", ink2:"#121d32", brand:"#2a62cc" },
};
const DENSITY = { "Compact":"compact", "Gebalanceerd":"", "Ruim":"ruim" };
const FONTS = {
  "IBM Plex Sans": '"IBM Plex Sans", system-ui, sans-serif',
  "Figtree": '"Figtree", system-ui, sans-serif',
  "Systeem": 'system-ui, -apple-system, "Segoe UI", sans-serif',
};

function PinGate({ onUnlock }) {
  const [val, setVal] = React.useState("");
  const [err, setErr] = React.useState(false);
  const submit = (e) => {
    e.preventDefault();
    if (val === window.STORE.pin()) onUnlock();
    else { setErr(true); setVal(""); }
  };
  return (
    <div className="pin-screen">
      <form className="pin-card" onSubmit={submit}>
        <img src="assets/stocers-logo-red.png" alt="STOCERS" style={{ height: 30, marginBottom: 18 }} />
        <div className="pin-title">Command Center vergrendeld</div>
        <div className="pin-sub">Voer je pincode in om verder te gaan.</div>
        <input className={"input pin-input" + (err ? " pin-err" : "")} type="password" inputMode="numeric"
          autoFocus value={val} onChange={e => { setVal(e.target.value); setErr(false); }} placeholder="••••" />
        {err && <div className="pin-errmsg">Onjuiste pincode</div>}
        <button className="btn btn-brand" style={{ width: "100%", justifyContent: "center", marginTop: 4 }} type="submit">Ontgrendelen</button>
      </form>
    </div>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [view, setView] = React.useState("dashboard");
  const [productId, setProductId] = React.useState(null);
  const [unlocked, setUnlocked] = React.useState(!window.STORE.pin());
  const [, force] = React.useReducer(x => x + 1, 0);
  const db = window.DB;
  const alertCount = (db.openAlerts ? db.openAlerts() : db.alerts).filter(a => a.sev !== "ok").length;

  React.useEffect(() => {
    const h = () => force();
    window.addEventListener("stocers-data", h);
    window.addEventListener("stocers-store", h);
    return () => { window.removeEventListener("stocers-data", h); window.removeEventListener("stocers-store", h); };
  }, []);


  React.useEffect(() => {
    const r = document.documentElement.style;
    const a = ACCENTS[t.accent] || ACCENTS.Blauw;
    r.setProperty("--accent", a.base); r.setProperty("--accent-strong", a.strong);
    r.setProperty("--accent-soft", a.soft); r.setProperty("--accent-line", a.line);
    const s = SIDEBARS[t.sidebar] || SIDEBARS.Wijnrood;
    r.setProperty("--brand-ink", s.ink); r.setProperty("--brand-ink-2", s.ink2); r.setProperty("--brand", s.brand);
    r.setProperty("--font-ui", FONTS[t.font] || FONTS["IBM Plex Sans"]);
    document.body.dataset.density = DENSITY[t.density] || "";
  }, [t.accent, t.sidebar, t.density, t.font]);

  // PIN gate AFTER all hooks have run (never early-return before a hook)
  if (!unlocked) return <PinGate onUnlock={() => setUnlocked(true)} />;

  const nav = (v, payload) => {
    setView(v);
    setProductId(v === "producten" ? (payload || null) : null);
    const main = document.querySelector(".main");
    if (main) main.scrollTop = 0;
  };

  let page;
  switch (view) {
    case "dashboard": page = <Dashboard db={db} onNav={nav} showTip={t.showTip} />; break;
    case "voorraad": page = <Voorraad db={db} onNav={nav} />; break;
    case "producten": page = <Producten db={db} onNav={nav} productId={productId} />; break;
    case "winst": page = <Winst db={db} onNav={nav} />; break;
    case "retouren": page = <Retouren db={db} onNav={nav} />; break;
    case "advertenties": page = <AdvertentiesPro db={db} onNav={nav} />; break;
    case "inkoop": page = <Inkoop db={db} onNav={nav} />; break;
    case "reviews": page = <Reviews db={db} onNav={nav} />; break;
    case "rankings": page = <Rankings db={db} onNav={nav} />; break;
    case "seo": page = <SEO db={db} onNav={nav} />; break;
    case "meldingen": page = <Meldingen db={db} onNav={nav} />; break;
    case "instellingen": page = <Instellingen db={db} />; break;
    default: page = <Dashboard db={db} onNav={nav} showTip={t.showTip} />;
  }

  return (
    <div className="app">
      <Sidebar view={view} onNav={nav} alertCount={alertCount} />
      <div className="main">
        <Topbar onNav={nav} alertCount={alertCount} db={db} />
        <div className="content" key={view + (productId || "")}>{page}</div>
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Kleur" />
        <TweakColor label="Data-accent" value={(ACCENTS[t.accent] || ACCENTS.Blauw).base}
          options={Object.values(ACCENTS).map(a => a.base)}
          onChange={(v) => setTweak("accent", Object.keys(ACCENTS).find(k => ACCENTS[k].base === v) || "Blauw")} />
        <TweakRadio label="Zijbalk" value={t.sidebar}
          options={Object.keys(SIDEBARS)} onChange={(v) => setTweak("sidebar", v)} />
        <TweakSection label="Layout" />
        <TweakRadio label="Dichtheid" value={t.density}
          options={Object.keys(DENSITY)} onChange={(v) => setTweak("density", v)} />
        <TweakSelect label="Lettertype" value={t.font}
          options={Object.keys(FONTS)} onChange={(v) => setTweak("font", v)} />
        <TweakSection label="Dashboard" />
        <TweakToggle label="Tip van de dag" value={t.showTip} onChange={(v) => setTweak("showTip", v)} />
      </TweaksPanel>
    </div>
  );
}

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