// app.jsx — main shell wiring chrome + pages + cart state.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "showBrowserChrome": false,
  "showAnnouncer": true,
  "paperTone": "paper",
  "accentColor": "blood",
  "density": "normal"
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [page, setPage] = React.useState('home');
  const [category, setCategory] = React.useState('all');
  const [search, setSearch] = React.useState('');
  const [country, setCountry] = React.useState('România');
  const [cart, setCart] = React.useState([]);
  const [openProduct, setOpenProduct] = React.useState(null);
  const [checkout, setCheckout] = React.useState(false);
  const [success, setSuccess] = React.useState(false);

  function goTo(p) {
    setPage(p);
    setOpenProduct(null);
    window.scrollTo(0, 0);
  }
  function openProd(p) {
    setOpenProduct(p);
    setPage('product');
    window.scrollTo(0, 0);
  }
  function addToCart(product, qty, size) {
    setCart((c) => [...c, { product, qty, size }]);
    setOpenProduct(null);
    setPage('cart');
    window.scrollTo(0, 0);
  }

  // Apply paper tone tweak to root
  React.useEffect(() => {
    const root = document.documentElement;
    if (tweaks.paperTone === 'silver') {
      root.style.setProperty('--bg-paper', '#C3C3C3');
    } else if (tweaks.paperTone === 'kraft') {
      root.style.setProperty('--bg-paper', '#D6CDB4');
    } else if (tweaks.paperTone === 'platinum') {
      root.style.setProperty('--bg-paper', '#DDDDDD');
    } else {
      root.style.setProperty('--bg-paper', '#E8E2D0');
    }
  }, [tweaks.paperTone]);

  let mainContent;
  if (page === 'home') {
    mainContent = <HomePage onPage={goTo} onOpenProduct={openProd} country={country} setCountry={setCountry} />;
  } else if (page === 'catalog') {
    mainContent = <CatalogPage category={category} search={search} setCategory={setCategory} onOpenProduct={openProd} />;
  } else if (page === 'product' && openProduct) {
    mainContent = <ProductDetailPage product={openProduct} onAdd={addToCart} onBack={() => goTo('catalog')} />;
  } else if (page === 'releases') {
    mainContent = <ReleasesPage />;
  } else if (page === 'news') {
    mainContent = <NewsPage />;
  } else if (page === 'media') {
    mainContent = <MediaPage />;
  } else if (page === 'clan') {
    mainContent = <ClanPage />;
  } else if (page === 'about') {
    mainContent = <AboutPage />;
  } else if (page === 'cart') {
    mainContent = <CartPage cart={cart} onRemove={(i) => setCart((c) => c.filter((_, j) => j !== i))} onCheckout={() => setCheckout(true)} onPage={goTo} country={country} />;
  } else {
    mainContent = <HomePage onPage={goTo} onOpenProduct={openProd} country={country} setCountry={setCountry} />;
  }

  const url = 'http://www.dirtysouthdistrict.com/'
    + (page === 'home' ? 'index.html'
       : page === 'product' && openProduct ? 'catalog/' + openProduct.sku.toLowerCase() + '.html'
       : page + '.html');

  const inner = (
    <div className="page" data-screen-label={'01 ' + page}>
      <Masthead />
      <TopNav page={page} onPage={goTo} cartCount={cart.length} />
      {tweaks.showAnnouncer ? <Announcer /> : null}

      <div className="body-cols">
        <aside className="col-left">
          <CategoryWidget active={category} onPick={(k) => { setCategory(k); goTo('catalog'); }} />
          <SearchWidget onSearch={(q) => { setSearch(q); goTo('catalog'); }} />
          <NavWidget page={page} onPage={goTo} />
          <MembersWidget />
        </aside>
        <main className="col-main">
          {mainContent}
        </main>
        <aside className="col-right">
          <CDRomOffer />
          <StreamPanel />
          <CountryWidget value={country} onChange={setCountry} countries={window.DSD_COUNTRIES} />
          <PollWidget />
          <NewsletterWidget />
          <HitCounter />
          <WebringWidget />
        </aside>
      </div>

      <StatusBar url={url} secure={page === 'cart' || checkout} />
      <Footer />
    </div>
  );

  return (
    <>
      {tweaks.showBrowserChrome ? <BrowserShell url={url}>{inner}</BrowserShell> : inner}

      {checkout ? <CheckoutModal cart={cart} country={country} onClose={() => setCheckout(false)}
                                 onPlace={() => { setCheckout(false); setCart([]); setSuccess(true); }} /> : null}
      {success ? <OrderSuccessModal onClose={() => setSuccess(false)} /> : null}

      <TweaksPanel title="Tweaks · DSD ’98" defaultOpen={false}>
        <TweakSection title="Chrome">
          <TweakToggle label="Browser frame (IE 4)" value={tweaks.showBrowserChrome}
                       onChange={(v) => setTweak('showBrowserChrome', v)} />
          <TweakToggle label="Marquee announcer" value={tweaks.showAnnouncer}
                       onChange={(v) => setTweak('showAnnouncer', v)} />
        </TweakSection>
        <TweakSection title="Theme">
          <TweakRadio label="Paper" value={tweaks.paperTone}
                      onChange={(v) => setTweak('paperTone', v)}
                      options={[
                        { value: 'paper', label: 'Newsprint' },
                        { value: 'silver', label: 'Silver' },
                        { value: 'kraft', label: 'Kraft' },
                        { value: 'platinum', label: 'Platinum' },
                      ]} />
        </TweakSection>
        <TweakSection title="Pages">
          <TweakSelect label="Jump to" value={page}
                       onChange={(v) => goTo(v)}
                       options={[
                         { value: 'home', label: '01. Acasă' },
                         { value: 'catalog', label: '02. Catalog' },
                         { value: 'releases', label: '03. Discografie' },
                         { value: 'news', label: '04. Știri' },
                         { value: 'media', label: '05. Audio/Video' },
                         { value: 'clan', label: '06. Clanul Mistic' },
                         { value: 'about', label: '07. Despre' },
                         { value: 'cart', label: '08. Coș' },
                       ]} />
          <TweakButton label="► Adaugă produs demo în coș"
                       onClick={() => setCart((c) => [...c, { product: window.DSD_CATALOG[3], qty: 1, size: 'M' }])} />
          <TweakButton label="Golește coșul"
                       onClick={() => setCart([])} />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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