/* ─── District Heatmap Page ───────────────────────────────────────── */

function MapPage() {
  const { year, subject, navigateToDistrict } = useApp();
  const data = window.CMAS;

  // Sort districts by proficiency for a visual ranking view
  const districtRows = useMemo(() => {
    return data.districts
      .map(d => {
        const sd = d.years?.[year]?.[subject] || {};
        return {
          code: d.code,
          name: d.name,
          pct: sd.pct,
          rank: sd.stateRank,
          total: sd.stateTotal,
          pctile: sd.statePctile,
        };
      })
      .sort((a, b) => (a.rank ?? 999) - (b.rank ?? 999));
  }, [data, year, subject]);

  function heatColor(pct) {
    if (pct == null) return "var(--bg4)";
    if (pct >= 60) return "rgba(16,185,129,0.7)";
    if (pct >= 45) return "rgba(16,185,129,0.4)";
    if (pct >= 35) return "rgba(245,158,11,0.5)";
    if (pct >= 20) return "rgba(244,63,94,0.4)";
    return "rgba(244,63,94,0.6)";
  }

  return (
    <div>
      <div className="page-header">
        <h1 className="page-header-title">District Heatmap</h1>
        <p className="page-header-sub">{subject} — % Met or Exceeded Expectations — {year}</p>
      </div>

      {/* ── Geographic Map ─────────────────────────────────────────── */}
      <div className="p-section">
        <div className="card">
          <div className="card-head">
            <div className="card-title">Colorado School Districts — {subject} {year}</div>
            <div style={{ fontSize: 12, color: "var(--text3)" }}>Click a district for details</div>
          </div>
          <div className="card-body">
            <ColoradoDistrictMap
              year={year}
              subject={subject}
              onDistrictClick={(code) => navigateToDistrict(code)}
            />
          </div>
        </div>
      </div>

      {/* ── Tile Grid ──────────────────────────────────────────────── */}
      <div className="p-section">
        <div className="card">
          <div className="card-head">
            <div className="card-title">All Districts Ranked — {subject} {year}</div>
            <div style={{ fontSize: 12, color: "var(--text3)" }}>{districtRows.length} districts</div>
          </div>
          <div className="card-body">
            {/* Color legend */}
            <div style={{ display: "flex", gap: 12, marginBottom: 16, alignItems: "center" }}>
              <span style={{ fontSize: 12, color: "var(--text3)" }}>Low</span>
              {[10, 25, 35, 50, 65].map(v => (
                <div key={v} style={{
                  width: 32, height: 12, borderRadius: 3,
                  background: heatColor(v),
                }} />
              ))}
              <span style={{ fontSize: 12, color: "var(--text3)" }}>High</span>
            </div>

            {/* Grid of district tiles */}
            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: 8 }}>
              {districtRows.map(d => (
                <div
                  key={d.code}
                  onClick={() => navigateToDistrict(d.code)}
                  style={{
                    background: heatColor(d.pct),
                    borderRadius: 8,
                    padding: "10px 14px",
                    cursor: "pointer",
                    transition: "all 200ms ease",
                    border: "1px solid rgba(255,255,255,0.06)",
                  }}
                  onMouseEnter={e => e.currentTarget.style.transform = "scale(1.02)"}
                  onMouseLeave={e => e.currentTarget.style.transform = "scale(1)"}
                >
                  <div style={{ fontSize: 12, fontWeight: 600, color: "var(--text)", marginBottom: 2 }}>
                    {d.name.length > 25 ? d.name.slice(0, 23) + "…" : d.name}
                  </div>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                    <span style={{ fontSize: 16, fontWeight: 700, fontFamily: "var(--font-head)", color: "#fff" }}>
                      {d.pct != null ? d.pct.toFixed(1) + "%" : "—"}
                    </span>
                    <span style={{ fontSize: 11, color: "rgba(255,255,255,0.7)" }}>
                      #{d.rank || "—"}
                    </span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}