// 04 · The Enforcement Machine — where the data says what it says.

function TabEnforcement() {
  const [hoverYear, setHoverYear] = React.useState(null);
  const data = window.enforcementData;
  const W = 1320, H = 380, pad = { l: 70, r: 20, t: 10, b: 40 };
  const innerW = W - pad.l - pad.r;
  const innerH = H - pad.t - pad.b;
  const maxRemovals = Math.max(...data.map(d => d.removals));

  const x = (yr) => pad.l + ((yr - 1892) / (2026 - 1892)) * innerW;
  const barW = Math.max(1.5, innerW / data.length - 0.5);

  const hovered = hoverYear != null ? data.find(d => d.year === hoverYear) : null;

  return (
    <div style={{ padding: '32px 56px 80px' }}>
      <Eyebrow id="04 · THE ENFORCEMENT MACHINE"
        title="This is where the data says what it says."
        right="DHS · ICE · TRAC FOIA · 1892–2026" />

      {/* Stat block */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginBottom: 32 }}>
        <Readout label="AVG REMOVALS 1892–1995" value="17k" sub="103 years" accent="#8A7E6A" />
        <Readout label="AVG REMOVALS 2001–2022" value="296k" sub="An order of magnitude" accent="#C0392B" />
        <Readout label="TOTAL REMOVALS 2001–2022" value="6.5M" sub="ICE era" accent="#C0392B" />
        <Readout label="FY2026 PACE" value="460k" sub="On pace to exceed" accent="#C0392B" size={28} />
      </div>

      {/* Main enforcement timeline */}
      <div style={{ border: '1px solid #2A2218', background: 'rgba(30,24,16,0.3)', padding: '18px 24px 12px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 12 }}>
          <span className="serif" style={{ fontSize: 19, color: '#D4C8B8' }}>
            Annual deportations and removals, 1892–2026
          </span>
          <Confidence level="high" />
        </div>

        <svg width={W} height={H} style={{ display: 'block' }}>
          {/* Grid */}
          {[0.25, 0.5, 0.75, 1.0].map(t => {
            const yy = pad.t + innerH - t * innerH;
            return (
              <g key={t}>
                <line x1={pad.l} x2={W - pad.r} y1={yy} y2={yy} stroke="#2A2218" strokeWidth="0.5" />
                <text x={pad.l - 8} y={yy + 3} textAnchor="end" className="mono"
                  fill="#5A4E3A" fontSize="9" fontFamily="Space Mono">
                  {fmt(Math.round(maxRemovals * t))}
                </text>
              </g>
            );
          })}

          {/* IIRIRA marker */}
          <line x1={x(1996)} x2={x(1996)} y1={pad.t} y2={pad.t + innerH}
            stroke="#C9A84C" strokeWidth="1" strokeDasharray="3 3" opacity="0.6" />
          <text x={x(1996)} y={pad.t - 4} textAnchor="middle"
            className="mono" fill="#C9A84C" fontSize="9" fontFamily="Space Mono">
            IIRIRA 1996
          </text>

          {/* Bars */}
          {data.map(d => {
            const h = (d.removals / maxRemovals) * innerH;
            const bx = x(d.year);
            const by = pad.t + innerH - h;
            const isHovered = hoverYear === d.year;

            return (
              <rect key={d.year} x={bx} y={by} width={barW} height={h}
                fill={d.projected ? '#C0392B' : '#C0392B'}
                opacity={d.projected ? 0.5 : (isHovered ? 1 : 0.85)}
                strokeDasharray={d.projected ? '3 2' : 'none'}
                stroke={d.projected ? '#C0392B' : (isHovered ? '#F2EBD9' : 'none')}
                strokeWidth={isHovered ? 1 : (d.projected ? 0.8 : 0)}
                onMouseEnter={() => setHoverYear(d.year)}
                onMouseLeave={() => setHoverYear(null)}
                style={{ cursor: 'pointer' }}
              />
            );
          })}

          {/* Decade axis */}
          {Array.from({ length: 14 }).map((_, i) => {
            const yr = 1890 + i * 10;
            if (yr > 2026) return null;
            return (
              <text key={yr} x={x(yr)} y={H - 4} textAnchor="middle"
                className="mono" fill="#5A4E3A" fontSize="9" fontFamily="Space Mono">
                {yr}
              </text>
            );
          })}
        </svg>
      </div>

      {/* Hover detail */}
      {hovered && (
        <div style={{
          marginTop: 12, padding: '12px 20px', background: '#1E1810', border: '1px solid #2A2218',
          display: 'flex', gap: 32, alignItems: 'baseline',
        }}>
          <span className="mono" style={{ color: '#C9A84C', fontSize: 16, fontWeight: 700 }}>{hovered.year}</span>
          <span className="mono" style={{ color: '#C0392B', fontSize: 20, fontWeight: 700 }}>
            {hovered.removals.toLocaleString()} removals
          </span>
          {hovered.criminalPct != null && (
            <span className="mono" style={{ color: '#8A7E6A', fontSize: 12 }}>
              {Math.round(hovered.criminalPct * 100)}% criminal record
            </span>
          )}
          {hovered.projected && (
            <span className="mono" style={{ color: '#C0392B', fontSize: 10, letterSpacing: 0.2 }}>ESTIMATED</span>
          )}
        </div>
      )}

      {/* Three secondary panels */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginTop: 32 }}>
        {/* Criminal vs non-criminal */}
        <div style={{ border: '1px solid #2A2218', background: 'rgba(30,24,16,0.3)', padding: '18px 20px' }}>
          <Tick color="#C9A84C">{'▌'} CRIMINAL VS NON-CRIMINAL</Tick>
          <div className="serif" style={{ color: '#8A7E6A', fontSize: 13, marginTop: 10, lineHeight: 1.5 }}>
            The percentage of removals involving people with criminal records versus people with no criminal history has shifted significantly across administrations. The trend in this ratio is one of the most significant findings in the dataset.
          </div>
          <div style={{ marginTop: 16 }}>
            {[
              { label: '2008–2016 (Obama)', criminal: '55%', color: '#C9A84C' },
              { label: '2017–2020 (Trump I)', criminal: '35%', color: '#FDAE61' },
              { label: '2025–2026 (Trump II)', criminal: '32%', color: '#C0392B' },
            ].map(r => (
              <div key={r.label} style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 0', borderBottom: '1px solid #1A1510' }}>
                <span className="mono" style={{ color: '#8A7E6A', fontSize: 11 }}>{r.label}</span>
                <span className="mono" style={{ color: r.color, fontSize: 11, fontWeight: 700 }}>{r.criminal} criminal</span>
              </div>
            ))}
          </div>
          <Confidence level="high" />
        </div>

        {/* Detention population */}
        <div style={{ border: '1px solid #2A2218', background: 'rgba(30,24,16,0.3)', padding: '18px 20px' }}>
          <Tick color="#C9A84C">{'▌'} DETENTION POPULATION</Tick>
          <div className="serif" style={{ color: '#8A7E6A', fontSize: 13, marginTop: 10, lineHeight: 1.5 }}>
            People held in immigration detention on any given day. Uses GAO-corrected figures {'—'} ICE understates total detention by excluding tens of thousands booked into temporary facilities.
          </div>
          <div style={{ marginTop: 16 }}>
            <Readout label="DAILY AVERAGE 2023" value="38,200" sub="GAO-corrected" accent="#C0392B" size={24} />
          </div>
          <div className="mono" style={{ color: '#5A4E3A', fontSize: 9, marginTop: 8 }}>
            Source: GAO-24-106233
          </div>
        </div>

        {/* Cost per removal */}
        <div style={{ border: '1px solid #2A2218', background: 'rgba(30,24,16,0.3)', padding: '18px 20px' }}>
          <Tick color="#C9A84C">{'▌'} ENFORCEMENT SPENDING PER REMOVAL</Tick>
          <div className="serif" style={{ color: '#8A7E6A', fontSize: 13, marginTop: 10, lineHeight: 1.5 }}>
            The cost of the system divided by its output, year by year. No commentary. The number speaks.
          </div>
          <div style={{ marginTop: 16 }}>
            <Readout label="EST. COST PER REMOVAL FY2025" value="$10,900" sub="ICE + CBP combined budget / removals" accent="#C0392B" size={24} />
          </div>
          <div className="mono" style={{ color: '#5A4E3A', fontSize: 9, marginTop: 8 }}>
            Source: DHS budget + ICE removal data
          </div>
        </div>
      </div>

      {/* The finding */}
      <div style={{ marginTop: 32, padding: '20px 28px', border: '1px solid #2A2218', background: 'rgba(30,24,16,0.5)' }}>
        <HRule>NOTABLE FINDING</HRule>
        <div className="serif" style={{ color: '#D4C8B8', fontSize: 16, marginTop: 16, lineHeight: 1.6, textAlign: 'center', maxWidth: 800, margin: '16px auto 0' }}>
          From 1990 to 2018, Democratic presidents removed an average of 246,006 people per year versus 205,453 for Republican presidents. The data is the data. The app shows all of it.
        </div>
        <div style={{ textAlign: 'center', marginTop: 12 }}>
          <Confidence level="high" />
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { TabEnforcement });