// CRIMINAL JUSTICE PLATFORM — Brady/Giglio + Plea Analysis
const Tcjb = window.ArbiterTokens;

function CriminalBrady({ data }) {
  const cj = window.__cj;
  const b = data.brady;

  const statusColor = (s) => {
    if (s === 'Produced') return { bg: cj.emeraldBg, color: cj.emerald };
    if (s === 'Produced (partial)') return { bg: cj.amberBg, color: cj.amber };
    if (s === 'Pending') return { bg: cj.orangeBg, color: cj.orange };
    if (s === 'Withheld') return { bg: cj.burgundyBg, color: cj.burgundy };
    return { bg: Tcjb.color.bg.secondary, color: Tcjb.color.text.secondary };
  };
  const catColor = (c) => c.includes('Brady') ? { bg: cj.burgundyBg, color: cj.burgundy }
    : c.includes('Giglio') ? { bg: cj.violetBg, color: cj.violet }
    : { bg: cj.cobaltBg, color: cj.cobalt };

  return (
    <div>
      {/* Compliance banner */}
      <div style={{ ...cj.card, borderLeft: `3px solid ${cj.burgundy}`, background: cj.burgundyBg }}>
        <div style={{ padding: '12px 16px' }}>
          <div style={{ fontSize: '12px', fontWeight: 700, color: cj.burgundy, textTransform: 'uppercase', letterSpacing: '0.08em' }}>Brady / Giglio / Jencks — disclosure obligations</div>
          <div style={{ fontSize: '11px', color: Tcjb.color.text.secondary, marginTop: '4px', lineHeight: 1.55 }}>
            Constitutional Brady material (exculpatory) must be produced upon request. Giglio impeachment material covers cooperator benefits, prior inconsistent statements, and witness misconduct.
            Jencks Act material (§ 3500) is due no later than direct examination at trial.
          </div>
        </div>
      </div>

      {/* Summary KPI strip */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: '12px', marginBottom: '16px' }}>
        <div style={cj.stat}><span style={cj.statLabel}>Requests tracked</span><span style={cj.statValue}>{b.summary.totalRequests}</span></div>
        <div style={cj.stat}><span style={cj.statLabel}>Fully produced</span><span style={{ ...cj.statValue, color: cj.emerald }}>{b.summary.produced}</span></div>
        <div style={cj.stat}><span style={cj.statLabel}>Partial / pending</span><span style={{ ...cj.statValue, color: cj.amber }}>{b.summary.partialProduced + b.summary.pending}</span></div>
        <div style={cj.stat}><span style={cj.statLabel}>Withheld</span><span style={{ ...cj.statValue, color: cj.burgundy }}>{b.summary.withheld}</span></div>
        <div style={cj.stat}><span style={cj.statLabel}>Compel motions</span><span style={{ ...cj.statValue, color: cj.orange }}>{b.summary.compelMotions}</span></div>
        <div style={cj.stat}><span style={cj.statLabel}>In-camera pending</span><span style={{ ...cj.statValue, color: cj.violet }}>{b.summary.inCameraReviewsPending}</span></div>
      </div>

      {/* Requests table */}
      <div style={cj.card}>
        <div style={cj.cardH}>
          <span>Brady / Giglio requests · {b.requests.length}</span>
          <button style={cj.btnPrimary}>+ New request</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}>Category</th>
              <th style={cj.th}>Description</th>
              <th style={cj.th}>Filed</th>
              <th style={cj.th}>Status</th>
              <th style={cj.th}>Gov't position</th>
              <th style={cj.th}>Compel</th>
            </tr>
          </thead>
          <tbody>
            {b.requests.map(r => {
              const ss = statusColor(r.status);
              const cc = catColor(r.category);
              return (
                <tr key={r.id}>
                  <td style={{ ...cj.td, fontFamily: Tcjb.font.mono, color: cj.burgundy, fontWeight: 700 }}>{r.id}</td>
                  <td style={{ ...cj.td, fontWeight: 500, color: Tcjb.color.text.primary, maxWidth: '180px' }}>{r.defendant}</td>
                  <td style={cj.td}><span style={{ ...cj.tag, background: cc.bg, color: cc.color }}>{r.category}</span></td>
                  <td style={{ ...cj.td, color: Tcjb.color.text.secondary, fontSize: '11px', maxWidth: '340px', lineHeight: 1.5 }}>{r.description}</td>
                  <td style={{ ...cj.td, fontFamily: Tcjb.font.mono, fontSize: '11px', color: Tcjb.color.text.tertiary }}>{r.filed}</td>
                  <td style={cj.td}><span style={{ ...cj.tag, background: ss.bg, color: ss.color }}>{r.status}</span></td>
                  <td style={{ ...cj.td, color: Tcjb.color.text.secondary, fontSize: '11px', maxWidth: '280px' }}>{r.govtPosition}</td>
                  <td style={cj.td}>{r.compelFiled ? <span style={{ ...cj.tag, background: cj.orangeBg, color: cj.orange }}>ok Filed</span> : <span style={{ fontSize: '10px', color: Tcjb.color.text.tertiary }}>—</span>}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>

      {/* Cooperator Giglio matrix */}
      <div style={cj.card}>
        <div style={{ ...cj.cardH, color: cj.violet }}>Cooperator Giglio matrix — impeachment inventory</div>
        <table style={{ width: '100%', borderCollapse: 'collapse' }}>
          <thead>
            <tr>
              <th style={cj.th}>Cooperator</th>
              <th style={cj.th}>Matter</th>
              <th style={cj.th}>Agreement</th>
              <th style={cj.th}>Benefit sought</th>
              <th style={cj.th}>Prior inconsistent</th>
              <th style={cj.th}>Deportation stake</th>
              <th style={cj.th}>Compelled produced</th>
            </tr>
          </thead>
          <tbody>
            {b.coopMatrix.map((c, i) => (
              <tr key={i}>
                <td style={{ ...cj.td, fontWeight: 600, color: cj.violet }}>{c.cooperator}</td>
                <td style={{ ...cj.td, fontSize: '11px', color: Tcjb.color.text.secondary }}>{c.matter}</td>
                <td style={cj.td}><span style={{ ...cj.tag, background: cj.violetBg, color: cj.violet }}>{c.agreement}</span></td>
                <td style={{ ...cj.td, color: Tcjb.color.text.secondary, fontSize: '11px', maxWidth: '260px' }}>{c.benefitSought}</td>
                <td style={{ ...cj.td, fontSize: '11px', color: c.priorInconsistent.startsWith('0') ? Tcjb.color.text.tertiary : cj.amber, fontWeight: 500 }}>{c.priorInconsistent}</td>
                <td style={cj.td}><span style={{ ...cj.tag, background: c.deportationStake.startsWith('Yes') ? cj.burgundyBg : Tcjb.color.bg.secondary, color: c.deportationStake.startsWith('Yes') ? cj.burgundy : Tcjb.color.text.secondary }}>{c.deportationStake}</span></td>
                <td style={cj.td}>{c.compelProduced ? <span style={{ ...cj.tag, background: cj.emeraldBg, color: cj.emerald }}><Icons.Check size={11}/></span> : <span style={{ ...cj.tag, background: cj.burgundyBg, color: cj.burgundy }}>pending</span>}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

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

  return (
    <div>
      <div style={{ ...cj.card, borderLeft: `3px solid ${cj.cobalt}`, background: cj.cobaltBg }}>
        <div style={{ padding: '12px 16px', fontSize: '12px', color: Tcjb.color.text.secondary, lineHeight: 1.6 }}>
          <div style={{ fontSize: '10px', fontWeight: 700, color: cj.cobalt, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: '4px' }}>◆ Plea Analysis — trial vs offer comparison</div>
          Each card shows the probability-weighted expected sentence if we go to trial versus the offer currently on the table. Cooperation agreements (5K1.1 / Rule 35) are modeled as post-plea departures.
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(460px, 1fr))', gap: '14px' }}>
        {data.pleaAnalysis.map(p => {
          const recColor = p.ourRecommendation.startsWith('Accept') ? cj.emerald
            : p.ourRecommendation.startsWith('Contest') ? cj.burgundy
            : p.ourRecommendation.startsWith('Hold') ? cj.amber
            : cj.cobalt;
          return (
            <div key={p.defendantId} style={{ ...cj.card, marginBottom: 0 }}>
              <div style={{ padding: '12px 14px', borderBottom: `1px solid ${Tcjb.color.border.light}`, background: `linear-gradient(135deg, ${cj.burgundyBg} 0%, transparent 100%)` }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '4px' }}>
                  <span style={{ fontSize: '13px', fontWeight: 700, color: Tcjb.color.text.primary }}>{p.defendant}</span>
                  {p.daysToDecide && <span style={{ ...cj.tag, background: cj.orangeBg, color: cj.orange, fontSize: '11px' }}>Decide in {p.daysToDecide}d</span>}
                </div>
                <div style={{ fontSize: '10px', color: Tcjb.color.text.tertiary, fontFamily: Tcjb.font.mono }}>{p.defendantId}</div>
              </div>
              <div style={{ padding: '14px' }}>
                {/* Trial vs Plea comparison */}
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px', marginBottom: '12px' }}>
                  <div style={{ padding: '10px', background: cj.burgundyBg, borderRadius: '6px', border: `1px solid ${cj.burgundy}22` }}>
                    <div style={{ fontSize: '9px', fontWeight: 700, color: cj.burgundy, textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: '4px' }}>If we go to trial</div>
                    <div style={{ fontSize: '11px', color: Tcjb.color.text.secondary, marginBottom: '6px' }}>Conviction prob: <b style={{ color: cj.burgundy, fontFamily: Tcjb.font.mono }}>{p.trialConvictionProb}%</b></div>
                    <div style={{ fontSize: '18px', fontWeight: 700, color: cj.burgundy, fontFamily: Tcjb.font.mono }}>{p.trialExpected} mo</div>
                    <div style={{ fontSize: '10px', color: Tcjb.color.text.tertiary, fontFamily: Tcjb.font.mono }}>Guide: {p.trialGuideRange}</div>
                  </div>
                  <div style={{ padding: '10px', background: cj.emeraldBg, borderRadius: '6px', border: `1px solid ${cj.emerald}22` }}>
                    <div style={{ fontSize: '9px', fontWeight: 700, color: cj.emerald, textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: '4px' }}>If we take plea</div>
                    <div style={{ fontSize: '11px', color: Tcjb.color.text.secondary, marginBottom: '6px' }}>Expected: <b style={{ color: cj.emerald, fontFamily: Tcjb.font.mono }}>{p.pleaExpected != null ? `${p.pleaExpected} mo` : 'N/A'}</b></div>
                    <div style={{ fontSize: '13px', fontWeight: 700, color: cj.emerald }}>{p.pleaGuideRange}</div>
                    {p.cooperation !== 'N/A' && p.cooperation !== 'None required' && (
                      <div style={{ fontSize: '10px', color: cj.teal, fontWeight: 600, marginTop: '3px' }}> {p.cooperation}</div>
                    )}
                  </div>
                </div>

                {/* Offer details */}
                <div style={{ fontSize: '9px', fontWeight: 700, color: Tcjb.color.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: '4px' }}>Offer on the table</div>
                <div style={{ fontSize: '11px', color: Tcjb.color.text.secondary, lineHeight: 1.5, marginBottom: '8px' }}>{p.pleaOffer}</div>
                {p.restitution && (
                  <div style={{ fontSize: '10px', color: Tcjb.color.text.tertiary, marginBottom: '8px', fontFamily: Tcjb.font.mono }}>Restitution: ${(p.restitution / 1_000_000).toFixed(1)}M</div>
                )}

                {/* Recommendation */}
                <div style={{ paddingTop: '10px', borderTop: `1px solid ${Tcjb.color.border.light}`, display: 'flex', alignItems: 'center', gap: '8px' }}>
                  <span style={{ fontSize: '10px', fontWeight: 700, color: Tcjb.color.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.08em' }}>Our rec:</span>
                  <span style={{ fontSize: '11px', fontWeight: 700, color: recColor }}>{p.ourRecommendation}</span>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

window.CriminalBrady = CriminalBrady;
window.CriminalPlea = CriminalPlea;