/* Timeless Totes — App shell, routing, global quote state */
const { useState, useEffect } = React;

function App() {
  const [route, setRoute] = useState(window.location.hash || '#/');
  const [cart, setCart] = useState([]);
  const [drawerOpen, setDrawerOpen] = useState(false);
  const [toast, setToast] = useState(null);
  const [quoteArtwork, setQuoteArtwork] = useState(null);

  useEffect(() => {
    const onHash = () => setRoute(window.location.hash || '#/');
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  const navigate = (path) => {
    if (path === route) window.scrollTo({ top: 0, behavior: 'smooth' });
    window.location.hash = path;
    setRoute(path);
    window.scrollTo(0, 0);
  };

  const addToQuote = (p) => {
    const item = Object.assign({}, p, { itemId: p.itemId || (Date.now() + Math.random()) });
    setCart(c => [...c, item]);
    setToast(p.name + ' added to your quote');
    setTimeout(() => setToast(null), 4500);
  };
  const removeFromQuote = (i) => setCart(c => c.filter((_, idx) => idx !== i));
  const clearCart = () => setCart([]);

  const ctx = {
    route, navigate, cart, addToQuote, removeFromQuote, clearCart,
    drawerOpen, openDrawer: () => setDrawerOpen(true), closeDrawer: () => setDrawerOpen(false),
    quoteArtwork, setQuoteArtwork, clearQuoteArtwork: () => setQuoteArtwork(null),
  };

  // Parse route + query
  const [path, query] = route.split('?');
  const params = new URLSearchParams(query || '');
  let page;
  if (path === '#/' || path === '#' || path === '') page = <HomePage ctx={ctx} />;
  else if (path === '#/products') page = <ProductsPage ctx={ctx} />;
  else if (path.startsWith('#/product/')) page = <ProductDetailPage ctx={ctx} slug={path.replace('#/product/', '')} />;
  else if (path === '#/quote') page = <QuotePage ctx={ctx} mode={params.get('mode')} />;
  else if (path === '#/how-it-works') page = <HowItWorksPage ctx={ctx} />;
  else if (path === '#/wholesale') page = <WholesalePage ctx={ctx} />;
  else if (path === '#/artwork') page = <ArtworkPage ctx={ctx} />;
  else if (path === '#/design-lab') page = <DesignLabPage ctx={ctx} />;
  else if (path === '#/quality') page = <QualityPage ctx={ctx} />;
  else if (path === '#/contact') page = <ContactPage ctx={ctx} />;
  else if (path === '#/faq') page = <FaqPage ctx={ctx} />;
  else if (path === '#/privacy') page = <PrivacyPage />;
  else if (path === '#/terms') page = <TermsPage />;
  else if (path === '#/shipping-policy') page = <ShippingPolicyPage />;
  else if (path === '#/quote-policy') page = <QuotePolicyPage />;
  else page = <HomePage ctx={ctx} />;

  return (
    <div>
      <Header ctx={ctx} />
      <div key={route}>{page}</div>
      <Footer ctx={ctx} />
      <QuoteDrawer ctx={ctx} />
      {toast && (
        <div style={{
          position: 'fixed', bottom: 26, left: '50%', transform: 'translateX(-50%)', zIndex: 95,
          background: 'var(--navy)', color: '#fff', padding: '14px 20px', borderRadius: 100,
          boxShadow: 'var(--shadow-lg)', display: 'flex', alignItems: 'center', gap: 12, fontSize: '.95rem', fontWeight: 600,
        }} className="fade-up">
          <span style={{ width: 24, height: 24, borderRadius: '50%', background: 'var(--teal)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="check" size={15} /></span>
          {toast}
          <button onClick={() => { setToast(null); setDrawerOpen(true); }} style={{ background: 'rgba(255,255,255,.15)', border: 'none', color: '#fff', padding: '6px 12px', borderRadius: 100, fontWeight: 600, fontSize: '.85rem' }}>View</button>
        </div>
      )}
    </div>
  );
}

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