// ===========================================================
// B2B Partner — list + drawer detail
// ===========================================================

// Mock: người phụ trách & công nợ từng đối tác
const PARTNER_OWNERS = {}; // Người phụ trách đối tác — backend gán
const PARTNER_DEBTS  = {}; // Công nợ thật lấy từ backend
function partnerOwner(p){ return PARTNER_OWNERS[p.id] || p.owner || 'Chưa gán'; }
function partnerDebt(p){ return PARTNER_DEBTS[p.id] || 0; }

function B2BScreen({ onLogOrder, onAddPartner }) {
  const [typeFilter, setTypeFilter] = useState('all');
  const [stageFilter, setStageFilter] = useState('all');
  const [search, setSearch] = useState('');
  const [selected, setSelected] = useState(null);

  const types = ['all', ...new Set(D.partners.map(p => p.type))];
  const data = D.partners.filter(p => {
    if (typeFilter !== 'all' && p.type !== typeFilter) return false;
    if (stageFilter !== 'all' && p.stage !== stageFilter) return false;
    if (search) {
      const s = searchNorm(search);
      const digits = phoneDigits(search);
      if (!searchNorm(p.name).includes(s) && !searchNorm(p.contact).includes(s) && !(digits.length >= 3 && phoneDigits(p.phone).includes(digits))) return false;
    }
    return true;
  });

  const totals = D.partners.reduce((acc, p) => {
    acc.gmv += p.gmv30d;
    acc.comm += p.commissionEarned;
    return acc;
  }, {gmv:0, comm:0});

  return (
    <>
      <div className="page-header">
        <div>
          <h1>Đối tác B2B</h1>
          <div className="sub">{D.partners.length} đối tác · GMV tháng {fmt.vndFull(totals.gmv)}</div>
        </div>
        <div className="row gap-2">
          <button className="btn btn-secondary" onClick={() => window.tvsDemo('Xuất báo cáo')}><Icon name="download" size={14}/>Xuất báo cáo</button>
          <button className="btn btn-secondary" onClick={() => window.tvsDemo('Xem bản đồ đối tác')}><Icon name="map" size={14}/>Xem bản đồ</button>
          <button className="btn btn-cta" onClick={onAddPartner}><Icon name="plus" size={14}/>Thêm đối tác</button>
        </div>
      </div>

      <div className="kpi-grid">
        <KPI label="GMV 30 ngày" value={fmt.vndFull(totals.gmv)}/>
        <KPI label="Hoa hồng đã trả" value={fmt.vndFull(totals.comm)} sub="Luỹ kế từ đầu năm"/>
        <KPI label="Đối tác active" value={D.partners.filter(p => p.stage === 'Active').length}/>
        <KPI label="Pipeline mở" value={D.partners.filter(p => p.stage !== 'Active').length} sub="Prospect → Onboarding"/>
      </div>

      <Card pad={false}>
        <div style={{padding:'var(--space-3) var(--space-5)',display:'flex',gap:'var(--space-3)',alignItems:'center',borderBottom:'1px solid var(--border-1)',flexWrap:'wrap'}}>
          <div className="topbar-search" style={{flex:'0 1 260px'}}>
            <Icon name="search" size={14} style={{color:'var(--fg-muted)'}}/>
            <input placeholder="Tên đối tác, người liên hệ, SĐT..." value={search} onChange={(e)=>setSearch(e.target.value)}/>
          </div>
          <div className="row gap-1" style={{flexWrap:'wrap'}}>
            {types.map(t => (
              <button key={t}
                className={t === typeFilter ? 'btn btn-cta btn-sm' : 'btn btn-ghost btn-sm'}
                onClick={() => setTypeFilter(t)}>
                {t === 'all' ? 'Tất cả loại' : t}
              </button>
            ))}
          </div>
          <Segmented value={stageFilter} options={[
            {value:'all',label:'Tất cả'},
            {value:'Prospect',label:'Prospect'},
            {value:'Onboarding',label:'Onboarding'},
            {value:'Active',label:'Active'},
          ]} onChange={setStageFilter}/>
        </div>
        <div className="table-wrap">
          <table className="tbl">
            <thead>
              <tr>
                <th>Đối tác</th>
                <th>Loại</th>
                <th>Hạng</th>
                <th>Stage</th>
                <th className="num">GMV 30N</th>
                <th className="num">GMV YTD</th>
                <th className="num">% Hoa hồng</th>
                <th className="num">Công nợ</th>
                <th>Người phụ trách</th>
                <th>Hành động kế tiếp</th>
              </tr>
            </thead>
            <tbody>
              {data.map(p => (
                <tr key={p.id} onClick={() => setSelected(p)}>
                  <td>
                    <div className="row gap-3">
                      <Avatar name={p.name} tier={tierVariant(p.tier)}/>
                      <div>
                        <div className="strong">{p.name}</div>
                        <div className="text-xs fg-muted">{p.contact} · {p.city}</div>
                      </div>
                    </div>
                  </td>
                  <td><Tag variant="outline">{p.type}</Tag></td>
                  <td><Tag variant={tierVariant(p.tier)}>{p.tier}</Tag></td>
                  <td>
                    <Tag variant={p.stage === 'Active' ? 'success' : p.stage === 'Onboarding' ? 'info' : 'warning'} dot>{p.stage}</Tag>
                  </td>
                  <td className="num strong">{p.gmv30d > 0 ? fmt.vndFull(p.gmv30d) : '—'}</td>
                  <td className="num">{p.gmvYTD > 0 ? fmt.vndFull(p.gmvYTD) : '—'}</td>
                  <td className="num">{p.commission}%</td>
                  <td className="num">
                    {partnerDebt(p) > 0
                      ? <span className="strong" style={{color: partnerDebt(p) > 50000000 ? 'var(--status-sale)' : 'var(--fg-1)'}}>{fmt.vndFull(partnerDebt(p))}</span>
                      : <span className="text-xs fg-muted">—</span>}
                  </td>
                  <td>
                    <div className="row gap-2">
                      <Avatar name={partnerOwner(p)} size="sm"/>
                      <span className="text-sm">{partnerOwner(p)}</span>
                    </div>
                  </td>
                  <td>
                    {p.nextAction ? (
                      <>
                        <div className="text-xs">{p.nextAction.type}</div>
                        <Tag variant={D.parseISO(p.nextAction.due) <= D.today ? 'danger' : 'outline'}>
                          {fmt.rel(p.nextAction.due)}
                        </Tag>
                      </>
                    ) : <span className="text-xs fg-muted">—</span>}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
          {data.length === 0 && (
            <EmptyState icon="search" title="Không tìm thấy đối tác nào"
              desc="Thử đổi từ khoá hoặc bỏ bớt bộ lọc."
              action={<button className="btn btn-secondary btn-sm" onClick={() => { setSearch(''); setTypeFilter('all'); setStageFilter('all'); }}>Xoá bộ lọc</button>}/>
          )}
        </div>
      </Card>

      {selected && <PartnerDrawer partner={selected} onClose={() => setSelected(null)} onLogOrder={onLogOrder}/>}
    </>
  );
}

function PartnerDrawer({ partner, onClose, onLogOrder }) {
  const [tab, setTab] = useState('overview');
  const session = useTvsSession(); // re-render khi ghi chú / đơn mới
  const [, forceRender] = useState(0);
  const sessionNotes = session.notesByCustomer[partner.id] || [];
  const sessionOrders = (session.ordersByCustomer && session.ordersByCustomer[partner.id]) || [];

  const completeAction = () => {
    partner.nextAction = null;
    forceRender(x => x + 1);
    window.tvsToast('Đã đánh dấu hoàn thành hành động');
  };

  // Mock GMV trend for past 12 months
  const monthly = useMemo(() => {
    const seed = partner.id.charCodeAt(2);
    return Array.from({length: 12}, (_, i) => {
      const v = ((seed * (i+1) * 31) % 9) / 10 + 0.5;
      return Math.round(v * (partner.gmv30d / 1_000_000) * (1 + i/16));
    });
  }, [partner.id]);
  const monthLabels = Array.from({length: 12}, (_, i) => 'T' + (new Date(D.today.getFullYear(), D.today.getMonth() - 11 + i, 1).getMonth() + 1));

  return (
    <div className="drawer-overlay" onClick={onClose}>
      <div className="drawer" onClick={(e) => e.stopPropagation()}>
        <div className="drawer-h">
          <Avatar name={partner.name} size="lg" tier={tierVariant(partner.tier)}/>
          <div style={{flex:1}}>
            <div className="row gap-3">
              <h2 style={{color:'#fff',margin:0,fontFamily:'var(--font-display)',fontSize:22,fontWeight:700}}>{partner.name}</h2>
              <Tag variant={tierVariant(partner.tier)}>{partner.tier}</Tag>
              <Tag variant={partner.stage === 'Active' ? 'success' : partner.stage === 'Onboarding' ? 'info' : 'warning'} dot>{partner.stage}</Tag>
            </div>
            <div className="row gap-4 mt-2" style={{color:'rgba(255,255,255,0.78)',fontSize:13,flexWrap:'wrap'}}>
              <span style={{display:'inline-flex',alignItems:'center',gap:6,background:'rgba(255,255,255,0.16)',border:'1px solid rgba(255,255,255,0.28)',padding:'2px 10px',borderRadius:999,color:'#fff',fontWeight:700,fontSize:12}}>
                <Icon name="briefcase" size={12}/>Đối tác B2B · {partner.type}
              </span>
              <span>👤 {partner.contact}</span>
              <span>📞 <span className="tnum">{partner.phone}</span></span>
              <span>📍 {partner.city}</span>
              <span>· Phụ trách: <b style={{color:'#fff'}}>{partnerOwner(partner)}</b></span>
              {partner.followers && <span>👥 {partner.followers} followers</span>}
            </div>
          </div>
          <button className="btn btn-cta" onClick={() => onLogOrder && onLogOrder(partner)}><Icon name="receipt" size={14}/>Ghi nhận đơn</button>
          <button className="btn btn-secondary" style={{background:'rgba(255,255,255,0.10)',color:'#fff',borderColor:'transparent'}}
            onClick={() => window.tvsDemo('Gửi mail cho ' + partner.contact)}><Icon name="mail" size={14}/>Gửi mail</button>
          <button className="close" onClick={onClose}>
            <Icon name="close" size={18}/>
          </button>
        </div>

        {/* Mobile: thanh hành động thay cho các nút header bị ẩn trên phone */}
        <div className="drawer-actions-mobile">
          <button className="btn btn-cta btn-sm" onClick={() => onLogOrder && onLogOrder(partner)}><Icon name="receipt" size={13}/>Ghi nhận đơn</button>
          <button className="btn btn-secondary btn-sm" onClick={() => window.tvsDemo('Gửi mail cho ' + partner.contact)}><Icon name="mail" size={13}/>Gửi mail</button>
        </div>

        {/* Stats strip */}
        <div className="drawer-strip">
          {[
            {l:'GMV 30 ngày', v: partner.gmv30d > 0 ? fmt.vndFull(partner.gmv30d) : '—'},
            {l:'GMV YTD', v: partner.gmvYTD > 0 ? fmt.vndFull(partner.gmvYTD) : '—', dim: partner.gmvYTD > 0 ? 'Từ đầu năm' : ''},
            {l:'Hoa hồng', v: partner.commission + '%', dim: 'Tỷ lệ áp dụng'},
            {l:'Đã trả', v: fmt.vndFull(partner.commissionEarned)},
            {l:'Công nợ', v: partnerDebt(partner) > 0 ? fmt.vndFull(partnerDebt(partner)) : '0đ', dim: partnerDebt(partner) > 0 ? 'Hạn thanh toán ' + fmt.date(D.iso(9)).slice(0,5) : 'Không có nợ', warn: partnerDebt(partner) > 50000000},
            {l:partner.followers ? 'Conversion' : 'Onboarded', v: partner.conversion ? partner.conversion+'%' : partner.onboarded ? fmt.date(partner.onboarded).slice(3) : '—'},
          ].map((s,i) => (
            <div key={i}>
              <div className="cell-label">{s.l}</div>
              <div className="cell-value" style={s.warn ? {color:'var(--status-sale)'} : undefined}>{s.v}</div>
              {s.dim && <div className="text-xs fg-muted mt-2">{s.dim}</div>}
            </div>
          ))}
        </div>

        <div className="tabs" style={{padding:'0 var(--space-6)'}}>
          {[
            ['overview','Tổng quan'],
            ['orders','Lịch sử đơn'],
            ['commission','Hoa hồng'],
            ['care','Lịch chăm sóc'],
            ['notes','Ghi chú'],
            ['contract','Hợp đồng & Giấy tờ'],
          ].map(([k,l]) => (
            <button key={k} className={`tab ${tab===k?'active':''}`} onClick={()=>setTab(k)}>{l}</button>
          ))}
        </div>

        <div style={{padding:'var(--space-5) var(--space-6)'}}>
          {tab === 'overview' && (
            <>
              {partner.nextAction && (
                <div className="banner mb-4">
                  <Icon name="flag" size={18}/>
                  <div style={{flex:1}}>
                    <div className="bold">Hành động kế tiếp: {partner.nextAction.type}</div>
                    <div className="text-xs">Hạn: {fmt.rel(partner.nextAction.due)} · Liên hệ: {partner.contact}</div>
                  </div>
                  <button className="btn btn-cta btn-sm" onClick={completeAction}>Đánh dấu hoàn thành</button>
                </div>
              )}

              <div className="grid grid-7-5">
                <Card>
                  <div className="row mb-4">
                    <h3 style={{margin:0,fontSize:'var(--t-md)',color:'var(--fg-1)'}}>GMV 12 tháng qua</h3>
                    <span className="text-xs fg-muted" style={{marginLeft:'auto'}}>Triệu đồng</span>
                  </div>
                  {partner.gmv30d > 0 ? (
                    <>
                      <BarChart data={monthly} height={140} highlight={11}/>
                      <div className="row mt-3" style={{justifyContent:'space-between',fontSize:11,color:'var(--fg-muted)'}}>
                        {monthLabels.map((m, i) => <span key={i}>{m}</span>)}
                      </div>
                    </>
                  ) : (
                    <EmptyState icon="chart" title="Chưa có GMV" desc="Đối tác chưa phát sinh doanh số — biểu đồ sẽ hiện khi có đơn đầu tiên."/>
                  )}
                </Card>
                <Card>
                  <h3 style={{margin:'0 0 var(--space-4)',fontSize:'var(--t-md)',color:'var(--fg-1)'}}>Bảng giá áp dụng</h3>
                  <div className="text-sm fg-muted mb-3">{partner.priceList}</div>
                  {['VS-8101', 'VS-4122', 'VS-2595', 'VS-3115'].map(sku => {
                    const p = D.products.find(x => x.sku === sku);
                    return p ? (
                      <div key={sku} className="row mb-2"><span className="text-sm" style={{flex:1,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{p.name.split(' - ')[0]}</span><span className="tnum strong">{fmt.vndFull(p.b2bPrice)}</span></div>
                    ) : null;
                  })}
                  <button className="btn btn-ghost btn-sm mt-2" style={{width:'100%'}} onClick={() => window.tvsDemo('Bảng giá đầy đủ ' + partner.priceList)}>Xem bảng giá đầy đủ →</button>
                </Card>
              </div>

              {/* Top sản phẩm đối tác bán — chỉ hiện cho Active */}
              {partner.stage === 'Active' && (
                <Card pad={false} className="mt-4">
                  <CardHeader title={partner.type.includes('TikTok') || partner.type.includes('PT') ? 'Top sản phẩm KOC bán nhiều nhất' : 'Top sản phẩm đối tác đang phân phối'}
                    sub="30 ngày qua · đo theo GMV tạo ra cho TVS"
                    actions={<button className="btn btn-ghost btn-sm" onClick={() => window.tvsDemo('Chi tiết SKU của đối tác')}>Xem chi tiết SKU →</button>}/>
                  <div className="card-pad">
                    {(() => {
                      const seed = partner.id.charCodeAt(2);
                      const topProducts = D.products.slice(0, 5).map((p, i) => {
                        const sold = Math.round(((seed + i*7) % 30) + (partner.gmv30d / 8_000_000) * (1 - i*0.15));
                        return { ...p, sold, gmv: sold * p.b2bPrice };
                      }).sort((a, b) => b.gmv - a.gmv);
                      const max = Math.max(...topProducts.map(p => p.gmv));
                      return topProducts.map((p, i) => (
                        <div key={p.sku} className="mb-3">
                          <div className="row mb-1">
                            <span className="rank" style={{fontFamily:'var(--font-display)',fontWeight:700,color: i < 3 ? 'var(--vs-dark-blue)' : 'var(--fg-muted)',width:24}}>#{i+1}</span>
                            <div style={{flex:1,minWidth:0}}>
                              <div className="strong fg-1 text-sm">{p.name}</div>
                              <div className="text-xs fg-muted">{p.cat} · {p.sold} đơn</div>
                            </div>
                            <div className="tnum strong" style={{minWidth:110,textAlign:'right'}}>{fmt.vndFull(p.gmv)}</div>
                          </div>
                          <div style={{height:6,background:'var(--bg-soft)',borderRadius:3,marginLeft:24,overflow:'hidden'}}>
                            <div style={{width: (p.gmv/max)*100 + '%', height:'100%', background: i === 0 ? 'var(--vs-dark-blue)' : 'var(--vs-light-blue)', borderRadius:3}}/>
                          </div>
                        </div>
                      ));
                    })()}
                    <div className="banner mt-4">
                      <Icon name="sparkles" size={16}/>
                      <div className="text-sm" style={{flex:1}}>
                        <b>Insight:</b> {partner.type.includes('TikTok') ? 'KOC này bán mạnh dòng Whey & BCAA — phù hợp brief sản phẩm Sports Nutrition cho video sắp tới.' : 'Đối tác có chu kỳ đặt 30 ngày · nên proactive đề xuất combo Q3 sớm.'}
                      </div>
                    </div>
                  </div>
                </Card>
              )}

              {/* Outreach log — chỉ hiện cho Prospect */}
              {partner.stage === 'Prospect' && (
                <Card pad={false} className="mt-4">
                  <CardHeader title="Lịch sử tiếp cận" sub="Các lần đã liên lạc với đối tác để chốt hợp tác"
                    actions={<button className="btn btn-cta btn-sm" onClick={() => window.tvsDemo('Thêm lần tiếp cận')}><Icon name="plus" size={12}/>Thêm lần tiếp cận</button>}/>
                  <div className="card-pad">
                    {[].map((a, i) => (
                      <div key={i} className="activity">
                        <div className="ico" style={{color: a.status === 'replied' ? 'var(--status-success)' : a.status === 'opened' ? 'var(--vs-light-blue)' : 'var(--fg-muted)'}}>
                          <Icon name={a.via === 'Zalo' ? 'chat' : a.via === 'Email' ? 'mail' : 'sparkles'} size={14}/>
                        </div>
                        <div className="body">
                          <div className="row gap-2">
                            <div className="title">{a.via}</div>
                            <Tag variant={a.status === 'replied' ? 'success' : a.status === 'opened' ? 'info' : 'outline'}>
                              {a.status === 'replied' ? 'Đã phản hồi' : a.status === 'opened' ? 'Đã đọc' : 'Đã gửi'}
                            </Tag>
                          </div>
                          <div className="text-sm fg-2 mt-1" style={{lineHeight:1.5}}>{a.note}</div>
                          <div className="meta">{a.when} · {a.who}</div>
                        </div>
                      </div>
                    ))}
                    <div className="banner mt-3" style={{background:'rgba(236,167,44,0.10)',borderColor:'rgba(236,167,44,0.30)',color:'#8a5a00'}}>
                      <Icon name="clock" size={16}/>
                      <div className="text-sm" style={{flex:1}}>
                        Đã 5 ngày kể từ lần liên lạc cuối — đề xuất follow-up nhẹ nhàng qua Zalo trong tuần này.
                      </div>
                      <button className="btn btn-cta btn-sm" onClick={() => window.tvsDemo('Lên lịch follow-up đối tác')}>Lên lịch follow-up</button>
                    </div>
                  </div>
                </Card>
              )}
            </>
          )}

          {tab === 'orders' && (() => {
            // Đơn sỉ thật lấy từ backend; đơn ghi trong phiên hiện trước
            const mockOrders = [];
            const allOrders = [
              ...sessionOrders.map(o => ({id:o.id, date:o.date, sku:o.items, total:o.total, status:o.status || 'Đã ghi nhận', tracking:o.posRef || '—', _new:true})),
              ...mockOrders,
            ];
            return (
              <Card pad={false}>
                <CardHeader title="Lịch sử đơn sỉ" sub={allOrders.length > 0 ? `${allOrders.length} đơn gần nhất — ghi nhận từ Sapo/CRM` : 'Chưa có đơn nào'}
                  actions={<button className="btn btn-cta btn-sm" onClick={() => onLogOrder && onLogOrder(partner)}><Icon name="plus" size={12}/>Ghi nhận đơn</button>}/>
                {allOrders.length > 0 ? (
                  <div className="table-wrap">
                    <table className="tbl">
                      <thead>
                        <tr><th>Mã đơn Sapo</th><th>Ngày</th><th className="num">SKU</th><th className="num">Tổng</th><th>Trạng thái</th><th>Giao hàng</th></tr>
                      </thead>
                      <tbody>
                        {allOrders.map(o => (
                          <tr key={o.id} style={o._new ? {background:'rgba(65,182,230,0.07)'} : undefined}>
                            <td className="strong tnum">{o.id}{o._new && <Tag variant="info" style={{marginLeft:6}}>Mới</Tag>}</td>
                            <td className="text-sm">{fmt.date(o.date)}</td>
                            <td className="num tnum">{o.sku}</td>
                            <td className="num strong">{fmt.vndFull(o.total)}</td>
                            <td>
                              <Tag variant={o.status === 'Đã giao' ? 'success' : 'info'} dot>{o.status}</Tag>
                            </td>
                            <td className="text-xs fg-muted tnum">{o.tracking}</td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                ) : (
                  <EmptyState icon="receipt" title="Chưa có đơn sỉ"
                    desc="Đối tác chưa phát sinh đơn — dùng nút Ghi nhận đơn khi có đơn đầu tiên."
                    action={<button className="btn btn-cta btn-sm" onClick={() => onLogOrder && onLogOrder(partner)}><Icon name="plus" size={12}/>Ghi nhận đơn</button>}/>
                )}
              </Card>
            );
          })()}

          {tab === 'commission' && (
            <>
              <div className="grid grid-3 mb-4">
                <KPI label="Hoa hồng tháng này" value={fmt.vndFull(Math.round(partner.gmv30d * partner.commission / 100))}/>
                <KPI label="Đã thanh toán" value={fmt.vndFull(partner.commissionEarned)} sub="Luỹ kế từ đầu năm"/>
                <KPI label="Đang chờ" value={fmt.vndFull(Math.round(partner.gmv30d * partner.commission / 100))} sub={'Dự kiến trả ' + fmt.date(D.iso(12)).slice(0,5)}/>
              </div>
              <Card pad={false}>
                <CardHeader title="Lịch sử hoa hồng" sub="6 kỳ gần nhất"/>
                <div className="table-wrap">
                  <table className="tbl">
                    <thead><tr><th>Kỳ</th><th className="num">GMV</th><th className="num">%</th><th className="num">Hoa hồng</th><th>Trạng thái</th></tr></thead>
                    <tbody>
                      {[1, 0.92, 0.85, 0.78, 0.72, 0.68].map((f, i) => {
                        const d = new Date(D.today.getFullYear(), D.today.getMonth() - i, 1);
                        return [`T${d.getMonth()+1}/${d.getFullYear()}`, Math.round(partner.gmv30d * f), i === 0 ? 'Tạm tính' : 'Đã trả'];
                      }).map(([m, gmv, s], i) => (
                        <tr key={i}>
                          <td className="strong">{m}</td>
                          <td className="num">{fmt.vndFull(gmv)}</td>
                          <td className="num">{partner.commission}%</td>
                          <td className="num strong">{fmt.vndFull(Math.round(gmv*partner.commission/100))}</td>
                          <td><Tag variant={s === 'Đã trả' ? 'success' : 'warning'} dot>{s}</Tag></td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </Card>
            </>
          )}

          {tab === 'care' && (
            <Card pad={false}>
              <CardHeader title="Lịch chăm sóc & Tương tác" sub="Visit · Gọi · Gửi mẫu · Brief" actions={<button className="btn btn-cta btn-sm" onClick={() => window.tvsDemo('Thêm lịch chăm sóc')}><Icon name="plus" size={12}/>Thêm lịch</button>}/>
              <div className="card-pad">
                {[
                  {when:fmt.date(D.iso(3)),   what:'Visit cửa hàng',ico:'pin',who:'Nguyễn Việt Hà',status:'upcoming'},
                  {when:fmt.date(D.iso(-5)),  what:'Gọi cập nhật bảng giá quý',ico:'phone',who:'Nguyễn Việt Hà',status:'done'},
                  {when:fmt.date(D.iso(-18)), what:'Gửi mẫu Whey vị mới — 5 hộp',ico:'package',who:'Nguyễn Việt Hà',status:'done'},
                  {when:fmt.date(D.iso(-31)), what:'Brief sản phẩm mới trong quý',ico:'fileText',who:'Nguyễn Việt Hà',status:'done'},
                  {when:fmt.date(D.iso(-46)), what:'Đàm phán mở rộng SKU',ico:'briefcase',who:'Nguyễn Việt Hà',status:'done'},
                ].map((a,i) => (
                  <div key={i} className="activity">
                    <div className="ico" style={{color: a.status === 'upcoming' ? 'var(--vs-light-blue)' : 'var(--status-success)'}}>
                      <Icon name={a.ico} size={14}/>
                    </div>
                    <div className="body">
                      <div className="title">{a.what}</div>
                      <div className="meta">{a.when} · {a.who}</div>
                    </div>
                    <Tag variant={a.status === 'upcoming' ? 'info' : 'success'} dot>{a.status === 'upcoming' ? 'Sắp tới' : 'Đã xong'}</Tag>
                  </div>
                ))}
              </div>
            </Card>
          )}

          {tab === 'notes' && (
            <>
              <Card className="mb-4">
                <h3 style={{margin:'0 0 var(--space-3)',fontSize:'var(--t-md)',color:'var(--fg-1)'}}>Thêm ghi chú mới</h3>
                <textarea className="textarea" id="partner-quick-note" placeholder="VD: Đối tác muốn tăng chiết khấu khi đạt 200tr/tháng — cần xin ý kiến quản lý..."/>
                <div className="row mt-3">
                  <span className="text-xs fg-muted">Ghi chú hiển thị cho mọi người cùng phụ trách đối tác này</span>
                  <button className="btn btn-cta" style={{marginLeft:'auto'}} onClick={() => {
                    const el = document.getElementById('partner-quick-note');
                    const v = el && el.value.trim();
                    if (!v) { window.tvsToast('Nhập nội dung ghi chú trước khi lưu', 'demo'); return; }
                    window.TVS_SESSION.addNote(partner.id, { text: v, tag: 'general', who: partnerOwner(partner), role: 'B2B' });
                    el.value = '';
                    window.tvsToast('Đã lưu ghi chú vào hồ sơ đối tác');
                  }}>Lưu ghi chú</button>
                </div>
              </Card>
              <Card pad={false}>
                <CardHeader title="Ghi chú trước đây" sub={`${sessionNotes.length} mục`}/>
                <div className="card-pad">
                  {[
                    ...sessionNotes.map(n => ({...n, _session: true, when: __agoLabel(n.ts)})),
                  ].map((n,i) => (
                    <div key={n.id || i} className="activity">
                      <Avatar name={n.who} size="sm"/>
                      <div className="body">
                        <div className="row gap-2">
                          <div className="title">{n.who} <span className="text-xs fg-muted">· {n.role} · {n.when}</span></div>
                          {n._session && <Tag variant="info">Mới</Tag>}
                        </div>
                        <div className="text-sm fg-2 mt-2" style={{whiteSpace:'pre-wrap'}}>{n.text}</div>
                      </div>
                    </div>
                  ))}
                </div>
              </Card>
            </>
          )}

          {tab === 'contract' && (
            <div className="grid grid-2">
              <Card>
                <h3 style={{margin:'0 0 var(--space-3)',fontSize:'var(--t-md)',color:'var(--fg-1)'}}>Hợp đồng hiện tại</h3>
                <div className="col gap-2 text-sm">
                  <div className="row"><span className="fg-muted" style={{flex:1}}>Số HĐ</span><span className="strong fg-1 tnum">—</span></div>
                  <div className="row"><span className="fg-muted" style={{flex:1}}>Ngày ký</span><span className="strong fg-1">{partner.onboarded ? fmt.date(partner.onboarded) : '—'}</span></div>
                  <div className="row"><span className="fg-muted" style={{flex:1}}>Hiệu lực đến</span><span className="strong fg-1">—</span></div>
                  <div className="row"><span className="fg-muted" style={{flex:1}}>Mô hình</span><span className="strong fg-1">{partner.priceList}</span></div>
                  <div className="row"><span className="fg-muted" style={{flex:1}}>Mức hoa hồng</span><span className="strong fg-1">{partner.commission}%</span></div>
                </div>
                <button className="btn btn-secondary mt-4" style={{width:'100%'}} onClick={() => window.tvsDemo('Xem file hợp đồng PDF')}><Icon name="fileText" size={14}/>Xem file PDF</button>
              </Card>
              <Card>
                <h3 style={{margin:'0 0 var(--space-3)',fontSize:'var(--t-md)',color:'var(--fg-1)'}}>Giấy tờ pháp lý</h3>
                {[
                  ['ĐKKD','—','outline'],
                  ['MST','—','outline'],
                  ['GPKD dược','—','outline'],
                  ['Cam kết bảo mật (NDA)','—','outline'],
                  ['Hợp đồng cộng tác','—','outline'],
                ].map(([l,s,v]) => (
                  <div key={l} className="row mb-3">
                    <Icon name={v === 'success' ? 'check' : v === 'warning' ? 'clock' : 'close'} size={14} style={{color: v === 'success' ? 'var(--status-success)' : v === 'warning' ? 'var(--status-warning)' : 'var(--fg-muted)'}}/>
                    <span className="text-sm fg-2" style={{flex:1}}>{l}</span>
                    <Tag variant={v}>{s}</Tag>
                  </div>
                ))}
              </Card>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

window.B2BScreen = B2BScreen;
window.PartnerDrawer = PartnerDrawer;