// App shell
const AppInner = () => {
  const [route, setRoute] = React.useState(() => localStorage.getItem('tixwerk-route') || 'dashboard');
  // Full-bleed routes render without sidebar/header chrome
  const FULL_BLEED = ['checkin', 'onboarding'];
  const isFullBleed = FULL_BLEED.includes(route);

  // Route labels used for the breadcrumb / page title in the header
  const ROUTE_META = {
    dashboard: { label: 'Dashboard' },
    events: { label: 'Events' },
    'event-detail': { label: 'Events', child: 'Apparat · Berghain', parent: 'events' },
    bookings: { label: 'Bookings' },
    attendees: { label: 'Attendees' },
    analytics: { label: 'Analytics' },
    finance: { label: 'Finance' },
    coupons: { label: 'Promo codes' },
    create: { label: 'Events', child: 'New event', parent: 'events' },
    'design-system': { label: 'Design system' },
    messages: { label: 'Messages' },
    settings: { label: 'Settings' },
    help: { label: 'Help & docs' },
  };
  const meta = ROUTE_META[route] || { label: route };
  const [cmdOpen, setCmdOpen] = React.useState(false);
  React.useEffect(() => { localStorage.setItem('tixwerk-route', route); }, [route]);

  React.useEffect(() => {
    const onKey = (e) => {
      if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.isContentEditable) return;
      if ((e.metaKey || e.ctrlKey) && e.key === 'k') { e.preventDefault(); setCmdOpen(true); return; }
      if (e.key === 'c' && !e.metaKey && !e.ctrlKey) { setRoute('create'); }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  if (isFullBleed) {
    return (
      <>
        {route === 'checkin' && <CheckIn setRoute={setRoute}/>}
        {route === 'onboarding' && <Onboarding setRoute={setRoute}/>}
        <CommandPalette open={cmdOpen} onClose={() => setCmdOpen(false)} onNavigate={r => setRoute(r)}/>
      </>
    );
  }

  return (
    <div className="app">
      <Sidebar route={route} setRoute={setRoute}/>
      <main style={{ minWidth: 0, background: route === 'create' ? 'var(--bg-sunken)' : 'var(--bg)' }}>
        {/* Top header bar for non-create routes */}
        {route !== 'create' && route !== 'event-detail' && (
          <div style={{
            display: 'flex', alignItems: 'center', gap: 14,
            padding: '12px 28px', borderBottom: '1px solid var(--line)',
            background: 'var(--bg)', position: 'sticky', top: 0, zIndex: 5, minHeight: 56,
          }}>
            {/* Breadcrumb / current page */}
            <div style={{ display:'flex', alignItems:'center', gap: 8, minWidth: 0 }}>
              {meta.child ? (
                <>
                  <button onClick={() => setRoute(meta.parent)} style={{
                    background:'transparent', border:0, padding: 0, cursor:'pointer',
                    fontFamily:'inherit', fontSize: 13.5, fontWeight: 500,
                    color: 'var(--ink-3)',
                  }}>{meta.label}</button>
                  <Icon name="chevronDown" size={12} style={{ color:'var(--ink-4)', transform:'rotate(-90deg)' }}/>
                  <span style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--ink)', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{meta.child}</span>
                </>
              ) : (
                <span style={{ fontSize: 14, fontWeight: 600, color: 'var(--ink)' }}>{meta.label}</span>
              )}
            </div>

            <div style={{ flex: 1 }}/>

            {/* Search */}
            <button onClick={() => setCmdOpen(true)} style={{
              display: 'flex', alignItems: 'center', gap: 8,
              padding: '0 10px', height: 32, borderRadius: 8, background: 'var(--bg-sunken)',
              width: 320, color: 'var(--ink-3)',
              cursor: 'pointer', border: '1px solid var(--line)', fontFamily: 'inherit',
            }}>
              <Icon name="search" size={14}/>
              <span style={{ fontSize: 12.5, flex: 1, textAlign: 'left' }}>Search or jump to…</span>
              <div style={{ display: 'flex', gap: 3 }}><Kbd>⌘</Kbd><Kbd>K</Kbd></div>
            </button>

            {/* Quick actions */}
            <Button variant="secondary" size="sm" icon="qr" onClick={() => setRoute('checkin')}>Check-in mode</Button>

            {/* Notifications */}
            <button title="Notifications" style={{ width: 32, height: 32, borderRadius: 8, border: '1px solid var(--line)', background: 'var(--bg-raised)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', position: 'relative', flexShrink: 0 }}>
              <Icon name="bell" size={14}/>
              <span style={{ position: 'absolute', top: 5, right: 5, width: 7, height: 7, borderRadius: 99, background: 'var(--accent)', border: '1.5px solid var(--bg-raised)' }}/>
            </button>

            {/* Dev-only: design system link, tucked in a dropdown-esque button */}
            <button onClick={() => setRoute('design-system')} title="Design system" style={{ width: 32, height: 32, borderRadius: 8, border: '1px solid var(--line)', background: route === 'design-system' ? 'var(--bg-muted)' : 'var(--bg-raised)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', flexShrink: 0, color: 'var(--ink-2)' }}>
              <Icon name="sparkle" size={14}/>
            </button>
          </div>
        )}

        {route === 'dashboard' && <Dashboard setRoute={setRoute}/>}
        {route === 'events' && <EventsList setRoute={setRoute}/>}
        {route === 'create' && <CreateEvent setRoute={setRoute}/>}
        {route === 'event-detail' && <EventDetail setRoute={setRoute}/>}
        {route === 'bookings' && <Bookings setRoute={setRoute}/>}
        {route === 'design-system' && <DesignSystem setRoute={setRoute}/>}
        {route === 'attendees' && <Attendees setRoute={setRoute}/>}
        {route === 'analytics' && <Analytics setRoute={setRoute}/>}
        {route === 'finance' && <Finance setRoute={setRoute}/>}
        {route === 'coupons' && <Coupons setRoute={setRoute}/>}
        {route === 'messages' && <Messages setRoute={setRoute}/>}
        {!['dashboard','events','create','event-detail','bookings','design-system','attendees','analytics','finance','coupons','checkin','onboarding','messages'].includes(route) && (
          <div style={{ padding: 60, textAlign: 'center', color: 'var(--ink-3)' }}>
            <div className="display" style={{ fontSize: 24, color: 'var(--ink)' }}>{route.charAt(0).toUpperCase() + route.slice(1)}</div>
            <div style={{ fontSize: 14, marginTop: 8 }}>This screen is out of scope for the mockup — but the pattern is consistent with other screens.</div>
            <Button variant="secondary" size="md" style={{ marginTop: 18 }} onClick={() => setRoute('dashboard')}>Back to dashboard</Button>
          </div>
        )}
      </main>
      <CommandPalette open={cmdOpen} onClose={() => setCmdOpen(false)} onNavigate={r => setRoute(r)}/>
    </div>
  );
};

const App = () => (
  <ToastProvider>
    <AppInner/>
  </ToastProvider>
);

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