// CRIMINAL JUSTICE PLATFORM — Investigators + Post-Conviction + Activity
const Tcja = window.ArbiterTokens;

function CriminalInvestigators({ data }) {
  const cj = window.__cj;
  const totalHours = data.investigators.reduce((s, i) => s + i.hoursMTD, 0);
  const totalRemaining = data.investigators.reduce((s, i) => s + i.budgetRemain, 0);

  const typeColor = (t) => {
    if (t.includes('Digital')) return { bg: cj.cobaltBg, color: cj.cobalt };
    if (t.includes('Forensic accounting')) return { bg: cj.emeraldBg, color: cj.emerald };
    if (t.includes('Franks')) return { bg: cj.burgundyBg, color: cj.burgundy };
    if (t.includes('Jury')) return { bg: cj.violetBg, color: cj.violet };
    return { bg: cj.amberBg, color: cj.amber };
  };

  return (
    <div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '12px', marginBottom: '16px' }}>
        <div style={cj.stat}><span style={cj.statLabel}>Active engagements</span><span style={cj.statValue}>{data.investigators.length}</span></div>
        <div style={cj.stat}><span style={cj.statLabel}>Hours MTD</span><span style={cj.statValue}>{totalHours}</span></div>
        <div style={cj.stat}><span style={cj.statLabel}>Budget remaining</span><span style={{ ...cj.statValue, color: cj.emerald }}>${(totalRemaining / 1000).toFixed(0)}K</span></div>
        <div style={cj.stat}><span style={cj.statLabel}>Firms engaged</span><span style={cj.statValue}>{new Set(data.investigators.map(i => i.firm)).size}</span></div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(440px, 1fr))', gap: '14px' }}>
        {data.investigators.map(i => {
          const tc = typeColor(i.type);
          return (
            <div key={i.id} style={{ ...cj.card, marginBottom: 0 }}>
              <div style={{ padding: '12px 14px', borderBottom: `1px solid ${Tcja.color.border.light}`, background: `linear-gradient(135deg, ${tc.bg} 0%, transparent 100%)` }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '4px' }}>
                  <span style={{ ...cj.tag, background: tc.bg, color: tc.color, fontSize: '11px', padding: '3px 10px' }}>{i.type}</span>
                  <span style={{ fontSize: '10px', fontFamily: Tcja.font.mono, color: Tcja.color.text.tertiary }}>{i.id}</span>
                </div>
                <div style={{ fontSize: '13px', fontWeight: 700, color: Tcja.color.text.primary }}>{i.firm}</div>
                <div style={{ fontSize: '11px', color: Tcja.color.text.tertiary, marginTop: '2px' }}>Lead: {i.lead} · {i.matter}</div>
              </div>
              <div style={{ padding: '14px' }}>
                <div style={{ fontSize: '9px', fontWeight: 700, color: Tcja.color.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: '4px' }}>Focus</div>
                <div style={{ fontSize: '11px', color: Tcja.color.text.secondary, lineHeight: 1.55, marginBottom: '12px' }}>{i.focus}</div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px', paddingTop: '10px', borderTop: `1px solid ${Tcja.color.border.light}` }}>
                  <div>
                    <div style={{ fontSize: '9px', color: Tcja.color.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Hours MTD</div>
                    <div style={{ fontSize: '18px', fontWeight: 700, color: tc.color, fontFamily: Tcja.font.mono }}>{i.hoursMTD}</div>
                  </div>
                  <div>
                    <div style={{ fontSize: '9px', color: Tcja.color.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Budget remaining</div>
                    <div style={{ fontSize: '18px', fontWeight: 700, color: cj.emerald, fontFamily: Tcja.font.mono }}>${(i.budgetRemain / 1000).toFixed(0)}K</div>
                  </div>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function CriminalPostConviction({ data }) {
  const cj = window.__cj;
  const byType = {};
  data.postConviction.forEach(p => { byType[p.type] = (byType[p.type] || 0) + 1; });
  const active = data.postConviction.filter(p => p.status !== 'Closed').length;

  const likelyColor = (l) => l === 'High' ? cj.emerald : l === 'Moderate' ? cj.amber : l === 'Low-moderate' ? cj.orange : cj.burgundy;

  return (
    <div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: '12px', marginBottom: '16px' }}>
        <div style={cj.stat}><span style={cj.statLabel}>Active petitions</span><span style={cj.statValue}>{active}</span></div>
        <div style={cj.stat}><span style={cj.statLabel}>§ 2255</span><span style={{ ...cj.statValue, color: cj.burgundy }}>{byType['§ 2255 Motion'] || 0}</span><span style={{ ...cj.statDelta, color: Tcja.color.text.tertiary }}>collateral attacks</span></div>
        <div style={cj.stat}><span style={cj.statLabel}>Direct appeals</span><span style={{ ...cj.statValue, color: cj.cobalt }}>{byType['Direct appeal (11th Cir.)'] || 0}</span></div>
        <div style={cj.stat}><span style={cj.statLabel}>Compassionate release</span><span style={{ ...cj.statValue, color: cj.amber }}>{byType['Compassionate release (§ 3582(c)(1)(A))'] || 0}</span></div>
        <div style={cj.stat}><span style={cj.statLabel}>Clemency / FSA</span><span style={{ ...cj.statValue, color: cj.violet }}>{(byType['Clemency petition'] || 0) + (byType['First Step Act retroactive'] || 0)}</span></div>
      </div>

      <div style={cj.card}>
        <div style={cj.cardH}>
          <span>Post-conviction petitions · {data.postConviction.length}</span>
          <button style={cj.btnPrimary}>+ File petition</button>
        </div>
        <table style={{ width: '100%', borderCollapse: 'collapse' }}>
          <thead>
            <tr>
              <th style={cj.th}>ID</th>
              <th style={cj.th}>Defendant</th>
              <th style={cj.th}>Type</th>
              <th style={cj.th}>Filed</th>
              <th style={cj.th}>Hearing</th>
              <th style={cj.th}>Ground</th>
              <th style={cj.th}>Status</th>
              <th style={cj.th}>Likelihood</th>
            </tr>
          </thead>
          <tbody>
            {data.postConviction.map(p => {
              const lc = likelyColor(p.likelihood);
              return (
                <tr key={p.id}>
                  <td style={{ ...cj.td, fontFamily: Tcja.font.mono, color: cj.burgundy, fontWeight: 700 }}>{p.id}</td>
                  <td style={{ ...cj.td, fontWeight: 500, color: Tcja.color.text.primary, maxWidth: '180px' }}>{p.defendant}</td>
                  <td style={{ ...cj.td, fontWeight: 600, color: Tcja.color.text.primary, maxWidth: '220px', fontSize: '11px' }}>{p.type}</td>
                  <td style={{ ...cj.td, fontFamily: Tcja.font.mono, fontSize: '11px', color: Tcja.color.text.tertiary }}>{p.filed}</td>
                  <td style={{ ...cj.td, fontFamily: Tcja.font.mono, fontSize: '11px', color: Tcja.color.text.secondary }}>{p.hearing}</td>
                  <td style={{ ...cj.td, color: Tcja.color.text.secondary, fontSize: '11px', maxWidth: '320px', lineHeight: 1.5 }}>{p.ground}</td>
                  <td style={{ ...cj.td, color: Tcja.color.text.secondary, fontSize: '11px' }}>{p.status}</td>
                  <td style={cj.td}><span style={{ ...cj.tag, background: `${lc}18`, color: lc }}>{p.likelihood}</span></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function CriminalActivity({ data }) {
  const cj = window.__cj;
  const sev = (s) => s === 'error' ? { bg: cj.burgundyBg, color: cj.burgundy }
    : s === 'warn' ? { bg: cj.amberBg, color: cj.amber }
    : { bg: cj.emeraldBg, color: cj.emerald };

  return (
    <div style={cj.card}>
      <div style={cj.cardH}>
        <span>Activity log — {data.activity.length} events</span>
        <button style={cj.btnSecondary}>Export CSV</button>
      </div>
      <table style={{ width: '100%', borderCollapse: 'collapse' }}>
        <thead>
          <tr>
            <th style={cj.th}>Time</th>
            <th style={cj.th}>Actor</th>
            <th style={cj.th}>Action</th>
            <th style={cj.th}>Target</th>
            <th style={cj.th}>Severity</th>
          </tr>
        </thead>
        <tbody>
          {data.activity.map(ev => {
            const ss = sev(ev.severity);
            return (
              <tr key={ev.id}>
                <td style={{ ...cj.td, fontFamily: Tcja.font.mono, color: Tcja.color.text.tertiary, fontSize: '11px' }}>{ev.time}</td>
                <td style={{ ...cj.td, color: Tcja.color.text.primary, fontWeight: 500 }}>
                  <span style={{ display: 'inline-block', width: '6px', height: '6px', borderRadius: '50%', background: ss.color, marginRight: '8px' }} />
                  {ev.actor}
                </td>
                <td style={{ ...cj.td, color: Tcja.color.text.secondary }}>{ev.action}</td>
                <td style={{ ...cj.td, color: Tcja.color.text.primary, fontWeight: 500, maxWidth: '440px' }}>{ev.target}</td>
                <td style={cj.td}><span style={{ ...cj.tag, background: ss.bg, color: ss.color }}>{ev.severity}</span></td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

window.CriminalInvestigators = CriminalInvestigators;
window.CriminalPostConviction = CriminalPostConviction;
window.CriminalActivity = CriminalActivity;