/* ==========================================================
   YAPPY. — App: router, tweaks
   ========================================================== */

function Routes({ path }) {
  if (path === '/' || path === '') return <Home />;
  if (path === '/shop') return <Shop />;
  if (path.startsWith('/product/')) return <PDP id={path.split('/')[2]} />;
  if (path === '/checkout') return <Checkout />;
  if (path.startsWith('/order/')) return <OrderPage ref_={path.split('/')[2]} />;
  if (path === '/account') return <Orders />;
  if (path === '/consult') return <FreeConsult />;
  if (path === '/how-it-works') return <HowItWorks />;
  if (path === '/standards') return <Standards />;
  if (path === '/faq') return <FAQ />;
  if (path === '/learn') return <Learn />;
  if (path === '/support') return <Support />;
  if (path.startsWith('/policy/')) return <Policy id={path.split('/')[2]} />;
  return <NotFound />;
}

const JUMPS = [
  ['Home', '/'], ['Shop', '/shop'], ['Product · BRB.', '/product/brb'], ['Product · DND.', '/product/dnd'], ['Product · OFFLINE.', '/product/offline'],
  ['Checkout', '/checkout'], ['My orders', '/account'], ['Free consultation', '/consult'], ['How it works', '/how-it-works'], ['FAQs', '/faq'], ['Standards', '/standards'], ['Support', '/support'],
];

function Shell() {
  const path = useRoute();
  const { cartOpen } = useStore();
  return (
    <>
      <Header path={path} />
      <Routes path={path} />
      <Footer />
      {cartOpen && <CartDrawer />}
      <TweaksBits path={path} />
    </>
  );
}

function TweaksBits({ path }) {
  const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS);
  const { reset } = useStore();
  return (
    <>
      {t.showRibbon && <DemoRibbon />}
      <TweaksPanel title="Tweaks">
        <TweakSection label="Prototype">
          <TweakToggle label="Show prototype badge" value={t.showRibbon} onChange={(v) => setTweak('showRibbon', v)} />
          <TweakSelect label="Jump to screen" value={JUMPS.some((j) => j[1] === path) ? path : '/'} options={JUMPS.map(([l, v]) => ({ value: v, label: l }))} onChange={(v) => go(v)} />
          <TweakButton label="Open admin panel" onClick={() => window.open('Yappy Admin.html', '_blank')} />
          <TweakButton label="Reset cart & orders" secondary onClick={reset} />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

function App() {
  return <StoreProvider><Shell /></StoreProvider>;
}

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