// deals.jsx — DEALS (Thương vụ) module + widget. Gom HĐ mua+bán → P&L. Mock-only.
const DEAL_APP = APPS.find(a => a.id === 'thuongvu');

function DealStatusBadge({ status }){
  const { lang } = useLang(); const s = DEAL_STATUS[status] || DEAL_STATUS.open;
  return <span className={'badge ' + s.cls}><i className="dot"></i>{s[lang] || s.vi}</span>;
}
function dealCust(code){ return (window.CustomerStore && CustomerStore.byCode(code)) || {}; }

// Ngưỡng cảnh báo biên lợi nhuận (sửa ở tab Cài đặt của module Thương vụ; lưu localStorage).
let MARGIN_TH = { good:40, mid:15 };
try { const s = JSON.parse(localStorage.getItem('swo-portal-dealmargin') || 'null'); if (s) MARGIN_TH = { good:+s.good || 40, mid:+s.mid || 15 }; } catch (e) {}
function MarginPill({ pct }){
  const v = pct || 0;
  const color = v >= MARGIN_TH.good ? 'var(--success)' : v >= MARGIN_TH.mid ? 'var(--warning)' : 'var(--error)';
  const bg = v >= MARGIN_TH.good ? 'var(--success-bg)' : v >= MARGIN_TH.mid ? 'var(--warning-bg)' : 'var(--error-bg)';
  return <span className="badge" style={{ background:bg, color, fontWeight:600 }}>{v.toFixed(1)}%</span>;
}

function DealModule(){
  const p = usePortal();
  const { t } = useLang();
  const sub = p.route.sub || 'overview';
  const items = [
    { id:'overview', icon:'bi-pie-chart', label:t('c.overview') },
    { id:'list', icon:'bi-diagram-3', label:t('c.list'), count:p.deals.length },
    { id:'settings', icon:'bi-gear', label:t('c.settings') },
  ];
  const go = (id, extra) => p.navigate({ name:'module', module:'deals', sub:id, ...extra });
  return (<>
    <ModuleSidebar app={DEAL_APP} items={items} active={sub === 'detail' ? 'list' : sub} onNavigate={go} />
    <main className="main">
      {sub === 'help' ? <ModuleHelp moduleId="deals" app={DEAL_APP} />
        : sub === 'detail' ? <DealDetail code={p.route.id} go={go} />
        : sub === 'settings' ? <DealSettings />
        : sub === 'list' ? <DealList go={go} />
        : <DealOverview go={go} />}
    </main>
  </>);
}

function DealOverview({ go }){
  const p = usePortal();
  const { t, lang } = useLang();
  const showCost = canViewCost(p);
  const all = window.ContractStore ? ContractStore.all() : [];
  const rows = p.deals.map(d => ({ d, pnl:dealPnl(d, all) })).sort((a, b) => b.pnl.profit - a.pnl.profit);
  const totRev = rows.reduce((s, r) => s + r.pnl.revenue, 0);
  const totCost = rows.reduce((s, r) => s + r.pnl.cost, 0);
  const totProfit = totRev - totCost;
  const avgMargin = totRev ? Math.round(totProfit / totRev * 100) : 0;
  const byStatus = Object.keys(DEAL_STATUS).map(s => ({ s, n:p.deals.filter(d => d.status === s).length })).filter(x => x.n);
  const colors = ['var(--primary)', 'var(--success)', 'var(--warning)', 'var(--error)', 'var(--gray-400)'];
  return (
    <div className="page pagefade">
      <div className="page-head"><div><h1>{lang === 'vi' ? 'Thương vụ' : 'Deals'}</h1><div className="sub">{lang === 'vi' ? 'Tổng quan lợi nhuận các thương vụ (gom HĐ mua + bán).' : 'Deal P&L overview (grouped buy + sale contracts).'}</div></div>
        <button className="btn btn-primary" onClick={() => p.quick('deals')}><i className="bi bi-plus-lg"></i>{lang === 'vi' ? 'Thương vụ mới' : 'New deal'}</button></div>
      <div className="kpi-strip">
        <Kpi label={lang === 'vi' ? 'Thương vụ' : 'Deals'} value={p.deals.length} icon="bi-diagram-3" />
        <Kpi label={lang === 'vi' ? 'Tổng doanh thu' : 'Revenue'} value={vndShort(totRev)} icon="bi-arrow-down-circle" />
        {showCost ? <>
          <Kpi label={lang === 'vi' ? 'Tổng lợi nhuận' : 'Profit'} value={vndShort(totProfit)} icon="bi-graph-up-arrow" />
          <Kpi label={lang === 'vi' ? 'Biên LN bình quân' : 'Avg margin'} value={avgMargin + '%'} icon="bi-percent" />
        </> : <Kpi label={lang === 'vi' ? 'Đang chạy' : 'Open'} value={p.deals.filter(d => d.status === 'open').length} icon="bi-play-circle" />}
      </div>
      <div className="dash-grid">
        <div className="card span2"><div className="card-head"><h3>{showCost ? (lang === 'vi' ? 'Lợi nhuận theo thương vụ' : 'Profit by deal') : (lang === 'vi' ? 'Thương vụ' : 'Deals')}</h3><button className="btn btn-ghost btn-sm" onClick={() => go('list')}>{t('c.viewAll')}</button></div>
          <div style={{ overflow:'auto' }}><table className="tbl">
            <thead><tr><th>{lang === 'vi' ? 'Mã TV' : 'Deal'}</th><th>{lang === 'vi' ? 'Tên' : 'Name'}</th><th className="num">{lang === 'vi' ? 'Doanh thu' : 'Revenue'}</th>{showCost && <th className="num">{lang === 'vi' ? 'Lợi nhuận' : 'Profit'}</th>}{showCost && <th className="num">{lang === 'vi' ? 'Biên' : 'Margin'}</th>}</tr></thead>
            <tbody>
              {rows.slice(0, 8).map(({ d, pnl }) => (
                <tr key={d.code} onClick={() => go('detail', { id:d.code })}>
                  <td><span className="mono" style={{ fontWeight:600, color:'var(--primary)' }}>{d.code}</span></td>
                  <td className="truncate" style={{ fontWeight:500 }}>{d.name}</td>
                  <td className="num mono">{vndShort(pnl.revenue)}</td>
                  {showCost && <td className="num mono" style={{ fontWeight:600, color:pnl.profit >= 0 ? 'var(--success)' : 'var(--error)' }}>{vndShort(pnl.profit)}</td>}
                  {showCost && <td className="num"><MarginPill pct={pnl.marginPct} /></td>}
                </tr>
              ))}
            </tbody>
          </table>{!rows.length && <EmptyState text={t('c.empty')} />}</div></div>
        <div className="card"><div className="card-head"><h3>{lang === 'vi' ? 'Theo trạng thái' : 'By status'}</h3></div><div className="card-body">
          <DistribBars rows={byStatus.map((r, i) => ({ label:DEAL_STATUS[r.s][lang], value:r.n, color:colors[i % colors.length] }))} />
        </div></div>
      </div>
    </div>
  );
}

function DealSettings(){
  const { t, lang } = useLang();
  const toast = useToast();
  const [good, setGood] = usePersist('dealmargin_good', String(MARGIN_TH.good));
  const [mid, setMid] = usePersist('dealmargin_mid', String(MARGIN_TH.mid));
  // đồng bộ ngược về biến module để MarginPill ở mọi nơi dùng ngưỡng mới
  React.useEffect(() => { MARGIN_TH = { good:+good || 40, mid:+mid || 15 }; try { localStorage.setItem('swo-portal-dealmargin', JSON.stringify(MARGIN_TH)); } catch (e) {} }, [good, mid]);
  return (
    <div className="page pagefade">
      <div className="page-head"><div><h1>{t('c.settings')}</h1><div className="sub">{lang === 'vi' ? 'Ngưỡng cảnh báo biên lợi nhuận thương vụ.' : 'Deal margin warning thresholds.'}</div></div></div>
      <div className="split">
        <div className="card"><div className="card-head"><h3>{lang === 'vi' ? 'Ngưỡng biên lợi nhuận' : 'Margin thresholds'}</h3></div><div className="card-body col g12">
          <div className="flex g12 wrap">
            <div style={{ flex:1, minWidth:150 }}><Field label={lang === 'vi' ? 'Biên tốt (≥ %) — màu xanh' : 'Good (≥ %) — green'}><input className="input" type="number" value={good} onChange={e => setGood(e.target.value)} /></Field></div>
            <div style={{ flex:1, minWidth:150 }}><Field label={lang === 'vi' ? 'Trung bình (≥ %) — màu vàng' : 'Medium (≥ %) — amber'}><input className="input" type="number" value={mid} onChange={e => setMid(e.target.value)} /></Field></div>
          </div>
          <div className="subtle" style={{ fontSize:'var(--fs-sm)' }}>{lang === 'vi' ? 'Dưới mức trung bình hiển thị màu đỏ (cần xem lại).' : 'Below medium shows red (needs review).'}</div>
          <div className="flex g8 items-center" style={{ marginTop:4 }}>
            <span className="subtle" style={{ fontSize:'var(--fs-sm)' }}>{lang === 'vi' ? 'Xem trước:' : 'Preview:'}</span>
            <MarginPill pct={+good + 5} /><MarginPill pct={(+good + +mid) / 2} /><MarginPill pct={+mid - 5} />
          </div>
        </div></div>
        <div className="card"><div className="card-head"><h3>{lang === 'vi' ? 'Cách tính' : 'How it works'}</h3></div><div className="card-body subtle" style={{ fontSize:'var(--fs-base)', lineHeight:1.6 }}>
          {lang === 'vi' ? 'Lợi nhuận thương vụ = Tổng doanh thu (HĐ bán) − Tổng giá vốn (HĐ mua gắn trong thương vụ). Biên LN = Lợi nhuận / Doanh thu. Gắn/gỡ hợp đồng trong trang chi tiết thương vụ.' : 'Deal profit = total sale revenue − total purchase cost (contracts grouped in the deal). Margin = profit / revenue.'}
        </div></div>
      </div>
    </div>
  );
}

function DealList({ go }){
  const p = usePortal();
  const { t, lang } = useLang();
  const showCost = canViewCost(p);
  const all = window.ContractStore ? ContractStore.all() : [];
  const srt = useTableSort();
  const rows = srt.sortRows(p.deals.map(d => ({ d, pnl:dealPnl(d, all) })),
    { code:r => r.d.code, name:r => r.d.name, cust:r => dealCust(r.d.endCustomer).shortName || r.d.endCustomer, rev:r => r.pnl.revenue, cost:r => r.pnl.cost, profit:r => r.pnl.profit, margin:r => r.pnl.marginPct, status:r => r.d.status });
  const totRev = rows.reduce((s, r) => s + r.pnl.revenue, 0);
  const totProfit = rows.reduce((s, r) => s + r.pnl.profit, 0);
  return (
    <div className="page pagefade">
      <div className="page-head"><div><h1>{lang === 'vi' ? 'Thương vụ' : 'Deals'}</h1><div className="sub">{lang === 'vi' ? 'Gom hợp đồng mua + bán theo thương vụ để tính lợi nhuận.' : 'Group purchase + sale contracts per deal for P&L.'}</div></div>
        <button className="btn btn-primary" onClick={() => p.quick('deals')}><i className="bi bi-plus-lg"></i>{lang === 'vi' ? 'Thương vụ mới' : 'New deal'}</button></div>
      <div className="kpi-strip">
        <Kpi label={lang === 'vi' ? 'Thương vụ' : 'Deals'} value={p.deals.length} icon="bi-diagram-3" />
        <Kpi label={lang === 'vi' ? 'Đang chạy' : 'Open'} value={p.deals.filter(d => d.status === 'open').length} icon="bi-play-circle" />
        <Kpi label={lang === 'vi' ? 'Tổng doanh thu' : 'Total revenue'} value={vndShort(totRev)} icon="bi-arrow-down-circle" />
        {showCost && <Kpi label={lang === 'vi' ? 'Tổng lợi nhuận' : 'Total profit'} value={vndShort(totProfit)} icon="bi-graph-up-arrow" />}
      </div>
      <div className="card"><div style={{ overflow:'auto' }}>
        <table className="tbl">
          <thead><tr><ThSort k="code" sort={srt}>{lang === 'vi' ? 'Mã TV' : 'Deal'}</ThSort><ThSort k="name" sort={srt}>{lang === 'vi' ? 'Tên thương vụ' : 'Name'}</ThSort><ThSort k="cust" sort={srt}>{t('ct.customer')}</ThSort><ThSort k="rev" sort={srt} className="num">{lang === 'vi' ? 'Doanh thu' : 'Revenue'}</ThSort>{showCost && <ThSort k="cost" sort={srt} className="num">{lang === 'vi' ? 'Giá vốn' : 'Cost'}</ThSort>}{showCost && <ThSort k="profit" sort={srt} className="num">{lang === 'vi' ? 'Lợi nhuận' : 'Profit'}</ThSort>}{showCost && <ThSort k="margin" sort={srt} className="num">{lang === 'vi' ? 'Biên' : 'Margin'}</ThSort>}<ThSort k="status" sort={srt}>{t('c.status')}</ThSort></tr></thead>
          <tbody>
            {rows.map(({ d, pnl }) => (
              <tr key={d.code} onClick={() => go('detail', { id:d.code })}>
                <td><span className="mono" style={{ fontWeight:600, color:'var(--primary)' }}>{d.code}</span></td>
                <td style={{ fontWeight:500 }}>{d.name}</td>
                <td className="muted">{dealCust(d.endCustomer).shortName || d.endCustomer || '—'}</td>
                <td className="num mono">{vndShort(pnl.revenue)}</td>
                {showCost && <td className="num mono" style={{ color:'var(--error)' }}>{vndShort(pnl.cost)}</td>}
                {showCost && <td className="num mono" style={{ fontWeight:600, color:pnl.profit >= 0 ? 'var(--success)' : 'var(--error)' }}>{vndShort(pnl.profit)}</td>}
                {showCost && <td className="num"><MarginPill pct={pnl.marginPct} /></td>}
                <td><DealStatusBadge status={d.status} /></td>
              </tr>
            ))}
          </tbody>
        </table>
        {!p.deals.length && <EmptyState text={t('c.empty')} />}
      </div></div>
    </div>
  );
}

function DealDetail({ code, go }){
  const p = usePortal();
  const { t, lang } = useLang();
  const toast = useToast();
  const confirm = useConfirm();
  const showCost = canViewCost(p);
  const [editMembers, setEditMembers] = React.useState(false);
  const d = p.deals.find(x => x.code === code);
  if (!d) return <div className="page"><EmptyState text={t('c.empty')} /></div>;
  const all = window.ContractStore ? ContractStore.all() : [];
  const pnl = dealPnl(d, all);
  const remove = async () => { if (await confirm({ message:(lang === 'vi' ? 'Xóa thương vụ ' : 'Delete deal ') + d.code + '?', confirmLabel:lang === 'vi' ? 'Xóa' : 'Delete' })) { p.deleteDeal(d.code); toast((lang === 'vi' ? 'Đã xóa ' : 'Deleted ') + d.code, 'success'); go('list'); } };
  const goHd = (cc) => p.navigate({ name:'module', module:'contracts', sub:'detail', id:cc });
  const hdRow = (c) => (
    <div key={c.code} className="list-row" style={{ cursor:'pointer' }} onClick={() => goHd(c.code)}>
      <span className="mono" style={{ fontWeight:600, color:'var(--primary)', width:120 }}>{c.code}</span>
      <span className="grow truncate">{(window.ContractStore && hdPartyName(c)) || c.customer}</span>
      {(contractDir(c) !== 'buy' || showCost) && <span className="mono" style={{ fontWeight:600 }}>{vndShort(contractTotals(c).total)}</span>}
    </div>
  );
  return (
    <div className="page pagefade">
      <div className="page-head">
        <div className="flex g12 items-center">
          <button className="btn btn-ghost btn-icon" onClick={() => go('list')}><i className="bi bi-arrow-left"></i></button>
          <div><h1 style={{ fontSize:'var(--fs-2xl)' }}>{d.name}</h1>
            <div className="sub flex g8 items-center"><span className="mono" style={{ color:'var(--primary)', fontWeight:600 }}>{d.code}</span> · {dealCust(d.endCustomer).shortName || d.endCustomer || '—'} · <DealStatusBadge status={d.status} /></div></div>
        </div>
        <div className="flex g8">
          <button className="btn" onClick={() => setEditMembers(true)}><i className="bi bi-link-45deg"></i>{lang === 'vi' ? 'Gắn hợp đồng' : 'Link contracts'}</button>
          <button className="btn btn-icon" title={t('c.delete')} onClick={remove}><i className="bi bi-trash"></i></button>
        </div>
      </div>

      <div className="card" style={{ marginBottom:14 }}>
        <div className="card-head"><h3>{showCost ? (lang === 'vi' ? 'Lợi nhuận thương vụ' : 'Deal P&L') : (lang === 'vi' ? 'Doanh thu thương vụ' : 'Deal revenue')}</h3></div>
        <div className="card-body">
          <div className="kpi-strip" style={{ gridTemplateColumns:showCost ? 'repeat(4, 1fr)' : '1fr' }}>
            <Kpi label={lang === 'vi' ? 'Doanh thu (bán)' : 'Revenue'} value={vndShort(pnl.revenue)} icon="bi-arrow-down-circle" />
            {showCost && <Kpi label={lang === 'vi' ? 'Giá vốn (mua)' : 'Cost'} value={vndShort(pnl.cost)} icon="bi-arrow-up-circle" />}
            {showCost && <Kpi label={lang === 'vi' ? 'Lợi nhuận' : 'Profit'} value={vndShort(pnl.profit)} icon="bi-graph-up-arrow" />}
            {showCost && <Kpi label={lang === 'vi' ? 'Biên LN' : 'Margin'} value={pnl.marginPct + '%'} icon="bi-percent" />}
          </div>
          {d.note && <div className="subtle" style={{ marginTop:12, fontSize:'var(--fs-base)' }}><i className="bi bi-info-circle" style={{ marginRight:6 }}></i>{d.note}</div>}
        </div>
      </div>

      <div className="split">
        <div className="card"><div className="card-head"><h3 style={{ fontSize:'var(--fs-md)' }}>{lang === 'vi' ? 'HĐ bán (doanh thu)' : 'Sale contracts'}</h3><span className="badge badge-info">{pnl.sells.length}</span></div>
          <div className="card-body">{pnl.sells.length ? pnl.sells.map(hdRow) : <div className="subtle" style={{ fontSize:'var(--fs-base)' }}>{lang === 'vi' ? 'Chưa gắn HĐ bán' : 'No sale contracts'}</div>}</div></div>
        <div className="card"><div className="card-head"><h3 style={{ fontSize:'var(--fs-md)' }}>{lang === 'vi' ? 'HĐ mua (giá vốn)' : 'Purchase contracts'}</h3><span className="badge badge-neutral">{pnl.buys.length}</span></div>
          <div className="card-body">{pnl.buys.length ? pnl.buys.map(hdRow) : <div className="subtle" style={{ fontSize:'var(--fs-base)' }}>{lang === 'vi' ? 'Chưa gắn HĐ mua' : 'No purchase contracts'}</div>}</div></div>
      </div>

      {editMembers && <DealMembersModal deal={d} onClose={() => setEditMembers(false)} />}
    </div>
  );
}

// tên đối tác HĐ (bán→KH, mua→NCC) — dùng store đã có.
function hdPartyName(c){
  if (contractDir(c) === 'buy') return ((window.VendorStore && VendorStore.byCode(c.customer)) || {}).shortName;
  return ((window.CustomerStore && CustomerStore.byCode(c.customer)) || {}).shortName;
}

function DealMembersModal({ deal, onClose }){
  const p = usePortal();
  const { t, lang } = useLang();
  const toast = useToast();
  const showCost = canViewCost(p);
  const all = window.ContractStore ? ContractStore.all() : [];
  const [sel, setSel] = React.useState(deal.contracts || []);
  const toggle = (code) => setSel(s => s.includes(code) ? s.filter(x => x !== code) : [...s, code]);
  const save = () => { p.updateDeal(deal.code, { ...deal, contracts:sel }); toast(lang === 'vi' ? 'Đã cập nhật hợp đồng' : 'Contracts updated', 'success'); onClose(); };
  const group = (dir) => all.filter(c => contractDir(c) === dir);
  const row = (c) => (
    <label key={c.code} className="list-row" style={{ cursor:'pointer' }}>
      <input type="checkbox" checked={sel.includes(c.code)} onChange={() => toggle(c.code)} style={{ marginRight:4 }} />
      <span className="mono" style={{ fontWeight:600, color:'var(--primary)', width:120 }}>{c.code}</span>
      <span className="grow truncate">{hdPartyName(c) || c.customer}</span>
      {(contractDir(c) !== 'buy' || showCost) && <span className="mono" style={{ fontWeight:600 }}>{vndShort(contractTotals(c).total)}</span>}
    </label>
  );
  return (
    <Modal title={lang === 'vi' ? 'Gắn hợp đồng vào thương vụ' : 'Link contracts to deal'} width={640} onClose={onClose}
      footer={<><button className="btn" onClick={onClose}>{t('c.cancel')}</button><button className="btn btn-primary" onClick={save}>{t('c.save')}</button></>}>
      <div className="col g12">
        <div><div className="subtle" style={{ marginBottom:6, fontSize:'var(--fs-sm)' }}>{lang === 'vi' ? 'HĐ bán (doanh thu)' : 'Sale contracts'}</div><div className="col g8">{group('sell').map(row)}</div></div>
        <div><div className="subtle" style={{ marginBottom:6, fontSize:'var(--fs-sm)' }}>{lang === 'vi' ? 'HĐ mua (giá vốn)' : 'Purchase contracts'}</div><div className="col g8">{group('buy').length ? group('buy').map(row) : <div className="subtle" style={{ fontSize:'var(--fs-base)' }}>{lang === 'vi' ? 'Chưa có HĐ mua' : 'No purchase contracts'}</div>}</div></div>
      </div>
    </Modal>
  );
}

function NewDealModal({ onClose }){
  const p = usePortal();
  const { t, lang } = useLang();
  const toast = useToast();
  const [f, setF] = React.useState({ name:'', endCustomer:p.customers[0] ? p.customers[0].code : '', status:'open', note:'' });
  const set = (k, v) => setF(s => ({ ...s, [k]: v }));
  const create = () => {
    if (!f.name.trim()) { toast(lang === 'vi' ? 'Nhập tên thương vụ' : 'Enter a deal name', 'error'); return; }
    const code = genDealCode(p.deals);
    p.addDeal({ code, name:f.name.trim(), endCustomer:f.endCustomer, status:f.status, note:f.note.trim(), contracts:[] });
    toast((lang === 'vi' ? 'Đã tạo thương vụ ' : 'Created ') + code, 'success'); onClose();
    p.navigate({ name:'module', module:'deals', sub:'detail', id:code });
  };
  return (
    <Modal title={lang === 'vi' ? 'Thương vụ mới' : 'New deal'} width={560} onClose={onClose}
      footer={<><button className="btn" onClick={onClose}>{t('c.cancel')}</button><button className="btn btn-primary" onClick={create}>{t('c.create')}</button></>}>
      <div className="col g16">
        <Field label={lang === 'vi' ? 'Tên thương vụ' : 'Deal name'}><input className="input" autoFocus value={f.name} onChange={e => set('name', e.target.value)} placeholder={lang === 'vi' ? 'VD: Cung cấp & triển khai nền tảng cho KH' : 'e.g. Platform supply & rollout'} /></Field>
        <div className="flex g12">
          <div style={{ flex:1 }}><Field label={lang === 'vi' ? 'Khách hàng cuối' : 'End customer'}><select className="select" value={f.endCustomer} onChange={e => set('endCustomer', e.target.value)}><option value="">—</option>{p.customers.map(c => <option key={c.code} value={c.code}>{c.code} · {c.name}</option>)}</select></Field></div>
          <div style={{ flex:1 }}><Field label={t('c.status')}><select className="select" value={f.status} onChange={e => set('status', e.target.value)}>{Object.keys(DEAL_STATUS).map(s => <option key={s} value={s}>{DEAL_STATUS[s][lang]}</option>)}</select></Field></div>
        </div>
        <Field label={lang === 'vi' ? 'Ghi chú' : 'Note'}><textarea className="textarea" rows={2} value={f.note} onChange={e => set('note', e.target.value)} placeholder={lang === 'vi' ? 'Mô tả ngắn thương vụ' : 'Short description'} /></Field>
      </div>
    </Modal>
  );
}

/* Dashboard widget */
function DealWidget(){
  const p = usePortal();
  const { t, lang } = useLang();
  const showCost = canViewCost(p);
  const all = window.ContractStore ? ContractStore.all() : [];
  const totProfit = p.deals.reduce((s, d) => s + dealPnl(d, all).profit, 0);
  const openN = p.deals.filter(d => d.status === 'open').length;
  return (
    <WidgetShell wid="deals" icon="bi-diagram-3" iconColor="#7A5AF8" title={lang === 'vi' ? 'Thương vụ' : 'Deals'}
      onViewAll={() => p.openApp(DEAL_APP)} onNew={() => p.quick('deals')} newLabel={lang === 'vi' ? 'Thương vụ mới' : 'New deal'}>
        <div className="flex g16" style={{ marginBottom:8 }}>
          <div><div className="k-val" style={{ fontSize:'var(--fs-2xl)', fontWeight:700 }}>{p.deals.length}</div><div className="subtle" style={{ fontSize:'var(--fs-sm)' }}>{lang === 'vi' ? 'thương vụ' : 'deals'}</div></div>
          {showCost
            ? <div><div className="k-val" style={{ fontSize:'var(--fs-xl)', fontWeight:700, color:'var(--success)' }}>{vndShort(totProfit)}</div><div className="subtle" style={{ fontSize:'var(--fs-sm)' }}>{lang === 'vi' ? 'lợi nhuận' : 'profit'}</div></div>
            : <div><div className="k-val" style={{ fontSize:'var(--fs-2xl)', fontWeight:700 }}>{openN}</div><div className="subtle" style={{ fontSize:'var(--fs-sm)' }}>{lang === 'vi' ? 'đang chạy' : 'open'}</div></div>}
        </div>
        {p.deals.slice(0, 3).map(d => { const pnl = dealPnl(d, all); return (
          <div key={d.code} className="list-row" style={{ cursor:'pointer' }} onClick={() => p.navigate({ name:'module', module:'deals', sub:'detail', id:d.code })}>
            <span className="mono" style={{ fontWeight:600, color:'var(--primary)', width:96 }}>{d.code}</span><span className="grow truncate">{d.name}</span>{showCost ? <span className="mono" style={{ fontWeight:600, color:'var(--success)' }}>{pnl.marginPct}%</span> : <DealStatusBadge status={d.status} />}
          </div>
        ); })}
    </WidgetShell>
  );
}

Object.assign(window, { DealModule, NewDealModal, DealWidget, MarginPill });