// tobead App — router + shell

const { useState, useEffect, useRef, useMemo, useCallback } = React;

function useHashRoute() {
  const [hash, setHash] = useState(window.location.hash || '#/');
  useEffect(() => {
    const onHash = () => setHash(window.location.hash || '#/');
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);
  if (hash.startsWith('#/create')) return ['create', setHash];
  if (hash.startsWith('#/quick-start')) return ['quickstart', setHash];
  if (hash.startsWith('#/presets')) return ['presets', setHash];
  if (hash.startsWith('#/gallery')) return ['gallery', setHash];
  return ['home', setHash];
}

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "violet": "#7F00FF",
  "navy": "#000080",
  "scanlines": true,
  "reduceMotion": false
}/*EDITMODE-END*/;

function ToBeadApp() {
  const [route] = useHashRoute();
  const [cart, setCart] = useState([
    { id: 'qs-heart', type: 'product', title: 'Pixel Heart Kit', estimatedPrice: 12, qty: 1 },
  ]);
  const [cartOpen, setCartOpen] = useState(false);
  const [tweaks, setTweak] = window.useTweaks ? window.useTweaks(TWEAK_DEFAULTS) : [TWEAK_DEFAULTS, () => {}];

  useEffect(() => {
    document.body.classList.add('arcade');
    return () => document.body.classList.remove('arcade');
  }, []);

  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--v', tweaks.violet);
    root.style.setProperty('--n', tweaks.navy);
    document.body.classList.toggle('reduce-motion', !!tweaks.reduceMotion);
    document.body.classList.toggle('no-scan', !tweaks.scanlines);
  }, [tweaks]);

  useEffect(() => {
    const open = () => setCartOpen(true);
    const close = () => setCartOpen(false);
    window.addEventListener('pibead:open-cart', open);
    window.addEventListener('pibead:close-cart', close);
    return () => {
      window.removeEventListener('pibead:open-cart', open);
      window.removeEventListener('pibead:close-cart', close);
    };
  }, []);

  function onNavigate(r) {
    const map = {
      create: '#/create', quickstart: '#/quick-start', presets: '#/presets',
      gallery: '#/gallery', home: '#/',
    };
    window.location.hash = map[r] || '#/';
    window.scrollTo({ top: 0, behavior: 'instant' });
  }

  function addToCart(p) {
    const item = {
      type: p.type || 'product',
      title: p.title || p.name,
      estimatedPrice: p.estimatedPrice ?? p.price ?? 0,
      qty: p.qty || 1,
      ...p,
    };
    setCart(c => {
      const idx = c.findIndex(it => it.id === item.id);
      if (idx >= 0) {
        const next = c.slice();
        next[idx] = { ...next[idx], qty: (next[idx].qty || 1) + (item.qty || 1) };
        return next;
      }
      return [...c, item];
    });
    window.dispatchEvent(new CustomEvent('pibead:open-cart'));
  }

  const cartCount = cart.reduce((s, it) => s + (it.qty || 1), 0);

  return (
    <div>
      {window.HiddenTopNav && <window.HiddenTopNav route={route} onNavigate={onNavigate} cartCount={cartCount}/>}

      <main>
        {route === 'home' && <window.HomePage onNavigate={onNavigate} addToCart={addToCart}/>}
        {route === 'create' && <window.CreatePage onNavigate={onNavigate} addToCart={addToCart}/>}
        {route === 'quickstart' && <window.QuickStartPage onNavigate={onNavigate} addToCart={addToCart}/>}
        {route === 'presets' && <window.PresetsPage onNavigate={onNavigate} addToCart={addToCart}/>}
        {route === 'gallery' && <window.GalleryPage onNavigate={onNavigate}/>}
      </main>

      {window.CartDrawer && <window.CartDrawer items={cart} setItems={setCart} open={cartOpen} setOpen={setCartOpen}/>}

      {window.AudioToggle && <window.AudioToggle/>}

      {window.TweaksPanel && (
        <window.TweaksPanel title="Tweaks" defaultOpen={false}>
          <window.TweakSection label="Brand Colors">
            <window.TweakColor label="Violet" value={tweaks.violet}
              options={['#7F00FF', '#9B3DFF', '#6A00CC']} onChange={(v) => setTweak('violet', v)}/>
            <window.TweakColor label="Navy" value={tweaks.navy}
              options={['#000080', '#1A1AB0', '#000050']} onChange={(v) => setTweak('navy', v)}/>
          </window.TweakSection>
          <window.TweakSection label="Screen">
            <window.TweakToggle label="CRT scanlines" value={tweaks.scanlines}
              onChange={(v) => setTweak('scanlines', v)}/>
            <window.TweakToggle label="Reduce motion" value={tweaks.reduceMotion}
              onChange={(v) => setTweak('reduceMotion', v)}/>
          </window.TweakSection>
        </window.TweaksPanel>
      )}
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('app'));
root.render(<ToBeadApp/>);