// Left sidebar navigation
const Sidebar = ({ route, setRoute }) => {
  const rail = false;
  const width = rail ? 68 : 240;

  const nav = [
    { icon: 'dashboard', label: 'Dashboard', route: 'dashboard' },
    { icon: 'calendar', label: 'Events', route: 'events', count: 24 },
    { icon: 'ticket', label: 'Bookings', route: 'bookings', count: 1821 },
    { icon: 'users', label: 'Attendees', route: 'attendees' },
    { icon: 'bar', label: 'Analytics', route: 'analytics' },
    { icon: 'money', label: 'Finance', route: 'finance' },
    { icon: 'coupon', label: 'Coupons', route: 'coupons' },
    { icon: 'message', label: 'Messages', route: 'messages' },
  ];
  const bottom = [
    { icon: 'help', label: 'Help & docs', route: 'help' },
    { icon: 'settings', label: 'Settings', route: 'settings' },
  ];

  const Item = ({ item }) => {
    const active = route === item.route;
    return (
      <button
        onClick={() => setRoute(item.route)}
        title={rail ? item.label : undefined}
        style={{
          display: 'flex', alignItems: 'center', gap: 12,
          padding: rail ? '10px' : '8px 10px',
          justifyContent: rail ? 'center' : 'flex-start',
          borderRadius: 8, border: 0,
          background: active ? 'var(--bg-muted)' : 'transparent',
          color: active ? 'var(--ink)' : 'var(--ink-2)',
          fontFamily: 'inherit', fontSize: 13.5, fontWeight: active ? 600 : 500,
          width: '100%', textAlign: 'left', cursor: 'pointer',
          position: 'relative',
        }}
      >
        <Icon name={item.icon} size={18} />
        {!rail && <>
          <span style={{ flex: 1 }}>{item.label}</span>
          {item.count != null && <span style={{
            fontSize: 11, color: 'var(--ink-3)', fontWeight: 500,
            fontFamily: 'var(--font-mono)',
          }}>{item.count > 999 ? '1.8k' : item.count}</span>}
        </>}
        {active && rail && <span style={{
          position: 'absolute', left: 0, top: 8, bottom: 8, width: 3,
          background: 'var(--ink)', borderRadius: '0 3px 3px 0',
        }}/>}
      </button>
    );
  };

  return (
    <aside style={{
      width, flexShrink: 0,
      background: 'var(--bg)',
      borderRight: '1px solid var(--line)',
      display: 'flex', flexDirection: 'column',
      padding: rail ? '18px 10px' : '18px 14px',
      gap: 18, transition: 'width 200ms',
      position: 'sticky', top: 0, height: '100vh',
    }}>
      {/* Brand */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: rail ? 0 : '2px 4px', justifyContent: rail ? 'center' : 'flex-start' }}>
        <div style={{
          width: 32, height: 32, borderRadius: 9,
          background: 'var(--ink)', color: 'var(--bg)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 500,
          flexShrink: 0,
        }}>T</div>
        {!rail && <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1.2 }}>
          <span style={{ fontSize: 14.5, fontWeight: 600, letterSpacing: '-0.01em' }}>Tixwerk</span>
          <span style={{ fontSize: 11, color: 'var(--ink-3)' }}>Organizer workspace</span>
        </div>}
      </div>

      {/* Workspace switcher */}
      {!rail && <button style={{
        display: 'flex', alignItems: 'center', gap: 10,
        padding: '8px 10px', borderRadius: 8,
        border: '1px solid var(--line)', background: 'var(--bg-raised)',
        fontFamily: 'inherit', width: '100%', cursor: 'pointer', textAlign: 'left',
      }}>
        <Avatar name="Rhythm Events" size={24} />
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', lineHeight: 1.2, minWidth: 0 }}>
          <span style={{ fontSize: 12.5, fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>Rhythm Events GmbH</span>
          <span style={{ fontSize: 10.5, color: 'var(--ink-3)' }}>Berlin · Pro plan</span>
        </div>
        <Icon name="chevronDown" size={14} style={{ color: 'var(--ink-3)' }}/>
      </button>}

      {/* Create CTA */}
      <button
        onClick={() => setRoute('create')}
        title={rail ? 'Create event' : undefined}
        style={{
          display: 'flex', alignItems: 'center', gap: 8, justifyContent: 'center',
          height: 38, borderRadius: 10,
          background: 'var(--ink)', color: 'var(--bg)', border: 0,
          fontFamily: 'inherit', fontSize: 13.5, fontWeight: 600,
          cursor: 'pointer',
          boxShadow: '0 1px 2px rgba(0,0,0,0.04)',
        }}
      >
        <Icon name="plus" size={16} />
        {!rail && 'Create event'}
        {!rail && <Kbd style={{ marginLeft: 'auto' }}>C</Kbd>}
      </button>

      {/* Nav */}
      <nav style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
        {!rail && <div style={{ fontSize: 10.5, fontWeight: 600, color: 'var(--ink-4)', textTransform: 'uppercase', letterSpacing: '0.08em', padding: '6px 10px 4px' }}>Workspace</div>}
        {nav.map(item => <Item key={item.route} item={item} />)}
      </nav>

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

      {/* Upgrade card */}
      {!rail && <div style={{
        padding: 14, borderRadius: 12,
        background: 'var(--accent-soft)',
        border: '1px solid var(--accent-soft-2)',
        display: 'flex', flexDirection: 'column', gap: 8,
      }}>
        <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--accent-ink)' }}>Unlock Seat Maps</div>
        <div style={{ fontSize: 11.5, color: 'var(--accent-ink)', opacity: 0.8, lineHeight: 1.4 }}>Interactive seat selection, category pricing, and more on Pro.</div>
        <button style={{
          marginTop: 4, height: 28, borderRadius: 7, border: 0,
          background: 'var(--accent-ink)', color: '#fff',
          fontFamily: 'inherit', fontSize: 12, fontWeight: 600, cursor: 'pointer',
        }}>Go Pro</button>
      </div>}

      {/* Bottom nav */}
      <nav style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
        {bottom.map(item => <Item key={item.route} item={item} />)}
      </nav>

      {/* User */}
      {!rail && <div style={{
        display: 'flex', alignItems: 'center', gap: 10,
        padding: '8px 4px', borderTop: '1px solid var(--line)', paddingTop: 12,
      }}>
        <Avatar name="Priya Menon" size={28} />
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', lineHeight: 1.2, minWidth: 0 }}>
          <span style={{ fontSize: 12.5, fontWeight: 600 }}>Priya Menon</span>
          <span style={{ fontSize: 10.5, color: 'var(--ink-3)' }}>priya@rhythm-events.de</span>
        </div>
        <Icon name="more" size={16} style={{ color: 'var(--ink-3)' }}/>
      </div>}
      {rail && <div style={{ display: 'flex', justifyContent: 'center' }}><Avatar name="Priya Menon" size={28} /></div>}
    </aside>
  );
};

window.Sidebar = Sidebar;