// APEX main app
const { useState, useEffect, useCallback } = React;

const TWEAK_DEFAULTS = {
  "accent": "#e5ff00",
  "background": "#050505",
  "heroHeadline": "FORM FOLLOWS FORCE",
  "showMarquee": true,
  "cardSize": "standard"
};

function App() {
  const tw = (window.useTweaks ? window.useTweaks(TWEAK_DEFAULTS) : { tweaks: TWEAK_DEFAULTS, setTweak: () => {} });
  const tweaks = tw.tweaks || TWEAK_DEFAULTS;

  const accent = tweaks.accent || '#e5ff00';

  useEffect(() => {
    document.documentElement.style.setProperty('--accent', tweaks.accent);
    document.documentElement.style.setProperty('--bg', tweaks.background);
    document.body.style.background = tweaks.background;
  }, [tweaks.accent, tweaks.background]);

  const [cart, setCart] = useState([]);
  const [cartOpen, setCartOpen] = useState(false);
  const [toast, setToast] = useState('');
  const [focused, setFocused] = useState(null);

  const showToast = (m) => {
    setToast(m);
    setTimeout(()=>setToast(''), 2200);
  };

  const addToCart = useCallback((product, size) => {
    setCart((c) => {
      const idx = c.findIndex(i => i.product.id === product.id && i.size === size);
      if (idx >= 0) {
        const copy = [...c];
        copy[idx] = { ...copy[idx], qty: copy[idx].qty + 1 };
        return copy;
      }
      return [...c, { product, size, qty: 1 }];
    });
    showToast(`ADDED · ${product.code} · SIZE ${size}`);
  }, []);

  const updateQty = (idx, delta) => {
    setCart(c => {
      const copy = [...c];
      const next = copy[idx].qty + delta;
      if (next <= 0) return copy.filter((_,i)=>i!==idx);
      copy[idx] = {...copy[idx], qty: next};
      return copy;
    });
  };
  const removeItem = (idx) => setCart(c => c.filter((_,i)=>i!==idx));

  const cartCount = cart.reduce((a,i)=>a+i.qty, 0);

  const scrollToShop = () => {
    document.getElementById('shop')?.scrollIntoView({behavior:'smooth', block:'start'});
  };

  return (
    <>
      <window.PageLoader accent={accent} />
      <window.CustomCursor accent={accent} />
      <window.ScrollProgress accent={accent} />
      <window.AnnounceBar />
      <window.Header
        cartCount={cartCount}
        onOpenCart={()=>setCartOpen(true)}
        onSearch={()=>showToast('SEARCH // COMING SOON')}
        palette={accent}
      />
      <window.Hero accent={accent} onShop={scrollToShop} />
      {tweaks.showMarquee && <window.Marquee accent={accent} />}
      <window.ProductRail
        accent={accent}
        onAdd={addToCart}
        onSelect={setFocused}
        products={window.APEX_PRODUCTS}
      />
      <window.Editorial accent={accent} />
      <window.Access accent={accent} />
      <window.Footer accent={accent} />

      <window.CartDrawer
        open={cartOpen}
        items={cart}
        onClose={()=>setCartOpen(false)}
        onQty={updateQty}
        onRemove={removeItem}
        accent={accent}
      />
      <window.ProductFocus
        product={focused}
        onClose={()=>setFocused(null)}
        onAdd={addToCart}
        accent={accent}
      />
      <window.Toast msg={toast} accent={accent} />

      {window.TweaksPanel && (
        <window.TweaksPanel title="APEX // TWEAKS">
          <window.TweakSection label="Palette">
            <window.TweakColor
              label="Accent"
              value={tweaks.accent}
              onChange={(v)=>tw.setTweak('accent', v)}
              options={['#e5ff00','#ff3b30','#00e5ff','#ff7a00','#ffffff']}
            />
            <window.TweakColor
              label="Background"
              value={tweaks.background}
              onChange={(v)=>tw.setTweak('background', v)}
              options={['#050505','#0a0a0a','#111111','#0d0a05','#f3f3ee']}
            />
          </window.TweakSection>
          <window.TweakSection label="Hero">
            <window.TweakText
              label="Headline (visual)"
              value={tweaks.heroHeadline}
              onChange={(v)=>tw.setTweak('heroHeadline', v)}
            />
          </window.TweakSection>
          <window.TweakSection label="Layout">
            <window.TweakToggle
              label="Show marquee strip"
              value={tweaks.showMarquee}
              onChange={(v)=>tw.setTweak('showMarquee', v)}
            />
          </window.TweakSection>
        </window.TweaksPanel>
      )}
    </>
  );
}

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