// CRIMINAL JUSTICE — WITNESSES sub-platform (5 tabs: Dashboard · Roster · Proofing · Exhibits · Impeachment)
const { useState: useCjWitState } = React;
const Tcwp = window.ArbiterTokens;

// ── Dashboard ────────────────────────────────────────────────────────────
function CjWitnessesDashboard({ data }) {
  const cj = window.__cj;
  const wits = data.witnesses;
  const govWits = wits.filter(w => w.forSide === 'Government').length;
  const defWits = wits.filter(w => w.forSide === 'Defense').length;
  const cooperators = wits.filter(w => w.role.toLowerCase().includes('cooperator') || w.role.toLowerCase().includes('informant')).length;
  const experts = wits.filter(w => w.role.toLowerCase().includes('expert')).length;
  const impeachmentCount = (data.witnessImpeachment || []).length;
  const critImp = (data.witnessImpeachment || []).filter(i => i.severity === 'critical').length;

  // By role breakdown
  const roleBuckets = {};
  wits.forEach(w => {
    const bucket = w.role.toLowerCase().includes('cooperator') ? 'Cooperators'
      : w.role.toLowerCase().includes('informant') ? 'Informants'
      : w.role.toLowerCase().includes('expert') ? 'Experts'
      : w.role.toLowerCase().includes('agent') || w.role.toLowerCase().includes('officer') ? 'Officers / Agents'
      : w.role.toLowerCase().includes('character') ? 'Character'
      : 'Fact witnesses';
    roleBuckets[bucket] = (roleBuckets[bucket] || 0) + 1;
  });
  const roleData = Object.entries(roleBuckets).sort((a, b) => b[1] - a[1]);
  const maxRole = Math.max(...roleData.map(r => r[1]), 1);

  // Upcoming proofings
  const upcoming = [...(data.witnessProofing || [])].sort((a, b) => a.date.localeCompare(b.date)).slice(0, 5);

  return (
    <div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: '12px', marginBottom: '16px' }}>
        <div style={cj.stat}><span style={cj.statLabel}>Total witnesses</span><span style={cj.statValue}>{wits.length}</span><span style={{ ...cj.statDelta, color: Tcwp.color.text.tertiary }}>across all matters</span></div>
        <div style={cj.stat}><span style={cj.statLabel}>Government</span><span style={{ ...cj.statValue, color: cj.burgundy }}>{govWits}</span></div>
        <div style={cj.stat}><span style={cj.statLabel}>Defense</span><span style={{ ...cj.statValue, color: cj.emerald }}>{defWits}</span></div>
        <div style={cj.stat}><span style={cj.statLabel}>Cooperators / CIs</span><span style={{ ...cj.statValue, color: cj.violet }}>{cooperators}</span><span style={{ ...cj.statDelta, color: Tcwp.color.text.tertiary }}>Giglio material</span></div>
        <div style={cj.stat}><span style={cj.statLabel}>Experts</span><span style={{ ...cj.statValue, color: cj.cobalt }}>{experts}</span></div>
        <div style={cj.stat}><span style={cj.statLabel}>Impeachment items</span><span style={{ ...cj.statValue, color: critImp > 0 ? cj.burgundy : Tcwp.color.text.primary }}>{impeachmentCount}</span><span style={{ ...cj.statDelta, color: Tcwp.color.text.tertiary }}>{critImp} critical</span></div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: '14px', marginBottom: '14px' }}>
        <div style={cj.card}>
          <div style={cj.cardH}>By role</div>
          <div style={{ padding: '14px 16px' }}>
            {roleData.map(([role, count]) => (
              <div key={role} style={{ marginBottom: '10px' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '4px' }}>
                  <span style={{ fontSize: '11px', fontWeight: 600, color: Tcwp.color.text.primary }}>{role}</span>
                  <span style={{ fontSize: '11px', fontFamily: Tcwp.font.mono, fontWeight: 700, color: cj.burgundy }}>{count}</span>
                </div>
                <div style={{ height: '6px', background: Tcwp.color.border.light, borderRadius: '3px', overflow: 'hidden' }}>
                  <div style={{ width: `${(count / maxRole) * 100}%`, height: '100%', background: cj.burgundy }} />
                </div>
              </div>
            ))}
          </div>
        </div>

        <div style={cj.card}>
          <div style={cj.cardH}>Upcoming proofing sessions</div>
          <table style={{ width: '100%', borderCollapse: 'collapse' }}>
            <thead>
              <tr>
                <th style={cj.th}>Date</th>
                <th style={cj.th}>Witness</th>
                <th style={cj.th}>Matter</th>
                <th style={cj.th}>Attorney</th>
                <th style={cj.th}>Readiness</th>
              </tr>
            </thead>
            <tbody>
              {upcoming.map(p => {
                const rColor = p.readiness >= 90 ? cj.emerald : p.readiness >= 75 ? cj.amber : cj.burgundy;
                return (
                  <tr key={p.id}>
                    <td style={{ ...cj.td, fontFamily: Tcwp.font.mono, fontSize: '11px' }}>{p.date}</td>
                    <td style={{ ...cj.td, fontWeight: 600 }}>{p.witness}</td>
                    <td style={{ ...cj.td, fontSize: '11px', color: Tcwp.color.text.secondary }}>{p.matter}</td>
                    <td style={{ ...cj.td, fontSize: '11px', color: Tcwp.color.text.secondary }}>{p.attorney}</td>
                    <td style={cj.td}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
                        <div style={{ width: '60px', height: '5px', background: Tcwp.color.border.light, borderRadius: '3px', overflow: 'hidden' }}>
                          <div style={{ width: `${p.readiness}%`, height: '100%', background: rColor }} />
                        </div>
                        <span style={{ fontFamily: Tcwp.font.mono, fontSize: '11px', fontWeight: 700, color: rColor }}>{p.readiness}%</span>
                      </div>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>

      <div style={cj.card}>
        <div style={{ ...cj.cardH, color: cj.burgundy }}>! Critical impeachment material</div>
        <table style={{ width: '100%', borderCollapse: 'collapse' }}>
          <thead>
            <tr>
              <th style={cj.th}>Witness</th>
              <th style={cj.th}>Matter</th>
              <th style={cj.th}>Kind</th>
              <th style={cj.th}>Severity</th>
              <th style={cj.th}>Description</th>
              <th style={cj.th}>Citation</th>
            </tr>
          </thead>
          <tbody>
            {(data.witnessImpeachment || []).filter(i => i.severity === 'critical' || i.severity === 'high').map((i, idx) => {
              const sc = i.severity === 'critical' ? { bg: cj.burgundyBg, color: cj.burgundy }
                : i.severity === 'high' ? { bg: cj.orangeBg, color: cj.orange }
                : { bg: cj.amberBg, color: cj.amber };
              return (
                <tr key={idx}>
                  <td style={{ ...cj.td, fontWeight: 600 }}>{i.witness}</td>
                  <td style={{ ...cj.td, fontSize: '11px', color: Tcwp.color.text.secondary }}>{i.matter}</td>
                  <td style={{ ...cj.td, fontSize: '11px' }}>{i.kind}</td>
                  <td style={cj.td}><span style={{ ...cj.tag, background: sc.bg, color: sc.color, textTransform: 'uppercase' }}>{i.severity}</span></td>
                  <td style={{ ...cj.td, fontSize: '11px', color: Tcwp.color.text.primary, maxWidth: '360px' }}>{i.description}</td>
                  <td style={{ ...cj.td, fontSize: '10px', color: Tcwp.color.text.tertiary, fontStyle: 'italic' }}>{i.cited || '—'}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// ── Roster (full table) ─────────────────────────────────────────────────
function CjWitnessesRoster({ data }) {
  const cj = window.__cj;
  const [sideFilter, setSideFilter] = useCjWitState('All');
  const [search, setSearch] = useCjWitState('');

  const filtered = data.witnesses.filter(w =>
    (sideFilter === 'All' || w.forSide === sideFilter) &&
    (!search || w.name.toLowerCase().includes(search.toLowerCase()) || w.matter.toLowerCase().includes(search.toLowerCase()))
  );

  return (
    <div style={cj.card}>
      <div style={cj.cardH}>
        <span>Witness roster — {filtered.length}</span>
        <div style={{ display: 'flex', gap: '6px' }}>
          <input value={search} onChange={e => setSearch(e.target.value)} placeholder="Search witness / matter…"
            style={{ padding: '3px 8px', fontSize: '11px', border: `1px solid ${Tcwp.color.border.light}`, borderRadius: '5px', background: Tcwp.color.bg.card, color: Tcwp.color.text.primary, minWidth: '220px', fontFamily: Tcwp.font.family }} />
          <select value={sideFilter} onChange={e => setSideFilter(e.target.value)} style={{ padding: '3px 8px', fontSize: '11px', border: `1px solid ${Tcwp.color.border.light}`, borderRadius: '5px', background: Tcwp.color.bg.card, color: Tcwp.color.text.secondary }}>
            <option value="All">Side: All</option>
            <option value="Government">Side: Government</option>
            <option value="Defense">Side: Defense</option>
          </select>
          <button style={cj.btnPrimary}>+ Add witness</button>
        </div>
      </div>
      <table style={{ width: '100%', borderCollapse: 'collapse' }}>
        <thead>
          <tr>
            <th style={cj.th}>ID</th>
            <th style={cj.th}>Witness</th>
            <th style={cj.th}>Role</th>
            <th style={cj.th}>Matter</th>
            <th style={cj.th}>Side</th>
            <th style={cj.th}>Status</th>
            <th style={{ ...cj.th, textAlign: 'right' }}>Exhibits</th>
            <th style={{ ...cj.th, textAlign: 'right' }}>Testimony</th>
            <th style={cj.th}>Impeachment</th>
            <th style={cj.th}>Prior testimony</th>
          </tr>
        </thead>
        <tbody>
          {filtered.map(w => {
            const sideColor = w.forSide === 'Government' ? { bg: cj.burgundyBg, color: cj.burgundy }
              : { bg: cj.emeraldBg, color: cj.emerald };
            const roleColor = w.role.toLowerCase().includes('cooperator') ? { bg: cj.violetBg, color: cj.violet }
              : w.role.toLowerCase().includes('informant') ? { bg: cj.orangeBg, color: cj.orange }
              : w.role.toLowerCase().includes('expert') ? { bg: cj.cobaltBg, color: cj.cobalt }
              : w.role.toLowerCase().includes('officer') || w.role.toLowerCase().includes('agent') ? { bg: cj.amberBg, color: cj.amber }
              : { bg: Tcwp.color.bg.secondary, color: Tcwp.color.text.secondary };
            return (
              <tr key={w.id}>
                <td style={{ ...cj.td, fontFamily: Tcwp.font.mono, color: cj.burgundy, fontWeight: 700 }}>{w.id}</td>
                <td style={{ ...cj.td, fontWeight: 600, color: Tcwp.color.text.primary, maxWidth: '220px' }}>{w.name}</td>
                <td style={cj.td}><span style={{ ...cj.tag, background: roleColor.bg, color: roleColor.color }}>{w.role}</span></td>
                <td style={{ ...cj.td, color: Tcwp.color.text.secondary, fontSize: '11px' }}>{w.matter}</td>
                <td style={cj.td}><span style={{ ...cj.tag, background: sideColor.bg, color: sideColor.color }}>{w.forSide}</span></td>
                <td style={{ ...cj.td, color: Tcwp.color.text.secondary, fontSize: '11px', maxWidth: '180px' }}>{w.status}</td>
                <td style={{ ...cj.td, textAlign: 'right', fontFamily: Tcwp.font.mono, fontWeight: 700 }}>{w.exhibits}</td>
                <td style={{ ...cj.td, textAlign: 'right', fontFamily: Tcwp.font.mono, fontSize: '11px', color: Tcwp.color.text.secondary }}>{w.testimonyHours}</td>
                <td style={{ ...cj.td, color: w.impeachment.startsWith('N/A') || w.impeachment === 'None identified' ? Tcwp.color.text.tertiary : cj.burgundy, fontSize: '11px', maxWidth: '240px', fontWeight: w.impeachment.startsWith('N/A') ? 400 : 600 }}>{w.impeachment}</td>
                <td style={{ ...cj.td, color: Tcwp.color.text.tertiary, fontSize: '11px', maxWidth: '180px' }}>{w.priorTestimony}</td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

// ── Proofing sessions ───────────────────────────────────────────────────
function CjWitnessesProofing({ data }) {
  const cj = window.__cj;
  const sessions = data.witnessProofing || [];
  const totalMinutes = sessions.reduce((s, p) => s + p.duration, 0);
  const avgReadiness = Math.round(sessions.reduce((s, p) => s + p.readiness, 0) / (sessions.length || 1));
  const needsMore = sessions.filter(p => p.readiness < 80).length;

  return (
    <div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '12px', marginBottom: '16px' }}>
        <div style={cj.stat}><span style={cj.statLabel}>Sessions scheduled</span><span style={cj.statValue}>{sessions.length}</span></div>
        <div style={cj.stat}><span style={cj.statLabel}>Total prep time</span><span style={cj.statValue}>{Math.round(totalMinutes / 60)}<span style={{ fontSize: '12px', color: Tcwp.color.text.tertiary, fontWeight: 500 }}> hrs</span></span></div>
        <div style={cj.stat}><span style={cj.statLabel}>Avg readiness</span><span style={{ ...cj.statValue, color: avgReadiness >= 90 ? cj.emerald : avgReadiness >= 80 ? cj.amber : cj.burgundy }}>{avgReadiness}%</span></div>
        <div style={cj.stat}><span style={cj.statLabel}>Needs more prep</span><span style={{ ...cj.statValue, color: needsMore > 0 ? cj.orange : cj.emerald }}>{needsMore}</span><span style={{ ...cj.statDelta, color: Tcwp.color.text.tertiary }}>readiness &lt; 80%</span></div>
      </div>

      <div style={cj.card}>
        <div style={cj.cardH}>
          <span>Proofing schedule — {sessions.length}</span>
          <button style={cj.btnPrimary}>+ Schedule session</button>
        </div>
        <table style={{ width: '100%', borderCollapse: 'collapse' }}>
          <thead>
            <tr>
              <th style={cj.th}>ID</th>
              <th style={cj.th}>Date</th>
              <th style={cj.th}>Witness</th>
              <th style={cj.th}>Matter</th>
              <th style={cj.th}>Attorney</th>
              <th style={{ ...cj.th, textAlign: 'right' }}>Duration</th>
              <th style={cj.th}>Focus</th>
              <th style={cj.th}>Readiness</th>
              <th style={cj.th}>Notes</th>
            </tr>
          </thead>
          <tbody>
            {sessions.map(p => {
              const rColor = p.readiness >= 90 ? cj.emerald : p.readiness >= 80 ? cj.amber : p.readiness >= 60 ? cj.orange : cj.burgundy;
              return (
                <tr key={p.id}>
                  <td style={{ ...cj.td, fontFamily: Tcwp.font.mono, color: cj.burgundy, fontWeight: 700 }}>{p.id}</td>
                  <td style={{ ...cj.td, fontFamily: Tcwp.font.mono, fontSize: '11px' }}>{p.date}</td>
                  <td style={{ ...cj.td, fontWeight: 600 }}>{p.witness}</td>
                  <td style={{ ...cj.td, fontSize: '11px', color: Tcwp.color.text.secondary }}>{p.matter}</td>
                  <td style={{ ...cj.td, fontSize: '11px', color: Tcwp.color.text.secondary }}>{p.attorney}</td>
                  <td style={{ ...cj.td, textAlign: 'right', fontFamily: Tcwp.font.mono, fontSize: '11px' }}>{p.duration}m</td>
                  <td style={{ ...cj.td, fontSize: '11px', color: Tcwp.color.text.primary, maxWidth: '280px' }}>{p.focus}</td>
                  <td style={cj.td}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
                      <div style={{ width: '70px', height: '6px', background: Tcwp.color.border.light, borderRadius: '3px', overflow: 'hidden' }}>
                        <div style={{ width: `${p.readiness}%`, height: '100%', background: rColor }} />
                      </div>
                      <span style={{ fontFamily: Tcwp.font.mono, fontSize: '11px', fontWeight: 700, color: rColor }}>{p.readiness}%</span>
                    </div>
                  </td>
                  <td style={{ ...cj.td, fontSize: '10px', color: Tcwp.color.text.tertiary, fontStyle: 'italic', maxWidth: '240px' }}>{p.notes}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// ── Exhibits (per-witness exhibit mapping) ─────────────────────────────
function CjWitnessesExhibits({ data }) {
  const cj = window.__cj;
  const exhibitsMap = data.witnessExhibits || {};
  const totalExhibits = Object.values(exhibitsMap).reduce((s, a) => s + a.length, 0);
  const witsWithExhibits = Object.keys(exhibitsMap).length;
  const totalPages = Object.values(exhibitsMap).flat().reduce((s, e) => {
    const startN = parseInt((e.batesStart || '').replace(/\D/g, '').slice(-6), 10);
    const endN   = parseInt((e.batesEnd   || '').replace(/\D/g, '').slice(-6), 10);
    return s + (isFinite(endN - startN) ? Math.max(1, endN - startN + 1) : 4);
  }, 0);

  return (
    <div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '12px', marginBottom: '16px' }}>
        <div style={cj.stat}><span style={cj.statLabel}>Exhibits indexed</span><span style={cj.statValue}>{totalExhibits}</span></div>
        <div style={cj.stat}><span style={cj.statLabel}>Witnesses w/ exhibits</span><span style={cj.statValue}>{witsWithExhibits}</span></div>
        <div style={cj.stat}><span style={cj.statLabel}>Total exhibit pages</span><span style={cj.statValue}>{totalPages.toLocaleString()}</span></div>
        <div style={cj.stat}><span style={cj.statLabel}>Privilege-redacted</span><span style={{ ...cj.statValue, color: cj.amber }}>{Object.values(exhibitsMap).flat().filter(e => e.privilege).length}</span></div>
      </div>

      {Object.entries(exhibitsMap).map(([witId, exhibits]) => {
        const wit = data.witnesses.find(w => w.id === witId);
        if (!wit) return null;
        return (
          <div key={witId} style={cj.card}>
            <div style={cj.cardH}>
              <span style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
                <span style={{ fontFamily: Tcwp.font.mono, color: cj.burgundy, fontWeight: 700 }}>{witId}</span>
                <span style={{ fontWeight: 700 }}>{wit.name}</span>
                <span style={{ ...cj.tag, background: Tcwp.color.bg.secondary, color: Tcwp.color.text.secondary }}>{exhibits.length} exhibits</span>
              </span>
              <span style={{ fontSize: '11px', color: Tcwp.color.text.tertiary }}>{wit.matter}</span>
            </div>
            <table style={{ width: '100%', borderCollapse: 'collapse' }}>
              <thead>
                <tr>
                  <th style={cj.th}>Exhibit</th>
                  <th style={cj.th}>Label</th>
                  <th style={cj.th}>Kind</th>
                  <th style={cj.th}>Bates range</th>
                  <th style={cj.th}>Admitted</th>
                  <th style={cj.th}>Privilege</th>
                </tr>
              </thead>
              <tbody>
                {exhibits.map(e => {
                  const admColor = e.admitted === true ? cj.emerald : e.admitted === false ? cj.burgundy : cj.amber;
                  return (
                    <tr key={e.id}>
                      <td style={{ ...cj.td, fontFamily: Tcwp.font.mono, color: cj.burgundy, fontWeight: 700 }}>{e.id}</td>
                      <td style={{ ...cj.td, fontWeight: 600, maxWidth: '360px' }}>{e.label}</td>
                      <td style={cj.td}><span style={{ ...cj.tag, background: Tcwp.color.bg.secondary, color: Tcwp.color.text.secondary }}>{e.kind}</span></td>
                      <td style={{ ...cj.td, fontFamily: Tcwp.font.mono, fontSize: '11px', color: Tcwp.color.text.secondary }}>{e.batesStart} – {e.batesEnd}</td>
                      <td style={{ ...cj.td, fontSize: '11px', color: admColor, fontWeight: 700 }}>{e.admitted === true ? 'ok Admitted' : e.admitted === false ? 'x Excluded' : e.admitted}</td>
                      <td style={{ ...cj.td, fontSize: '11px', color: e.privilege ? cj.amber : Tcwp.color.text.tertiary, fontStyle: e.privilege ? 'normal' : 'italic' }}>{e.privilege || '—'}</td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        );
      })}
    </div>
  );
}
// ── Impeachment index ──────────────────────────────────────────────────
function CjWitnessesImpeachment({ data }) {
  const cj = window.__cj;
  const items = data.witnessImpeachment || [];
  const bySev = {};
  items.forEach(i => { bySev[i.severity] = (bySev[i.severity] || 0) + 1; });

  return (
    <div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '12px', marginBottom: '16px' }}>
        <div style={cj.stat}><span style={cj.statLabel}>Impeachment items</span><span style={cj.statValue}>{items.length}</span></div>
        <div style={cj.stat}><span style={cj.statLabel}>Critical</span><span style={{ ...cj.statValue, color: cj.burgundy }}>{bySev.critical || 0}</span><span style={{ ...cj.statDelta, color: Tcwp.color.text.tertiary }}>must-use</span></div>
        <div style={cj.stat}><span style={cj.statLabel}>High</span><span style={{ ...cj.statValue, color: cj.orange }}>{bySev.high || 0}</span></div>
        <div style={cj.stat}><span style={cj.statLabel}>Citations wired</span><span style={cj.statValue}>{items.filter(i => i.cited).length}</span><span style={{ ...cj.statDelta, color: Tcwp.color.text.tertiary }}>Giglio / Kyles / Napue</span></div>
      </div>

      <div style={cj.card}>
        <div style={cj.cardH}>Impeachment index — {items.length}</div>
        <table style={{ width: '100%', borderCollapse: 'collapse' }}>
          <thead>
            <tr>
              <th style={cj.th}>Witness</th>
              <th style={cj.th}>Matter</th>
              <th style={cj.th}>Kind</th>
              <th style={cj.th}>Severity</th>
              <th style={cj.th}>Description</th>
              <th style={cj.th}>Source</th>
              <th style={cj.th}>Citation</th>
            </tr>
          </thead>
          <tbody>
            {items.sort((a, b) => {
              const ord = { critical: 0, high: 1, medium: 2, low: 3 };
              return (ord[a.severity] ?? 9) - (ord[b.severity] ?? 9);
            }).map((i, idx) => {
              const sc = i.severity === 'critical' ? { bg: cj.burgundyBg, color: cj.burgundy }
                : i.severity === 'high' ? { bg: cj.orangeBg, color: cj.orange }
                : i.severity === 'medium' ? { bg: cj.amberBg, color: cj.amber }
                : { bg: Tcwp.color.bg.secondary, color: Tcwp.color.text.tertiary };
              return (
                <tr key={idx}>
                  <td style={{ ...cj.td, fontWeight: 600, maxWidth: '200px' }}>{i.witness}</td>
                  <td style={{ ...cj.td, fontSize: '11px', color: Tcwp.color.text.secondary }}>{i.matter}</td>
                  <td style={{ ...cj.td, fontSize: '11px' }}>{i.kind}</td>
                  <td style={cj.td}><span style={{ ...cj.tag, background: sc.bg, color: sc.color, textTransform: 'uppercase' }}>{i.severity}</span></td>
                  <td style={{ ...cj.td, fontSize: '11px', maxWidth: '360px' }}>{i.description}</td>
                  <td style={{ ...cj.td, fontSize: '10px', color: Tcwp.color.text.tertiary, fontFamily: Tcwp.font.mono }}>{i.source}</td>
                  <td style={{ ...cj.td, fontSize: '10px', color: cj.cobalt, fontStyle: 'italic' }}>{i.cited || '—'}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// ── Platform entry ──────────────────────────────────────────────────────
function CriminalWitnessesPlatform({ data }) {
  const [subTab, setSubTab] = useCjWitState('dashboard');
  const cj = window.__cj;

  const subTabs = [
    { id: 'dashboard',   label: 'Dashboard' },
    { id: 'roster',      label: 'Roster' },
    { id: 'proofing',    label: 'Proofing' },
    { id: 'exhibits',    label: 'Exhibits' },
    { id: 'impeachment', label: 'Impeachment' },
  ];

  const renderSub = () => {
    switch (subTab) {
      case 'dashboard':   return <CjWitnessesDashboard   data={data} />;
      case 'roster':      return <CjWitnessesRoster      data={data} />;
      case 'proofing':    return <CjWitnessesProofing    data={data} />;
      case 'exhibits':    return <CjWitnessesExhibits    data={data} />;
      case 'impeachment': return <CjWitnessesImpeachment data={data} />;
      default:            return <CjWitnessesDashboard   data={data} />;
    }
  };

  return (
    <div>
      <div style={{ display: 'flex', gap: '0', borderBottom: `1px solid ${Tcwp.color.border.light}`, marginBottom: '16px' }}>
        {subTabs.map(t => {
          const active = subTab === t.id;
          return (
            <button key={t.id} onClick={() => setSubTab(t.id)}
              style={{
                padding: '8px 14px', fontSize: '11px', fontWeight: active ? 600 : 500,
                color: active ? cj.burgundy : Tcwp.color.text.tertiary,
                background: 'none',
                borderTop: 'none', borderLeft: 'none', borderRight: 'none',
                borderBottom: `2px solid ${active ? cj.burgundy : 'transparent'}`,
                cursor: 'pointer', fontFamily: Tcwp.font.family,
                marginBottom: '-1px', transition: 'color 0.15s',
              }}>
              {t.label}
            </button>
          );
        })}
      </div>
      {renderSub()}
    </div>
  );
}

window.CriminalWitnessesPlatform = CriminalWitnessesPlatform;