/* ============================================================
   Contracts hub — the customer-contract domain model (registry).
   Reuses the SAME CX_DASH framework as Finance: the Artifacts page
   is a grid of data-product cards; clicking a card opens the full
   artifact in the drawer (Artifact / Data / Control / Context).
   Content pack: window.CON_DASH (tabs/contracts_dashboard_content.js).
   ============================================================ */
function ContractsDashboard() {
  const hostRef = React.useRef(null);
  React.useEffect(() => {
    const con = window.CON_DASH;
    const host = hostRef.current;
    if (!window.ensureFinCxGlobal || !window.ensureFinCxGlobal() || !con || !host) return;
    if (window.registerCxPack) window.registerCxPack(con);

    host.innerHTML =
      '<div class="cx-root fin-cx" data-screen-label="Contracts Dashboard">' +
      '<div class="card-grid">' + con.cardsHtml + '</div>' +
      '</div>';

    return () => {
      try { if (window.closeFull) window.closeFull(); } catch (e) {}
      try { if (window.closeDrawer) window.closeDrawer(); } catch (e) {}
      document.body.style.overflow = '';
      host.innerHTML = '';
    };
  }, []);
  return <div ref={hostRef} className="cx-dash-host" />;
}
window.ContractsDashboard = ContractsDashboard;

/* ============================================================
   Contracts — Model page. A registry domain's "model" is the
   ENCODING: what we extracted from the documents, where each
   field came from, and who consumes it. Not a Finance-style
   statement stack — its own shape.
   ============================================================ */
function ContractsModel() {
  const C = {
    ink: 'var(--fg-dark)', base: 'var(--fg-base)', muted: 'var(--fg-muted)',
    line: 'var(--border-subtle, rgba(38,24,17,0.10))', panel: 'var(--bg-panel)',
    green: 'var(--accent-green)', blue: 'var(--accent-blue)', purple: 'var(--accent-purple-ai)',
    grey: '#8A8580', red: 'var(--accent-red)',
  };
  const s = (window.CONTRACTS_REVIEW || { stats: {} }).stats || {};

  // Lineage: source → extraction → ODP → ADP → consumer
  const LINEAGE = [
    { label: 'Legal corpus', sub: s.total ? s.total + ' signed PDFs' : 'signed PDFs', color: C.blue },
    { label: 'AI extraction', sub: 'read each document', color: C.purple, proc: true },
    { label: 'Tabular Review', sub: 'ODP · structured', color: C.grey },
    { label: 'Expiration Schedule', sub: 'ADP · computed', color: C.purple },
    { label: 'Finance', sub: 'consumes terms', color: C.green },
  ];

  // The encoding schema — what we've pulled out of each contract.
  const FIELDS = [
    ['Party', 'entity ref', 'MSA cover / signature block', 'link → Customers', 'Commercial', false],
    ['Contract type', 'enum · MSA / SOW', 'Document header', 'attribute', '—', false],
    ['Model', 'enum · Turnkey / Tolling', 'Pricing clause', 'attribute', 'Finance · COGS', false],
    ['Committed value', 'money', 'Volume-commitment clause', 'attribute', 'Finance · revenue backlog', false],
    ['Term start / end', 'date', 'Term clause', 'attribute', 'Expiration schedule · Finance', false],
    ['Renewal type', 'enum', 'Renewal clause', 'attribute', 'Expiration schedule', false],
    ['Pricing basis', 'text', 'Pricing clause', 'attribute', 'Finance · margin', false],
    ['Status', 'enum', 'Register + events', 'attribute', 'Finance · AR', false],
    ['Quality certs · indemnity · insurance · LoL', 'flags / text', 'Obligations clause', 'not yet extracted', 'future', true],
  ];
  const HEAD = ['Field', 'Type', 'Extracted from', 'Encoded as', 'Feeds'];

  const CHECKS = [
    ['Coverage', (s.total || 0) + ' of ' + (s.total || 0) + ' contracts have a source PDF (100%)'],
    ['Reconciliation', 'Extracted committed value reconciles to the CLM register'],
    ['Cross-domain tie', 'Committed ' + (s.committed || '') + ' ties to Finance’s revenue backlog'],
    ['Scope', '8 fields extracted per contract · clause-level fields (obligations) not yet extracted'],
  ];

  const Chip = (n, i) => (
    <React.Fragment key={n.label}>
      {i > 0 && <span style={{ color: C.muted, fontSize: 15, flex: 'none' }}>→</span>}
      <div style={{ flex: '0 1 auto', minWidth: 0, border: `1px solid ${C.line}`,
        borderLeft: `3px solid ${n.color}`, borderRadius: 10, padding: '9px 12px', background: 'var(--bg-app)',
        borderStyle: n.proc ? 'dashed' : 'solid' }}>
        <div style={{ fontSize: 13, fontWeight: 600, color: C.ink, whiteSpace: 'nowrap' }}>{n.label}</div>
        <div style={{ fontSize: 11.5, color: C.muted, whiteSpace: 'nowrap' }}>{n.sub}</div>
      </div>
    </React.Fragment>
  );

  return (
    <div style={{ padding: '2px 2px 48px', maxWidth: 980 }}>
      {/* topbar */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 11, paddingBottom: 14, borderBottom: `1px solid ${C.line}`, marginBottom: 20 }}>
        <IconChip size={20} />
        <div>
          <div style={{ fontSize: 16, fontWeight: 600, color: C.ink }}>Contracts Model</div>
          <div style={{ fontSize: 12, color: C.muted }}>A registry — {s.total} contracts encoded from their signed documents</div>
        </div>
      </div>

      {/* lineage */}
      <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: C.muted, margin: '0 0 10px' }}>Lineage</div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap', marginBottom: 28 }}>
        {LINEAGE.map(Chip)}
      </div>

      {/* encoding schema */}
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', margin: '0 2px 10px' }}>
        <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: C.muted }}>What we&rsquo;ve encoded</div>
        <div style={{ fontSize: 12, color: C.muted }}>the fields extracted from every contract, with provenance and consumer</div>
      </div>
      <div style={{ border: `1px solid ${C.line}`, borderRadius: 12, overflow: 'hidden', background: 'var(--bg-app)', marginBottom: 28 }}>
        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12.5 }}>
          <thead>
            <tr>{HEAD.map((h) => (
              <th key={h} style={{ textAlign: 'left', padding: '9px 14px', fontSize: 10.5, fontWeight: 700,
                letterSpacing: '0.05em', textTransform: 'uppercase', color: C.muted, borderBottom: `1px solid ${C.line}`, background: C.panel }}>{h}</th>
            ))}</tr>
          </thead>
          <tbody>
            {FIELDS.map((f, ri) => (
              <tr key={ri} style={{ background: f[5] ? 'rgba(38,24,17,0.02)' : (ri % 2 ? C.panel : 'transparent'), opacity: f[5] ? 0.7 : 1 }}>
                <td style={{ padding: '9px 14px', borderBottom: `1px solid ${C.line}`, color: C.ink, fontWeight: 600 }}>{f[0]}</td>
                <td style={{ padding: '9px 14px', borderBottom: `1px solid ${C.line}`, color: C.muted, fontFamily: 'ui-monospace, Menlo, monospace', fontSize: 11.5, whiteSpace: 'nowrap' }}>{f[1]}</td>
                <td style={{ padding: '9px 14px', borderBottom: `1px solid ${C.line}`, color: C.base }}>{f[2]}</td>
                <td style={{ padding: '9px 14px', borderBottom: `1px solid ${C.line}`, color: f[5] ? C.red : C.base, fontStyle: f[5] ? 'italic' : 'normal' }}>{f[3]}</td>
                <td style={{ padding: '9px 14px', borderBottom: `1px solid ${C.line}`, color: C.muted }}>{f[4]}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* coverage & checks */}
      <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: C.muted, margin: '0 2px 10px' }}>Coverage &amp; checks</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))', gap: 12 }}>
        {CHECKS.map(([k, v]) => (
          <div key={k} style={{ border: `1px solid ${C.line}`, borderRadius: 10, padding: '12px 14px', background: C.panel }}>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 11, fontWeight: 700, letterSpacing: '0.05em', textTransform: 'uppercase', color: C.green }}>
              <span style={{ width: 7, height: 7, borderRadius: 999, background: C.green }}></span>{k}
            </div>
            <div style={{ fontSize: 13, lineHeight: 1.5, color: C.base, marginTop: 5 }}>{v}</div>
          </div>
        ))}
      </div>
    </div>
  );
}
window.ContractsModel = ContractsModel;