// HistoryPage.jsx
function HistoryPage({ precincts }) {
  const t22 = window.TURNOUT_TOTALS_2022;
  const t23 = window.TURNOUT_TOTALS_2023;
  const ev2026 = window.EV_2026_THROUGH_APR30;

  return (
    <div>
      <div className="kpi-row">
        <div className="kpi accent">
          <div className="kpi-label">2026 Early Vote · Through Apr 30</div>
          <div className="kpi-value">{fmtNum(ev2026.total)}</div>
          <div className="kpi-sub">D {fmtNum(ev2026.dem)} · R {fmtNum(ev2026.rep)} · Gen {fmtNum(ev2026.gen)}</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">2022 County Primary EV</div>
          <div className="kpi-value">{fmtNum(t22.ev)}</div>
          <div className="kpi-sub">{fmtPct(t22.ev/t22.total, 0)} of total turnout</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">2023 City Mayoral EV</div>
          <div className="kpi-value">{fmtNum(t23.ev)}</div>
          <div className="kpi-sub">{fmtPct(t23.ev/t23.total, 0)} of total turnout</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">2026 EV vs 2022 EV</div>
          <div className="kpi-value">{fmtSignedPct((ev2026.total - t22.ev)/t22.ev, 0)}</div>
          <div className="kpi-sub">{fmtNum(ev2026.total - t22.ev)} more votes banked</div>
        </div>
      </div>

      <div className="section">
        <div className="section-head"><h2 className="section-title">EV vs Election Day Mix · Past Elections</h2></div>
        <div className="section-body">
          <ElectionStack title="2022 Shelby County Primary (May 3, 2022)" t={t22} />
          <ElectionStack title="2023 City of Memphis Municipal (Oct 5, 2023)" t={t23} />
          <p className="muted" style={{fontSize:12, marginTop:12}}>
            <b>Note:</b> 2022 was a similar county primary (mayoral on the ballot). EV share was 62%.
            2023 was a city-only race with much higher EV share (66%). 2026 EV through Apr 30 is already
            <b> {fmtSignedPct((ev2026.total - t22.ev)/t22.ev, 0)}</b> vs full 2022 EV — strong signal Election Day will be busy.
          </p>
        </div>
      </div>

      <div className="section">
        <div className="section-head"><h2 className="section-title">Top 20 Precincts by 2022 Election Day Volume</h2></div>
        <div className="section-body" style={{padding:0}}>
          <div style={{overflowX:'auto', maxHeight: 500}}>
            <table className="tbl">
              <thead>
                <tr>
                  <th>PCT</th><th>Location</th>
                  <th className="num">Reg</th>
                  <th className="num">2022 EV</th>
                  <th className="num">2022 EDay</th>
                  <th className="num">2022 Total</th>
                  <th className="num">2023 EDay</th>
                  <th className="num">2023 Total</th>
                </tr>
              </thead>
              <tbody>
                {precincts
                  .map(p => ({ p, b22: window.TURNOUT_2022[p.id], b23: window.TURNOUT_2023[p.id] }))
                  .filter(r => r.b22)
                  .sort((a, b) => (b.b22.eday || 0) - (a.b22.eday || 0))
                  .slice(0, 20)
                  .map(({p, b22, b23}) => (
                    <tr key={p.id}>
                      <td><b>{p.id}</b></td>
                      <td>{p.location}<br/><span className="muted" style={{fontSize:11}}>{p.city}</span></td>
                      <td className="num muted">{fmtNum(b22.registered)}</td>
                      <td className="num">{fmtNum(b22.ev)}</td>
                      <td className="num"><b>{fmtNum(b22.eday)}</b></td>
                      <td className="num">{fmtNum(b22.total)}</td>
                      <td className="num">{b23 ? fmtNum(b23.eday) : '—'}</td>
                      <td className="num">{b23 ? fmtNum(b23.total) : '—'}</td>
                    </tr>
                  ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  );
}

function ElectionStack({ title, t }) {
  const evShare = t.ev / t.total;
  const edShare = t.eday / t.total;
  const turnoutShare = t.total / t.registered;
  const restShare = 1 - turnoutShare;
  return (
    <div className="estack">
      <div className="estack-head">
        <b className="estack-title">{title}</b>
        <span className="estack-meta">
          Turnout {fmtPct(turnoutShare, 1)} · {fmtNum(t.total)} of {fmtNum(t.registered)}
        </span>
      </div>
      <div className="stack-bar" aria-label={`EV ${fmtNum(t.ev)}, Election Day ${fmtNum(t.eday)}, Did not vote ${fmtNum(t.registered - t.total)}`}>
        <div className="stack-ev" style={{width: (turnoutShare * evShare * 100) + '%'}} title={`EV ${fmtNum(t.ev)}`}></div>
        <div className="stack-ed" style={{width: (turnoutShare * edShare * 100) + '%'}} title={`EDay ${fmtNum(t.eday)}`}></div>
        <div className="stack-rest" style={{width: (restShare * 100) + '%'}} title="Did not vote"></div>
      </div>
      <div className="estack-legend">
        <span><i className="dot dot-ev" />EV {fmtPct(evShare, 0)} of voters · {fmtNum(t.ev)}</span>
        <span><i className="dot dot-ed" />EDay {fmtPct(edShare, 0)} of voters · {fmtNum(t.eday)}</span>
        <span><i className="dot dot-rest" />{fmtPct(restShare, 0)} did not vote</span>
      </div>
    </div>
  );
}

Object.assign(window, { HistoryPage });