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

function B2BScreen({ role, onLogOrder, onAddPartner }) {
  const CustomerPipeline = window.CustomerPipeline;
  const UnifiedFollowUps = window.UnifiedFollowUps;

  const live = window.TVS_API && window.TVS_API.isAuthed();
  const [view, setView] = useState('list'); // 'list' | 'followups' | 'pipeline'
  const [typeFilter, setTypeFilter] = useState('all');
  const [stageFilter, setStageFilter] = useState('all');
  const [selected, setSelected] = useState(null);

  // Load danh sách follow-up thực tế từ DB để hiển thị trạng thái follow-up trên bảng đối tác
  const [followUps, setFollowUps] = useState([]);
  const loadFollowUps = () => {
    if (live) {
      window.TVS_API.api('/api/followups?kind=partner')
        .then(r => setFollowUps(r.followUps || []))
        .catch(() => {});
    }
  };
  useEffect(() => { loadFollowUps(); }, [live]);

  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;
    return true;
  });

  const totals = D.partners.reduce((acc, p) => {
    acc.gmv += p.gmv30d;
    acc.gmvYtd += p.gmvYTD;
    return acc;
  }, {gmv:0, gmvYtd: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">
          {/* Tab switcher */}
          <div className="row gap-1" style={{background:'var(--bg-soft)', padding:4, borderRadius:10, border:'1px solid var(--border-1)'}}>
            {[
              {value:'list',      label:'Danh sách đối tác', icon:'handshake'},
              {value:'followups', label:'Lịch Follow-up', icon:'flag'},
              {value:'pipeline',  label:'Pipeline B2B', icon:'target'},
            ].map(opt => {
              const isActive = view === opt.value;
              return (
                <button
                  key={opt.value}
                  onClick={() => setView(opt.value)}
                  style={{
                    padding: '10px 20px',
                    fontSize: 14,
                    fontWeight: isActive ? 800 : 600,
                    letterSpacing: isActive ? '-0.01em' : '0',
                    borderRadius: 7,
                    background: isActive ? 'var(--vs-dark-blue)' : 'transparent',
                    color: isActive ? 'white' : 'var(--fg-2)',
                    border: 'none',
                    boxShadow: isActive ? '0 2px 10px rgba(0,64,160,0.25)' : 'none',
                    display: 'inline-flex',
                    alignItems: 'center',
                    gap: 8,
                    transition: 'all 0.15s ease',
                    cursor: 'pointer',
                    whiteSpace: 'nowrap'
                  }}
                >
                  <Icon name={opt.icon} size={15} style={{opacity: isActive ? 1 : 0.6}}/>
                  {opt.label}
                </button>
              );
            })}
          </div>
          <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-cta" onClick={onAddPartner}><Icon name="plus" size={14}/>Thêm đối tác</button>
        </div>
      </div>

      {view === 'list' && (
        <>
          <div className="kpi-grid">
            <KPI label="GMV 30 ngày" value={fmt.vndFull(totals.gmv)} sub="Đơn đã hoàn thành"/>
            <KPI label="GMV từ đầu năm" value={fmt.vndFull(totals.gmvYtd)} sub="YTD"/>
            <KPI label="Đối tác active" value={D.partners.filter(p => p.stage === 'Active').length} sub="Có đơn 30N"/>
            <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="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:'Hết'},
                {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">Đã trả</th>
                    <th>Hành động kế tiếp</th>
                    <th>Follow-up</th>
                  </tr>
                </thead>
                <tbody>
                  {data.map(p => {
                    const fu = followUps.find(x => x.customerId === p.id);
                    const hasFu = !!fu;
                    return (
                      <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">{fmt.vndFull(p.commissionEarned)}</td>
                        <td>
                          <div className="text-xs">{p.nextAction.type}</div>
                          <Tag variant={p.nextAction.due === '2026-05-13' || new Date(p.nextAction.due) < new Date('2026-05-13') ? 'danger' : 'outline'}>
                            {fmt.rel(p.nextAction.due)}
                          </Tag>
                        </td>
                        <td onClick={(ev) => ev.stopPropagation()}>
                          <button
                            className={hasFu ? 'btn btn-sm btn-cta' : 'btn btn-sm btn-ghost'}
                            title={hasFu ? 'Bỏ hẹn chăm sóc' : 'Thêm hẹn chăm sóc'}
                            onClick={async () => {
                              if (!live) return;
                              try {
                                if (hasFu) {
                                  await window.TVS_API.api('/api/followups/' + fu.id + '/done', { method: 'PATCH', body: '{}' });
                                  window.tvsToast && window.tvsToast('Đã hoàn thành follow-up');
                                } else {
                                  await window.TVS_API.api('/api/followups', {
                                    method: 'POST',
                                    body: JSON.stringify({ customerId: p.id, phone: p.phone, name: p.name, bucket: 'today', reason: 'Chăm sóc đối tác B2B' })
                                  });
                                  window.tvsToast && window.tvsToast('Đã thêm lịch follow-up hôm nay');
                                }
                                loadFollowUps();
                                setView('followups');
                              } catch (e) {
                                window.tvsToast && window.tvsToast('Lỗi: ' + e.message);
                              }
                            }}
                          >
                            <Icon name={hasFu ? 'check' : 'flag'} size={12}/>
                            {hasFu ? 'Đang follow' : 'Follow'}
                          </button>
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          </Card>
        </>
      )}

      {view === 'followups' && (
        window.UnifiedFollowUps ? (
          <window.UnifiedFollowUps
            role={role}
            kind="partner"
            onOpen={(r) => setSelected(r.raw)}
            onGoToTelesale={() => {}}
          />
        ) : (
          <Card><div className="card-pad text-sm fg-muted">Đang tải Follow-up B2B...</div></Card>
        )
      )}

      {view === 'pipeline' && (
        window.CustomerPipeline ? (
          <window.CustomerPipeline
            kind="partner"
            role={role}
            onOpenCustomer={(c) => setSelected(c)}
            myName={role && role.role !== 'staff' ? null : (role && role.person)}
          />
        ) : (
          <Card><div className="card-pad text-sm fg-muted">Đang tải Pipeline B2B...</div></Card>
        )
      )}

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

function PartnerDrawer({ partner, onClose, onLogOrder }) {
  const [tab, setTab] = useState('overview');
  // Lịch sử đơn THẬT (partner.id = customer.id khi dựng từ khách B2B).
  const [realOrders, setRealOrders] = useState(null);
  useEffect(() => {
    if (window.TVS_API && window.TVS_API.isAuthed() && partner.id) {
      window.TVS_API.api('/api/customers/' + partner.id + '/orders-history')
        .then(r => setRealOrders(r.orders || [])).catch(() => setRealOrders([]));
    }
  }, [partner.id]);

  // GMV 12 tháng gần nhất — tính THẬT từ đơn (triệu đồng), 0 nếu chưa có đơn.
  const monthly = useMemo(() => {
    const buckets = Array.from({ length: 12 }, () => 0);
    const now = new Date(); const base = now.getFullYear() * 12 + now.getMonth();
    (realOrders || []).forEach(o => {
      if (!o.date) return;
      const d = new Date(o.date); const idx = 11 - (base - (d.getFullYear() * 12 + d.getMonth()));
      if (idx >= 0 && idx < 12) buckets[idx] += (o.total || 0);
    });
    return buckets.map(v => Math.round(v / 1_000_000));
  }, [realOrders]);
  const orderCount = realOrders ? realOrders.length : 0;
  const lastOrderDate = realOrders && realOrders[0] ? realOrders[0].date : null;

  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}}>
              <span>{partner.type}</span>
              <span>👤 {partner.contact}</span>
              <span>📞 <span className="tnum">{partner.phone}</span></span>
              <span>📍 {partner.city}</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'}}><Icon name="mail" size={14}/>Gửi mail</button>
          <button className="close" onClick={onClose}>
            <Icon name="close" size={18}/>
          </button>
        </div>

        {/* Stats strip */}
        <div style={{display:'grid',gridTemplateColumns:'repeat(5,1fr)',padding:'var(--space-5) var(--space-6)',borderBottom:'1px solid var(--border-1)',background:'var(--bg-soft)'}}>
          {[
            {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:'Số đơn', v: realOrders ? String(orderCount) : '…', dim: 'Đã ghi nhận'},
            {l:'Đơn gần nhất', v: lastOrderDate ? fmt.date(lastOrderDate).slice(3) : '—'},
            {l:'Bảng giá', v: partner.priceList || '—'},
          ].map((s,i) => (
            <div key={i}>
              <div style={{fontSize:10,letterSpacing:'0.14em',textTransform:'uppercase',color:'var(--fg-muted)',fontWeight:700,marginBottom:4}}>{s.l}</div>
              <div style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:20,color:'var(--fg-1)',lineHeight:1}}>{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'],
            ['care','Chăm sóc & Ghi chú'],
            ['contract','Hoa hồng & HĐ'],
          ].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' && (
            <>
              <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">Đá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>
                  <BarChart data={monthly} height={140} highlight={11}/>
                  <div className="row mt-3" style={{justifyContent:'space-between',fontSize:11,color:'var(--fg-muted)'}}>
                    <span>T6</span><span>T7</span><span>T8</span><span>T9</span><span>T10</span><span>T11</span><span>T12</span><span>T1</span><span>T2</span><span>T3</span><span>T4</span><span>T5</span>
                  </div>
                </Card>
                <Card>
                  <h3 style={{margin:'0 0 var(--space-4)',fontSize:'var(--t-md)',color:'var(--fg-1)'}}>Tóm tắt mua hàng</h3>
                  {realOrders ? (
                    <div className="col gap-3 text-sm">
                      <div className="row"><span className="fg-muted" style={{flex:1}}>Tổng số đơn</span><span className="strong fg-1 tnum">{orderCount}</span></div>
                      <div className="row"><span className="fg-muted" style={{flex:1}}>GMV từ đầu năm</span><span className="strong fg-1 tnum">{fmt.vndFull(partner.gmvYTD)}</span></div>
                      <div className="row"><span className="fg-muted" style={{flex:1}}>Đơn gần nhất</span><span className="strong fg-1">{lastOrderDate ? fmt.date(lastOrderDate) : '—'}</span></div>
                      <div className="row"><span className="fg-muted" style={{flex:1}}>Giá trị đơn TB</span><span className="strong fg-1 tnum">{orderCount ? fmt.vndFull(Math.round(realOrders.reduce((a,o)=>a+(o.total||0),0)/orderCount)) : '—'}</span></div>
                      <div className="row"><span className="fg-muted" style={{flex:1}}>Nhóm khách</span><span className="strong fg-1">{partner.type}</span></div>
                    </div>
                  ) : <div className="text-sm fg-muted">Đang tải…</div>}
                </Card>
              </div>
            </>
          )}

          {tab === 'orders' && (
            <Card pad={false}>
              <CardHeader title="Lịch sử đơn" sub={realOrders ? `${realOrders.length} đơn từ Sapo` : 'Đang tải…'} actions={<button className="btn btn-cta btn-sm" onClick={() => onLogOrder && onLogOrder(partner)}><Icon name="plus" size={12}/>Ghi nhận đơn</button>}/>
              <div className="table-wrap">
                <table className="tbl">
                  <thead>
                    <tr><th>Mã đơn</th><th>Ngày</th><th className="num">SP</th><th className="num">Tổng</th><th>Trạng thái</th><th>Kênh</th></tr>
                  </thead>
                  <tbody>
                    {(realOrders || []).map(o => (
                      <tr key={o.id}>
                        <td className="strong tnum">{o.id}</td>
                        <td className="text-sm">{o.date ? fmt.date(o.date) : '—'}</td>
                        <td className="num tnum">{o.items}</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">{o.channel}</td>
                      </tr>
                    ))}
                    {realOrders && realOrders.length === 0 && <tr><td colSpan={6}><div className="text-sm fg-muted" style={{padding:'var(--space-3)'}}>Chưa có đơn hàng nào.</div></td></tr>}
                    {!realOrders && <tr><td colSpan={6}><div className="text-sm fg-muted" style={{padding:'var(--space-3)'}}>Đang tải…</div></td></tr>}
                  </tbody>
                </table>
              </div>
            </Card>
          )}

          {tab === 'care' && <PartnerCare partnerId={partner.id} partnerName={partner.name}/>}
          {tab === 'contract' && <PartnerContract partnerId={partner.id}/>}
        </div>
      </div>
    </div>
  );
}

// Chăm sóc & ghi chú THẬT cho đối tác (partner.id = customer.id).
function PartnerCare({ partnerId, partnerName }) {
  const [data, setData] = useState(null);
  const [note, setNote] = useState('');
  const [busy, setBusy] = useState(false);
  const load = () => {
    if (!(window.TVS_API && window.TVS_API.isAuthed())) { setData({ notes: [], followUps: [] }); return; }
    window.TVS_API.api('/api/customers/' + partnerId + '/activity').then(setData).catch(() => setData({ notes: [], followUps: [] }));
  };
  useEffect(() => { load(); }, [partnerId]);
  const addNote = async () => {
    if (!note.trim()) return;
    setBusy(true);
    try { await window.TVS_API.addNote(partnerId, { body: note.trim(), tag: 'b2b' }); setNote(''); load(); }
    catch (e) { window.tvsDemo && window.tvsDemo('Lỗi: ' + e.message); }
    setBusy(false);
  };
  const notes = (data && data.notes) || [];
  const followUps = (data && data.followUps) || [];
  return (
    <>
      <Card className="mb-4">
        <h3 style={{margin:'0 0 var(--space-3)',fontSize:'var(--t-md)',color:'var(--fg-1)'}}>Thêm ghi chú chăm sóc</h3>
        <textarea className="textarea" placeholder={`Nội dung trao đổi với ${partnerName || 'đối tác'}...`} value={note} onChange={e=>setNote(e.target.value)}/>
        <div className="row mt-2" style={{justifyContent:'flex-end'}}>
          <button className="btn btn-cta btn-sm" onClick={addNote} disabled={busy || !note.trim()}>{busy?'Đang lưu…':'Lưu ghi chú'}</button>
        </div>
      </Card>

      {followUps.length > 0 && (
        <Card pad={false} className="mb-4">
          <CardHeader title="Lịch follow-up" sub={`${followUps.length} lịch`}/>
          <div className="card-pad">
            {followUps.map(f => (
              <div key={f.id} className="activity">
                <div className="ico" style={{color: f.status === 'done' ? 'var(--status-success)' : 'var(--vs-light-blue)'}}><Icon name={f.status === 'done' ? 'check' : 'clock'} size={14}/></div>
                <div className="body">
                  <div className="title">{f.reason || 'Chăm sóc'}</div>
                  <div className="meta">{f.dueAt ? 'Hạn ' + fmt.date(f.dueAt) : ''}{f.assignedTo ? ' · ' + f.assignedTo : ''}</div>
                </div>
                <Tag variant={f.status === 'done' ? 'success' : 'info'} dot>{f.status === 'done' ? 'Đã xong' : 'Chờ xử lý'}</Tag>
              </div>
            ))}
          </div>
        </Card>
      )}

      <Card pad={false}>
        <CardHeader title="Ghi chú & tương tác" sub={data ? `${notes.length} ghi chú` : 'Đang tải…'}/>
        <div className="card-pad">
          {notes.map(nt => (
            <div key={nt.id} className="activity">
              <div className="ico"><Icon name="note" size={14}/></div>
              <div className="body">
                <div className="text-sm fg-2" style={{lineHeight:1.5,whiteSpace:'pre-wrap'}}>{nt.body}</div>
                <div className="meta">{fmt.date(nt.at)}{nt.author ? ' · ' + nt.author : ''}{nt.tag ? ' · ' + nt.tag : ''}</div>
              </div>
            </div>
          ))}
          {data && notes.length === 0 && <div className="text-sm fg-muted">Chưa có ghi chú nào. Thêm ở trên.</div>}
        </div>
      </Card>
    </>
  );
}

// Hoa hồng + Hợp đồng đối tác (nhập tay + upload PDF).
function PartnerContract({ partnerId }) {
  const canManage = window.TVS_API && window.TVS_API.isAuthed() && D.roles[0] && D.roles[0].role === 'admin';
  const [p, setP] = useState(null);
  const [commission, setCommission] = useState('');
  const [note, setNote] = useState('');
  const [signedAt, setSignedAt] = useState('');
  const [busy, setBusy] = useState(false);
  const [msg, setMsg] = useState(null);
  const fileRef = useRef(null);
  const load = () => {
    if (!(window.TVS_API && window.TVS_API.isAuthed())) { setP({ commissionPercent: 0 }); return; }
    window.TVS_API.api('/api/partners/' + partnerId + '/profile').then(r => {
      setP(r); setCommission(String(r.commissionPercent || '')); setNote(r.contractNote || '');
      setSignedAt(r.signedAt ? new Date(r.signedAt).toISOString().slice(0,10) : '');
    }).catch(() => setP({ commissionPercent: 0 }));
  };
  useEffect(() => { load(); }, [partnerId]);
  const save = async (contractDataUrl) => {
    setBusy(true); setMsg(null);
    try {
      await window.TVS_API.api('/api/partners/' + partnerId + '/profile', { method:'PUT', body: JSON.stringify({ commissionPercent: commission || 0, contractNote: note, signedAt: signedAt || null, contractDataUrl }) });
      setMsg({ text: 'Đã lưu' }); load();
    } catch (e) { setMsg({ err:true, text: e.message }); }
    setBusy(false);
  };
  const onPickPdf = async (e) => {
    const f = e.target.files && e.target.files[0]; e.target.value = '';
    if (!f) return;
    if (f.type !== 'application/pdf') { setMsg({ err:true, text:'Chỉ nhận file PDF' }); return; }
    if (f.size > 10*1024*1024) { setMsg({ err:true, text:'File quá lớn (>10MB)' }); return; }
    const reader = new FileReader();
    reader.onload = () => save(reader.result);
    reader.readAsDataURL(f);
  };
  const removeContract = async () => {
    if (!confirm('Xóa file hợp đồng?')) return;
    setBusy(true);
    try { await window.TVS_API.api('/api/partners/' + partnerId + '/contract', { method:'DELETE' }); load(); } catch (e) { setMsg({ err:true, text:e.message }); }
    setBusy(false);
  };
  if (!p) return <Card><div className="text-sm fg-muted">Đang tải…</div></Card>;
  return (
    <div className="grid grid-2">
      <Card>
        <h3 style={{margin:'0 0 var(--space-3)',fontSize:'var(--t-md)',color:'var(--fg-1)'}}>Hoa hồng đối tác</h3>
        <div className="field-label">Tỷ lệ hoa hồng (%)</div>
        <input className="input mb-2 tnum" type="number" min="0" max="100" value={commission} onChange={e=>setCommission(e.target.value)} disabled={!canManage} placeholder="VD: 10"/>
        <div className="field-label">Ngày ký hợp đồng</div>
        <input className="input mb-2" type="date" value={signedAt} onChange={e=>setSignedAt(e.target.value)} disabled={!canManage}/>
        <div className="field-label">Ghi chú hợp đồng</div>
        <textarea className="textarea mb-2" value={note} onChange={e=>setNote(e.target.value)} disabled={!canManage} placeholder="Điều khoản, mô hình hợp tác..."/>
        {canManage && <button className="btn btn-cta btn-sm" onClick={()=>save()} disabled={busy}>{busy?'Đang lưu…':'Lưu'}</button>}
        {p.commissionPercent > 0 && <div className="text-xs fg-muted mt-2">Hoa hồng ước tính (theo GMV YTD × {p.commissionPercent}%) hiển thị ở tab Tổng quan.</div>}
        {msg && <div className={'banner mt-2 '+(msg.err?'danger':'')} style={{padding:'8px 10px'}}><span className="text-sm">{msg.text}</span></div>}
      </Card>
      <Card>
        <h3 style={{margin:'0 0 var(--space-3)',fontSize:'var(--t-md)',color:'var(--fg-1)'}}>File hợp đồng (PDF)</h3>
        {p.contractFileName ? (
          <div className="col gap-2">
            <div className="row gap-2" style={{alignItems:'center'}}>
              <Icon name="fileText" size={20} style={{color:'var(--vs-light-blue)'}}/>
              <span className="text-sm strong" style={{flex:1}}>{p.contractFileName}</span>
            </div>
            <a className="btn btn-secondary btn-sm" href={p.contractUrl} target="_blank" rel="noreferrer" style={{textDecoration:'none'}}><Icon name="eye" size={13}/>Xem / Tải PDF</a>
            {canManage && <button className="btn btn-ghost btn-sm" onClick={removeContract} disabled={busy}><Icon name="close" size={13}/>Xóa file</button>}
          </div>
        ) : (
          <div className="text-sm fg-muted mb-3">Chưa có file hợp đồng.</div>
        )}
        {canManage && (
          <>
            <input ref={fileRef} type="file" accept="application/pdf" style={{display:'none'}} onChange={onPickPdf}/>
            <button className="btn btn-secondary btn-sm mt-2" onClick={()=>fileRef.current && fileRef.current.click()} disabled={busy}><Icon name="download" size={13}/>{p.contractFileName?'Thay file khác':'Tải lên PDF'}</button>
          </>
        )}
      </Card>
    </div>
  );
}

window.B2BScreen = B2BScreen;
window.PartnerDrawer = PartnerDrawer;
window.PartnerCare = PartnerCare;
window.PartnerContract = PartnerContract;