/* ===== Web app sidebar ===== */
const Sidebar = ({tab, onTab, go, route}) => {
  const items=[
    {k:'customers', label:'ลูกค้า', icon:'users'},
    {k:'policies', label:'กรมธรรม์', icon:'docStack'},
    {k:'reports', label:'รายงาน', icon:'chartBar'},
  ];
  // map detail routes to their owning tab for active highlight
  const activeTab = route==='customer' ? 'customers'
    : route==='policy' ? 'policies'
    : (route==='pyramid'||route==='pyramidWizard') ? 'reports'
    : ['planner','needs','planRetire','planEdu','planTax','planInvest','planLegacy','kyc','triangle','pipeline','calendar','referral','renewal','premium'].includes(route) ? ''
    : (route==='addCustomer'||route==='pdpa') ? 'customers'
    : route==='addPolicy' ? 'policies'
    : route==='notifications' ? 'customers'
    : route==='billing' ? 'me'
    : tab;
  return (
    <aside className="sidebar">
      <div className="sb-brand"><Wordmark size={23}/></div>
      <div className="sb-sectlabel">เมนูหลัก</div>
      <nav className="sb-nav">
        {items.map(it=>(
          <button key={it.k} className={"sb-item"+(activeTab===it.k?" active":"")} onClick={()=>onTab(it.k)}>
            <Icon name={it.icon} size={22} sw={activeTab===it.k?2.1:1.8}/>
            <span>{it.label}</span>
            <span className="sb-ind"/>
          </button>
        ))}
      </nav>
      <div className="sb-sectlabel" style={{marginTop:22}}>งานขาย</div>
      <nav className="sb-nav">
        {[{r:'pipeline',i:'chartBar',t:'Pipeline'},{r:'calendar',i:'calendar',t:'ปฏิทิน & งาน'},{r:'referral',i:'send',t:'แนะนำต่อ'}].map(it=>(
          <button key={it.r} className={"sb-item"+(route===it.r?" active":"")} onClick={()=>go(it.r,{})}>
            <Icon name={it.i} size={22}/><span>{it.t}</span>
          </button>
        ))}
      </nav>
      <div className="sb-sectlabel" style={{marginTop:22}}>บริการ</div>
      <nav className="sb-nav">
        {[{r:'renewal',i:'refresh',t:'ต่ออายุ / เบี้ย'},{r:'premium',i:'wallet',t:'ชำระเบี้ย'}].map(it=>(
          <button key={it.r} className={"sb-item"+(route===it.r?" active":"")} onClick={()=>go(it.r,{})}>
            <Icon name={it.i} size={22}/><span>{it.t}</span>
          </button>
        ))}
      </nav>
      <div className="sb-sectlabel" style={{marginTop:22}}>ทางลัด</div>
      <nav className="sb-nav">
        <button className="sb-item" onClick={()=>onTab('customers')&&0||go('addCustomer')}>
          <Icon name="plusUser" size={22}/><span>เพิ่มลูกค้า</span>
        </button>
        <button className="sb-item" onClick={()=>go('planner')}>
          <Icon name="target" size={22}/><span>เครื่องมือวางแผน</span>
        </button>
        <button className="sb-item" onClick={()=>go('addPolicy',{})}>
          <Icon name="plusDoc" size={22}/><span>เพิ่มกรมธรรม์</span>
        </button>
        <button className="sb-item" onClick={()=>go('notifications')}>
          <Icon name="bell" size={22}/><span>การแจ้งเตือน</span>
          <span className="sb-ind" style={{opacity:1}}/>
        </button>
      </nav>
      <div className="sb-foot">
        <button className="sb-agent" style={{width:'100%',textAlign:'left'}} onClick={()=>onTab('me')}>
          <div className="avatar sm" style={{background:AGENT.avatar}}>{initials(AGENT.name.split(' ')[1]||AGENT.name)}</div>
          <div style={{minWidth:0,flex:1}}>
            <div style={{fontSize:14,fontWeight:700,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{AGENT.name}</div>
            <div style={{fontSize:11.5,color:'var(--muted)'}}>{AGENT.code}</div>
          </div>
          <Icon name="chevR" size={16} c="var(--muted-2)"/>
        </button>
      </div>
    </aside>
  );
};

Object.assign(window, { Sidebar });