// app.jsx — pathname-based router + mount.

const { useState: aU, useEffect: aE, useCallback: aC } = React;

function parseLocation() {
  const path = window.location.pathname || '/';
  const search = window.location.search || '';
  const params = new URLSearchParams(search);
  return { path, params };
}

function App() {
  const [loc, setLoc] = aU(parseLocation());

  aE(() => {
    const onPop = () => setLoc(parseLocation());
    window.addEventListener('popstate', onPop);
    return () => window.removeEventListener('popstate', onPop);
  }, []);

  const navigate = aC((to) => {
    if (!to) return;
    if (to === window.location.pathname + window.location.search) return;
    window.history.pushState({}, '', to);
    setLoc(parseLocation());
    window.scrollTo(0, 0);
  }, []);

  // Determine which screen + bottom-nav highlight
  const { path, params } = loc;
  let screen = null;
  let navKey = 'home';

  if (path === '/' || path === '') {
    screen = <LandingScreen onNav={navigate} />;
    navKey = 'home';
  } else if (path === '/new') {
    const prefill = params.get('tournament') || '';
    screen = <NewSwapScreen onNav={navigate} prefillTournament={prefill} />;
    navKey = 'new';
  } else if (path === '/swaps') {
    screen = <MySwapsScreen onNav={navigate} />;
    navKey = 'swaps';
  } else if (path === '/teams') {
    screen = <TeamsScreen onNav={navigate} />;
    navKey = 'teams';
  } else if (path === '/reg') {
    screen = <RegScreen onNav={navigate} />;
    navKey = 'reg';
  } else if (path === '/scan') {
    screen = <ScanScreen onNav={navigate} />;
    navKey = 'scan';
  } else if (path.startsWith('/s/')) {
    const id = path.split('/s/')[1].split('/')[0].split('?')[0];
    const role = params.get('role');
    const token = params.get('token');
    screen = <SwapScreen swapId={id} role={role} token={token} onNav={navigate} />;
    navKey = 'swaps';
  } else {
    screen = (
      <div className="page">
        <div className="eyebrow gold">◆ 404</div>
        <h2 className="serif" style={{ fontSize: 48, lineHeight: 1, marginBottom: 8 }}>Folded.</h2>
        <p className="paper" style={{ marginBottom: 24 }}>That hand isn't in the deck.</p>
        <button className="btn btn-gold btn-block btn-lg" onClick={() => navigate('/')}>Back home</button>
      </div>
    );
  }

  // DB-not-ready banner
  const dbBanner = !window.pjDBReady && (
    <div style={{
      background: 'var(--amber-tint)',
      borderBottom: '1px solid rgba(224,168,58,0.4)',
      padding: '10px 16px',
      textAlign: 'center'
    }}>
      <span className="mono" style={{ fontSize: 11, letterSpacing: '0.14em', color: 'var(--amber)', textTransform: 'uppercase' }}>
        ◆ Database initializing — swaps temporarily read-only
      </span>
    </div>
  );

  return (
    <div className="app">
      {window.PJ_UI && <window.PJ_UI.TopBar onNav={navigate} current={navKey} />}
      {dbBanner}
      {screen}
      {window.PJ_UI && <window.PJ_UI.BottomNav current={navKey} onNav={navigate} />}
    </div>
  );
}

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