// Institutional CRM — Settlement casefiles (DebtLift) + shared Activity / Notes blocks
// Notes carry a visibility scope: 'internal' (staff & referral partners) or 'shared' (client can see).
const { fmt: wfmt, fmtK: wfmtK } = window.ICRM;

const LEDGER_TONE = { 'Settled': 'green', 'Offer Received': 'blue', 'Negotiating': 'amber', 'Contacted': '' };
const CASE_TONE = { 'Active': 'navy', 'Settled': 'green', 'Intake': 'amber' };
const KIND_DOT = { settled: 'var(--inst-pos)', offer: 'var(--inst-blue)', status: 'var(--inst-warn)', payment: 'var(--inst-ink-3)', doc: 'var(--inst-ink-3)', note: 'var(--inst-warn)' };

function VisChip({ vis }) {
  const internal = vis === 'internal';
  return (
    <span title={internal ? 'Visible to staff & referral partners only' : 'Visible to staff, partners & the business owner'}
      style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 10, fontWeight: 800, letterSpacing: '.5px', textTransform: 'uppercase', padding: '2px 8px', borderRadius: 3, whiteSpace: 'nowrap', background: internal ? '#FBF3E4' : '#EEF3FD', color: internal ? '#8a5a12' : '#2356CC', border: '1px solid ' + (internal ? '#e5cf9e' : '#7AAEE8') }}>
      {internal ? 'Internal' : 'Shared with client'}
    </span>
  );
}

// ── Activity trail (offers, communication, payments, status changes) ──
function ActivityFeed({ items }) {
  if (!items || !items.length) return <div style={{ fontSize: 13, color: 'var(--inst-ink-3)', padding: '10px 0' }}>No activity yet.</div>;
  return (
    <div>
      {items.map((a, i) => (
        <div key={i} style={{ display: 'flex', gap: 10, padding: '9px 0', borderBottom: '1px solid var(--inst-rule-soft)', alignItems: 'flex-start' }}>
          <span style={{ width: 8, height: 8, borderRadius: '50%', background: KIND_DOT[a.kind] || 'var(--inst-ink-3)', marginTop: 5, flexShrink: 0 }}></span>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--inst-ink)', display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
              <span>{a.text}</span>
              {a.internal ? <VisChip vis="internal" /> : null}
            </div>
            <div style={{ fontSize: 12, color: 'var(--inst-ink-3)', marginTop: 1 }}>{a.who} · {a.when}</div>
          </div>
          {a.amount != null ? <span style={{ fontSize: 13, fontWeight: 700, color: 'var(--inst-ink)', fontVariantNumeric: 'tabular-nums', whiteSpace: 'nowrap' }}>{wfmt(a.amount)}</span> : null}
        </div>
      ))}
    </div>
  );
}

// ── Notes with visibility scopes ──
function NotesCard({ subject }) {
  const [notes, setNotes] = React.useState(subject.notes || []);
  const [text, setText] = React.useState('');
  const [vis, setVis] = React.useState('internal');
  const add = () => {
    if (!text.trim()) return;
    subject.notes = [{ when: 'Just now', who: 'You', vis, text: text.trim() }].concat(subject.notes || []);
    setNotes(subject.notes); setText('');
  };
  return (
    <div>
      <textarea className="inst-input" rows={2} placeholder="Add a note…" value={text} onChange={e => setText(e.target.value)} style={{ resize: 'vertical', width: '100%', fontFamily: 'inherit' }}></textarea>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginTop: 8, flexWrap: 'wrap' }}>
        {[['internal', 'Internal', 'Staff & referral partners'], ['shared', 'Shared', 'Client can see']].map(([v, label, sub]) => (
          <label key={v} style={{ display: 'flex', alignItems: 'flex-start', gap: 6, cursor: 'pointer' }}>
            <input type="radio" name={'note-vis-' + subject.id} checked={vis === v} onChange={() => setVis(v)} style={{ marginTop: 2 }} />
            <span>
              <span style={{ display: 'block', fontSize: 12, fontWeight: 700, color: vis === v ? 'var(--inst-ink)' : 'var(--inst-ink-3)' }}>{label}</span>
              <span style={{ display: 'block', fontSize: 11, color: 'var(--inst-ink-3)' }}>{sub}</span>
            </span>
          </label>
        ))}
        <span style={{ flex: 1 }}></span>
        <button className="inst-btn primary sm" disabled={!text.trim()} onClick={add}>Add note</button>
      </div>
      <div style={{ marginTop: 10 }}>
        {notes.length ? notes.map((n, i) => (
          <div key={i} style={{ padding: '9px 0', borderBottom: '1px solid var(--inst-rule-soft)' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
              <VisChip vis={n.vis} />
              <span style={{ fontSize: 12, color: 'var(--inst-ink-3)' }}>{n.who} · {n.when}</span>
            </div>
            <div style={{ fontSize: 13, color: 'var(--inst-ink)', marginTop: 4, lineHeight: 1.5 }}>{n.text}</div>
          </div>
        )) : <div style={{ fontSize: 13, color: 'var(--inst-ink-3)', padding: '6px 0' }}>No notes yet.</div>}
      </div>
    </div>
  );
}

// ── Lender ledger (per-creditor positions & stages) ──
function LenderLedger({ lenders }) {
  if (!lenders || !lenders.length) return <div style={{ fontSize: 13, color: 'var(--inst-ink-3)', padding: '10px 0' }}>No lenders enrolled yet.</div>;
  return (
    <div>
      {lenders.map((L) => {
        const cut = L.settledAmt != null ? L.settledAmt : L.offerAmt != null ? L.offerAmt : null;
        const pct = cut != null ? Math.round((1 - cut / L.balance) * 100) : null;
        const initials = L.name.split(' ').map(w => w[0]).slice(0, 2).join('');
        return (
          <div key={L.name} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 0', borderBottom: '1px solid var(--inst-rule-soft)' }}>
            <span style={{ width: 34, height: 34, borderRadius: 4, background: 'var(--brand-50)', border: '1px solid #c8d9f2', color: 'var(--inst-navy)', fontSize: 12, fontWeight: 800, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>{initials}</span>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--inst-ink)' }}>{L.name}</div>
              <div style={{ fontSize: 12, color: 'var(--inst-ink-3)' }}>
                Balance {wfmt(L.balance)}
                {L.settledAmt != null ? <span> · Settled <b style={{ color: 'var(--inst-pos)' }}>{wfmt(L.settledAmt)}</b></span> : null}
                {L.offerAmt != null ? <span> · Offer on table <b style={{ color: 'var(--inst-ink)' }}>{wfmt(L.offerAmt)}</b></span> : null}
              </div>
            </div>
            <span style={{ fontSize: 13, fontWeight: 800, color: pct != null ? 'var(--inst-pos)' : 'var(--inst-ink-3)', fontVariantNumeric: 'tabular-nums', width: 48, textAlign: 'right' }}>{pct != null ? '−' + pct + '%' : '—'}</span>
            <Chip tone={LEDGER_TONE[L.status]}>{L.status}</Chip>
          </div>
        );
      })}
    </div>
  );
}

function CaseProgress({ s }) {
  const pct = s.enrolled ? Math.round(s.resolved / s.enrolled * 100) : 0;
  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-pos)' }}></div>
      </div>
      <span style={{ fontSize: 12, fontWeight: 700, color: 'var(--inst-ink)' }}>{pct}%</span>
    </div>
  );
}

function SettlementDetail({ s, go }) {
  return (
    <React.Fragment>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: 12, marginBottom: 12 }}>
        <div className="inst-card inst-stat"><div className="lbl">Enrolled debt</div><div className="val">{wfmtK(s.enrolled)}</div><div className="sub">{s.lenders.length} lenders</div></div>
        <div className="inst-card inst-stat"><div className="lbl">Resolved</div><div className="val" style={{ color: 'var(--inst-pos)' }}>{wfmtK(s.resolved)}</div><div className="sub">Debt settled</div></div>
        <div className="inst-card inst-stat"><div className="lbl">Client saved</div><div className="val" style={{ color: 'var(--inst-pos)' }}>{wfmtK(s.saved)}</div><div className="sub">Negotiated off</div></div>
        <div className="inst-card inst-stat"><div className="lbl">Plan</div><div className="val">{s.monthsIn}<span style={{ fontSize: 14, color: 'var(--inst-ink-3)' }}> / {s.planMonths} mo</span></div><div className="sub">{s.plan}</div></div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 12 }}>
        <div className="inst-card">
          <div className="inst-card-head">Lender ledger</div>
          <div className="inst-card-body" style={{ padding: '2px 16px 10px' }}><LenderLedger lenders={s.lenders} /></div>
        </div>
        <div className="inst-card">
          <div className="inst-card-head">Key facts</div>
          <div className="inst-card-body" style={{ padding: '4px 16px 10px' }}>
            {[['Casefile', s.id], ['Owner', s.owner], ['Client since', s.since], ['Next plan payment', wfmt(s.nextPayment.amount) + ' on ' + s.nextPayment.date], ['Specialist', s.specialist], ['Referral source', s.referral ? s.referral.company + ' · ' + s.referral.name : 'Direct'], s.dealId ? ['ExpressFund advance', s.dealId] : null].filter(Boolean).map(([k, v]) => (
              <div key={k} style={{ display: 'flex', justifyContent: 'space-between', gap: 10, padding: '7px 0', borderBottom: '1px solid var(--inst-rule-soft)', fontSize: 13 }}>
                <span style={{ color: 'var(--inst-ink-3)' }}>{k}</span>
                {k === 'ExpressFund advance'
                  ? <a className="inst-link" onClick={() => go('Deals', v)}>{v} <span className="chev">›</span></a>
                  : <span style={{ fontWeight: 700, color: 'var(--inst-ink)', textAlign: 'right' }}>{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">Recent activity</div>
          <div className="inst-card-body" style={{ padding: '2px 16px 10px' }}><ActivityFeed items={s.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={s} /></div>
        </div>
      </div>
    </React.Fragment>
  );
}

function PgSettlements({ fileId, go }) {
  const { SETTLEMENTS, DEBTLIFT } = window.ICRM;
  const [q, setQ] = React.useState('');
  const [statusF, setStatusF] = React.useState('');

  if (fileId) {
    const s = SETTLEMENTS.find(x => x.id === fileId);
    return (
      <FilePage crumb="Settlement / Casefiles" backLabel="Back to casefiles" onBack={() => go('Settlements')}
        title={s ? s.biz : 'File not found'}
        sub={s ? s.id + ' · ' + s.owner + ' · client since ' + s.since : 'No casefile matches ' + fileId + '.'}
        chips={s ? <React.Fragment><BrandTag brand="DebtLift" /><Chip tone={CASE_TONE[s.status]}>{s.status}</Chip></React.Fragment> : null}
        stats={s ? (
          <div style={{ display: 'flex', gap: 26, textAlign: 'right', flexWrap: 'wrap' }}>
            <div><div className="inst-amount lg">{wfmt(s.enrolled)}</div><div className="inst-amount-cap">Enrolled debt</div></div>
            <div><div className="inst-amount lg">{wfmt(s.resolved)}</div><div className="inst-amount-cap">Resolved · {s.enrolled ? Math.round(s.resolved / s.enrolled * 100) : 0}%</div></div>
          </div>
        ) : null}>
        {s ? <SettlementDetail s={s} go={go} /> : null}
      </FilePage>
    );
  }

  const list = SETTLEMENTS.filter(s =>
    (!statusF || s.status === statusF) &&
    (!q || (s.biz + s.owner + s.id).toLowerCase().includes(q.toLowerCase())));

  return (
    <div className="inst-page">
      <div className="inst-greeting" style={{ marginBottom: 16 }}>Settlement casefiles</div>
      <div className="inst-grid-4" style={{ marginBottom: 20 }}>
        <div className="inst-card inst-stat"><div className="lbl">Enrolled clients</div><div className="val">{DEBTLIFT.enrolled}</div><div className="sub">{SETTLEMENTS.filter(s => s.status === 'Active').length} active plans</div></div>
        <div className="inst-card inst-stat"><div className="lbl">Debt under management</div><div className="val">{wfmtK(DEBTLIFT.debtEnrolled)}</div><div className="sub">Total enrolled</div></div>
        <div className="inst-card inst-stat"><div className="lbl">Resolved to date</div><div className="val" style={{ color: 'var(--inst-pos)' }}>{wfmtK(DEBTLIFT.resolvedToDate)}</div><div className="sub">Debt settled</div></div>
        <div className="inst-card inst-stat"><div className="lbl">Client savings</div><div className="val" style={{ color: 'var(--inst-pos)' }}>{wfmtK(DEBTLIFT.clientSavings)}</div><div className="sub">Negotiated off balances</div></div>
      </div>

      <SectionCard bar="Casefiles" 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: 260 }} placeholder="Search casefiles" value={q} onChange={e => setQ(e.target.value)} />
          <select className="inst-input" style={{ maxWidth: 160 }} value={statusF} onChange={e => setStatusF(e.target.value)}>
            <option value="">All statuses</option>
            <option>Intake</option>
            <option>Active</option>
            <option>Settled</option>
          </select>
        </div>
        <div className="inst-table-wrap inst-desktop-only">
          <table className="inst-table">
            <thead><tr><th>Client</th><th style={{ textAlign: 'right' }}>Enrolled debt</th><th style={{ textAlign: 'right' }}>Resolved</th><th>Progress</th><th style={{ textAlign: 'right' }}>Lenders</th><th>Status</th><th>Specialist</th></tr></thead>
            <tbody>
              {list.map(s => (
                <React.Fragment key={s.id}>
                  <tr className="clickable" onClick={() => go('Settlements', s.id)}>
                    <td><span className="inst-td-strong">{s.biz}</span><div className="inst-td-id">{s.id} · {s.owner}</div></td>
                    <td className="inst-td-num inst-td-strong">{wfmt(s.enrolled)}</td>
                    <td className="inst-td-num">{wfmt(s.resolved)}</td>
                    <td style={{ minWidth: 130 }}><CaseProgress s={s} /></td>
                    <td className="inst-td-num">{s.lenders.length}</td>
                    <td><Chip tone={CASE_TONE[s.status]}>{s.status}</Chip></td>
                    <td>{s.specialist}</td>
                  </tr>
                </React.Fragment>
              ))}
            </tbody>
          </table>
        </div>
        <div className="inst-mobile-only">
          {list.map(s => (
            <div key={s.id} className="inst-rec-card" onClick={() => go('Settlements', s.id)}>
              <div className="inst-rec-top">
                <span className="inst-td-strong">{s.biz}</span>
                <span className="inst-td-strong" style={{ fontVariantNumeric: 'tabular-nums', whiteSpace: 'nowrap' }}>{wfmt(s.enrolled)}</span>
              </div>
              <div className="inst-td-id">{s.id} · {s.owner} · {s.lenders.length} lenders</div>
              <div style={{ marginTop: 9 }}><CaseProgress s={s} /></div>
              <div className="inst-rec-meta">
                <Chip tone={CASE_TONE[s.status]}>{s.status}</Chip>
                <span className="dim">{s.specialist}</span>
                <span style={{ flex: 1 }}></span>
                <span className="dim">Open casefile ›</span>
              </div>
            </div>
          ))}
        </div>
      </SectionCard>
    </div>
  );
}

Object.assign(window, { PgSettlements, ActivityFeed, NotesCard, LenderLedger, VisChip });