// Sidebar + topbar shell.

// self-contained uptime formatter (components.jsx isn't loaded in this app)
function fmtUptimeShell(startedAt) {
  const t = startedAt instanceof Date ? startedAt.getTime() : Number(startedAt);
  const ms = Math.max(0, Date.now() - t);
  const d = Math.floor(ms / 86400000);
  const h = Math.floor((ms % 86400000) / 3600000);
  const m = Math.floor((ms % 3600000) / 60000);
  return `${d}d ${h}h ${m}m`;
}

const NAV = [
  { key: 'overview', label: 'Overview', icon: 'home' },
  { key: 'shifts', label: 'Shifts', icon: 'clock' },
  { key: 'requests', label: 'Requests', icon: 'inbox', badge: '3', danger: false },
  { key: 'servers', label: 'Servers', icon: 'server', badge: '8' },
  { key: 'commands', label: 'Commands', icon: 'zap', badge: '51' },
  { key: 'activity', label: 'Activity', icon: 'users' },
  { key: 'moderation', label: 'Moderation', icon: 'shield' },
  { key: 'logs', label: 'Logs', icon: 'list' },
  { key: 'errors', label: 'Errors', icon: 'alert', badge: '2', danger: true },
  { key: 'scheduler', label: 'Scheduler', icon: 'calendar' },
  { key: 'plugins', label: 'Plugins', icon: 'plug' },
  { key: 'auth', label: '2FA', icon: 'shield' },
  { key: 'settings', label: 'Settings', icon: 'gear' },
];

const NAV_LABELS = {
  overview: 'Overview',
  shifts: 'Shifts',
  requests: 'Requests',
  servers: 'Servers',
  commands: 'Commands',
  activity: 'Activity',
  moderation: 'Moderation',
  logs: 'Logs',
  errors: 'Errors',
  scheduler: 'Scheduler',
  plugins: 'Plugins',
  auth: '2FA',
  settings: 'Settings',
};

function Sidebar({ route, onRoute, status }) {
  return (
    <aside className="sidebar">
      <div className="brand">
        <div className="brand-mark">G</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div className="brand-name">Gyroscope.Ai</div>
          <div className="brand-status">
            <span className={`dot ${status === 'degraded' ? 'warn' : status === 'down' ? 'danger' : ''}`}/>
            {status === 'online' ? 'Online' : status === 'degraded' ? 'Degraded' : 'Offline'} · {BOT.version}
          </div>
        </div>
      </div>

      <nav className="nav">
        <div className="nav-label">Operations</div>
        {['overview', 'shifts', 'requests'].map((k) => {
          const n = NAV.find((x) => x.key === k);
          const Icon = I[n.icon];
          return (
            <button key={n.key} className="nav-item" aria-current={route === n.key} onClick={() => onRoute(n.key)}>
              <Icon/>
              <span className="nav-text">{n.label}</span>
              {n.badge && <span className={`nav-badge ${n.danger ? 'danger' : ''}`}>{n.badge}</span>}
            </button>
          );
        })}

        <div className="nav-label">Workspace</div>
        {['servers', 'commands', 'activity', 'moderation'].map((k) => {
          const n = NAV.find((x) => x.key === k);
          const Icon = I[n.icon];
          return (
            <button key={n.key} className="nav-item" aria-current={route === n.key} onClick={() => onRoute(n.key)}>
              <Icon/>
              <span className="nav-text">{n.label}</span>
              {n.badge && <span className={`nav-badge ${n.danger ? 'danger' : ''}`}>{n.badge}</span>}
            </button>
          );
        })}

        <div className="nav-label">Observability</div>
        {['logs', 'errors'].map((k) => {
          const n = NAV.find((x) => x.key === k);
          const Icon = I[n.icon];
          return (
            <button key={n.key} className="nav-item" aria-current={route === n.key} onClick={() => onRoute(n.key)}>
              <Icon/>
              <span className="nav-text">{n.label}</span>
              {n.badge && <span className={`nav-badge ${n.danger ? 'danger' : ''}`}>{n.badge}</span>}
            </button>
          );
        })}

        <div className="nav-label">Configure</div>
        {['scheduler', 'plugins', 'auth', 'settings'].map((k) => {
          const n = NAV.find((x) => x.key === k);
          const Icon = I[n.icon];
          return (
            <button key={n.key} className="nav-item" aria-current={route === n.key} onClick={() => onRoute(n.key)}>
              <Icon/>
              <span className="nav-text">{n.label}</span>
              {n.badge && <span className={`nav-badge ${n.danger ? 'danger' : ''}`}>{n.badge}</span>}
            </button>
          );
        })}
      </nav>

      <div className="side-footer">
        <div className="avatar"/>
        <div style={{ minWidth: 0, flex: 1 }}>
          <div style={{ color: 'var(--text)', fontWeight: 500, fontSize: 12.5 }} className="ellipsis">ake (owner)</div>
          <div className="ellipsis" style={{ fontSize: 11 }}>{BOT.tag}</div>
        </div>
      </div>
    </aside>
  );
}

function TopBar({ route, status, onOpenPalette, onOpenNotif }) {
  const live = useLive();
  const latencyNow = live.latency[live.latency.length - 1];

  const statusChip =
    status === 'online'   ? <span className="chip solid"><span className="dot" style={{ width: 6, height: 6, boxShadow: 'none' }}/>All systems operational</span> :
    status === 'degraded' ? <span className="chip warn"><span className="dot warn" style={{ width: 6, height: 6, boxShadow: 'none' }}/>Degraded</span> :
                            <span className="chip danger"><span className="dot danger" style={{ width: 6, height: 6, boxShadow: 'none' }}/>Offline</span>;

  return (
    <header className="topbar">
      <div className="crumbs">
        <span>{BOT.name}</span>
        <span className="sep">/</span>
        <span className="crumb-current">{NAV_LABELS[route]}</span>
      </div>

      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginLeft: 14 }}>
        {statusChip}
        <span className="chip mono">↑ {fmtUptimeShell(BOT.startedAt)}</span>
        <span className="chip mono" style={{ color: latencyNow > 120 ? 'var(--warn)' : 'inherit' }}>{latencyNow}ms</span>
      </div>

      <button className="search" onClick={onOpenPalette} style={{ cursor: 'pointer' }}>
        <I.search width="14" height="14"/>
        <span style={{ flex: 1, textAlign: 'left' }}>Search commands, guilds, users…</span>
        <kbd>⌘K</kbd>
      </button>

      <button className="icon-btn" title="Notifications" onClick={onOpenNotif} style={{ position: 'relative' }}>
        <I.bell width="15" height="15"/>
        <span style={{ position: 'absolute', top: 6, right: 6, width: 6, height: 6, borderRadius: 999, background: 'var(--danger)' }}/>
      </button>
    </header>
  );
}

Object.assign(window, { Sidebar, TopBar, NAV_LABELS });