// Institutional CRM — Dashboard, Leads (funnel), Deals
const { fmt, fmtK, srcById } = window.ICRM;

function PgDashboard({ go }) {
  const { LEADS, DEALS, COMMISSIONS, DEBTLIFT } = window.ICRM;
  const efLeads = LEADS.filter(l => l.brand === 'ExpressFund');
  const dlLeads = LEADS.filter(l => l.brand === 'DebtLift');
  const active = DEALS.filter(d => d.repaid < 100);
  const outstanding = active.reduce((s, d) => s + d.payback * (1 - d.repaid / 100), 0);
  const deployed = DEALS.reduce((s, d) => s + d.amount, 0);
  const newToday = LEADS.filter(l => l.received.startsWith('Today') && l.auto && l.intake);
  const owed = COMMISSIONS.filter(c => c.status === 'Owed').reduce((s, c) => s + c.amount, 0);
  const atRisk = DEALS.filter(d => d.servicing !== 'Performing');
  const renewals = DEALS.map(d => ({ id: d.id, biz: d.biz, pct: d.repaid, kind: 'Funded', tier: renewalTier(d.repaid) }))
    .concat((window.ICRM.BROKERED || []).filter(b => b.repaid != null).map(b => ({ id: b.id, biz: b.biz, pct: b.repaid, kind: 'Brokered', tier: renewalTier(b.repaid) })))
    .filter(r => r.tier != null)
    .sort((a, b) => (b.tier - a.tier) || (b.pct - a.pct));

  return (
    <div className="inst-page">
      <div className="inst-greeting">Good afternoon</div>

      {newToday.length ? (
        <div className="inst-notice" style={{ marginBottom: 20 }}>
          <span className="bulb"><IC d={ICONS.bulb} size={18} /></span>
          <span><b>{newToday.length} new lead{newToday.length > 1 ? 's' : ''}</b> arrived from your intake forms today — {[...new Set(newToday.map(l => l.intake.type))].join(' and ')}.</span>
          <span style={{ flex: 1 }}></span>
          <button className="inst-btn outline sm" onClick={() => go('Leads')}>Review leads</button>
        </div>
      ) : null}

      <div className="inst-cols">
        <div className="inst-stack">
          <SectionCard bar="ExpressFund · Portfolio" right={active.length + ' active advances'}>
            <div className="inst-acct-row">
              <div>
                <div className="inst-acct-name">Capital Deployed</div>
                <div className="inst-acct-sub">All-time · {DEALS.length} funded deals</div>
              </div>
              <div>
                <div className="inst-amount lg">{fmt(deployed)}</div>
                <div className="inst-amount-cap">Total funded</div>
              </div>
            </div>
            <div className="inst-acct-row">
              <div>
                <div className="inst-acct-name">Outstanding Receivables</div>
                <div className="inst-acct-sub"><a className="inst-link" onClick={() => go('Portfolio')}>See portfolio performance <span className="chev">›</span></a></div>
              </div>
              <div>
                <div className="inst-amount">{fmt(outstanding)}</div>
                <div className="inst-amount-cap">Remaining RTR</div>
              </div>
            </div>
            <div className="inst-acct-row">
              <div>
                <div className="inst-acct-name">Commissions Owed</div>
                <div className="inst-acct-sub"><a className="inst-link" onClick={() => go('Commissions')}>See commission ledger <span className="chev">›</span></a></div>
              </div>
              <div>
                <div className="inst-amount">{fmt(owed)}</div>
                <div className="inst-amount-cap">Unpaid to partners</div>
              </div>
            </div>
          </SectionCard>

          <SectionCard bar="DebtLift · Portfolio" right={DEBTLIFT.enrolled + ' enrolled clients'}>
            <div className="inst-acct-row">
              <div>
                <div className="inst-acct-name">Debt Under Management</div>
                <div className="inst-acct-sub">{DEBTLIFT.enrolled} businesses in settlement plans</div>
              </div>
              <div>
                <div className="inst-amount lg">{fmt(DEBTLIFT.debtEnrolled)}</div>
                <div className="inst-amount-cap">Total enrolled debt</div>
              </div>
            </div>
            <div className="inst-acct-row">
              <div>
                <div className="inst-acct-name">Resolved to Date</div>
                <div className="inst-acct-sub"><a className="inst-link" onClick={() => go('Settlements')}>See settlement casefiles <span className="chev">›</span></a></div>
              </div>
              <div>
                <div className="inst-amount">{fmt(DEBTLIFT.resolvedToDate)}</div>
                <div className="inst-amount-cap">Debt settled</div>
              </div>
            </div>
            <div className="inst-acct-row">
              <div>
                <div className="inst-acct-name">Client Savings</div>
                <div className="inst-acct-sub">Avg 55¢ on the dollar negotiated</div>
              </div>
              <div>
                <div className="inst-amount">{fmt(DEBTLIFT.clientSavings)}</div>
                <div className="inst-amount-cap">Saved for clients</div>
              </div>
            </div>
          </SectionCard>

          <SectionCard bar="ExpressFund · Lead funnel" right="Last 30 days">
            <div className="inst-card-body">
              <FunnelBar leads={efLeads} onStage={() => go('Leads', null, false, 'ExpressFund')} />
            </div>
            <div className="inst-card-foot">
              <a className="inst-link" onClick={() => go('Leads', null, false, 'ExpressFund')}>Go to ExpressFund funnel <span className="chev">›</span></a>
            </div>
          </SectionCard>

          <SectionCard bar="DebtLift · Lead funnel" right="Last 30 days">
            <div className="inst-card-body">
              <FunnelBar leads={dlLeads} stages={window.ICRM.FUNNEL_DL} onStage={() => go('Leads', null, false, 'DebtLift')} />
            </div>
            <div className="inst-card-foot">
              <a className="inst-link" onClick={() => go('Leads', null, false, 'DebtLift')}>Go to DebtLift funnel <span className="chev">›</span></a>
            </div>
          </SectionCard>

          {renewals.length ? (
            <SectionCard bar="Renewal alerts" right={renewals.length + ' eligible'}>
              <div className="inst-table-wrap">
                <table className="inst-table">
                  <thead><tr><th>File</th><th>Merchant</th><th>Type</th><th style={{ textAlign: 'right' }}>Completed</th><th>Milestone</th></tr></thead>
                  <tbody>
                    {renewals.slice(0, 8).map(r => (
                      <tr key={r.id} className="clickable" onClick={() => go(r.kind === 'Brokered' ? 'Brokered' : 'Deals', r.id)}>
                        <td><span className="inst-td-strong">{r.id}</span></td>
                        <td>{r.biz}</td>
                        <td>{r.kind}</td>
                        <td className="inst-td-num">{Math.round(r.pct)}%</td>
                        <td><RenewalChip pct={r.pct} /></td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
              {renewals.length > 8 ? (
                <div className="inst-card-foot">
                  <a className="inst-link" onClick={() => go('Deals')}>See all {renewals.length} renewal-eligible files <span className="chev">›</span></a>
                </div>
              ) : null}
            </SectionCard>
          ) : null}

          <SectionCard bar="Servicing alerts" right={atRisk.length + ' deals'}>
            <div className="inst-table-wrap">
              <table className="inst-table">
                <thead><tr><th>Deal</th><th>Merchant</th><th>Status</th><th style={{ textAlign: 'right' }}>Remaining</th></tr></thead>
                <tbody>
                  {atRisk.map(d => (
                    <tr key={d.id} className="clickable" onClick={() => go('Deals', d.id)}>
                      <td><span className="inst-td-strong">{d.id}</span></td>
                      <td>{d.biz}</td>
                      <td><Chip tone={SERV_TONE[d.servicing]}>{d.servicing}</Chip></td>
                      <td className="inst-td-num">{fmt(d.payback * (1 - d.repaid / 100))}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </SectionCard>
        </div>

        <div className="inst-stack">
          <div className="inst-rail-panel">
            <div className="head">Quick actions</div>
            <div className="body" style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              <button className="inst-btn primary" onClick={() => go('Calculator')}>New offer calculation</button>
              <button className="inst-btn outline" onClick={() => go('Leads', null, true)}>Add lead manually</button>
              <button className="inst-btn outline" onClick={() => go('Partners')}>Add referral partner</button>
            </div>
          </div>
          <div className="inst-rail-panel">
            <div className="head">Intake feed</div>
            <div className="body">
              {window.ICRM.LEADS.filter(l => l.auto).slice(0, 4).map(l => (
                <div key={l.id} style={{ display: 'flex', gap: 10, padding: '8px 0', borderBottom: '1px solid var(--inst-rule-soft)' }}>
                  <span style={{ color: 'var(--inst-link)', flexShrink: 0, marginTop: 1 }}><IC d={ICONS.zap} size={14} /></span>
                  <div>
                    <div style={{ fontWeight: 700, color: 'var(--inst-ink)' }}>{l.biz}</div>
                    <div>{l.intake.type} · {l.received}</div>
                  </div>
                </div>
              ))}
              <a className="inst-link" style={{ display: 'inline-block', marginTop: 10 }} onClick={() => go('Sources')}>Manage lead sources <span className="chev">›</span></a>
            </div>
          </div>
          <div className="inst-rail-panel">
            <div className="head">Help & support</div>
            <div className="body">Questions about underwriting queues, syndication remittances or partner payouts? <a className="inst-link" href="mailto:ops@express.fund">Contact the funding desk</a>.</div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ── Leads / funnel ─────────────────────────────────────────
function PgLeads({ leads, setLeads, openAdd, setOpenAdd, initBrand, toast }) {
  const { FUNNEL, FUNNEL_DL, funnelFor, SOURCES } = window.ICRM;
  const [stageF, setStageF] = React.useState('');
  const [srcF, setSrcF] = React.useState('');
  const [brandF, setBrandF] = React.useState(initBrand ? initBrand.v : '');
  React.useEffect(() => { if (initBrand) setBrandF(initBrand.v); }, [initBrand]);
  const [q, setQ] = React.useState('');
  const [sel, setSel] = React.useState(null);
  const [form, setForm] = React.useState({ biz: '', owner: '', amount: '', sourceId: 'src-web', brand: 'ExpressFund' });

  const list = leads.filter(l =>
    (!stageF || l.stage === stageF) && (!srcF || l.sourceId === srcF) &&
    (!brandF || l.brand === brandF) &&
    (!q || (l.biz + l.owner).toLowerCase().includes(q.toLowerCase())));

  const advance = (lead) => {
    const FN = funnelFor(lead.brand);
    const i = FN.indexOf(lead.stage);
    if (i >= FN.length - 1) return;
    const next = FN[i + 1];
    try { fetch('/api/leads/' + lead.id + '/stage', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ stage: next }) }).catch(() => {}); } catch (e) {}
    setLeads(p => p.map(x => x.id === lead.id ? { ...x, stage: next } : x));
    toast(`${lead.biz} moved to ${next}`);
  };
  const canAdvance = (l) => l.stage !== funnelFor(l.brand)[funnelFor(l.brand).length - 1];

  const addLead = () => {
    try { fetch('/api/leads', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ biz: form.biz, owner: form.owner, amount: parseFloat(form.amount) || 0, brand: form.brand, sourceId: form.sourceId }) }).catch(() => {}); } catch (e) {}
    const id = 'L-' + (3042 + leads.length);
    setLeads(p => [{ id, biz: form.biz || 'Untitled Business', owner: form.owner, amount: parseFloat(form.amount) || 0, stage: 'New', sourceId: form.sourceId, brand: form.brand, received: 'Just now', auto: false }, ...p]);
    setOpenAdd(false); setForm({ biz: '', owner: '', amount: '', sourceId: 'src-web', brand: 'ExpressFund' });
    toast('Lead added to funnel');
  };

  return (
    <div className="inst-page">
      {openAdd ? (
        <Modal title="Add lead" onClose={() => setOpenAdd(false)}
          footer={<React.Fragment>
            <button className="inst-btn outline" onClick={() => setOpenAdd(false)}>Cancel</button>
            <button className="inst-btn primary" onClick={addLead} disabled={!form.biz}>Add to funnel</button>
          </React.Fragment>}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            <Field label="Business name"><input className="inst-input" value={form.biz} onChange={e => setForm({ ...form, biz: e.target.value })} /></Field>
            <Field label="Owner"><input className="inst-input" value={form.owner} onChange={e => setForm({ ...form, owner: e.target.value })} /></Field>
            <Field label="Requested amount"><input className="inst-input" type="text" inputMode="numeric" value={form.amount ? Number(form.amount).toLocaleString('en-US') : ''} onChange={e => setForm({ ...form, amount: e.target.value.replace(/[^0-9]/g, '') })} /></Field>
            <Field label="Company">
              <select className="inst-input" value={form.brand} onChange={e => setForm({ ...form, brand: e.target.value })}>
                <option>ExpressFund</option>
                <option>DebtLift</option>
              </select>
            </Field>
            <Field label="Lead source">
              <select className="inst-input" value={form.sourceId} onChange={e => setForm({ ...form, sourceId: e.target.value })}>
                {SOURCES.filter(s => s.active).map(s => <option key={s.id} value={s.id}>{s.name}</option>)}
              </select>
            </Field>
          </div>
          <div style={{ marginTop: 14, fontSize: 12, color: 'var(--inst-ink-3)' }}>
            Leads from the DebtLift Calculator and ExpressFund Application enter the funnel automatically — manual entry is for phone/walk-in leads.
          </div>
        </Modal>
      ) : null}

      {sel ? (
        <Modal title={sel.biz} onClose={() => setSel(null)} width={640}
          footer={<React.Fragment>
            <button className="inst-btn outline" onClick={() => setSel(null)}>Close</button>
            {sel.stage !== 'Funded' && sel.stage !== 'Active' ? <button className="inst-btn primary" onClick={() => { advance(sel); setSel(null); }}>Advance to next stage</button> : null}
          </React.Fragment>}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0 }}>
            {[['Lead ID', sel.id], ['Company', <BrandTag brand={sel.brand} />], ['Stage', sel.stage], ['Owner', sel.owner], ['Requested', sel.amount ? fmt(sel.amount) : '—'],
              ['Phone', sel.phone || '—'], ['Email', sel.email || '—'],
              ['Source', srcById(sel.sourceId) ? srcById(sel.sourceId).name : '—'], ['Received', sel.received]].map(([k, v]) => (
              <div key={k} style={{ padding: '9px 0', borderBottom: '1px solid var(--inst-rule-soft)' }}>
                <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.5px', color: 'var(--inst-ink-3)' }}>{k}</div>
                <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--inst-ink)', marginTop: 2 }}>{v}</div>
              </div>
            ))}
          </div>
          {sel.intake ? (
            <div style={{ marginTop: 16 }}>
              <div className="inst-section-bar" style={{ borderRadius: 4, fontSize: 12, padding: '8px 12px' }}>
                <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}><IC d={ICONS.zap} size={13} /> Captured automatically — {sel.intake.type}</span>
              </div>
              <div style={{ border: '1px solid var(--inst-rule)', borderTop: 'none', borderRadius: '0 0 4px 4px', padding: '4px 12px 8px' }}>
                {Object.entries(sel.intake).filter(([k]) => k !== 'type').map(([k, v]) => (
                  <div key={k} style={{ display: 'flex', justifyContent: 'space-between', padding: '7px 0', borderBottom: '1px solid var(--inst-rule-soft)', fontSize: 13 }}>
                    <span style={{ color: 'var(--inst-ink-3)', textTransform: 'capitalize' }}>{k.replace(/([A-Z])/g, ' $1')}</span>
                    <span style={{ fontWeight: 700, color: 'var(--inst-ink)' }}>{typeof v === 'number' ? fmt(v) : v}</span>
                  </div>
                ))}
              </div>
            </div>
          ) : null}
        </Modal>
      ) : null}

      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, margin: '4px 0 16px', flexWrap: 'wrap' }}>
        <div className="inst-greeting" style={{ margin: 0 }}>Lead funnel</div>
        <button className="inst-btn primary" onClick={() => setOpenAdd(true)}>+ Add lead</button>
      </div>

      <div className="inst-card" style={{ marginBottom: 16, padding: 14 }}>
        {brandF ? (
          <FunnelBar leads={leads.filter(l => l.brand === brandF)} stages={funnelFor(brandF)} onStage={st => setStageF(p => p === st ? '' : st)} />
        ) : (
          <div style={{ display: 'grid', gap: 16 }}>
            {['ExpressFund', 'DebtLift'].map(b => (
              <div key={b} style={{ display: 'grid', gap: 8 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><BrandTag brand={b} /></div>
                <FunnelBar leads={leads.filter(l => l.brand === b)} stages={funnelFor(b)} onStage={st => { setBrandF(b); setStageF(st); }} />
              </div>
            ))}
          </div>
        )}
      </div>

      <SectionCard bar="Leads" right={list.length + ' shown'}>
        <div style={{ display: 'flex', gap: 10, padding: '12px 14px', borderBottom: '1px solid var(--inst-rule-soft)', flexWrap: 'wrap' }}>
          <input className="inst-input" style={{ maxWidth: 240 }} placeholder="Search leads" value={q} onChange={e => setQ(e.target.value)} />
          <select className="inst-input" style={{ maxWidth: 170 }} value={brandF} onChange={e => setBrandF(e.target.value)}>
            <option value="">Both companies</option>
            <option value="ExpressFund">ExpressFund</option>
            <option value="DebtLift">DebtLift</option>
          </select>
          <select className="inst-input" style={{ maxWidth: 200 }} value={stageF} onChange={e => setStageF(e.target.value)}>
            <option value="">All stages</option>
            {(brandF === 'DebtLift' ? FUNNEL_DL : brandF === 'ExpressFund' ? FUNNEL : [...new Set([...FUNNEL, ...FUNNEL_DL])]).map(s => <option key={s}>{s}</option>)}
          </select>
          <select className="inst-input" style={{ maxWidth: 230 }} value={srcF} onChange={e => setSrcF(e.target.value)}>
            <option value="">All sources</option>
            {window.ICRM.SOURCES.map(s => <option key={s.id} value={s.id}>{s.name}</option>)}
          </select>
        </div>
        <div className="inst-table-wrap inst-desktop-only">
          <table className="inst-table">
            <thead><tr><th>Business</th><th>Company</th><th style={{ textAlign: 'right' }}>Requested</th><th>Stage</th><th>Source</th><th>Received</th><th></th></tr></thead>
            <tbody>
              {list.map(l => {
                const src = srcById(l.sourceId);
                return (
                  <tr key={l.id} className="clickable" onClick={() => setSel(l)}>
                    <td>
                      <span className="inst-td-strong">{l.biz}</span>
                      {l.auto ? <span style={{ marginLeft: 8, verticalAlign: 1, color: 'var(--inst-link)' }} title="Created automatically by intake"><IC d={ICONS.zap} size={12} /></span> : null}
                      <div className="inst-td-id">{l.id} · {l.owner}</div>
                    </td>
                    <td><BrandTag brand={l.brand} /></td>
                    <td className="inst-td-num inst-td-strong">{l.amount ? fmt(l.amount) : '—'}</td>
                    <td><Chip tone={STAGE_TONE[l.stage]}>{l.stage}</Chip></td>
                    <td>{src ? src.name : '—'}</td>
                    <td>{l.received}</td>
                    <td onClick={e => e.stopPropagation()}>
                      {canAdvance(l) ? <button className="inst-btn outline sm" onClick={() => advance(l)}>Advance ›</button> : null}
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
        <div className="inst-mobile-only">
          {list.map(l => {
            const src = srcById(l.sourceId);
            return (
              <div key={l.id} className="inst-rec-card" onClick={() => setSel(l)}>
                <div className="inst-rec-top">
                  <span className="inst-td-strong">
                    {l.biz}
                    {l.auto ? <span style={{ marginLeft: 6, color: 'var(--inst-link)' }} title="Created automatically by intake"><IC d={ICONS.zap} size={12} /></span> : null}
                  </span>
                  <span className="inst-td-strong" style={{ fontVariantNumeric: 'tabular-nums', whiteSpace: 'nowrap' }}>{l.amount ? fmt(l.amount) : '—'}</span>
                </div>
                <div className="inst-td-id">{l.id} · {l.owner}</div>
                <div className="inst-rec-meta">
                  <BrandTag brand={l.brand} />
                  <Chip tone={STAGE_TONE[l.stage]}>{l.stage}</Chip>
                  <span className="dim">{src ? src.name : '—'} · {l.received}</span>
                  <span style={{ flex: 1 }}></span>
                  {canAdvance(l) ? <button className="inst-btn outline sm" onClick={e => { e.stopPropagation(); advance(l); }}>Advance ›</button> : null}
                </div>
              </div>
            );
          })}
        </div>
      </SectionCard>
    </div>
  );
}

// ── Deals ────────────────────────────────────
function DealDetailBlocks({ d, go }) {
  const { SYNDICATIONS, COMMISSIONS } = window.ICRM;
  return (
    <React.Fragment>
      {renewalTier(d.repaid) ? (
        <div className="inst-notice" style={{ marginBottom: 12 }}>
          <span className="bulb"><IC d={ICONS.zap} size={16} /></span>
          <span><b>Renewal eligible</b> — {d.repaid}% repaid, crossed the {renewalTier(d.repaid)}% milestone.</span>
          <span style={{ flex: 1 }}></span>
          <button className="inst-btn outline sm" onClick={() => go('Calculator')}>Start renewal offer</button>
        </div>
      ) : null}
      <div className="inst-grid-3">
        <div className="inst-card">
          <div className="inst-card-head">Terms</div>
          <div className="inst-card-body" style={{ padding: '4px 16px 10px' }}>
            {[['Factor rate', d.factor.toFixed(2)], ['Term', d.term + ' months'], [d.freq === 'Weekly' ? 'Weekly payment (' + (d.pullDay || 'Friday') + 's)' : 'Daily payment', fmt(d.daily)], ['Remaining', fmt(d.payback * (1 - d.repaid / 100))]].concat(d.paymentsRemaining != null ? [['Payments remaining', d.paymentsRemaining], ['Est. completion', d.completion]] : []).map(([k, v]) => (
              <div key={k} style={{ display: 'flex', justifyContent: 'space-between', padding: '7px 0', borderBottom: '1px solid var(--inst-rule-soft)', fontSize: 13 }}>
                <span style={{ color: 'var(--inst-ink-3)' }}>{k}</span><span style={{ fontWeight: 700, color: 'var(--inst-ink)' }}>{v}</span>
              </div>
            ))}
          </div>
        </div>
        <div className="inst-card">
          <div className="inst-card-head">Syndication</div>
          <div className="inst-card-body" style={{ padding: '4px 16px 10px' }}>
            {(() => {
              const s = SYNDICATIONS.find(x => x.dealId === d.id);
              if (!s) return <div style={{ fontSize: 13, color: 'var(--inst-ink-3)', padding: '8px 0' }}>House-funded — no participants.</div>;
              return s.participants.map(p => (
                <div key={p.name} style={{ display: 'flex', justifyContent: 'space-between', padding: '7px 0', borderBottom: '1px solid var(--inst-rule-soft)', fontSize: 13 }}>
                  <span style={{ color: 'var(--inst-ink-2)' }}>{p.name}</span><span style={{ fontWeight: 700, color: 'var(--inst-ink)' }}>{p.pct}%</span>
                </div>
              ));
            })()}
            <a className="inst-link" style={{ display: 'inline-block', marginTop: 8 }} onClick={() => go('Syndication')}>Syndication detail <span className="chev">›</span></a>
          </div>
        </div>
        <div className="inst-card">
          <div className="inst-card-head">Commission</div>
          <div className="inst-card-body" style={{ padding: '4px 16px 10px' }}>
            {(() => {
              const c = COMMISSIONS.find(x => x.dealId === d.id);
              if (!c) return <div style={{ fontSize: 13, color: 'var(--inst-ink-3)', padding: '8px 0' }}>Direct deal — no commission.</div>;
              return [['Partner', c.partner], ['Basis', c.basis], ['Amount', fmt(c.amount)], ['Status', c.status]].map(([k, v]) => (
                <div key={k} style={{ display: 'flex', justifyContent: 'space-between', padding: '7px 0', borderBottom: '1px solid var(--inst-rule-soft)', fontSize: 13 }}>
                  <span style={{ color: 'var(--inst-ink-3)' }}>{k}</span><span style={{ fontWeight: 700, color: v === 'Owed' ? 'var(--inst-warn)' : 'var(--inst-ink)' }}>{v}</span>
                </div>
              ));
            })()}
          </div>
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 12, marginTop: 12 }}>
        <div className="inst-card">
          <div className="inst-card-head">Activity</div>
          <div className="inst-card-body" style={{ padding: '2px 16px 10px' }}><ActivityFeed items={d.activity} /></div>
        </div>
        <div className="inst-card">
          <div className="inst-card-head">Notes</div>
          <div className="inst-card-body" style={{ padding: '12px 16px 14px' }}><NotesCard subject={d} /></div>
        </div>
      </div>
      {d.note ? <div className="inst-notice" style={{ marginTop: 12 }}><span className="bulb"><IC d={ICONS.bulb} size={16} /></span>{d.note}</div> : null}
    </React.Fragment>
  );
}

function RepaidBar({ pct }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
      <div style={{ flex: 1, height: 6, background: 'var(--inst-rule-soft)', borderRadius: 3, overflow: 'hidden' }}>
        <div style={{ width: pct + '%', height: '100%', background: 'var(--inst-blue)' }}></div>
      </div>
      <span style={{ fontSize: 12, fontWeight: 700, color: 'var(--inst-ink)' }}>{pct}%</span>
    </div>
  );
}

function PgDeals({ fileId, go }) {
  const { DEALS } = window.ICRM;
  const [q, setQ] = React.useState('');
  const [renewF, setRenewF] = React.useState(false);

  if (fileId) {
    const d = DEALS.find(x => x.id === fileId);
    return (
      <FilePage crumb="Funding / Deals" backLabel="Back to deals" onBack={() => go('Deals')}
        title={d ? d.biz : 'File not found'}
        sub={d ? d.id + ' · ' + d.owner + ' · funded ' + d.funded : 'No deal matches ' + fileId + '.'}
        chips={d ? <React.Fragment><Chip tone={SERV_TONE[d.servicing]}>{d.servicing}</Chip><RenewalChip pct={d.repaid} />{d.synd ? <Chip tone="navy">Syndicated</Chip> : null}</React.Fragment> : null}
        stats={d ? (
          <div style={{ display: 'flex', gap: 26, textAlign: 'right', flexWrap: 'wrap' }}>
            <div><div className="inst-amount lg">{fmt(d.amount)}</div><div className="inst-amount-cap">Advance</div></div>
            <div><div className="inst-amount lg">{fmt(d.payback * (1 - d.repaid / 100))}</div><div className="inst-amount-cap">Remaining · {d.repaid}% repaid</div></div>
          </div>
        ) : null}>
        {d ? <DealDetailBlocks d={d} go={go} /> : null}
      </FilePage>
    );
  }

  const list = DEALS.filter(d => (!renewF || renewalTier(d.repaid) != null) && (!q || (d.biz + d.id).toLowerCase().includes(q.toLowerCase())));

  return (
    <div className="inst-page">
      <div className="inst-greeting" style={{ marginBottom: 16 }}>Deals & servicing</div>
      <SectionCard bar="Funded deals" right={list.length + ' deals'}>
        <div style={{ padding: '12px 14px', borderBottom: '1px solid var(--inst-rule-soft)', display: 'flex', gap: 14, alignItems: 'center', flexWrap: 'wrap' }}>
          <input className="inst-input" style={{ maxWidth: 260 }} placeholder="Search deals" value={q} onChange={e => setQ(e.target.value)} />
          <label style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, fontWeight: 600, color: 'var(--inst-ink-2)', cursor: 'pointer' }}>
            <input type="checkbox" checked={renewF} onChange={e => setRenewF(e.target.checked)} /> Renewal eligible only
          </label>
        </div>
        <div className="inst-table-wrap inst-desktop-only">
          <table className="inst-table">
            <thead><tr><th>Deal</th><th style={{ textAlign: 'right' }}>Advance</th><th style={{ textAlign: 'right' }}>Payback</th><th>Repaid</th><th>Servicing</th><th>ISO</th></tr></thead>
            <tbody>
              {list.map(d => (
                <React.Fragment key={d.id}>
                  <tr className="clickable" onClick={() => go('Deals', d.id)}>
                    <td><span className="inst-td-strong">{d.biz}</span><div className="inst-td-id">{d.id} · funded {d.funded}</div></td>
                    <td className="inst-td-num inst-td-strong">{fmt(d.amount)}</td>
                    <td className="inst-td-num">{fmt(d.payback)}</td>
                    <td style={{ minWidth: 130 }}><RepaidBar pct={d.repaid} /></td>
                    <td><div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}><Chip tone={SERV_TONE[d.servicing]}>{d.servicing}</Chip><RenewalChip pct={d.repaid} /></div></td>
                    <td>{d.iso}</td>
                  </tr>
                </React.Fragment>
              ))}
            </tbody>
          </table>
        </div>
        <div className="inst-mobile-only">
          {list.map(d => (
            <div key={d.id} className="inst-rec-card" onClick={() => go('Deals', d.id)}>
              <div className="inst-rec-top">
                <span className="inst-td-strong">{d.biz}</span>
                <span className="inst-td-strong" style={{ fontVariantNumeric: 'tabular-nums', whiteSpace: 'nowrap' }}>{fmt(d.amount)}</span>
              </div>
              <div className="inst-td-id">{d.id} · funded {d.funded} · payback {fmt(d.payback)}</div>
              <div style={{ marginTop: 9 }}><RepaidBar pct={d.repaid} /></div>
              <div className="inst-rec-meta">
                <Chip tone={SERV_TONE[d.servicing]}>{d.servicing}</Chip>
                <RenewalChip pct={d.repaid} />
                <span className="dim">{d.iso}</span>
                <span style={{ flex: 1 }}></span>
                <span className="dim">Open file ›</span>
              </div>
            </div>
          ))}
        </div>
      </SectionCard>
    </div>
  );
}

Object.assign(window, { PgDashboard, PgLeads, PgDeals });