// Root app — routing + state

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "purple",
  "showTicker": true,
  "gridBg": true
}/*EDITMODE-END*/;

function App() {
  const [session] = useSession();
  const [page, setPage] = React.useState('home');
  const [pageProps, setPageProps] = React.useState({});
  const [cart, setCart] = React.useState([]);
  const [purchases, setPurchases] = React.useState([]);
  const [checkoutSession, setCheckoutSession] = React.useState(null);
  const [tweaks, setTweaks] = React.useState(TWEAK_DEFAULTS);
  const [tweaksOpen, setTweaksOpen] = React.useState(false);
  const [authOpen, setAuthOpen] = React.useState(false);
  const [dataReady, setDataReady] = React.useState(false);
  const [dataError, setDataError] = React.useState(null);
  const [dataVersion, setDataVersion] = React.useState(0);
  const [searchQ, setSearchQ] = React.useState('');
  const [isAdmin, setIsAdmin] = React.useState(false);

  React.useEffect(() => { applyAccent(tweaks.accent); }, [tweaks.accent]);

  // Load Supabase data on mount
  const refreshData = React.useCallback(async () => {
    try {
      await loadStore();
      setDataReady(true);
      setDataVersion(v => v + 1);
    } catch (e) {
      setDataError(e.message || String(e));
    }
  }, []);
  React.useEffect(() => { refreshData(); }, [refreshData]);

  // Check admin status on auth change
  React.useEffect(() => {
    if (!session) { setIsAdmin(false); return; }
    (async () => {
      const { data } = await sb.from('admins').select('user_id').eq('user_id', session.user.id).maybeSingle();
      setIsAdmin(!!data);
    })();
  }, [session]);

  React.useEffect(() => {
    const handler = (e) => {
      if (e.data?.type === '__activate_edit_mode') setTweaksOpen(true);
      if (e.data?.type === '__deactivate_edit_mode') setTweaksOpen(false);
    };
    window.addEventListener('message', handler);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', handler);
  }, []);

  const updateTweaks = (patch) => {
    setTweaks(t => ({ ...t, ...patch }));
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: patch }, '*');
  };

  React.useEffect(() => { window.scrollTo({ top: 0, behavior: 'instant' }); }, [page, pageProps]);

  const go = (p, props = {}) => {
    setPage(p);
    setPageProps(props);
  };

  const onBuyNow = (product, variant) => {
    const s = {
      step: 'select',
      product,
      variant,
      crypto: null,
      orderId: randomOrderId(),
      confirmed: 0,
      txid: randomTxid(),
    };
    setCheckoutSession(s);
    setPage('checkout');
  };

  const onAdvanceCheckout = (patch) => {
    setCheckoutSession(s => {
      const next = { ...s, ...patch };
      if (patch.step === 'delivered') {
        setPurchases(pl => [
          { id: s.orderId, product: s.product, variant: s.variant.label, paid: s.variant.price, crypto: s.crypto.symbol, when: 'just now', status: 'delivered' },
          ...pl,
        ]);
      }
      return next;
    });
  };

  const onResetCheckout = () => {
    setCheckoutSession(null);
    setPage('home');
  };

  const onAddToCart = (product, variant) => {
    setCart(c => [...c, { product, variant }]);
  };

  const onSearch = (q) => {
    setSearchQ(q);
    go('catalog', { query: q });
  };

  const transitionKey = `${page}:${JSON.stringify(pageProps)}:${dataVersion}`;

  if (dataError) {
    return (
      <div className="min-h-screen flex items-center justify-center p-6">
        <div className="glass rounded-xl p-5 max-w-md text-sm">
          <div className="text-white/80 font-semibold mb-1">Couldn't load store data</div>
          <div className="text-white/55 text-xs mono break-all">{dataError}</div>
        </div>
      </div>
    );
  }
  if (!dataReady) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-xs mono uppercase tracking-widest text-white/40 flex items-center gap-2">
          <span className="pulse"><Dot size={6} /></span> loading
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen pb-24 md:pb-0" data-screen-label={page}>
      <TopNav
        page={page === 'product' ? 'catalog' : page}
        go={go}
        cartCount={cart.length}
        searchQ={searchQ}
        onSearch={onSearch}
        session={session}
        onSignOut={signOut}
        onOpenAuth={() => setAuthOpen(true)}
        isAdmin={isAdmin}
      />

      <div key={transitionKey} className="page-enter">
        {page === 'home' && <HomePage go={go} onAddToCart={onAddToCart} />}
        {page === 'catalog' && <CatalogPage initialCategory={pageProps.category || 'all'} initialQuery={pageProps.query ?? searchQ} go={go} onAddToCart={onAddToCart} />}
        {page === 'product' && <ProductPage productId={pageProps.productId} go={go} onBuyNow={onBuyNow} onAddToCart={onAddToCart} />}
        {page === 'checkout' && checkoutSession && (
          <CheckoutPage session={checkoutSession} onAdvance={onAdvanceCheckout} onReset={onResetCheckout} go={go} />
        )}
        {page === 'track' && <TrackPage go={go} />}
        {page === 'account' && <AccountPage go={go} purchases={purchases} />}
        {page === 'reviews' && <ReviewsPage />}
        {page === 'cart' && <CartPage cart={cart} go={go} onRemove={(i) => setCart(c => c.filter((_, j) => j !== i))} onCheckout={(it) => onBuyNow(it.product, it.variant)} />}
        {page === 'admin' && isAdmin && <AdminPage refresh={refreshData} />}
        {page === 'admin' && !isAdmin && (
          <div className="max-w-[720px] mx-auto p-8 mt-16 glass rounded-2xl text-center">
            <div className="text-[11px] mono uppercase tracking-widest text-white/40 mb-2">Restricted</div>
            <div className="text-xl font-semibold">Admin access only</div>
            <p className="text-sm text-white/55 mt-2">
              {session ? 'Your account is not an admin.' : 'Sign in with an admin account to continue.'}
            </p>
          </div>
        )}
      </div>

      {page !== 'checkout' && <Footer />}

      <BottomNav page={page === 'product' ? 'catalog' : page} go={go} cartCount={cart.length} />

      {tweaksOpen && <TweaksPanel tweaks={tweaks} onChange={updateTweaks} onClose={() => { setTweaksOpen(false); window.parent.postMessage({ type: '__deactivate_edit_mode' }, '*'); }} />}

      {authOpen && !session && <AuthModal onClose={() => setAuthOpen(false)} />}
    </div>
  );
}

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