// App.jsx — hash router + modal/inquiry orchestration + cart + tweaks
const { useState, useEffect, useCallback } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#B0432F",
  "headline": "argument",
  "cols": 3,
  "warmth": "ink"
}/*EDITMODE-END*/;

const parseHash = () => {
  let h = window.location.hash.replace(/^#\/?/, '').trim();
  return h || 'home';
};

const App = () => {
  const [route, setRoute]   = useState(parseHash());
  const [work, setWork]     = useState(null);   // modal
  const [preset, setPreset] = useState(null);   // inquiry preset
  const [cart, setCart]     = useState([]);     // [{ work, qty }]
  const [cartOpen, setCartOpen] = useState(false);
  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    const onHash = () => setRoute(parseHash());
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  useEffect(() => {
    document.documentElement.style.setProperty('--accent', t.accent);
    document.documentElement.style.setProperty('--cols', t.cols);
  }, [t.accent, t.cols]);

  // Show success/cancel banners from Stripe redirect
  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    if (params.get('payment') === 'success') {
      setCart([]);
      window.history.replaceState(null, '', window.location.pathname + window.location.hash);
    }
  }, []);

  const nav = useCallback((r) => {
    window.location.hash = '/' + r;
    setRoute(r);
    window.scrollTo({ top:0, behavior:'auto' });
  }, []);

  useEffect(() => { window.scrollTo({ top:0 }); }, [route]);
  useEffect(() => { if (route !== 'collect') setPreset(null); }, [route]);

  const openWork  = (w) => setWork(w);
  const closeWork = () => setWork(null);
  const inquire   = (w) => { setWork(null); setPreset(w); nav('collect'); };

  const addToCart = (w) => {
    setCart(prev => {
      const exists = prev.find(i => i.work.id === w.id);
      if (exists) return prev; // originals are one-of-a-kind — no duplicates
      return [...prev, { work: w, qty: 1 }];
    });
    setWork(null);
    setCartOpen(true);
  };

  const removeFromCart = (id) => setCart(prev => prev.filter(i => i.work.id !== id));
  const cartCount = cart.length;

  let view;
  if (route === 'home') {
    view = <window.Home onNav={nav} onOpen={openWork} headline={t.headline} />;
  } else if (route === 'series') {
    view = <window.SeriesPage seriesId={null} onNav={nav} onOpen={openWork} />;
  } else if (route.startsWith('series/')) {
    view = <window.SeriesPage seriesId={route.split('/')[1]} onNav={nav} onOpen={openWork} />;
  } else if (route === 'about') {
    view = <window.About onNav={nav} />;
  } else if (route === 'collect') {
    view = <window.Collect onNav={nav} presetWork={preset} />;
  } else {
    view = <window.Home onNav={nav} onOpen={openWork} headline={t.headline} />;
  }

  const { TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakSelect } = window;

  return (
    <>
      <window.Header route={route} onNav={nav} cartCount={cartCount} onCartOpen={() => setCartOpen(true)} />
      <main>{view}</main>
      <window.Footer onNav={nav} />
      {work && (
        <window.PaintingDetail
          work={work}
          onClose={closeWork}
          onInquire={inquire}
          onAddToCart={addToCart}
          inCart={!!cart.find(i => i.work.id === work?.id)}
        />
      )}
      <window.CartDrawer
        open={cartOpen}
        cart={cart}
        onClose={() => setCartOpen(false)}
        onRemove={removeFromCart}
      />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Hero" />
        <TweakSelect label="Headline" value={t.headline}
          options={[
            { value:'argument', label:'The argument is the work' },
            { value:'contact',  label:'Art was once contact' },
            { value:'becoming', label:'Always becoming' },
          ]}
          onChange={(v) => setTweak('headline', v)} />
        <TweakSection label="Accent" />
        <TweakColor label="Accent color" value={t.accent}
          options={['#B0432F', '#8E6347', '#6E7050', '#0A0A0A']}
          onChange={(v) => setTweak('accent', v)} />
        <TweakSection label="Galleries" />
        <TweakRadio label="Columns" value={String(t.cols)}
          options={['3', '4']}
          onChange={(v) => setTweak('cols', Number(v))} />
      </TweaksPanel>
    </>
  );
};

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