// ===========================================================
// Báo cáo Nhân sự — số khách phụ trách + doanh số từng người
// ===========================================================

const STAFF_REPORT = []; // Báo cáo nhân sự thật do backend tổng hợp

function StaffReport() {
  const [deptFilter, setDeptFilter] = useState('all');
  const [sortKey, setSortKey] = useState('revenue');
  const [selected, setSelected] = useState(null);
  const [selectedTab, setSelectedTab] = useState(null);

  const depts = ['all', ...new Set(STAFF_REPORT.map(s => s.dept))];
  const rows = useMemo(() => {
    let r = deptFilter === 'all' ? [...STAFF_REPORT] : STAFF_REPORT.filter(s => s.dept === deptFilter);
    r.sort((a,b) => (b[sortKey] || 0) - (a[sortKey] || 0));
    return r;
  }, [deptFilter, sortKey]);

  const tot = rows.reduce((a,s) => ({
    customers: a.customers + s.customers,
    newCustomers: a.newCustomers + s.newCustomers,
    orders: a.orders + s.orders,
    revenue: a.revenue + s.revenue,
    target: a.target + s.target,
    comm: a.comm + s.comm,
  }), {customers:0,newCustomers:0,orders:0,revenue:0,target:0,comm:0});

  const Th = ({ k, children, w }) => (
    <th className="num" style={{width:w,cursor:'pointer',color: sortKey===k ? 'var(--vs-dark-blue)' : undefined}}
      onClick={() => setSortKey(k)}>
      {children}{sortKey===k && <Icon name="arrowdown" size={10} stroke={3} style={{marginLeft:3,display:'inline-block'}}/>}
    </th>
  );

  return (
    <>
      <div className="kpi-grid">
        <KPI feature label="Doanh số toàn team" value={fmt.vndFull(tot.revenue)}
          progress={tot.target > 0 ? (tot.revenue/tot.target)*100 : 0}
          progressLabel={{left:`${rows.length} nhân sự`, right:'Mục tiêu ' + fmt.vndFull(tot.target)}}/>
        <KPI label="Khách đang phụ trách" value={tot.customers.toLocaleString('vi-VN')}
          sub={rows.length > 0 ? `TB ${Math.round(tot.customers/rows.length)} khách / người` : ''}/>
        <KPI label="Khách mới 30 ngày" value={tot.newCustomers} delta={rows.length > 0 ? `+${Math.round(tot.newCustomers/rows.length)} TB/người` : ''}/>
        <KPI label="Hoa hồng chi trả" value={fmt.vndFull(tot.comm)} sub={tot.revenue > 0 ? `${(tot.comm/tot.revenue*100).toFixed(1)}% doanh số` : ''}/>
      </div>

      <Card pad={false}>
        <CardHeader title="Báo cáo theo từng nhân viên"
          sub="30 ngày qua · click tên để xem chi tiết · click tiêu đề cột để sắp xếp"
          actions={
            <div className="row gap-2">
              <button className="btn btn-secondary btn-sm" onClick={() => window.tvsDemo('Xuất Excel báo cáo nhân sự')}>
                <Icon name="download" size={12}/>Xuất Excel
              </button>
            </div>
          }/>
        <div style={{padding:'var(--space-3) var(--space-5)',borderBottom:'1px solid var(--border-1)',display:'flex',gap:'var(--space-2)',alignItems:'center',flexWrap:'wrap'}}>
          <span className="text-xs fg-muted" style={{fontWeight:700}}>Bộ phận:</span>
          {depts.map(d => (
            <button key={d}
              className={deptFilter===d ? 'btn btn-cta btn-sm' : 'btn btn-ghost btn-sm'}
              onClick={() => setDeptFilter(d)}>
              {d === 'all' ? 'Tất cả' : d}
              <span style={{opacity:0.65,marginLeft:3}}>
                {d === 'all' ? STAFF_REPORT.length : STAFF_REPORT.filter(s=>s.dept===d).length}
              </span>
            </button>
          ))}
        </div>
        <div className="table-wrap">
          <table className="tbl">
            <thead>
              <tr>
                <th style={{width:44}}>#</th>
                <th style={{minWidth:180}}>Nhân viên</th>
                <th>Bộ phận</th>
                <Th k="customers" w={110}>Khách phụ trách</Th>
                <Th k="newCustomers" w={90}>Khách mới</Th>
                <Th k="orders" w={80}>Đơn</Th>
                <Th k="revenue" w={130}>Doanh số</Th>
                <th className="num" style={{width:100}}>% mục tiêu</th>
                <Th k="avgOrder" w={110}>TB / đơn</Th>
                <Th k="comm" w={110}>Hoa hồng</Th>
                <th className="num" style={{width:90}}>Follow-up trễ</th>
              </tr>
            </thead>
            <tbody>
              {rows.map((s, i) => {
                const pct = Math.round(s.revenue / s.target * 100);
                return (
                  <tr key={s.name} onClick={() => { setSelectedTab(null); setSelected(s); }}>
                    <td>
                      <span style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:16,color: i < 3 ? 'var(--vs-dark-blue)' : 'var(--fg-muted)'}}>
                        {i < 3 ? ['🥇','🥈','🥉'][i] : i+1}
                      </span>
                    </td>
                    <td>
                      <div className="row gap-2">
                        <Avatar name={s.name} size="sm"/>
                        <div>
                          <div className="strong">{s.name}</div>
                          <div className="text-xs fg-muted">{s.team}</div>
                        </div>
                      </div>
                    </td>
                    <td><Tag variant="outline">{s.dept}</Tag></td>
                    <td className="num strong tnum" style={{cursor:'pointer',color:'var(--vs-dark-blue)',textDecoration:'underline',textDecorationStyle:'dotted',textUnderlineOffset:3}}
                      title={`Xem danh sách khách của ${s.name}`}
                      onClick={(e) => { e.stopPropagation(); setSelectedTab('customers'); setSelected(s); }}>
                      {s.customers}
                    </td>
                    <td className="num tnum" style={{color:'var(--status-success)'}}>+{s.newCustomers}</td>
                    <td className="num tnum">{s.orders}</td>
                    <td className="num strong tnum">{fmt.vndFull(s.revenue)}</td>
                    <td className="num">
                      <Tag variant={pct >= 100 ? 'success' : pct >= 85 ? 'warning' : 'danger'}>{pct}%</Tag>
                    </td>
                    <td className="num tnum">{fmt.vndFull(s.avgOrder)}</td>
                    <td className="num tnum">{fmt.vndFull(s.comm)}</td>
                    <td className="num">
                      {s.followupsLate > 10
                        ? <Tag variant="danger">{s.followupsLate}</Tag>
                        : s.followupsLate > 5
                        ? <Tag variant="warning">{s.followupsLate}</Tag>
                        : <span className="tnum fg-muted">{s.followupsLate}</span>}
                    </td>
                  </tr>
                );
              })}
            </tbody>
            <tfoot>
              <tr style={{background:'var(--bg-soft)',fontWeight:700}}>
                <td colSpan="3" className="strong fg-1">TỔNG CỘNG · {rows.length} nhân sự</td>
                <td className="num strong tnum">{tot.customers}</td>
                <td className="num strong tnum" style={{color:'var(--status-success)'}}>+{tot.newCustomers}</td>
                <td className="num strong tnum">{tot.orders}</td>
                <td className="num strong tnum" style={{color:'var(--vs-dark-blue)'}}>{fmt.vndFull(tot.revenue)}</td>
                <td className="num"><Tag variant={tot.revenue>=tot.target?'success':'warning'}>{tot.target > 0 ? Math.round(tot.revenue/tot.target*100) : 0}%</Tag></td>
                <td className="num strong tnum">{fmt.vndFull(tot.orders > 0 ? Math.round(tot.revenue/tot.orders) : 0)}</td>
                <td className="num strong tnum">{fmt.vndFull(tot.comm)}</td>
                <td className="num strong tnum">{rows.reduce((a,s)=>a+s.followupsLate,0)}</td>
              </tr>
            </tfoot>
          </table>
        </div>
      </Card>

      {selected && <StaffDetailModal staff={selected} initialTab={selectedTab} onClose={() => { setSelected(null); setSelectedTab(null); }}/>}
    </>
  );
}

// ===== Chi tiết 1 nhân viên =====
function StaffDetailModal({ staff: s, onClose, initialTab }) {
  const pct = Math.round(s.revenue / s.target * 100);
  const [showList, setShowList] = useState(initialTab === 'customers');

  // Danh sách khách của nhân sự: ưu tiên khách gán thật, bù thêm theo hash để luôn có dữ liệu minh hoạ
  const custList = useMemo(() => {
    const owned = D.customers.filter(c => window.ownerOf ? window.ownerOf(c) === s.name : false);
    if (owned.length >= 5) return owned;
    const seed = s.name.length + s.name.charCodeAt(0);
    const extra = D.customers.filter(c => !owned.includes(c)).filter((_, i) => (i + seed) % 2 === 0);
    return [...owned, ...extra].slice(0, 8);
  }, [s.name]);

  return (
    <div className="drawer-overlay" style={{justifyContent:'center',alignItems:'center'}} onClick={onClose}>
      <div onClick={(e)=>e.stopPropagation()}
        style={{background:'var(--bg-page)',width:'min(720px,95vw)',maxHeight:'90vh',overflow:'auto',borderRadius:'var(--radius-lg)',boxShadow:'var(--shadow-pop)',animation:'slidein 0.28s var(--ease-out)'}}>
        <div style={{padding:'var(--space-5) var(--space-6)',background:'var(--vs-dark-blue)',color:'#fff',display:'flex',gap:'var(--space-4)',alignItems:'center'}}>
          <Avatar name={s.name} size="lg"/>
          <div style={{flex:1}}>
            <div className="eyebrow" style={{color:'var(--vs-light-blue)'}}>{s.dept} · {s.team}</div>
            <h3 style={{margin:'2px 0 0',fontFamily:'var(--font-display)',fontSize:22,fontWeight:700,color:'#fff'}}>{s.name}</h3>
          </div>
          <button onClick={onClose} style={{background:'rgba(255,255,255,0.18)',border:'none',color:'#fff',width:36,height:36,borderRadius:'50%',cursor:'pointer',display:'inline-flex',alignItems:'center',justifyContent:'center'}}>
            <Icon name="close" size={16}/>
          </button>
        </div>

        <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',padding:'var(--space-5) var(--space-6)',borderBottom:'1px solid var(--border-1)',background:'var(--bg-soft)',gap:'var(--space-3)'}}>
          {[
            {l:'Khách phụ trách', v:s.customers, d:`${s.activeCustomers} còn hoạt động`, click:true},
            {l:'Doanh số 30N', v:fmt.vndFull(s.revenue), d:`${pct}% mục tiêu`},
            {l:'Đơn ghi nhận', v:s.orders, d:`TB ${fmt.vndFull(s.avgOrder)}/đơn`},
            {l:'Hoa hồng', v:fmt.vndFull(s.comm), d:`${(s.comm/s.revenue*100).toFixed(1)}% DS`},
          ].map((x,i) => (
            <div key={i}
              onClick={x.click ? () => setShowList(v => !v) : undefined}
              style={x.click ? {cursor:'pointer',padding:'6px 8px',margin:'-6px -8px',borderRadius:'var(--radius-sm)',background: showList ? 'rgba(65,182,230,0.12)' : 'transparent'} : undefined}>
              <div style={{fontSize:10,letterSpacing:'0.12em',textTransform:'uppercase',color:'var(--fg-muted)',fontWeight:700,marginBottom:4}}>{x.l}</div>
              <div style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:19,color: x.click ? 'var(--vs-dark-blue)' : 'var(--fg-1)',lineHeight:1.1,display:'flex',alignItems:'center',gap:4}}>
                {x.v}
                {x.click && <Icon name="chevdown" size={14} stroke={2.5} style={{transform: showList ? 'rotate(180deg)' : 'none',transition:'transform 0.2s'}}/>}
              </div>
              <div className="text-xs fg-muted mt-1">{x.click ? (showList ? 'Đang mở danh sách' : 'Click để xem danh sách') : x.d}</div>
            </div>
          ))}
        </div>

        {/* Danh sách khách hàng của nhân sự */}
        {showList && (
          <div style={{borderBottom:'1px solid var(--border-1)'}}>
            <div style={{padding:'var(--space-4) var(--space-6) var(--space-2)',display:'flex',alignItems:'center',gap:'var(--space-3)'}}>
              <div>
                <h4 style={{margin:0,fontSize:'var(--t-md)',color:'var(--fg-1)'}}>Khách hàng {s.name} phụ trách</h4>
                <div className="text-xs fg-muted mt-1">Hiển thị {custList.length} trên tổng {s.customers} khách</div>
              </div>
              <button className="btn btn-secondary btn-sm" style={{marginLeft:'auto'}} onClick={() => window.tvsDemo('Xuất danh sách khách của ' + s.name)}>
                <Icon name="download" size={12}/>Xuất danh sách
              </button>
            </div>
            <div className="table-wrap" style={{maxHeight:280,overflowY:'auto'}}>
              <table className="tbl">
                <thead>
                  <tr>
                    <th style={{minWidth:170}}>Khách hàng</th>
                    <th>Loại</th>
                    <th>SĐT</th>
                    <th className="num">LTV</th>
                    <th className="num">Đơn</th>
                    <th>Mua cuối</th>
                    <th>Follow-up</th>
                  </tr>
                </thead>
                <tbody>
                  {custList.map(c => {
                    const f = window.effFollowUp ? window.effFollowUp(c) : c.followUp;
                    return (
                      <tr key={c.id}>
                        <td>
                          <div className="row gap-2">
                            <Avatar name={c.name} size="sm" tier={tierVariant(c.tier)}/>
                            <div>
                              <div className="strong">{c.name}</div>
                              <div className="text-xs fg-muted">{c.id} · {c.city}</div>
                            </div>
                          </div>
                        </td>
                        <td><SegmentTag segment={c.segment} roles={c.roles}/></td>
                        <td className="tnum text-sm">{c.phone}</td>
                        <td className="num strong tnum">{fmt.vndFull(c.ltv)}</td>
                        <td className="num tnum">{c.orders}</td>
                        <td className="text-sm fg-muted">{fmt.rel(c.lastOrder)}</td>
                        <td>
                          {f
                            ? <Tag variant={new Date(f.due) <= D.today ? 'danger' : 'warning'}>{fmt.rel(f.due)}</Tag>
                            : <span className="text-xs fg-muted">—</span>}
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          </div>
        )}

        <div style={{padding:'var(--space-5) var(--space-6)'}}>
          <div className="row mb-3">
            <h4 style={{margin:0,fontSize:'var(--t-md)',color:'var(--fg-1)'}}>Doanh số 7 tháng qua</h4>
            <span className="text-xs fg-muted" style={{marginLeft:'auto'}}>Triệu đồng</span>
          </div>
          <BarChart data={s.trend} height={130} highlight={s.trend.length-1}/>
          <div className="row mt-2" style={{justifyContent:'space-between',fontSize:11,color:'var(--fg-muted)'}}>
            {Array.from({length: 7}, (_, i) => {
              const m = new Date(D.today.getFullYear(), D.today.getMonth() - 6 + i, 1).getMonth() + 1;
              return <span key={i}>T{m}</span>;
            })}
          </div>

          <div className="divider mt-5 mb-4"/>

          <div className="grid grid-2" style={{gap:'var(--space-4)'}}>
            <Card>
              <h4 style={{margin:'0 0 var(--space-3)',fontSize:'var(--t-md)',color:'var(--fg-1)'}}>Danh mục khách</h4>
              {[
                ['Tổng khách phụ trách', s.customers, 'var(--fg-1)'],
                ['Còn hoạt động (90N)', s.activeCustomers, 'var(--status-success)'],
                ['Khách mới 30 ngày', '+' + s.newCustomers, 'var(--vs-light-blue)'],
                ['Không hoạt động', s.customers - s.activeCustomers, 'var(--status-warning)'],
              ].map(([l,v,c]) => (
                <div key={l} className="row mb-2">
                  <span className="text-sm fg-2" style={{flex:1}}>{l}</span>
                  <span className="tnum bold" style={{color:c}}>{v}</span>
                </div>
              ))}
            </Card>
            <Card>
              <h4 style={{margin:'0 0 var(--space-3)',fontSize:'var(--t-md)',color:'var(--fg-1)'}}>Hoạt động chăm sóc</h4>
              {[
                ['Lượt liên hệ 30N', s.contacts || '—', 'var(--fg-1)'],
                ['Follow-up đã xử lý', s.followupsDone, 'var(--status-success)'],
                ['Follow-up trễ hạn', s.followupsLate, s.followupsLate > 10 ? 'var(--status-sale)' : s.followupsLate > 5 ? 'var(--status-warning)' : 'var(--fg-muted)'],
                ['Tỷ lệ chốt đơn', s.convRate + '%', 'var(--vs-dark-blue)'],
              ].map(([l,v,c]) => (
                <div key={l} className="row mb-2">
                  <span className="text-sm fg-2" style={{flex:1}}>{l}</span>
                  <span className="tnum bold" style={{color:c}}>{v}</span>
                </div>
              ))}
            </Card>
          </div>

          <div className={`banner mt-4 ${pct >= 100 ? '' : pct >= 85 ? 'warning' : 'danger'}`}>
            <Icon name={pct >= 100 ? 'award' : 'flag'} size={18}/>
            <div style={{flex:1}}>
              <div className="bold">
                {pct >= 100
                  ? `Vượt mục tiêu ${pct - 100}% — ${fmt.vndFull(s.revenue - s.target)} trên kế hoạch`
                  : `Còn ${fmt.vndFull(s.target - s.revenue)} để đạt mục tiêu tháng`}
              </div>
              <div className="text-xs">
                {s.followupsLate > 5
                  ? `Lưu ý: ${s.followupsLate} follow-up trễ hạn cần xử lý.`
                  : 'Follow-up đang được theo sát tốt.'}
              </div>
            </div>
          </div>
        </div>

        <div style={{padding:'var(--space-4) var(--space-6)',borderTop:'1px solid var(--border-1)',background:'var(--bg-soft)',display:'flex',gap:'var(--space-3)',justifyContent:'flex-end'}}>
          <button className="btn btn-secondary" onClick={() => window.tvsDemo('Xuất báo cáo cá nhân')}>
            <Icon name="download" size={14}/>Xuất PDF
          </button>
          <button className="btn btn-cta" onClick={onClose}>Đóng</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { StaffReport, StaffDetailModal });