/* ============================================================
   IMTRACK — Contracts module (list + 5-tab detail)
   ============================================================ */
(function () {
  const E = window.IMTRACK_ENGINE;
  const { useState, useMemo, useEffect } = React;

  /* ---------------- helpers ---------------- */
  function DaysCell({ contract, end, status, store }) {
    const d = E.daysUntil(end);
    if (store && contract && E.contractRuleFlag(store, contract, 'suppresses_expiry_action')) return <span className="dash">—</span>;
    if (store && !contract && E.cstFlag(store, status, 'suppresses_expiry_action')) return <span className="dash">—</span>;
    if (!store && ['terminated', 'expired', 'suspended'].includes(status)) return <span className="dash">—</span>;
    const criticalCfg = store ? (store.alertConfig.find((a) => a.id === 'al_exp_critical') || {}) : {};
    const warningCfg = store ? (store.alertConfig.find((a) => a.id === 'al_exp_warning') || {}) : {};
    const criticalThreshold = criticalCfg.threshold != null ? criticalCfg.threshold : 30;
    const warningThreshold = warningCfg.threshold != null ? warningCfg.threshold : 60;
    let color = 'var(--text-secondary)';
    if (d < 0) color = '#b45309';
    else if (d <= criticalThreshold) color = '#b45309';
    else if (d <= warningThreshold) color = 'var(--color-warning-600)';
    return <span className="tnum" style={{ color, fontWeight: d <= warningThreshold ? 600 : 400 }}>{d < 0 ? d + 'd (expired)' : d + 'd'}</span>;
  }

  /* ===================== CONTRACT LIST ===================== */
  function ContractsModule() {
    const { store, navigate, role, can, assignedContracts, currentUser } = window.useStore();
    const toast = window.useToast();
    const [q, setQ] = useState('');
    const [fStatus, setFStatus] = useState('');
    const [fCur, setFCur] = useState('');
    const [fMethod, setFMethod] = useState('');
    const [fEntity, setFEntity] = useState('');
    const [fDept, setFDept] = useState('');
    const [expiringOnly, setExpiringOnly] = useState(!!(store._navExpiring));
    const [sort, setSort] = useState({ col: 'end', dir: 'asc' });

    useEffect(() => {
      const p = JSON.parse(localStorage.getItem('imtrack_nav') || '{}');
      if (p && p.params && p.params.filterExpiring) setExpiringOnly(true);
    }, []);

    let rows = store.contracts;
    if (assignedContracts !== 'all') rows = rows.filter((c) => assignedContracts.includes(c.id));
    if (currentUser && currentUser.entityScope !== 'all') rows = rows.filter((c) => (currentUser.entityScope || []).includes(c.entityId));
    if (currentUser && currentUser.departmentScope !== 'all') rows = rows.filter((c) => (currentUser.departmentScope || []).includes(c.departmentId));
    rows = rows.filter((c) => {
      if (q && !(c.vendor.toLowerCase().includes(q.toLowerCase()) || c.title.toLowerCase().includes(q.toLowerCase()) || c.no.toLowerCase().includes(q.toLowerCase()))) return false;
      if (fStatus && c.status !== fStatus) return false;
      if (fCur && c.cur !== fCur) return false;
      if (fMethod && c.method !== fMethod) return false;
      if (fEntity && c.entityId !== fEntity) return false;
      if (fDept && c.departmentId !== fDept) return false;
      if (expiringOnly) {
        if (E.contractRuleFlag(store, c, 'suppresses_expiry_action')) return false;
        const d = E.daysUntil(c.end);
        const _al = store.alertConfig.find((a) => a.id === 'al_exp_warning') || {};
        const _w = _al.threshold != null ? _al.threshold : 60;
        if (!(d >= 0 && d <= _w)) return false;
      }
      return true;
    });
    const acc = { no: (c) => c.no, vendor: (c) => c.vendor, title: (c) => c.title, start: (c) => c.start, end: (c) => c.end, current: (c) => c.current, cur: (c) => c.cur, status: (c) => c.status, days: (c) => E.daysUntil(c.end) };
    rows = window.sortRows(rows, sort, acc);

    const doExport = () => {
      window.exportCsv('imtrack_contracts.csv',
        ['Company Contract No', 'Vendor', 'Title', 'Start Date', 'End Date', 'Current Value', 'Currency', 'Status', 'Operational Flags', 'Amendments', 'Days Until Expiry'],
        rows.map((c) => [c.no, c.vendor, c.title, c.start, c.end, c.current, c.cur, E.lkLabel(store, 'contractStatus', c.status), (c.operationalFlags || []).map((f) => E.lkLabel(store, 'operationalFlags', f)).join('; '), (c.amendments || []).length, E.daysUntil(c.end)]));
      toast('Exported ' + rows.length + ' contracts to CSV', 'good');
    };
    const activeChips = [
      fStatus && { k: 'Status', v: E.lkLabel(store, 'contractStatus', fStatus), clear: () => setFStatus('') },
      fCur && { k: 'Currency', v: fCur, clear: () => setFCur('') },
      fMethod && { k: 'Method', v: fMethod, clear: () => setFMethod('') },
      fEntity && { k: 'Entity', v: E.lkLabel(store, 'entity', fEntity), clear: () => setFEntity('') },
      fDept && { k: 'Department', v: E.lkLabel(store, 'department', fDept), clear: () => setFDept('') },
      expiringOnly && { k: 'Expiring', v: '≤ ' + ((store.alertConfig.find((a) => a.id === 'al_exp_warning') || {}).threshold || 60) + ' days', clear: () => setExpiringOnly(false) },
    ].filter(Boolean);

    return (
      <div className="page page-wide">
        <PageHeader title="Contracts" subtitle={rows.length + ' of ' + store.contracts.length + ' contracts' + (assignedContracts !== 'all' ? ' (assigned to you)' : '')}>
          {can('contracts', 'import') && <button className="btn btn-secondary" onClick={() => navigate('import', { back: 'contracts', type: 'erp_afop_list' })}><Icon name="upload" size={16} />Import</button>}
          {can('procurement', 'view') && <button className="btn btn-secondary" onClick={() => navigate('procurement')}><Icon name="link-2" size={16} />Procurement Plan</button>}
          <button className="btn btn-secondary" onClick={doExport}><Icon name="download" size={16} />Export CSV</button>
        </PageHeader>

        <div className="filterbar">
          <div className="search-box"><Icon name="search" size={15} /><input className="input" placeholder="Search vendor, title, contract no…" value={q} onChange={(e) => setQ(e.target.value)} style={{ width: 280 }} /></div>
          <select className="select" value={fStatus} onChange={(e) => setFStatus(e.target.value)}><option value="">All statuses</option>{store.lookups.contractStatus.filter((s) => s.active).map((s) => <option key={s.id} value={s.id}>{s.label}</option>)}</select>
          <select className="select" value={fCur} onChange={(e) => setFCur(e.target.value)}><option value="">All currencies</option>{store.lookups.currency.filter((s) => s.active).map((s) => <option key={s.id} value={s.id}>{s.label}</option>)}</select>
          <select className="select" value={fMethod} onChange={(e) => setFMethod(e.target.value)}><option value="">All methods</option>{store.lookups.procMethod.map((s) => <option key={s.id} value={s.id}>{s.label}</option>)}</select>
          <select className="select" value={fEntity} onChange={(e) => setFEntity(e.target.value)}><option value="">All entities</option>{store.lookups.entity.sort((a,b)=> (a.sort_order||99)-(b.sort_order||99)).filter((s) => s.active && (!currentUser || currentUser.entityScope === 'all' || (currentUser.entityScope || []).includes(s.id))).map((s) => <option key={s.id} value={s.id}>{s.label}</option>)}</select>
          <select className="select" value={fDept} onChange={(e) => setFDept(e.target.value)}><option value="">All departments</option>{store.lookups.department.sort((a,b)=> (a.sort_order||99)-(b.sort_order||99)).filter((s) => s.active && (!currentUser || currentUser.departmentScope === 'all' || (currentUser.departmentScope || []).includes(s.id))).map((s) => <option key={s.id} value={s.id}>{s.label}</option>)}</select>
          <div className="spacer" />
        </div>
        {activeChips.length > 0 && <div className="filterbar">{activeChips.map((c, i) => <span key={i} className="chip">{c.k}: {c.v}<button onClick={c.clear}><Icon name="x" size={12} /></button></span>)}</div>}

        <div className="card" style={{ overflow: 'hidden' }}>
          <div className="tbl-wrap">
            <table className="tbl">
              <thead style="position: sticky; top: 0; z-index: 1; background: var(--bg-default)"><tr>
                <SortHead label="Contract No" col="no" sort={sort} setSort={setSort} />
                <SortHead label="Vendor" col="vendor" sort={sort} setSort={setSort} />
                <SortHead label="Title" col="title" sort={sort} setSort={setSort} />
                <SortHead label="Start" col="start" sort={sort} setSort={setSort} />
                <SortHead label="End" col="end" sort={sort} setSort={setSort} />
                <SortHead label="Value" col="current" sort={sort} setSort={setSort} numeric />
                <SortHead label="Cur" col="cur" sort={sort} setSort={setSort} />
                <SortHead label="Status" col="status" sort={sort} setSort={setSort} />
                <th>Flags</th>
                <th className="num-col">Amendments</th>
                <SortHead label="Expiry" col="days" sort={sort} setSort={setSort} numeric />
              </tr></thead>
              <tbody>
                {rows.map((c) => (
                  <tr key={c.id} className="clickable" onClick={() => navigate('contract', { id: c.id })}>
                    <td className="mono" style={{ fontWeight: 600 }}>{c.no}</td>
                    <td>{c.vendor}</td>
                    <td style={{ maxWidth: 240, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} title={c.title}>{c.title}</td>
                    <td className="num">{c.start}</td>
                    <td className="num">{c.end}</td>
                    <td className="num-col"><Money v={c.current} cur={c.cur} dec={c.cur === 'USD' ? 0 : 0} /></td>
                    <td><span className="badge badge-neutral">{c.cur}</span></td>
                    <td><StatusBadge store={store} list="contractStatus" id={c.status} dot /></td>
                    <td>{(c.operationalFlags || []).length > 0 ? <div className="row" style={{ gap: 4, flexWrap: 'wrap' }}>{(c.operationalFlags || []).map((f) => <StatusBadge key={f} store={store} list="operationalFlags" id={f} />)}</div> : <span className="dash">—</span>}</td>
                    <td className="num-col">{(c.amendments || []).length > 0 ? <span className="badge badge-neutral">{(c.amendments || []).length}</span> : <span className="dash">—</span>}</td>
                    <td className="num-col"><DaysCell contract={c} end={c.end} status={c.status} store={store} /></td>
                  </tr>
                ))}
              </tbody>
            </table>
            {rows.length === 0 && <EmptyState icon="file-text" title="No contracts match your filters" sub="Try clearing filters or adjusting your search." action={<button className="btn btn-secondary btn-sm" onClick={() => { setQ(''); setFStatus(''); setFCur(''); setFMethod(''); setExpiringOnly(false); }}>Reset filters</button>} />}
          </div>
          <div className="table-meta"><span>{rows.length} rows</span><span>CSV export respects active filters &amp; column order</span></div>
        </div>
      </div>
    );
  }

  /* ===================== CONTRACT DETAIL ===================== */
  function ContractDetail({ id, initialTab }) {
    const ctx = window.useStore();
    const { store, navigate, can } = ctx;
    const { DocumentsTab, AfopTab, ContractAcTab, AmendmentsTab, NewAmendmentButton } = window;
    const [tab, setTab] = useState(initialTab || 'overview');
    useEffect(() => { if (initialTab) setTab(initialTab); }, [initialTab]);
    const c = store.contracts.find((x) => x.id === id);
    if (!c) return <div className="page"><div className="card card-pad">Contract not found. <span className="link" onClick={() => navigate('contracts')}>Back to list</span></div></div>;
    const fin = useMemo(() => E.contractFinance(store, id), [store, id]);
    const days = E.daysUntil(c.end);
    const suppressExpiry = E.contractRuleFlag(store, c, 'suppresses_expiry_action');
    const overBudget = c.wpb.some((wid) => { const it = store.wpbItems.find((w) => w.id === wid); if (!it) return false; return E.waterfallForItem(store, it).light === 'critical'; });

    const TABS = [['overview', 'Overview'], ['documents', 'Documents'], ['afop', 'AFOP & PO'], ['aclog', 'AC Log'], ['amend', 'Amendments']];
    return (
      <div className="page page-wide">
        <div className="row" style={{ marginBottom: 14, gap: 8 }}>
          <span className="link" onClick={() => navigate('contracts')} style={{ fontSize: 'var(--text-sm)' }}>Contracts</span>
          <Icon name="chevron-right" size={14} color="#94a3b8" />
          <span className="mono dim" style={{ fontSize: 'var(--text-sm)' }}>{c.no}</span>
          {tab !== 'overview' && <><Icon name="chevron-right" size={14} color="#94a3b8" /><span className="dim" style={{ fontSize: 'var(--text-sm)' }}>{TABS.find(([k]) => k === tab)?.[1] || tab}</span></>}
        </div>
        <div className="page-header" style={{ alignItems: 'center' }}>
          <div>
            <div className="row" style={{ gap: 12 }}>
              <h1 className="page-title mono" style={{ fontSize: 22 }}>{c.no}</h1>
              <StatusBadge store={store} list="contractStatus" id={c.status} dot />
              {overBudget && <span className="badge badge-critical"><Icon name="alert-triangle" size={12} />AFOP overrun</span>}
            </div>
            <div className="stat-line mt8">
              <span style={{ fontWeight: 500, color: 'var(--text-primary)' }}>{c.vendor}</span><span className="sep">·</span>
              <span>{c.title}</span><span className="sep">·</span>
              <span className="num">{c.cur} {E.fmtMoney(fin.totalAfop, c.cur)}</span><span className="sep">·</span>
              <span>AC Sub <strong>{c.cur} {E.fmtMoney(fin.submitted, c.cur)}</strong></span><span className="sep">·</span>
              <span>Cons <strong>{c.cur} {E.fmtMoney(fin.consumed, c.cur)}</strong></span><span className="sep">·</span>
              {suppressExpiry ? <span>Ends {c.end} <span className="muted">(expiry action suppressed)</span></span> : (() => { const _r = (store.alertConfig.find((a) => a.id === 'al_exp_critical') || {}).threshold || 30; const _a = (store.alertConfig.find((a) => a.id === 'al_exp_warning') || {}).threshold || 60; return <span>Ends {c.end} <span style={{ color: days <= _r && days >= 0 ? '#b45309' : days <= _a && days >= 0 ? 'var(--color-warning-600)' : 'inherit', fontWeight: days <= _a ? 600 : 400 }}>({days < 0 ? 'expired' : days + ' days'})</span></span>; })()}
            </div>
            {(c.operationalFlags || []).length > 0 && <div className="row mt8" style={{ gap: 6, flexWrap: 'wrap' }}>
              {(c.operationalFlags || []).map((f) => <StatusBadge key={f} store={store} list="operationalFlags" id={f} />)}
            </div>}
          </div>
          <div className="page-actions">
            {can('contracts', 'edit') && <OverviewEditButton c={c} ctx={ctx} />}
            {can('contracts', 'edit') && <NewAmendmentButton c={c} ctx={ctx} />}
          </div>
        </div>

        <div className="tabs">
          {TABS.map(([k, label]) => {
            const docCount = k === 'documents' ? (store.documentReferences || []).filter((r) => r.entityType === 'contract' && r.entityId === c.id).length : 0;
            return <div key={k} className={'tab' + (tab === k ? ' active' : '')} onClick={() => setTab(k)}>{label}
              {k === 'documents' && docCount > 0 && <span className="badge badge-neutral" style={{ marginLeft: 6 }}>{docCount}</span>}
              {k === 'aclog' && fin.acs.length > 0 && <span className="badge badge-neutral" style={{ marginLeft: 6 }}>{fin.acs.length}</span>}
              {k === 'amend' && c.amendments.length > 0 && <span className="badge badge-neutral" style={{ marginLeft: 6 }}>{c.amendments.length}</span>}
            </div>;
          })}
        </div>

        {tab === 'overview' && <OverviewTab c={c} ctx={ctx} fin={fin} />}
        {tab === 'documents' && <DocumentsTab c={c} ctx={ctx} />}
          {tab === 'afop' && <AfopTab c={c} ctx={ctx} />}
          {tab === 'aclog' && <ContractAcTab c={c} ctx={ctx} />}
        {tab === 'amend' && <AmendmentsTab c={c} ctx={ctx} />}
      </div>
    );
  }

  /* ---------- Overview ---------- */
  function KV({ k, v, mono }) { return <div className="kv"><span className="k">{k}</span><span className={'v' + (mono ? ' mono' : '')}>{v}</span></div>; }
  const CLOSEOUT_CHECKLIST = [
    { id: 'acs_done', label: 'All AC records marked 05 Done', check: (c, fin) => fin.acs.every((a) => a.status === 's05') },
    { id: 'no_pending_po', label: 'No open PO lines remaining', check: (c, fin) => fin.pos.length > 0 && fin.pos.every((p) => ['closed', 'full'].includes(p.status)) },
    { id: 'docs_filed', label: 'Contract documents linked in Documents tab', check: (c, fin, store) => (store.documentReferences || []).some((r) => r.entityType === 'contract' && r.entityId === c.id) },
    { id: 'amendments_recorded', label: 'No draft amendments remain open', check: (c) => (c.amendments || []).every((a) => !['draft'].includes(String(a.status || '').toLowerCase())) },
  ];

  function OverviewTab({ c, ctx, fin }) {
    const { store, navigate } = ctx;
    const [showHeader, setShowHeader] = useState(true);
    const linkedWpb = c.wpb.map((id) => store.wpbItems.find((w) => w.id === id)).filter(Boolean);
    const linkedIo = c.io.map((id) => store.ios.find((w) => w.id === id)).filter(Boolean);
    const pp = store.procurementPlan.find((p) => p.linkedContract === c.id) || null;
    const isExpired = c.status === 'expired';
    return (
      <div className="grid-2" style={{ alignItems: 'start' }}>
        <div className="card card-pad">
          <div className="section-title" style={{ cursor: 'pointer' }} onClick={() => setShowHeader(!showHeader)}>
            <span className={'caret' + (showHeader ? ' open' : '')} style={{ marginRight: 8 }}><Icon name="chevron-right" size={14} /></span>
            Contract Header
          </div>
          {showHeader && <><div className="field-hint mb8" style={{ display: 'flex', gap: 12, fontSize: 10, textTransform: 'uppercase', letterSpacing: '.04em' }}>
            <span title="SAP/ERP-sourced field"><Icon name="lock" size={10} color="#94a3b8" /> ERP</span>
            <span title="Editable by CBCC"><Icon name="pencil" size={10} color="#64748b" /> Manual</span>
            <span title="Auto-derived from system logic"><Icon name="zap" size={10} color="#64748b" /> Auto</span>
            <span title="Updated via amendment"><Icon name="file-text" size={10} color="#64748b" /> Amendment</span>
          </div>
          <div className="grid-2" style={{ gap: 16 }}>
            <KV k="Company Contract No" v={c.no} mono />
            <KV k="Entity" v={E.lkLabel(store, 'entity', c.entityId)} />
            <KV k="Department" v={E.lkLabel(store, 'department', c.departmentId)} />
            <KV k="AFOP / ERP Contract No" v={c.afopNo} mono />
            <KV k="Vendor Name" v={c.vendor} />
            <KV k="Scope" v={c.scope} />
            <KV k="Procurement Method" v={E.lkLabel(store, 'procMethod', c.method)} />
            <KV k="PR Number" v={c.pr} mono />
            <KV k="Currency" v={c.cur} />
            <KV k="Status" v={<StatusBadge store={store} list="contractStatus" id={c.status} dot />} />
            <KV k="Operational Flags" v={(c.operationalFlags || []).length > 0 ? <div className="row" style={{ gap: 6, flexWrap: 'wrap' }}>{(c.operationalFlags || []).map((f) => <StatusBadge key={f} store={store} list="operationalFlags" id={f} />)}</div> : <span className="dash">—</span>} />
            <KV k="Original Value" v={c.cur + ' ' + E.fmtMoney(c.orig || fin.totalAfop, c.cur)} />
            <KV k="Current Value" v={<span className="num">{c.cur} {E.fmtMoney(fin.totalAfop, c.cur)} <span className="field-hint" style={{ fontSize: 10 }}>(computed: sum of AFOP lines)</span></span>} />
            <KV k="Start Date" v={c.start} mono />
            <KV k="End Date" v={c.end} mono />
            <KV k="Original End Date" v={c.origEnd} mono />
            <KV k="Days Until Expiry" v={<DaysCell contract={c} end={c.end} status={c.status} store={store} />} />
          </div>
          <div className="field-hint mt16" style={{ borderTop: '1px solid var(--border-default)', paddingTop: 10 }}>
            Created by {c.createdBy} on {c.createdAt} · Last modified by {c.modBy} on {c.modAt}
          </div>
          </>}
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div className="card card-pad">
            <div className="section-title">Budget Linkage</div>
            <div className="kv mb12"><span className="k">Linked WP&amp;B Lines</span>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 4 }}>
                {linkedWpb.map((w) => <span key={w.id} className="link mono" style={{ fontSize: 'var(--text-sm)' }} onClick={() => navigate('budget', { tab: 'wpb', focus: w.id })}>{w.schedule}-{w.line} · {w.name}</span>)}
                {linkedWpb.length === 0 && <span className="dash">None linked</span>}
              </div>
            </div>
            <div className="kv"><span className="k">Linked IOs</span>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 4 }}>
                {linkedIo.map((io) => <span key={io.id} className="link mono" style={{ fontSize: 'var(--text-sm)' }} onClick={() => navigate('budget', { tab: 'io', focus: io.id })}>IO {io.io} · {io.activities}</span>)}
                {linkedIo.length === 0 && <span className="dash">None linked</span>}
              </div>
            </div>
          </div>
          <div className="card card-pad">
            <div className="section-title">Financial Snapshot</div>
            <div className="grid-2" style={{ gap: 16 }}>
              <KV k="Total AFOP Allocated" v={<span className="num">USD {E.fmtUSD0(fin.totalAfop)}</span>} />
              <KV k="AC Consumed (05 Done)" v={<span className="num">USD {E.fmtUSD0(fin.consumed)}</span>} />
              <KV k="AFOP Lines" v={fin.afs.length} />
              <KV k="AC Records" v={fin.acs.length} />
            </div>
            {pp && <div className="mt16" style={{ borderTop: '1px solid var(--border-default)', paddingTop: 12 }}>
              <span className="k" style={{ fontSize: 11, textTransform: 'uppercase', color: 'var(--text-muted)' }}>Procurement Plan</span><br />
              <span className="link" onClick={() => navigate('procurement', { focus: pp.id })}><Icon name="link-2" size={13} /> {pp.ppNo} · {pp.title}</span>
            </div>}
          </div>
        </div>
        {isExpired && (
          <div className="closeout-review" style={{ gridColumn: '1 / -1' }}>
            <div className="row" style={{ gap: 8, marginBottom: 12 }}>
              <Icon name="check-circle" size={18} color="#b45309" />
              <span style={{ fontWeight: 600, fontSize: 'var(--text-base)', color: '#b45309' }}>Contract Closeout Readiness</span>
              <span className="muted" style={{ fontSize: 'var(--text-sm)' }}>This contract has expired — complete the closeout checklist before archiving.</span>
            </div>
            <div className="readiness-checklist">
              {CLOSEOUT_CHECKLIST.map((item) => {
                const ok = item.check(c, fin, store);
                return (
                  <div key={item.id} className={'readiness-item' + (ok ? ' done' : '')}>
                    <Icon name={ok ? 'check-circle' : 'circle'} size={16} color={ok ? '#16a34a' : '#94a3b8'} />
                    <span style={{ fontSize: 'var(--text-sm)', color: ok ? 'var(--text-primary)' : 'var(--text-muted)' }}>{item.label}</span>
                  </div>
                );
              })}
            </div>
          </div>
        )}
      </div>
    );
  }

  function OverviewEditButton({ c, ctx }) {
    const [open, setOpen] = useState(false);
    const [form, setForm] = useState(c);
    const toast = window.useToast();
    useEffect(() => setForm(c), [c]);
    const save = () => { ctx.actions.updateContract(c.id, { scope: form.scope }); toast('Contract updated', 'good'); setOpen(false); };
    return (<>
      <button className="btn btn-secondary" onClick={() => setOpen(true)}><Icon name="pencil" size={15} />Edit</button>
      {open && <Modal title="Edit Contract" subtitle={c.no} onClose={() => setOpen(false)} footer={<><button className="btn btn-secondary" onClick={() => setOpen(false)}>Cancel</button><button className="btn btn-primary" onClick={save}>Save changes</button></>}>
        <div className="form-grid">
          <Field label="Scope" hint="CBCC operational context — all other fields are import-sourced or derived." span><input className="input" value={form.scope} onChange={(e) => setForm({ ...form, scope: e.target.value })} /></Field>
          <Field label="Vendor Name"><div className="field-readonly">{c.vendor}</div></Field>
          <Field label="Contract Title"><div className="field-readonly">{c.title}</div></Field>
          <Field label="PR Number"><div className="field-readonly mono">{c.pr || '—'}</div></Field>
          <Field label="Status" hint="Derived from end date — changes automatically."><div className="field-readonly"><StatusBadge store={ctx.store} list="contractStatus" id={c.status} dot /></div></Field>
          <Field label="End Date" hint="End date changes must be recorded through an amendment."><div className="field-readonly mono">{c.end}</div></Field>
        </div>
      </Modal>}
    </>);
  }

  window.ContractsModule = ContractsModule;
  window.ContractDetail = ContractDetail;
  window._ctrDays = DaysCell;
  window._ctrKV = KV;
})();