// DeptSidebar — nav adapts to department.

function DeptSidebar({ dept, section, setSection }) {
  const navByDept = {
    sales: [
      { id: "home",     icon: "ti-layout-dashboard", label: "Home" },
      { id: "pipeline", icon: "ti-funnel",           label: "Pipeline",      count: 24 },
      { id: "producers",icon: "ti-buildings",        label: "My producers",  count: 18 },
      { id: "demos",    icon: "ti-presentation",     label: "Demos",         count: 5 },
      { id: "targets",  icon: "ti-target",           label: "Targets" },
    ],
    care: [
      { id: "home",       icon: "ti-layout-dashboard", label: "Home" },
      { id: "tickets",    icon: "ti-ticket",           label: "Tickets",     count: 14, live: true },
      { id: "producers",  icon: "ti-buildings",        label: "My producers",count: 22 },
      { id: "escalations",icon: "ti-flag",             label: "Escalations", count: 3 },
      { id: "knowledge",  icon: "ti-book-2",           label: "Knowledge base" },
    ],
    finance: [
      { id: "home",        icon: "ti-layout-dashboard", label: "Home" },
      { id: "settlements", icon: "ti-receipt-2",        label: "Settlements", count: 8 },
      { id: "refunds",     icon: "ti-arrow-back-up",    label: "Refunds",     count: 4 },
      { id: "invoices",    icon: "ti-file-invoice",     label: "Invoices",    count: 16 },
      { id: "ar",          icon: "ti-currency-dollar",  label: "AR aging" },
      { id: "fx",          icon: "ti-exchange",         label: "FX exposure" },
    ],
    ops: [
      { id: "home",        icon: "ti-layout-dashboard", label: "Home" },
      { id: "orders",      icon: "ti-package",          label: "Order monitor",count: 142 },
      { id: "exceptions",  icon: "ti-alert-circle",     label: "Exceptions",   count: 8, live: true },
      { id: "fulfillment", icon: "ti-truck",            label: "Fulfillment SLA" },
      { id: "wms",         icon: "ti-server",           label: "WMS sync" },
    ],
  };
  const nav = navByDept[dept.code];

  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)"}}>{dept.label}</div>
        </div>
      </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">{n.count}</span>
            )}
          </div>
        ))}
      </div>
      <div className="nav-section">
        <div className="label-caps">Org</div>
        <div className="nav-item"><i className="ti ti-users-group"></i><span>Team</span></div>
        <div className="nav-item"><i className="ti ti-calendar"></i><span>Calendar</span></div>
        <div className="nav-item"><i className="ti ti-message"></i><span>Inbox</span></div>
      </div>
      <div className="sidebar-foot">
        <div className="avatar">{dept.user.initial}</div>
        <div>
          <div className="name">{dept.user.name}</div>
          <div className="role">{dept.user.role}</div>
        </div>
      </div>
    </aside>
  );
}

window.DeptSidebar = DeptSidebar;