/* Main app — router, comparison state (bonds), tweaks */
const ACCENTS = {
  navy: { "--accent": "oklch(0.40 0.072 248)", "--accent-strong": "oklch(0.33 0.078 248)", "--accent-soft": "oklch(0.95 0.020 248)", "--accent-softer": "oklch(0.975 0.012 248)", "--accent-ring": "oklch(0.55 0.10 248 / 0.35)" },
  teal: { "--accent": "oklch(0.46 0.068 205)", "--accent-strong": "oklch(0.38 0.066 205)", "--accent-soft": "oklch(0.95 0.022 205)", "--accent-softer": "oklch(0.975 0.013 205)", "--accent-ring": "oklch(0.58 0.09 205 / 0.35)" },
  green: { "--accent": "oklch(0.46 0.063 158)", "--accent-strong": "oklch(0.38 0.060 158)", "--accent-soft": "oklch(0.95 0.022 158)", "--accent-softer": "oklch(0.975 0.013 158)", "--accent-ring": "oklch(0.58 0.09 158 / 0.35)" },
};
const DENSITY = { compact: "8px", regular: "13px", comfy: "18px" };

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "navy",
  "density": "regular",
  "serifHeads": true
}/*EDITMODE-END*/;

function useCompare() {
  const seed = () => window.BONDS.slice(0, 3).map((x) => x.id);
  const [ids, setIds] = React.useState(() => {
    try { const raw = localStorage.getItem("bonds_compare_v3"); return raw === null ? seed() : JSON.parse(raw); }
    catch (e) { return seed(); }
  });
  React.useEffect(() => { try { localStorage.setItem("bonds_compare_v3", JSON.stringify(ids)); } catch (e) {} }, [ids]);
  return {
    ids,
    has: (id) => ids.includes(id),
    isFull: ids.length >= 4,
    count: ids.length,
    toggle: (id) => setIds((cur) => cur.includes(id) ? cur.filter((x) => x !== id) : (cur.length >= 4 ? cur : [...cur, id])),
    clear: () => setIds([]),
    items: () => ids.map((id) => window.getBond(id)).filter(Boolean),
  };
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = React.useState("home");
  const [params, setParams] = React.useState({});
  const compare = useCompare();

  const go = (r, p = null) => { setParams(p || {}); setRoute(r); window.scrollTo(0, 0); };

  React.useEffect(() => {
    const root = document.documentElement;
    const acc = ACCENTS[t.accent] || ACCENTS.navy;
    Object.entries(acc).forEach(([k, v]) => root.style.setProperty(k, v));
    root.style.setProperty("--row-py", DENSITY[t.density] || DENSITY.regular);
    root.style.setProperty("--serif", t.serifHeads ? '"Source Serif 4", Georgia, serif' : '"IBM Plex Sans", system-ui, sans-serif');
  }, [t.accent, t.density, t.serifHeads]);

  let screen;
  if (route === "home") screen = <HomeScreen go={go} />;
  else if (route === "bonds") screen = <BondsScreen go={go} compare={compare} initialFilters={params.filters} />;
  else if (route === "bond") screen = <DetailScreen go={go} compare={compare} issuer={window.getIssuer(params.id)} />;
  else if (route === "issuers") screen = <IssuersScreen go={go} />;
  else if (route === "detail") screen = <DetailScreen go={go} compare={compare} issuer={window.getIssuer(params.id)} />;
  else if (route === "compare") screen = <CompareScreen go={go} compare={compare} />;
  else if (route === "education") screen = <EducationScreen go={go} />;
  else if (route === "about") screen = <AboutScreen go={go} />;
  else screen = <HomeScreen go={go} />;

  return (
    <>
      <Nav route={route} go={go} compareCount={compare.count} />
      <main className="app-main">{screen}</main>
      <LeadModal />
      <TweaksPanel>
        <TweakSection label="Akcentní tón" />
        <TweakRadio label="Barva" value={t.accent} options={["navy", "teal", "green"]} onChange={(v) => setTweak("accent", v)} />
        <TweakSection label="Tabulka" />
        <TweakRadio label="Hustota" value={t.density} options={["compact", "regular", "comfy"]} onChange={(v) => setTweak("density", v)} />
        <TweakSection label="Typografie" />
        <TweakToggle label="Serif v nadpisech" value={t.serifHeads} onChange={(v) => setTweak("serifHeads", v)} />
      </TweaksPanel>
    </>
  );
}

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