// Admin sidebar — non-collapsible per digest §4.2

function AdminSidebar({ section, setSection, counts }) {
  const nav = [
    { id: "dashboard", icon: "ti-layout-dashboard", label: "Dashboard" },
    { id: "tenants",   icon: "ti-buildings",       label: "Tenants",        count: counts.tenants },
    { id: "onboarding",icon: "ti-user-plus",       label: "Onboarding",     count: counts.onboarding },
    { id: "sanctions", icon: "ti-shield-half",     label: "Sanctions",      count: counts.sanctions, attention: true, live: true },
    { id: "audit",     icon: "ti-history",         label: "Audit search" },
    { id: "settlements",icon:"ti-receipt-2",       label: "Settlements" },
  ];
  const sysGroup = [
    { id: "departments", icon: "ti-users-group", label: "Departments" },
    { id: "system",      icon: "ti-settings",    label: "System" },
  ];
  const peopleGroup = [
    { id: "staff",     icon: "ti-id-badge-2",  label: "Staff",           count: counts.staff },
    { id: "kols",      icon: "ti-broadcast",   label: "KOLs & agencies", count: counts.kols },
    { id: "consumers", icon: "ti-users",       label: "Consumers",       phase: "5" },
  ];
  return (
    <aside className="sidebar">
      <div className="brand">
        <a href="../../index.html" target="_top" title="Back to home" aria-label="ThaiHao — back to home" style={{display:"inline-flex"}}>
          <img src="../../assets/thaihao-logo-mark.png" alt="ThaiHao" />
        </a>
        <div>
          <div className="label">ThaiHao</div>
          <div className="body-sm" style={{fontSize:11, color:"var(--on-surface-variant)"}}>Admin console</div>
        </div>
        <span style={{marginLeft:"auto"}} className="chip-env">
          <span className="chip" style={{height:18, padding:"0 6px", fontSize:10, background:"var(--color-background-warning)", color:"var(--color-text-on-warning)", borderColor:"var(--color-border-warning)"}}>staging</span>
        </span>
      </div>

      <div className="nav-section">
        <div className="label-caps">Workspace</div>
        {nav.map(n => (
          <div key={n.id} className={"nav-item" + (section===n.id ? " active":"")} onClick={() => setSection(n.id)}>
            <i className={"ti " + n.icon}></i>
            <span>{n.label}</span>
            {n.count != null && (
              n.live
                ? <span className="live-badge"><span className="live-dot"></span>{n.count}</span>
                : <span className="count" style={n.attention?{color:"var(--color-text-on-danger)"}:{}}>{n.count}</span>
            )}
          </div>
        ))}
      </div>

      <div className="nav-section">
        <div className="label-caps">People</div>
        {peopleGroup.map(n => (
          <div key={n.id} className={"nav-item" + (section===n.id ? " active":"")} onClick={() => setSection(n.id)}>
            <i className={"ti " + n.icon}></i>
            <span>{n.label}</span>
            {n.count != null && <span className="count">{n.count}</span>}
            {n.phase != null && <span className="count" style={{fontSize:10, padding:"1px 6px", background:"var(--color-background-warning)", color:"var(--color-text-on-warning)", borderRadius:"var(--radius-sm)"}}>P{n.phase}+</span>}
          </div>
        ))}
      </div>

      <div className="nav-section">
        <div className="label-caps">System</div>
        {sysGroup.map(n => (
          <div key={n.id} className={"nav-item" + (section===n.id ? " active":"")} onClick={() => setSection(n.id)}>
            <i className={"ti " + n.icon}></i>
            <span>{n.label}</span>
          </div>
        ))}
      </div>

      <div className="sidebar-foot">
        <div className="avatar">S</div>
        <div>
          <div className="name">Sarah Tan</div>
          <div className="role">System admin</div>
        </div>
      </div>
    </aside>
  );
}

window.AdminSidebar = AdminSidebar;