// App-skall: hash-ruting (fungerer på ren statisk hosting uten rewrites),
// lys header (Kirby-tvilling) og handlevogn-skuff. Rot-ruten redirigerer til
// #/domener – domenesøket er butikkens inngang (forsiden bor i domains.jsx).
// Monterer først når alle globals fra de andre filene finnes.
import React, { useState, useEffect } from 'react';
import { createRoot } from 'react-dom/client';

const NS = window.STWORDER;

function useHashRoute() {
  const [route, setRoute] = useState(() => location.hash.replace(/^#\/?/, ''));
  useEffect(() => {
    const onChange = () => {
      setRoute(location.hash.replace(/^#\/?/, ''));
      window.scrollTo(0, 0);
    };
    window.addEventListener('hashchange', onChange);
    return () => window.removeEventListener('hashchange', onChange);
  }, []);
  return route;
}

function App() {
  const route = useHashRoute();
  const [cartOpen, setCartOpen] = useState(false);
  const { StagingBanner, Header, CartDrawer, CheckoutToast } = NS.ui;

  useEffect(() => NS.bus.on('cart:open', () => setCartOpen(true)), []);
  // Lukk skuffen ved navigasjon – ellers blokkerer overlayet den nye siden.
  useEffect(() => { setCartOpen(false); }, [route]);
  // Rot-ruten er domenesøket: normaliser #/ til #/domener (replace, ikke push,
  // så tilbakeknappen ikke havner i en redirect-løkke) – delbare lenker og
  // header-markeringen peker dermed på den faktiske ruten.
  useEffect(() => {
    if (route === '' || route === '/') location.replace('#/domener');
  }, [route]);

  let page;
  if (route === '' || route === '/' || route.startsWith('domener')) page = <NS.flows.Domains />;
  else if (route.startsWith('hosting')) page = <NS.flows.Hosting />;
  else if (route.startsWith('vps')) page = <NS.flows.Vps />;
  else if (route.startsWith('kasse')) page = <NS.pages.Checkout />;
  else if (route.startsWith('kvittering')) page = <NS.pages.Receipt />;
  else page = <NS.flows.Domains />;

  const routeKey = route.split('/')[0] || 'domener';

  return (
    <>
      <StagingBanner />
      <Header route={routeKey} onCart={() => setCartOpen(true)} />
      <main>{page}</main>
      <CartDrawer open={cartOpen} onClose={() => setCartOpen(false)} />
      <NS.flows.UpsellDialog />
      <NS.flows.RdapDialog />
      <NS.flows.TransferDialog />
      <CheckoutToast />
    </>
  );
}

// Vent til alle filer har registrert seg på window.STWORDER før montering.
function ready() {
  return !!(
    NS.ui && NS.data && NS.api && NS.store && NS.i18n &&
    NS.flows && NS.flows.Domains && NS.flows.Hosting && NS.flows.Vps && NS.flows.LiveSearch &&
    NS.pages && NS.pages.Checkout && NS.pages.Receipt
  );
}

function mountWhenReady() {
  if (ready()) {
    createRoot(document.getElementById('root')).render(<App />);
  } else {
    setTimeout(mountWhenReady, 25);
  }
}
mountWhenReady();