/* App shell — richer sidebar with grouped nav, status cards, helper rows.
   Editorial typography matched throughout. */

const NAV = {
  workspace: [
    { id: "dashboard", label: "Dashboard", icon: "home", hint: "⌘1" },
    { id: "live", label: "Live monitor", icon: "activity", badge: { tone: "sealed", text: "● Live" } },
    { id: "traces", label: "Traces", icon: "activity", countKey: "traces", hint: "⌘2" },
    { id: "reviews", label: "Reviews", icon: "shieldCheck", badge: { tone: "contra", text: "4 pending" } },
    { id: "playground", label: "Playground", icon: "zap" },
    { id: "apps", label: "Apps", icon: "cpu", countKey: "apps" },
  ],
  compliance: [
    { id: "compliance", label: "Compliance", icon: "shieldCheck" },
    { id: "policies", label: "Policies", icon: "fileCheck", countKey: "policies" },
    { id: "audit-room", label: "Audit room", icon: "fileCheck", badge: { tone: "partial", text: "Q3 · active" } },
    { id: "incidents", label: "Incidents", icon: "alertTriangle" },
    { id: "risk", label: "Risk register", icon: "warning", countKey: "risks" },
    { id: "evidence", label: "Evidence packs", icon: "lock", countKey: "evidence" },
    { id: "sources", label: "Sources", icon: "folder", countKey: "sources" },
  ],
  ops: [
    { id: "analytics", label: "Analytics", icon: "activity", badge: { tone: "sealed", text: "New" } },
    { id: "models", label: "Judges & models", icon: "cpu" },
    { id: "activity", label: "Activity log", icon: "clock" },
    { id: "integrations", label: "Integrations", icon: "webhook", countKey: "integrations" },
  ],
  account: [
    { id: "inbox", label: "Notifications", icon: "bell", badge: { tone: "contra", text: "5" } },
    { id: "profile", label: "Profile · MFA", icon: "users" },
    { id: "team", label: "Team", icon: "users", countKey: "team" },
    { id: "settings", label: "Settings", icon: "settings" },
  ],
};

const TopBar = ({ onOpenCmdK, onOpenAuditor }) => (
  <div className="topbar">
    <a className="topbar__brand" href="#" onClick={(e) => e.preventDefault()}>Attestia</a>
    <div className="topbar__divider" />
    <button className="tenant-switcher">
      <span>{SCENARIO.tenant.name}</span>
      <span className="tag">HIPAA</span>
      {window.Icon.chevronDown({ size: 12 })}
    </button>
    <div className="topbar__spacer" />
    <button className="topbar__cmdk" onClick={onOpenCmdK}>
      {window.Icon.search({ size: 13 })}
      <span>Search traces, sources, packs…</span>
      <span className="spacer" />
      <kbd>⌘K</kbd>
    </button>
    <button className="topbar__icon" title="Auditor preview" onClick={onOpenAuditor}>
      {window.Icon.eye({ size: 16 })}
    </button>
    <button className="topbar__icon">
      {window.Icon.bell({ size: 16 })}
      <span className="dot" />
    </button>
    <button className="topbar__user">
      <div className="avatar">{SCENARIO.tenant.user.initials}</div>
    </button>
  </div>
);

const Sidebar = ({ active, onNav, counts }) => {
  const renderItem = (n) => (
    <button
      key={n.id}
      className={`nav-item ${active === n.id ? "nav-item--active" : ""}`}
      onClick={() => onNav(n.id)}
    >
      <span className="nav-item__icon">{window.Icon[n.icon]({ size: 15 })}</span>
      <span className="nav-item__label">{n.label}</span>
      {n.badge && <span className={`nav-pill nav-pill--${n.badge.tone}`}>{n.badge.text}</span>}
      {n.countKey != null && counts?.[n.countKey] != null && (
        <span className="nav-item__count">{counts[n.countKey]}</span>
      )}
      {n.hint && !n.badge && n.countKey == null && (
        <span className="nav-item__kbd mono">{n.hint}</span>
      )}
    </button>
  );

  return (
    <nav className="sidebar">
      <div className="sidebar__top">
        <button className="sidebar__user">
          <div className="avatar" style={{ width: 28, height: 28 }}>{SCENARIO.tenant.user.initials}</div>
          <div className="sidebar__user-body">
            <div className="fw-600 text-sm">{SCENARIO.tenant.user.name}</div>
            <div className="text-xs muted">{SCENARIO.tenant.user.role}</div>
          </div>
          {window.Icon.chevronDown({ size: 12 })}
        </button>
        <button className="sidebar__cmdk-mini">
          <span className="row gap-2">
            {window.Icon.search({ size: 12 })}
            <span>Quick find</span>
          </span>
          <kbd className="kbd">⌘K</kbd>
        </button>
      </div>

      <div className="sidebar__scroll">
        <div className="nav-group">
          <div className="nav-label">Workspace</div>
          {NAV.workspace.map(renderItem)}
        </div>

        <div className="nav-group">
          <div className="nav-label">
            <span>Compliance</span>
            <span className="nav-label__hint mono">HIPAA</span>
          </div>
          {NAV.compliance.map(renderItem)}
        </div>

        <div className="nav-group">
          <div className="nav-label">Operations</div>
          {NAV.ops.map(renderItem)}
        </div>

        <div className="nav-group">
          <div className="nav-label">Account</div>
          {NAV.account.map(renderItem)}
        </div>

        <div className="nav-group">
          <div className="nav-label">Pinned</div>
          <button className="nav-item nav-item--pinned" onClick={() => onNav("trace")}>
            <span className="nav-item__icon">{window.Icon.activity({ size: 15 })}</span>
            <span className="nav-item__label">
              <span className="mono">af_x3k…7yv</span>
              <span className="text-xs muted" style={{ display: "block", marginTop: 1 }}>Last reviewed 8m ago</span>
            </span>
          </button>
        </div>
      </div>

      <div className="sidebar__bottom">
        <div className="status-card">
          <div className="status-card__head">
            <span className="status-card__title">Sandbox</span>
            <span className="status-pulse status-pulse--ok" title="All judges responding · region us-east-1" />
          </div>
          <div className="status-card__rows">
            <div className="status-row">
              <span className="muted">Region</span>
              <span className="mono">us-east-1</span>
            </div>
            <div className="status-row">
              <span className="muted">Judges</span>
              <span><span className="status-dot status-dot--ok" />3/3 healthy</span>
            </div>
            <div className="status-row">
              <span className="muted">Queue</span>
              <span className="mono tabular">0</span>
            </div>
            <div className="status-row">
              <span className="muted">p95</span>
              <span className="mono tabular">612 ms</span>
            </div>
          </div>
        </div>

        <div className="bulletin-card">
          <div className="bulletin-card__head">
            <span className="bulletin-card__title">Daily bulletin</span>
            <span className="bulletin-card__date mono">2026-10-24</span>
          </div>
          <div className="text-xs muted" style={{ lineHeight: 1.5 }}>
            <span className="status-dot status-dot--ok" />Verified · Block #1,247 · 5,117 leaves
          </div>
          <div className="row gap-1" style={{ marginTop: 6, fontSize: 11 }}>
            <span className="mono muted text-xs" style={{ flex: 1 }}>root af3c…91</span>
            <button className="bulletin-card__link">{window.Icon.external({ size: 11 })}</button>
          </div>
        </div>

        <div className="plan-card">
          <div className="plan-card__head">
            <span className="plan-card__name">Healthcare · Growth</span>
            <span className="plan-card__pct mono">62%</span>
          </div>
          <div className="plan-card__bar">
            <div className="plan-card__fill" style={{ width: "62%" }} />
          </div>
          <div className="text-xs muted" style={{ marginTop: 4 }}>
            <span className="mono tabular">62,420</span> of 100,000 calls · resets Dec 1
          </div>
          <button className="plan-card__cta">Manage plan →</button>
        </div>

        <div className="sidebar__foot">
          <button className="sidebar__foot-btn">
            {window.Icon.helpCircle({ size: 13 })}
            <span>Docs &amp; help</span>
          </button>
          <button className="sidebar__foot-btn">
            {window.Icon.shieldCheck({ size: 13 })}
            <span>Trust Center</span>
          </button>
        </div>
      </div>
    </nav>
  );
};

window.TopBar = TopBar;
window.Sidebar = Sidebar;