// CRIMINAL JUSTICE PLATFORM — Hearings + Witnesses
const Tcjh = window.ArbiterTokens;

function CriminalHearings({ data }) {
  const cj = window.__cj;
  const byUrgency = { critical: 0, high: 0, medium: 0, low: 0 };
  data.hearings.forEach(h => { byUrgency[h.urgency] = (byUrgency[h.urgency] || 0) + 1; });

  // Group hearings by date
  const grouped = {};
  [...data.hearings].sort((a, b) => a.date.localeCompare(b.date)).forEach(h => {
    (grouped[h.date] = grouped[h.date] || []).push(h);
  });

  const urgencyColor = (u) => u === 'critical' ? { bg: cj.burgundyBg, color: cj.burgundy, border: cj.burgundy }
    : u === 'high' ? { bg: cj.orangeBg, color: cj.orange, border: cj.orange }
    : u === 'medium' ? { bg: cj.amberBg, color: cj.amber, border: cj.amber }
    : { bg: Tcjh.color.bg.secondary, color: Tcjh.color.text.tertiary, border: Tcjh.color.border.light };

  return (
    <div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: '12px', marginBottom: '16px' }}>
        <div style={cj.stat}><span style={cj.statLabel}>Upcoming (30 days)</span><span style={cj.statValue}>{data.hearings.length}</span></div>
        <div style={cj.stat}><span style={cj.statLabel}>Critical</span><span style={{ ...cj.statValue, color: cj.burgundy }}>{byUrgency.critical}</span><span style={{ ...cj.statDelta, color: Tcjh.color.text.tertiary }}>trials + sentencings</span></div>
        <div style={cj.stat}><span style={cj.statLabel}>High priority</span><span style={{ ...cj.statValue, color: cj.orange }}>{byUrgency.high}</span></div>
        <div style={cj.stat}><span style={cj.statLabel}>Trials scheduled</span><span style={{ ...cj.statValue, color: cj.burgundy }}>{data.hearings.filter(h => h.type.includes('Trial')).length}</span></div>
        <div style={cj.stat}><span style={cj.statLabel}>Sentencings</span><span style={{ ...cj.statValue, color: cj.orange }}>{data.hearings.filter(h => h.type.toLowerCase().includes('sentencing')).length}</span></div>
      </div>

      <div style={cj.card}>
        <div style={cj.cardH}>
          <span>Hearing calendar · {data.hearings.length} upcoming</span>
          <div style={{ display: 'flex', gap: '10px', fontSize: '10px' }}>
            <span style={{ color: cj.burgundy }}>■ Critical</span>
            <span style={{ color: cj.orange }}>■ High</span>
            <span style={{ color: cj.amber }}>■ Medium</span>
          </div>
        </div>
        {Object.entries(grouped).map(([date, hs]) => (
          <div key={date}>
            <div style={{ padding: '8px 16px', background: Tcjh.color.bg.secondary, fontSize: '11px', fontWeight: 700, color: Tcjh.color.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.06em', display: 'flex', justifyContent: 'space-between' }}>
              <span style={{ fontFamily: Tcjh.font.mono, color: cj.burgundy }}>{date}</span>
              <span>{hs.length} hearing{hs.length > 1 ? 's' : ''}</span>
            </div>
            {hs.map(h => {
              const uc = urgencyColor(h.urgency);
              return (
                <div key={h.id} style={{ padding: '10px 16px', borderBottom: `1px solid ${Tcjh.color.border.light}`, borderLeft: `3px solid ${uc.border}`, display: 'grid', gridTemplateColumns: '80px 200px 1fr 200px 90px', gap: '14px', alignItems: 'center' }}>
                  <span style={{ fontFamily: Tcjh.font.mono, fontSize: '12px', color: uc.color, fontWeight: 700 }}>{h.time}</span>
                  <div>
                    <div style={{ fontSize: '12px', fontWeight: 600, color: Tcjh.color.text.primary }}>{h.defendant}</div>
                    <div style={{ fontSize: '10px', color: Tcjh.color.text.tertiary, fontFamily: Tcjh.font.mono }}>{h.id}</div>
                  </div>
                  <div>
                    <div style={{ fontSize: '12px', fontWeight: 600, color: Tcjh.color.text.primary }}>{h.type}</div>
                    <div style={{ fontSize: '11px', color: Tcjh.color.text.secondary, marginTop: '2px' }}>{h.purpose}</div>
                  </div>
                  <div style={{ fontSize: '11px' }}>
                    <div style={{ color: Tcjh.color.text.primary, fontWeight: 600 }}>{h.court}</div>
                    <div style={{ color: Tcjh.color.text.tertiary }}>{h.judge}</div>
                    <div style={{ color: Tcjh.color.text.tertiary, fontFamily: Tcjh.font.mono, fontSize: '10px' }}>{h.location}</div>
                  </div>
                  <span style={{ ...cj.tag, background: uc.bg, color: uc.color, padding: '4px 12px', justifySelf: 'end' }}>{h.urgency}</span>
                </div>
              );
            })}
          </div>
        ))}
      </div>
    </div>
  );
}

function CriminalWitnesses({ data }) {
  const cj = window.__cj;

  const gov = data.witnesses.filter(w => w.forSide === 'Government').length;
  const def = data.witnesses.filter(w => w.forSide === 'Defense').length;
  const coop = data.witnesses.filter(w => w.role.toLowerCase().includes('cooperator')).length;
  const experts = data.witnesses.filter(w => w.role.toLowerCase().includes('expert')).length;

  return (
    <div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: '12px', marginBottom: '16px' }}>
        <div style={cj.stat}><span style={cj.statLabel}>Witnesses indexed</span><span style={cj.statValue}>{data.kpis.witnessesIdentified}</span><span style={{ ...cj.statDelta, color: Tcjh.color.text.tertiary }}>{data.witnesses.length} curated below</span></div>
        <div style={cj.stat}><span style={cj.statLabel}>Government</span><span style={{ ...cj.statValue, color: cj.burgundy }}>{gov}</span></div>
        <div style={cj.stat}><span style={cj.statLabel}>Defense</span><span style={{ ...cj.statValue, color: cj.emerald }}>{def}</span></div>
        <div style={cj.stat}><span style={cj.statLabel}>Cooperators</span><span style={{ ...cj.statValue, color: cj.violet }}>{coop}</span></div>
        <div style={cj.stat}><span style={cj.statLabel}>Experts</span><span style={{ ...cj.statValue, color: cj.cobalt }}>{experts}</span></div>
      </div>

      <div style={cj.card}>
        <div style={cj.cardH}>Witness inventory · {data.witnesses.length}</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>
            {data.witnesses.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: Tcjh.color.bg.secondary, color: Tcjh.color.text.secondary };
              return (
                <tr key={w.id}>
                  <td style={{ ...cj.td, fontFamily: Tcjh.font.mono, color: cj.burgundy, fontWeight: 700 }}>{w.id}</td>
                  <td style={{ ...cj.td, fontWeight: 600, color: Tcjh.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: Tcjh.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: Tcjh.color.text.secondary, fontSize: '11px', maxWidth: '180px' }}>{w.status}</td>
                  <td style={{ ...cj.td, textAlign: 'right', fontFamily: Tcjh.font.mono, color: Tcjh.color.text.primary, fontWeight: 700 }}>{w.exhibits}</td>
                  <td style={{ ...cj.td, textAlign: 'right', fontFamily: Tcjh.font.mono, color: Tcjh.color.text.secondary, fontSize: '11px' }}>{w.testimonyHours}</td>
                  <td style={{ ...cj.td, color: w.impeachment.startsWith('N/A') || w.impeachment === 'None identified' ? Tcjh.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: Tcjh.color.text.tertiary, fontSize: '11px', maxWidth: '180px' }}>{w.priorTestimony}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

window.CriminalHearings = CriminalHearings;
window.CriminalWitnesses = CriminalWitnesses;