/* ============================================================
   CanchApp UI Kit — root app + navigation state
   ============================================================ */
function App() {
  const [tab, setTab] = React.useState('home');
  const [court, setCourt] = React.useState(null);   // detail screen
  const [sheet, setSheet] = React.useState(null);   // 'confirm' | 'success' | 'join'
  const [pending, setPending] = React.useState(null);
  const [joinGame, setJoinGame] = React.useState(null);

  const openCourt = c => setCourt(c);
  const closeDetail = () => setCourt(null);

  const goTab = id => {
    setCourt(null);
    if (id === 'equipos' || id === 'torneos') { setTab('home'); return; }
    setTab(id);
  };

  const onBook = (c, slot, fee) => { setPending({ court: c, slot, fee }); setSheet('confirm'); };
  const onConfirm = () => setSheet('success');
  const onSuccess = () => { setSheet(null); setCourt(null); setTab('reservas'); };
  const onJoin = g => { setJoinGame(g); setSheet('join'); };

  let body, headerMode = 'home', title;
  if (court) {
    headerMode = 'detail'; title = 'Detalle de cancha';
    body = <CourtDetailScreen court={court} onBook={onBook} />;
  } else if (tab === 'home') {
    body = <HomeScreen onGo={goTab} onOpenCourt={openCourt} />;
  } else if (tab === 'explore') {
    headerMode = 'detail'; title = 'Canchas';
    body = <ExploreScreen onOpenCourt={openCourt} />;
  } else if (tab === 'lobo') {
    headerMode = 'detail'; title = 'Lobo Solitario';
    body = <LoboScreen onJoin={onJoin} />;
  } else if (tab === 'reservas') {
    headerMode = 'detail'; title = 'Mis reservas';
    body = <ReservationsScreen />;
  } else if (tab === 'perfil') {
    headerMode = 'detail'; title = 'Perfil';
    body = <ProfileScreen />;
  }

  const showBack = !!court || (headerMode === 'detail' && false);

  return (
    <AppShell>
      {court
        ? <TopHeader mode="detail" title={title} onBack={closeDetail} right={<button style={{ width: 44, height: 44, border: 'none', background: 'transparent', cursor: 'pointer', margin: '0 -10px', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="heart" size={20} color="var(--ink)" /></button>} />
        : headerMode === 'detail'
          ? <SubHeader title={title} />
          : <TopHeader mode="home" />}

      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
        {body}
      </div>

      {!court && <TabBar active={tab} onChange={goTab} />}

      <BottomSheet open={sheet === 'confirm'} onClose={() => setSheet(null)}>
        <ConfirmSheet data={pending} onConfirm={onConfirm} />
      </BottomSheet>
      <BottomSheet open={sheet === 'success'} onClose={onSuccess}>
        {pending && <SuccessSheet court={pending.court} slot={pending.slot} onClose={onSuccess} />}
      </BottomSheet>
      <BottomSheet open={sheet === 'join'} onClose={() => setSheet(null)}>
        {joinGame && <SuccessSheet court={joinGame.court} slot={joinGame.time.replace('Hoy · ', '').replace('Mañana · ', '')} onClose={() => { setSheet(null); setTab('reservas'); }} />}
      </BottomSheet>
    </AppShell>
  );
}

// Simple title-only header for tab screens (no back arrow)
function SubHeader({ title }) {
  return (
    <header style={{ height: 'var(--header-h)', flex: '0 0 auto', background: 'var(--surface)', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', padding: '0 16px', gap: 12 }}>
      <span className="cc-h3" style={{ font: 'var(--text-h3)', flex: 1 }}>{title}</span>
      <Logo size={15} />
    </header>
  );
}

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