/* Mega-Sweets website — screen router + dynamic content loader */
const { useState: useAppState } = React;

// Bundled defaults. The public page renders these instantly, then overlays whatever
// the admin has saved (fetched from /api/content). Built from the constants in Sections.jsx.
const MS_DEFAULT_CONTENT = {
  perDozen: { cakePops: 30, cakesicles: 42 },
  packages: MS_PACKAGES,
  flavors: MS_FLAVORS.map(([name, slug]) => ({ name, image: `assets/flavors/${slug}.png` })),
  images: {
    hero: 'assets/cakesicles-plate.png',
    cakePops: 'assets/cakepops-basket.png',
    cakesicles: 'assets/cakesicles-plate.png',
  },
};

// Shallow-merge saved content over defaults so any missing key always has a value.
function mergeContent(saved) {
  if (!saved || typeof saved !== 'object') return MS_DEFAULT_CONTENT;
  return {
    perDozen: { ...MS_DEFAULT_CONTENT.perDozen, ...(saved.perDozen || {}) },
    packages: Array.isArray(saved.packages) && saved.packages.length ? saved.packages : MS_DEFAULT_CONTENT.packages,
    flavors: Array.isArray(saved.flavors) && saved.flavors.length ? saved.flavors : MS_DEFAULT_CONTENT.flavors,
    images: { ...MS_DEFAULT_CONTENT.images, ...(saved.images || {}) },
  };
}

function App() {
  const [screen, setScreen] = useAppState('home');
  const [pickedPkg, setPickedPkg] = useAppState(null);
  const [order, setOrder] = useAppState(null);
  const [content, setContent] = useAppState(MS_DEFAULT_CONTENT);

  // Load saved content; fall back silently to defaults on any error.
  React.useEffect(() => {
    let alive = true;
    fetch('/api/content')
      .then(r => r.ok ? r.json() : null)
      .then(data => { if (alive && data) setContent(mergeContent(data)); })
      .catch(() => {});
    // Fire-and-forget page-view beacon (one per load).
    fetch('/api/view', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ path: window.location.pathname, referrer: document.referrer || '' }),
    }).catch(() => {});
    return () => { alive = false; };
  }, []);

  const goOrder = (pkg) => { setPickedPkg(pkg || null); setScreen('build'); window.scrollTo(0, 0); };
  const nav = (s) => { setScreen(s); window.scrollTo(0, 0); };

  return (
    <div className="site">
      <SiteHeader onOrder={() => goOrder()} onNav={nav} />
      {screen === 'home' && (
        <main>
          <Hero content={content} onOrder={() => goOrder()} onFlavors={() => { const el = document.getElementById('flavors'); if (el) window.scrollTo({ top: el.offsetTop - 70, behavior: 'smooth' }); }} />
          <ProductFeature content={content} />
          <FlavorGrid content={content} onOrder={() => goOrder()} />
          <PackageCards content={content} onPick={(p) => goOrder(p)} />
          <FeatureStrip />
        </main>
      )}
      {screen === 'build' && (
        <main><BuildABox content={content} initialPkg={pickedPkg} onBack={() => nav('home')}
          onContinue={(o) => { setOrder(o); setScreen('details'); window.scrollTo(0, 0); }} /></main>
      )}
      {screen === 'details' && (
        <main><OrderDetails order={order} onBack={() => nav('build')}
          onDone={() => { setScreen('confirm'); window.scrollTo(0, 0); }} /></main>
      )}
      {screen === 'confirm' && <main><Confirmation order={order} onHome={() => nav('home')} /></main>}
      <SiteFooter />
    </div>
  );
}

// Route: /admin renders the admin panel; everything else is the marketing site.
const root = ReactDOM.createRoot(document.getElementById('root'));
if (window.location.pathname.replace(/\/$/, '') === '/admin') {
  root.render(<Admin defaults={MS_DEFAULT_CONTENT} mergeContent={mergeContent} />);
} else {
  root.render(<App />);
}