// ============================================================
// ATHAR — Router (hash-based)
// Routes:
//   #/              -> Landing
//   #/select        -> Number Selection
//   #/select/:n     -> Perfume Reveal
//   #/checkout      -> Checkout
//   #/confirmation  -> Confirmation
//   #/r/:token      -> Message Reveal
//   #/r/:token/expired -> Expired
// ============================================================

const { useState, useEffect, useRef, useCallback } = React;

function parseHash() {
  const h = window.location.hash || '#/';
  const path = h.replace(/^#/, '') || '/';
  const parts = path.split('/').filter(Boolean);
  return { path, parts };
}

function navigate(to) {
  window.location.hash = to.startsWith('#') ? to : '#' + to;
  window.scrollTo({ top: 0, behavior: 'auto' });
}
window.athNavigate = navigate;

function useRoute() {
  const [route, setRoute] = useState(parseHash());
  useEffect(() => {
    const onHash = () => {
      setRoute(parseHash());
      window.scrollTo({ top: 0, behavior: 'auto' });
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);
  return route;
}

// ============================================================
// Selected number persistence (so checkout/confirm know which #)
// ============================================================
function getSelectedNumber() {
  const n = parseInt(sessionStorage.getItem('athar.selected'), 10);
  return Number.isFinite(n) && window.PERFUMES[n] ? n : 7; // default 7 per spec sample
}
function setSelectedNumber(n) {
  sessionStorage.setItem('athar.selected', String(n));
}

// ============================================================
// Shared nav (pages 1–5 only)
// ============================================================
function Nav({ showBack }) {
  return (
    <nav className="nav" aria-label="primary">
      {showBack ? (
        <button className="nav__back" onClick={() => window.history.back()}>
          Back
        </button>
      ) : <span />}
      <a className="nav__brand" href="#/" aria-label="Athar — home">Athar</a>
      <a className="nav__cart" href="#/select" aria-label="Cart">
        Cart<span className="nav__cart-count">(0)</span>
      </a>
    </nav>
  );
}

// ============================================================
// App
// ============================================================
function App() {
  const { parts } = useRoute();
  // route resolution
  let view = 'landing';
  let params = {};

  if (parts.length === 0) {
    view = 'landing';
  } else if (parts[0] === 'select' && parts.length === 1) {
    view = 'select';
  } else if (parts[0] === 'select' && parts.length === 2) {
    view = 'perfume';
    params.n = parseInt(parts[1], 10);
  } else if (parts[0] === 'checkout') {
    view = 'checkout';
  } else if (parts[0] === 'confirmation') {
    view = 'confirmation';
  } else if (parts[0] === 'r' && parts.length === 2) {
    view = 'reveal';
    params.token = parts[1];
  } else if (parts[0] === 'r' && parts.length === 3 && parts[2] === 'expired') {
    view = 'expired';
    params.token = parts[1];
  } else {
    view = 'landing';
  }

  const isStandalone = view === 'reveal' || view === 'expired';
  const showBack = !isStandalone && view !== 'landing';

  // Page key drives the fade transition on every route change
  const pageKey = view + ':' + JSON.stringify(params);

  let body = null;
  if (view === 'landing') body = <Landing />;
  else if (view === 'select') body = <Select />;
  else if (view === 'perfume') body = <PerfumeReveal n={params.n} />;
  else if (view === 'checkout') body = <Checkout />;
  else if (view === 'confirmation') body = <Confirmation />;
  else if (view === 'reveal') body = <MessageReveal token={params.token} />;
  else if (view === 'expired') body = <Expired token={params.token} />;

  return (
    <React.Fragment>
      {!isStandalone && <Nav showBack={showBack} />}
      <main
        className={'page' + (!isStandalone ? ' has-nav' : '')}
        key={pageKey}
        data-screen-label={pageKey}
      >
        {body}
      </main>
      {!isStandalone && window.Footer && <window.Footer />}
    </React.Fragment>
  );
}

window.AtharApp = App;