// PartnerSidebar — nav adapts to partner type.

function PartnerSidebar({ partner, section, setSection }) {
  const navByType = {
    fulfillment: [
      { id: "ops",       icon: "ti-layout-dashboard", label: "Operations" },
      { id: "picks",     icon: "ti-package",          label: "Pick list",      count: 142, live: true },
      { id: "exceptions",icon: "ti-alert-circle",     label: "Exceptions",     count: 8 },
      { id: "inbound",   icon: "ti-arrow-down-to-arc",label: "Inbound",        count: 12 },
      { id: "returns",   icon: "ti-arrow-back-up",    label: "Returns",        count: 3 },
    ],
    logistics: [
      { id: "ops",       icon: "ti-layout-dashboard", label: "Operations" },
      { id: "dispatch",  icon: "ti-route",            label: "Dispatch",       count: 84 },
      { id: "tracking",  icon: "ti-map-2",            label: "Live tracking",  live: true },
      { id: "webhooks",  icon: "ti-webhook",          label: "Webhooks" },
      { id: "sla",       icon: "ti-clock",            label: "SLA report" },
    ],
    distributor: [
      { id: "ops",       icon: "ti-layout-dashboard", label: "Operations" },
      { id: "catalog",   icon: "ti-books",            label: "Catalog",        count: 248 },
      { id: "orders",    icon: "ti-receipt-2",        label: "Orders",         count: 16 },
      { id: "reorders",  icon: "ti-refresh",          label: "Reorder",        count: 4 },
      { id: "regions",   icon: "ti-map-pin",          label: "Regions" },
    ],
  };
  const nav = navByType[partner.type];

  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">{partner.name}</div>
          <div className="body-sm" style={{fontSize:11, color:"var(--on-surface-variant)"}}>{partner.subtitle}</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 success"></span>{n.count}</span>
                : <span className="count">{n.count}</span>
            )}
          </div>
        ))}
      </div>
      <div className="nav-section">
        <div className="label-caps">Settings</div>
        <div className="nav-item"><i className="ti ti-key"></i><span>API keys</span></div>
        <div className="nav-item"><i className="ti ti-users-group"></i><span>Team</span></div>
        <div className="nav-item"><i className="ti ti-settings"></i><span>Integration</span></div>
      </div>
      <div className="sidebar-foot">
        <div className="avatar">{partner.initial}</div>
        <div>
          <div className="name">{partner.user}</div>
          <div className="role">{partner.userRole}</div>
        </div>
      </div>
    </aside>
  );
}

window.PartnerSidebar = PartnerSidebar;