// Institutional CRM — Calculator, Syndication, Commissions, Portfolio, Clients
const { fmt: ifmt, fmtK: ifmtK } = window.ICRM;

function PgCalculator({ toast }) {
  const [merchant, setMerchant] = React.useState('');
  const [offers, setOffers] = React.useState(window.ICRM.OFFERS);
  const [amount, setAmount] = React.useState(75000);
  const [factor, setFactor] = React.useState(1.32);
  const [term, setTerm] = React.useState(9);
  const [points, setPoints] = React.useState(8);
  const [housePct, setHousePct] = React.useState(60);
  const n = v => { const x = parseFloat(v); return isNaN(x) ? 0 : x; };
  const payback = amount * factor;
  const businessDays = term * 21;
  const daily = businessDays ? payback / businessDays : 0;
  const commission = amount * points / 100;
  const margin = payback - amount - commission;

  return (
    <div className="inst-page">
      <div className="inst-greeting" style={{ marginBottom: 16 }}>Offer calculator</div>
      <div className="inst-cols" style={{ gridTemplateColumns: '360px 1fr' }}>
        <SectionCard bar="Inputs">
          <div className="inst-card-body" style={{ display: 'grid', gap: 14 }}>
            <Field label="Merchant / business name"><input className="inst-input" placeholder="Who is this offer for?" value={merchant} onChange={e => setMerchant(e.target.value)} /></Field>
            <Field label="Advance amount"><input className="inst-input" type="text" inputMode="numeric" value={amount ? amount.toLocaleString('en-US') : ''} onChange={e => setAmount(n(e.target.value.replace(/[^0-9]/g, '')))} /></Field>
            <Field label="Factor rate"><input className="inst-input" type="number" step="0.01" value={factor} onChange={e => setFactor(n(e.target.value))} /></Field>
            <Field label="Term (months)"><input className="inst-input" type="number" value={term} onChange={e => setTerm(n(e.target.value))} /></Field>
            <Field label="ISO commission (points)"><input className="inst-input" type="number" value={points} onChange={e => setPoints(n(e.target.value))} /></Field>
            <Field label="House syndication %"><input className="inst-input" type="number" value={housePct} onChange={e => setHousePct(n(e.target.value))} /></Field>
          </div>
        </SectionCard>
        <div className="inst-stack">
          <SectionCard bar="Offer summary">
            <div className="inst-acct-row">
              <div><div className="inst-acct-name">Total payback (RTR)</div><div className="inst-acct-sub">Factor {factor.toFixed(2)} · {term} months</div></div>
              <div><div className="inst-amount lg">{ifmt(payback)}</div></div>
            </div>
            <div className="inst-acct-row">
              <div><div className="inst-acct-name">Est. daily payment</div><div className="inst-acct-sub">{businessDays} business days</div></div>
              <div><div className="inst-amount">{ifmt(daily)}</div></div>
            </div>
            <div className="inst-acct-row">
              <div><div className="inst-acct-name">Gross margin</div><div className="inst-acct-sub">After {points}-pt commission ({ifmt(commission)})</div></div>
              <div><div className="inst-amount" style={{ color: 'var(--inst-pos)' }}>{ifmt(margin)}</div></div>
            </div>
          </SectionCard>
          <SectionCard bar="Syndication split">
            <div className="inst-table-wrap">
              <table className="inst-table">
                <thead><tr><th>Participant</th><th style={{ textAlign: 'right' }}>Share</th><th style={{ textAlign: 'right' }}>Funds In</th><th style={{ textAlign: 'right' }}>Payback Out</th></tr></thead>
                <tbody>
                  <tr><td className="inst-td-strong">ExpressFund (house)</td><td className="inst-td-num">{housePct}%</td><td className="inst-td-num">{ifmt(amount * housePct / 100)}</td><td className="inst-td-num">{ifmt(payback * housePct / 100)}</td></tr>
                  <tr><td className="inst-td-strong">Syndicate participants</td><td className="inst-td-num">{100 - housePct}%</td><td className="inst-td-num">{ifmt(amount * (100 - housePct) / 100)}</td><td className="inst-td-num">{ifmt(payback * (100 - housePct) / 100)}</td></tr>
                </tbody>
              </table>
            </div>
            <div className="inst-card-foot" style={{ display: 'flex', justifyContent: 'flex-end', gap: 10 }}>
              <button className="inst-btn outline" onClick={() => toast('Draft saved')}>Save draft</button>
              <button className="inst-btn primary" onClick={async () => {
                let id = 'OF-' + (2215 + offers.length - window.ICRM.OFFERS.length);
                try {
                  const r = await fetch('/api/offers', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ merchant: merchant || 'New merchant', amount, factor, term }) });
                  if (r.ok && (r.headers.get('Content-Type') || '').includes('json')) { const d = await r.json(); if (d.id) id = d.id; }
                } catch (e) {}
                setOffers(p => [{ id, merchant: merchant || 'New merchant', amount, factor, term, status: 'Sent', views: 0, sent: 'Just now' }, ...p]);
                toast('Offer sent — tracked link copied');
              }}>Send offer ›</button>
            </div>
          </SectionCard>
        </div>
      </div>

      <div style={{ marginTop: 20 }}>
        <SectionCard bar="Sent offers" right={offers.length + ' tracked'}>
          <div className="inst-table-wrap">
            <table className="inst-table">
              <thead><tr><th>Offer</th><th>Merchant</th><th style={{ textAlign: 'right' }}>Amount</th><th>Terms</th><th>Status</th><th>Sent</th><th></th></tr></thead>
              <tbody>
                {offers.map(o => (
                  <tr key={o.id}>
                    <td><span className="inst-td-strong">{o.id}</span><div className="inst-td-id">express.fund/offer/?id={o.id}</div></td>
                    <td>{o.merchant}</td>
                    <td className="inst-td-num inst-td-strong">{ifmt(o.amount)}</td>
                    <td>{o.factor.toFixed(2)} · {o.term} mo</td>
                    <td><Chip tone={o.status === 'Accepted' ? 'green' : o.status === 'Viewed' ? 'amber' : 'blue'}>{o.status}{o.views ? ' · ' + o.views + '×' : ''}</Chip></td>
                    <td>{o.sent}</td>
                    <td><button className="inst-btn outline sm" onClick={() => toast('Offer link copied')}>Copy link</button></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </SectionCard>
      </div>
    </div>
  );
}

function PgSyndication() {
  const { SYNDICATIONS, DEALS } = window.ICRM;
  return (
    <div className="inst-page">
      <div className="inst-greeting" style={{ marginBottom: 16 }}>Syndication</div>
      <div className="inst-stack">
        {SYNDICATIONS.map(s => {
          const deal = DEALS.find(d => d.id === s.dealId);
          return (
            <SectionCard key={s.dealId} bar={`${s.biz} — ${s.dealId}`} right={deal ? deal.servicing : ''}>
              <div className="inst-table-wrap">
                <table className="inst-table">
                  <thead><tr><th>Participant</th><th style={{ textAlign: 'right' }}>Share</th><th style={{ textAlign: 'right' }}>Contributed</th><th style={{ textAlign: 'right' }}>Remitted</th><th style={{ textAlign: 'right' }}>Outstanding</th></tr></thead>
                  <tbody>
                    {s.participants.map(p => (
                      <tr key={p.name}>
                        <td className="inst-td-strong">{p.name}</td>
                        <td className="inst-td-num">{p.pct}%</td>
                        <td className="inst-td-num">{ifmt(p.in)}</td>
                        <td className="inst-td-num">{ifmt(p.out)}</td>
                        <td className="inst-td-num inst-td-strong">{ifmt(p.in * s.factor - p.out)}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </SectionCard>
          );
        })}
      </div>
    </div>
  );
}

function PgCommissions({ toast }) {
  const { COMMISSIONS, fmt } = window.ICRM;
  const [rows, setRows] = React.useState(COMMISSIONS);
  const owed = rows.filter(c => c.status === 'Owed').reduce((s, c) => s + c.amount, 0);
  const paid = rows.filter(c => c.status === 'Paid').reduce((s, c) => s + c.amount, 0);
  const markPaid = id => { setRows(p => p.map(c => c.id === id ? { ...c, status: 'Paid', date: 'Today' } : c)); toast('Commission marked paid'); };

  return (
    <div className="inst-page">
      <div className="inst-greeting" style={{ marginBottom: 16 }}>Commissions</div>
      <div className="inst-grid-2" style={{ marginBottom: 20 }}>
        <div className="inst-card inst-stat"><div className="lbl">Owed to partners</div><div className="val" style={{ color: owed ? 'var(--inst-warn)' : undefined }}>{fmt(owed)}</div><div className="sub">Unpaid commissions</div></div>
        <div className="inst-card inst-stat"><div className="lbl">Paid in 2026</div><div className="val">{fmt(paid)}</div><div className="sub">{rows.filter(c => c.status === 'Paid').length} payouts</div></div>
      </div>
      <SectionCard bar="Commission ledger">
        <div className="inst-table-wrap">
          <table className="inst-table">
            <thead><tr><th>Partner</th><th>Deal</th><th>Basis</th><th style={{ textAlign: 'right' }}>Amount</th><th>Status</th><th>Paid</th><th></th></tr></thead>
            <tbody>
              {rows.map(c => (
                <tr key={c.id}>
                  <td><span className="inst-td-strong">{c.partner}</span><div className="inst-td-id">{c.rep}</div></td>
                  <td>{c.dealId}</td>
                  <td>{c.basis}</td>
                  <td className="inst-td-num inst-td-strong">{fmt(c.amount)}</td>
                  <td><Chip tone={c.status === 'Paid' ? 'green' : 'amber'}>{c.status}</Chip></td>
                  <td>{c.date}</td>
                  <td>{c.status === 'Owed' ? <button className="inst-btn outline sm" onClick={() => markPaid(c.id)}>Mark paid</button> : null}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </SectionCard>
    </div>
  );
}

function PgPortfolio() {
  const { DEALS, PORTFOLIO_MONTHS, fmt, fmtK } = window.ICRM;
  const deployed = DEALS.reduce((s, d) => s + d.amount, 0);
  const rtr = DEALS.reduce((s, d) => s + d.payback, 0);
  const collected = DEALS.reduce((s, d) => s + d.payback * d.repaid / 100, 0);
  const atRiskAmt = DEALS.filter(d => d.servicing !== 'Performing').reduce((s, d) => s + d.payback * (1 - d.repaid / 100), 0);
  const max = Math.max(1, ...PORTFOLIO_MONTHS.map(m => Math.max(m.funded, m.collected)));

  return (
    <div className="inst-page">
      <div className="inst-greeting" style={{ marginBottom: 16 }}>Portfolio performance</div>
      <div className="inst-grid-4" style={{ marginBottom: 20 }}>
        <div className="inst-card inst-stat"><div className="lbl">Deployed</div><div className="val">{fmtK(deployed)}</div><div className="sub">{DEALS.length} deals</div></div>
        <div className="inst-card inst-stat"><div className="lbl">Total RTR</div><div className="val">{fmtK(rtr)}</div><div className="sub">Expected payback</div></div>
        <div className="inst-card inst-stat"><div className="lbl">Collected</div><div className="val" style={{ color: 'var(--inst-pos)' }}>{fmtK(collected)}</div><div className="sub">{rtr ? Math.round(collected / rtr * 100) : 0}% of RTR</div></div>
        <div className="inst-card inst-stat"><div className="lbl">At-risk exposure</div><div className="val" style={{ color: 'var(--inst-warn)' }}>{fmtK(atRiskAmt)}</div><div className="sub">Modified + settlement</div></div>
      </div>

      <SectionCard bar="Funded vs. collected" right="Last 6 months">
        <div className="inst-card-body">
          <div style={{ display: 'flex', gap: 18, alignItems: 'flex-end', height: 190, padding: '0 4px' }}>
            {PORTFOLIO_MONTHS.map(m => (
              <div key={m.m} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, height: '100%' }}>
                <div style={{ flex: 1, display: 'flex', alignItems: 'flex-end', gap: 5, width: '100%', justifyContent: 'center' }}>
                  <div title={'Funded ' + fmt(m.funded)} style={{ width: 22, height: Math.max(2, m.funded / max * 150), background: 'var(--inst-navy)', borderRadius: '2px 2px 0 0' }}></div>
                  <div title={'Collected ' + fmt(m.collected)} style={{ width: 22, height: Math.max(2, m.collected / max * 150), background: 'var(--brand-300)', borderRadius: '2px 2px 0 0' }}></div>
                </div>
                <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--inst-ink-3)' }}>{m.m}</div>
              </div>
            ))}
          </div>
          <div style={{ display: 'flex', gap: 18, marginTop: 12, fontSize: 12, color: 'var(--inst-ink-2)' }}>
            <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><span style={{ width: 10, height: 10, background: 'var(--inst-navy)', borderRadius: 2 }}></span>Funded</span>
            <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><span style={{ width: 10, height: 10, background: 'var(--brand-300)', borderRadius: 2 }}></span>Collected</span>
          </div>
        </div>
      </SectionCard>

      <div style={{ height: 20 }}></div>
      <SectionCard bar="Servicing mix">
        <div className="inst-table-wrap">
          <table className="inst-table">
            <thead><tr><th>Servicing status</th><th style={{ textAlign: 'right' }}>Deals</th><th style={{ textAlign: 'right' }}>Outstanding RTR</th><th style={{ textAlign: 'right' }}>% of book</th></tr></thead>
            <tbody>
              {['Performing', 'Modified Payment', 'In Settlement'].map(st => {
                const ds = DEALS.filter(d => d.servicing === st);
                const out = ds.reduce((s, d) => s + d.payback * (1 - d.repaid / 100), 0);
                const total = DEALS.reduce((s, d) => s + d.payback * (1 - d.repaid / 100), 0);
                return (
                  <tr key={st}>
                    <td><Chip tone={SERV_TONE[st]}>{st}</Chip></td>
                    <td className="inst-td-num">{ds.length}</td>
                    <td className="inst-td-num inst-td-strong">{fmt(out)}</td>
                    <td className="inst-td-num">{total ? (out / total * 100).toFixed(1) : 0}%</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </SectionCard>
    </div>
  );
}

function PgClients() {
  const { CLIENTS } = window.ICRM;
  const [q, setQ] = React.useState('');
  const list = CLIENTS.filter(c => !q || (c.biz + c.owner).toLowerCase().includes(q.toLowerCase()));
  return (
    <div className="inst-page">
      <div className="inst-greeting" style={{ marginBottom: 16 }}>Clients</div>
      <SectionCard bar="Client accounts" right={list.length + ' clients'}>
        <div style={{ padding: '12px 14px', borderBottom: '1px solid var(--inst-rule-soft)' }}>
          <input className="inst-input" style={{ maxWidth: 260 }} placeholder="Search clients" value={q} onChange={e => setQ(e.target.value)} />
        </div>
        <div className="inst-table-wrap inst-desktop-only">
          <table className="inst-table">
            <thead><tr><th>Business</th><th>Owner</th><th>Contact</th><th>State</th><th>Since</th><th>Products</th></tr></thead>
            <tbody>
              {list.map(c => (
                <tr key={c.id}>
                  <td><span className="inst-td-strong">{c.biz}</span><div className="inst-td-id">{c.id}</div></td>
                  <td>{c.owner}</td>
                  <td>{c.email}<div className="inst-td-id">{c.phone}</div></td>
                  <td>{c.state}</td>
                  <td>{c.since}</td>
                  <td>
                    <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                      {c.products.map(p => <Chip key={p} tone={p.includes('settlement') || p.includes('Modified') ? 'amber' : 'blue'}>{p}</Chip>)}
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div className="inst-mobile-only">
          {list.map(c => (
            <div key={c.id} className="inst-rec-card">
              <div className="inst-rec-top">
                <span className="inst-td-strong">{c.biz}</span>
                <span style={{ fontSize: 12, color: 'var(--inst-ink-3)', whiteSpace: 'nowrap' }}>{c.state} · {c.since}</span>
              </div>
              <div className="inst-td-id">{c.id} · {c.owner} · {c.phone}</div>
              <div className="inst-rec-meta">
                {c.products.map(p => <Chip key={p} tone={p.includes('settlement') || p.includes('Modified') ? 'amber' : 'blue'}>{p}</Chip>)}
              </div>
            </div>
          ))}
        </div>
      </SectionCard>
    </div>
  );
}

Object.assign(window, { PgCalculator, PgSyndication, PgCommissions, PgPortfolio, PgClients });