/* =========================================================================
   Morning Mob — app shell
   View routing, cart state, drawer, and the Tweaks panel.
   ========================================================================= */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "displayScale": 1,
  "editorialAccent": "#7a8c6e",
  "shopColumns": 4
}/*EDITMODE-END*/;

const ACCENT_OPTIONS = ['#000000', '#7a8c6e', '#8b6f4e', '#9e4e2e', '#4a5a7a'];
const SCREEN_LABEL = {
  home: 'Home', shop: 'Shop', product: 'Product detail',
  about: 'Our story', contact: 'Contact',
  faq: 'FAQ', privacy: 'Privacy policy', terms: 'Terms of service', checkout: 'Register interest',
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [view, setView] = useState('home');
  const [current, setCurrent] = useState(null);
  const [shopCat, setShopCat] = useState(null);
  const [cart, setCart] = useState([]);
  const [cartOpen, setCartOpen] = useState(false);

  const go = (v, arg) => {
    if (v === 'shop') setShopCat(arg || null);
    setView(v);
    setCartOpen(false);
    window.scrollTo(0, 0);
  };
  const openProduct = (p) => { setCurrent(p); setView('product'); setCartOpen(false); window.scrollTo(0, 0); };

  const addToCart = (product, size, colour) => {
    if (!size) return;
    setCart((c) => {
      const ex = c.find((i) => i.product.id === product.id && i.size === size && i.colour === colour);
      if (ex) return c.map((i) => i === ex ? { ...i, qty: i.qty + 1 } : i);
      return [...c, { product, size, colour, qty: 1 }];
    });
    setCartOpen(true);
  };
  const changeQty = (id, size, colour, delta) => setCart((c) => c
    .map((i) => (i.product.id === id && i.size === size && i.colour === colour) ? { ...i, qty: i.qty + delta } : i)
    .filter((i) => i.qty > 0));

  const cartCount = cart.reduce((s, i) => s + i.qty, 0);
  const tweaks = { displayScale: t.displayScale, editorialAccent: t.editorialAccent, shopColumns: t.shopColumns };

  return (
    <MMTweaksCtx.Provider value={tweaks}>
      <TopNav cartCount={cartCount} onOpenCart={() => setCartOpen(true)} go={go} view={view} />

      <main data-screen-label={SCREEN_LABEL[view] || view} key={view}>
        {view === 'home' && (
          <React.Fragment>
            <HomeView go={go} onOpen={openProduct} />
            <NewsletterBand go={go} />
            <Footer go={go} />
          </React.Fragment>
        )}

        {view === 'shop' && (
          <React.Fragment>
            <CollectionView products={MM_PRODUCTS} onOpen={openProduct} initialCat={shopCat} />
            <NewsletterBand go={go} />
            <Footer go={go} />
          </React.Fragment>
        )}

        {view === 'product' && current && (
          <React.Fragment>
            <ProductDetail product={current} onBack={() => go('shop')} onAdd={addToCart} onOpen={openProduct} />
            <Footer go={go} />
          </React.Fragment>
        )}

        {view === 'about' && (
          <React.Fragment>
            <StoryView />
            <Footer go={go} />
          </React.Fragment>
        )}

        {view === 'contact' && (
          <React.Fragment>
            <ContactView />
            <Footer go={go} />
          </React.Fragment>
        )}

        {view === 'faq' && (
          <React.Fragment>
            <FaqView faq={MM_FAQ} go={go} />
            <Footer go={go} />
          </React.Fragment>
        )}

        {view === 'privacy' && (
          <React.Fragment>
            <LegalView doc={MM_LEGAL.privacy} />
            <Footer go={go} />
          </React.Fragment>
        )}

        {view === 'terms' && (
          <React.Fragment>
            <LegalView doc={MM_LEGAL.terms} />
            <Footer go={go} />
          </React.Fragment>
        )}

        {view === 'checkout' && (
          <Checkout items={cart} onDone={() => setCart([])} onShop={() => go('shop')} go={go} />
        )}
      </main>

      <CartDrawer open={cartOpen} items={cart} onClose={() => setCartOpen(false)}
        onQty={changeQty} onCheckout={() => go('checkout')} onShop={() => go('shop')} />

      <TweaksPanel>
        <TweakSection label="Typography" />
        <TweakSlider label="Display scale" value={t.displayScale} min={0.85} max={1.2} step={0.05} unit="×"
          onChange={(v) => setTweak('displayScale', v)} />
        <TweakSection label="Shop" />
        <TweakRadio label="Grid density" value={String(t.shopColumns)} options={['3', '4']}
          onChange={(v) => setTweak('shopColumns', Number(v))} />
        <TweakSection label="Editorial accent" />
        <TweakColor label="Accent" value={t.editorialAccent} options={ACCENT_OPTIONS}
          onChange={(v) => setTweak('editorialAccent', v)} />
        <div style={{ fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 300, color: 'var(--muted)', lineHeight: 1.5, marginTop: 4 }}>
          Used only on editorial pages (About, Contact). Commerce stays black-on-white.
        </div>
      </TweaksPanel>
    </MMTweaksCtx.Provider>
  );
}

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