// CRIMINAL JUSTICE PLATFORM — entry (13 tabs)
const { useState: useCjPlatState } = React;
const Tcjp = window.ArbiterTokens;

function CriminalPlatform() {
  const [activeTab, setActiveTab] = useCjPlatState('dashboard');
  const cj = window.__cj;
  const data = window.CRIMINAL_DATA;
  const k = data.kpis;

  const tabs = [
    { id: 'dashboard', label: 'Dashboard' },
    { id: 'defendants', label: 'Defendants' },
    { id: 'charges', label: 'Charges' },
    { id: 'bail', label: 'Bail' },
    { id: 'brady', label: 'Brady / Giglio' },
    { id: 'plea', label: 'Plea Analysis' },
    { id: 'sentencing', label: 'Sentencing' },
    { id: 'motions', label: 'Motions' },
    { id: 'hearings', label: 'Hearings' },
    { id: 'witnesses', label: 'Witnesses' },
    { id: 'investigators', label: 'Investigators' },
    { id: 'post', label: 'Post-Conviction' },
    { id: 'activity', label: 'Activity' },
  ];

  const renderTab = () => {
    switch (activeTab) {
      case 'dashboard': return <CriminalDashboard data={data} />;
      case 'defendants': return <CriminalDefendants data={data} />;
      case 'charges': return <CriminalChargesPlatform data={data} />;
      case 'bail': return <CriminalBail data={data} />;
      case 'brady': return <CriminalBradyPlatform data={data} />;
      case 'plea': return <CriminalPleaPlatform data={data} />;
      case 'sentencing': return <CriminalSentencing data={data} />;
      case 'motions': return <CriminalMotions data={data} />;
      case 'hearings': return <CriminalHearingsPlatform data={data} />;
      case 'witnesses': return <CriminalWitnessesPlatform data={data} />;
      case 'investigators': return <CriminalInvestigatorsPlatform data={data} />;
      case 'post': return <CriminalPostConvictionPlatform data={data} />;
      case 'activity': return <CriminalActivity data={data} />;
      default: return <CriminalDashboard data={data} />;
    }
  };

  return (
    <div style={cj.container}>
      <div style={cj.header}>
        <div style={cj.headerTitle}>
          <div style={cj.cjIcon}>{window.Icons && <window.Icons.Criminal size={16} color="#fff" strokeWidth={1.75} />}</div>
          <div>
            <div style={cj.title}>Criminal Justice Platform</div>
            <div style={cj.subtitle}>Defense · Charges · Bail · Brady / Giglio · Plea Analysis · USSG Sentencing · Motions · Hearings · Witnesses · Investigators · Post-Conviction</div>
          </div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '6px 14px', borderRadius: '8px', background: Tcjp.color.bg.secondary, border: `1px solid ${Tcjp.color.border.light}` }}>
            <span style={{ fontSize: '10px', fontWeight: 600, color: Tcjp.color.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Defendants</span>
            <span style={{ fontSize: '14px', fontWeight: 700, color: Tcjp.color.text.primary, fontFamily: Tcjp.font.mono }}>{k.activeDefendants}</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '6px 14px', borderRadius: '8px', background: cj.burgundyBg, border: `1px solid ${cj.burgundyBorder}` }}>
            <span style={{ fontSize: '10px', fontWeight: 600, color: cj.burgundy, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Detained</span>
            <span style={{ fontSize: '14px', fontWeight: 700, color: cj.burgundy, fontFamily: Tcjp.font.mono }}>{k.detained}</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '6px 14px', borderRadius: '8px', background: cj.orangeBg, border: `1px solid ${cj.orange}22` }}>
            <span style={{ fontSize: '10px', fontWeight: 600, color: cj.orange, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Trials Q</span>
            <span style={{ fontSize: '14px', fontWeight: 700, color: cj.orange, fontFamily: Tcjp.font.mono }}>{k.trialsThisQuarter}</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '6px 14px', borderRadius: '8px', background: cj.amberBg, border: `1px solid ${cj.amber}22` }}>
            <span style={{ fontSize: '10px', fontWeight: 600, color: cj.amber, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Motions</span>
            <span style={{ fontSize: '14px', fontWeight: 700, color: cj.amber, fontFamily: Tcjp.font.mono }}>{k.motionsPending}</span>
          </div>
          <button style={cj.btnPrimary}>+ New defendant</button>
        </div>
      </div>

      <div style={{ ...cj.tabs, overflowX: 'auto' }}>
        {tabs.map(t => (
          <button key={t.id} onClick={() => setActiveTab(t.id)}
            style={{ ...cj.tab, ...(activeTab === t.id ? cj.tabActive : {}) }}>
            {t.label}
          </button>
        ))}
      </div>

      <div style={cj.body}>
        {renderTab()}
      </div>
    </div>
  );
}

window.CriminalPlatform = CriminalPlatform;