// CRIMINAL JUSTICE PLATFORM — Sentencing (USSG) + Motions
const Tcjs = window.ArbiterTokens;

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

  return (
    <div>
      <div style={{ ...cj.card, borderLeft: `3px solid ${cj.burgundy}`, background: cj.burgundyBg }}>
        <div style={{ padding: '12px 16px', fontSize: '12px', color: Tcjs.color.text.secondary, lineHeight: 1.6 }}>
          <div style={{ fontSize: '10px', fontWeight: 700, color: cj.burgundy, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: '4px' }}>◆ U.S. Sentencing Guidelines — calculated ranges</div>
          Each defendant's guideline range is calculated live: base offense level + specific offense characteristics + role adjustments − acceptance of responsibility. <b>§ 3553(a)</b> variances and <b>§ 5K</b> departures are tracked separately. Mandatory minimums override guideline ranges unless safety-valve eligible (§ 3553(f)).
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: '14px' }}>
        {data.sentencing.map(s => {
          const enhancementsSum = s.enhancements.reduce((a, e) => a + e.add, 0);
          const reductionsSum = s.reductions.reduce((a, r) => a + r.sub, 0);
          const departureSum = s.departures.reduce((a, d) => a + (d.direction === 'down' ? -d.proposedReduction : d.proposedReduction), 0);
          const chcColor = cj.chcColor(s.criminalHistoryCategory);
          return (
            <div key={s.defendantId} style={cj.card}>
              {/* Header */}
              <div style={{ padding: '14px 16px', borderBottom: `1px solid ${Tcjs.color.border.light}`, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <div>
                  <div style={{ fontSize: '14px', fontWeight: 700, color: Tcjs.color.text.primary }}>{s.defendant}</div>
                  <div style={{ fontSize: '11px', color: Tcjs.color.text.tertiary, marginTop: '2px' }}>{s.chapter} · hearing {s.hearingDate}</div>
                </div>
                <div style={{ display: 'flex', gap: '10px' }}>
                  <div style={{ textAlign: 'center', padding: '6px 14px', background: cj.burgundyBg, borderRadius: '6px', border: `1px solid ${cj.burgundyBorder}` }}>
                    <div style={{ fontSize: '9px', fontWeight: 700, color: cj.burgundy, textTransform: 'uppercase', letterSpacing: '0.08em' }}>Guide range</div>
                    <div style={{ fontSize: '18px', fontWeight: 700, color: cj.burgundy, fontFamily: Tcjs.font.mono }}>{s.guideLow}-{s.guideHigh} mo</div>
                  </div>
                  <div style={{ textAlign: 'center', padding: '6px 14px', background: `${chcColor}15`, borderRadius: '6px', border: `1px solid ${chcColor}40` }}>
                    <div style={{ fontSize: '9px', fontWeight: 700, color: chcColor, textTransform: 'uppercase', letterSpacing: '0.08em' }}>CHC</div>
                    <div style={{ fontSize: '18px', fontWeight: 700, color: chcColor, fontFamily: Tcjs.font.mono }}>{s.criminalHistoryCategory}</div>
                  </div>
                </div>
              </div>

              {/* 2-column: calculation + positions */}
              <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr' }}>
                {/* Offense-level calculation */}
                <div style={{ padding: '14px 16px', borderRight: `1px solid ${Tcjs.color.border.light}` }}>
                  <div style={{ fontSize: '10px', fontWeight: 700, color: Tcjs.color.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: '10px' }}>Offense-level calculation</div>
                  <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '11px' }}>
                    <tbody>
                      <tr>
                        <td style={{ padding: '5px 0', color: Tcjs.color.text.primary, fontWeight: 500 }}>Base offense level ({s.chapter.split(' — ')[0]})</td>
                        <td style={{ padding: '5px 0', textAlign: 'right', fontFamily: Tcjs.font.mono, fontWeight: 700, color: Tcjs.color.text.primary }}>{s.baseOffenseLevel}</td>
                      </tr>
                      {s.enhancements.map((e, i) => (
                        <tr key={i}>
                          <td style={{ padding: '4px 0', paddingLeft: '12px', color: Tcjs.color.text.secondary, fontSize: '11px' }}>
                            <span style={{ color: cj.burgundy, fontFamily: Tcjs.font.mono, fontWeight: 700 }}>+{e.add}</span> {e.code} — {e.label}
                          </td>
                          <td style={{ padding: '4px 0', textAlign: 'right', fontFamily: Tcjs.font.mono, color: cj.burgundy, fontWeight: 700 }}>+{e.add}</td>
                        </tr>
                      ))}
                      {s.reductions.map((r, i) => (
                        <tr key={i}>
                          <td style={{ padding: '4px 0', paddingLeft: '12px', color: Tcjs.color.text.secondary, fontSize: '11px' }}>
                            <span style={{ color: cj.emerald, fontFamily: Tcjs.font.mono, fontWeight: 700 }}>−{r.sub}</span> {r.code} — {r.label}
                          </td>
                          <td style={{ padding: '4px 0', textAlign: 'right', fontFamily: Tcjs.font.mono, color: cj.emerald, fontWeight: 700 }}>−{r.sub}</td>
                        </tr>
                      ))}
                      <tr style={{ borderTop: `2px solid ${cj.burgundy}` }}>
                        <td style={{ padding: '8px 0 5px', fontWeight: 700, color: Tcjs.color.text.primary, fontSize: '12px' }}>Final offense level</td>
                        <td style={{ padding: '8px 0 5px', textAlign: 'right', fontFamily: Tcjs.font.mono, fontWeight: 700, color: cj.burgundy, fontSize: '16px' }}>{s.finalOffenseLevel}</td>
                      </tr>
                    </tbody>
                  </table>

                  {/* Math trail */}
                  <div style={{ marginTop: '10px', padding: '8px 10px', background: Tcjs.color.bg.secondary, borderRadius: '4px', fontSize: '10px', color: Tcjs.color.text.tertiary, fontFamily: Tcjs.font.mono, lineHeight: 1.6 }}>
                    {s.baseOffenseLevel} (base) + {enhancementsSum} (enhancements) − {reductionsSum} (reductions) = <b style={{ color: cj.burgundy }}>{s.finalOffenseLevel}</b> → Table: Level {s.finalOffenseLevel} × CHC {s.criminalHistoryCategory} = <b style={{ color: cj.burgundy }}>{s.guideLow}-{s.guideHigh} mo</b>
                  </div>
                </div>

                {/* Positions + departures */}
                <div style={{ padding: '14px 16px' }}>
                  <div style={{ fontSize: '10px', fontWeight: 700, color: Tcjs.color.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: '10px' }}>§ 3553(a) variances + departures</div>
                  {s.departures.map((d, i) => (
                    <div key={i} style={{ padding: '8px 10px', background: cj.emeraldBg, borderRadius: '5px', marginBottom: '8px', borderLeft: `3px solid ${cj.emerald}` }}>
                      <div style={{ fontSize: '11px', fontWeight: 600, color: cj.emerald, marginBottom: '2px' }}>{d.code} — {d.label}</div>
                      <div style={{ fontSize: '14px', fontWeight: 700, color: cj.emerald, fontFamily: Tcjs.font.mono }}>−{d.proposedReduction} mo ({d.direction})</div>
                    </div>
                  ))}

                  <div style={{ paddingTop: '8px', borderTop: `1px solid ${Tcjs.color.border.light}`, marginTop: '4px' }}>
                    <div style={{ padding: '6px 0', display: 'flex', justifyContent: 'space-between', fontSize: '11px', alignItems: 'center' }}>
                      <span style={{ fontWeight: 600, color: Tcjs.color.text.secondary }}>Mandatory min</span>
                      <span style={{ fontFamily: Tcjs.font.mono, color: s.mandMin > 0 ? cj.burgundy : Tcjs.color.text.tertiary, fontWeight: 700 }}>{s.mandMin > 0 ? `${s.mandMin} mo` : 'none'}</span>
                    </div>
                    <div style={{ padding: '6px 0', display: 'flex', justifyContent: 'space-between', fontSize: '11px', alignItems: 'center' }}>
                      <span style={{ fontWeight: 600, color: Tcjs.color.text.secondary }}>Stat max</span>
                      <span style={{ fontFamily: Tcjs.font.mono, color: Tcjs.color.text.primary, fontWeight: 700 }}>{s.statMax} mo</span>
                    </div>
                    <div style={{ padding: '6px 0', display: 'flex', justifyContent: 'space-between', fontSize: '11px', alignItems: 'center', background: cj.burgundyBg, marginTop: '4px', padding: '8px', borderRadius: '4px' }}>
                      <span style={{ fontWeight: 700, color: cj.burgundy }}>Gov't asking</span>
                      <span style={{ fontFamily: Tcjs.font.mono, color: cj.burgundy, fontWeight: 700 }}>{s.govtPosition}</span>
                    </div>
                    <div style={{ padding: '6px 0', display: 'flex', justifyContent: 'space-between', fontSize: '11px', alignItems: 'center', background: cj.emeraldBg, marginTop: '4px', padding: '8px', borderRadius: '4px' }}>
                      <span style={{ fontWeight: 700, color: cj.emerald }}>Our position</span>
                      <span style={{ fontFamily: Tcjs.font.mono, color: cj.emerald, fontWeight: 700 }}>{s.ourPosition}</span>
                    </div>
                  </div>

                  <div style={{ marginTop: '10px', fontSize: '10px', color: Tcjs.color.text.tertiary, fontStyle: 'italic', lineHeight: 1.5 }}>{s.notes}</div>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function CriminalMotions({ data }) {
  const cj = window.__cj;
  const filed = data.motions.filter(m => m.status === 'Filed').length;
  const granted = data.motions.filter(m => m.status === 'Granted' || m.status === 'Granted in Part').length;
  const denied = data.motions.filter(m => m.status === 'Denied').length;
  const underSub = data.motions.filter(m => m.status === 'Under Submission').length;

  return (
    <div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: '12px', marginBottom: '16px' }}>
        <div style={cj.stat}><span style={cj.statLabel}>Total motions</span><span style={cj.statValue}>{data.motions.length}</span></div>
        <div style={cj.stat}><span style={cj.statLabel}>Filed (not yet argued)</span><span style={{ ...cj.statValue, color: cj.cobalt }}>{filed}</span></div>
        <div style={cj.stat}><span style={cj.statLabel}>Under submission</span><span style={{ ...cj.statValue, color: cj.violet }}>{underSub}</span></div>
        <div style={cj.stat}><span style={cj.statLabel}>Granted (full/part)</span><span style={{ ...cj.statValue, color: cj.emerald }}>{granted}</span></div>
        <div style={cj.stat}><span style={cj.statLabel}>Denied</span><span style={{ ...cj.statValue, color: cj.burgundy }}>{denied}</span></div>
      </div>

      <div style={cj.card}>
        <div style={cj.cardH}>
          <span>Motions · {data.motions.length}</span>
          <button style={cj.btnPrimary}>+ File motion</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}>Motion type</th>
              <th style={cj.th}>Exposure / Target</th>
              <th style={cj.th}>Our argument</th>
              <th style={cj.th}>Filed</th>
              <th style={cj.th}>Argued</th>
              <th style={cj.th}>Status</th>
              <th style={cj.th}>Ruling</th>
            </tr>
          </thead>
          <tbody>
            {data.motions.map(m => {
              const mc = cj.motionStatus(m.status);
              return (
                <tr key={m.id}>
                  <td style={{ ...cj.td, fontFamily: Tcjs.font.mono, color: cj.burgundy, fontWeight: 700 }}>{m.id}</td>
                  <td style={{ ...cj.td, fontWeight: 500, color: Tcjs.color.text.primary, maxWidth: '180px' }}>{m.defendant}</td>
                  <td style={{ ...cj.td, fontWeight: 600, color: Tcjs.color.text.primary, maxWidth: '240px' }}>{m.type}</td>
                  <td style={{ ...cj.td, color: Tcjs.color.text.secondary, fontSize: '11px', maxWidth: '220px' }}>{m.exposure}</td>
                  <td style={{ ...cj.td, color: Tcjs.color.text.secondary, fontSize: '11px', maxWidth: '260px', fontStyle: 'italic' }}>“{m.ourArg}”</td>
                  <td style={{ ...cj.td, fontFamily: Tcjs.font.mono, fontSize: '11px', color: Tcjs.color.text.tertiary }}>{m.filed}</td>
                  <td style={{ ...cj.td, fontFamily: Tcjs.font.mono, fontSize: '11px', color: Tcjs.color.text.secondary }}>{m.argued || '—'}</td>
                  <td style={cj.td}><span style={{ ...cj.tag, background: mc.bg, color: mc.color }}>{m.status}</span></td>
                  <td style={{ ...cj.td, color: Tcjs.color.text.secondary, fontSize: '11px', maxWidth: '200px' }}>{m.ruling || <span style={{ color: Tcjs.color.text.tertiary, fontStyle: 'italic' }}>pending</span>}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

window.CriminalSentencing = CriminalSentencing;
window.CriminalMotions = CriminalMotions;