/* ─── Rankings Page ───────────────────────────────────────────────── */

function RankingsPage() {
  const { selectedSchool, year, subject, navigateToSchool } = useApp();
  const data = window.CMAS;
  const psatData = window.PSAT;
  const [schoolTypeFilter, setSchoolTypeFilter] = useState("all");
  const [satSubject, setSatSubject] = useState("SAT ERW");

  const school = selectedSchool ? getSchool(selectedSchool.districtCode, selectedSchool.schoolCode) : null;
  const sd = school?.years?.[year]?.[subject] || {};

  const TYPE_TABS = [
    { id: "all", label: "All" },
    { id: "elementary", label: "Elementary" },
    { id: "middle", label: "Middle" },
    { id: "high", label: "High" },
  ];

  // Helper: filter schools by type
  const filterByType = (schools) => {
    if (schoolTypeFilter === "all") return schools;
    return schools.filter(s => (s.types || []).includes(schoolTypeFilter));
  };

  // Helper: get the right pct for current type filter
  const getSchoolPct = (s) => {
    if (schoolTypeFilter !== "all") {
      const tp = s.years?.[year]?.[subject]?.tierPct?.[schoolTypeFilter];
      if (tp != null) return tp;
    }
    return s.years?.[year]?.[subject]?.pct;
  };

  // Helper: get the right rank info for current school + type
  const getTypeRank = () => {
    if (!school || !sd) return null;
    if (schoolTypeFilter !== "all" && sd.typeRanks?.[schoolTypeFilter]) {
      const tr = sd.typeRanks[schoolTypeFilter];
      return { rank: tr.r, total: tr.t, pctile: tr.p };
    }
    return { rank: sd.stateRank, total: sd.stateTotal, pctile: sd.statePctile };
  };

  // All schools' proficiency for histogram (filtered by type)
  const allSchoolPcts = useMemo(() => {
    return filterByType(data.schools)
      .map(s => getSchoolPct(s))
      .filter(v => v != null);
  }, [data, year, subject, schoolTypeFilter]);

  // District schools for in-district ranking (filtered by type)
  const districtSchools = useMemo(() => {
    if (!school) return [];
    const filtered = filterByType(
      data.schools.filter(s => s.districtCode === school.districtCode)
    );
    return filtered
      .map(s => {
        const pct = getSchoolPct(s);
        return { label: s.name, value: pct, code: s.code, districtCode: s.districtCode };
      })
      .sort((a, b) => (b.value ?? -1) - (a.value ?? -1));
  }, [data, school, year, subject, schoolTypeFilter]);

  const highlightIdx = districtSchools.findIndex(
    s => school && s.code === school.code && s.districtCode === school.districtCode
  );

  // Scatter plot: Math vs ELA (filtered by type)
  const scatterPoints = useMemo(() => {
    return filterByType(data.schools)
      .map(s => {
        const getMathPct = () => {
          if (schoolTypeFilter !== "all") {
            const tp = s.years?.[year]?.Math?.tierPct?.[schoolTypeFilter];
            if (tp != null) return tp;
          }
          return s.years?.[year]?.Math?.pct;
        };
        const getElaPct = () => {
          if (schoolTypeFilter !== "all") {
            const tp = s.years?.[year]?.ELA?.tierPct?.[schoolTypeFilter];
            if (tp != null) return tp;
          }
          return s.years?.[year]?.ELA?.pct;
        };
        const mathPct = getMathPct();
        const elaPct = getElaPct();
        if (mathPct == null || elaPct == null) return null;
        return {
          x: mathPct,
          y: elaPct,
          label: s.name,
          key: s.districtCode + "_" + s.code,
        };
      })
      .filter(Boolean);
  }, [data, year, schoolTypeFilter]);

  const highlightKeys = school ? [school.districtCode + "_" + school.code] : [];

  // Type counts
  const typeCounts = useMemo(() => ({
    all: data.schools.length,
    elementary: data.schools.filter(s => (s.types || []).includes("elementary")).length,
    middle: data.schools.filter(s => (s.types || []).includes("middle")).length,
    high: data.schools.filter(s => (s.types || []).includes("high")).length,
  }), [data]);

  // ── SAT Rankings (only when "High" tab is active) ──
  const satSchoolForSelected = useMemo(() => {
    if (!school || !psatData) return null;
    const key = `${school.districtCode}_${school.code}`;
    const idx = psatData.schoolIndex?.[key];
    return idx != null ? psatData.schools[idx] : null;
  }, [school, psatData]);

  const satRankings = useMemo(() => {
    if (!psatData || schoolTypeFilter !== "high") return [];
    return psatData.schools
      .filter(s => s.years?.[year]?.[satSubject]?.pct != null)
      .map(s => ({
        code: s.code,
        districtCode: s.districtCode,
        name: s.name,
        districtName: s.districtName,
        pct: s.years[year][satSubject].pct,
        meanScore: s.years[year][satSubject].meanScore,
        stateRank: s.years[year][satSubject].stateRank,
        stateTotal: s.years[year][satSubject].stateTotal,
        statePctile: s.years[year][satSubject].statePctile,
      }))
      .sort((a, b) => (b.pct ?? -1) - (a.pct ?? -1));
  }, [psatData, year, satSubject, schoolTypeFilter]);

  const satAllPcts = useMemo(() => {
    return satRankings.map(s => s.pct).filter(v => v != null);
  }, [satRankings]);

  const satSelectedData = useMemo(() => {
    if (!satSchoolForSelected) return null;
    return satSchoolForSelected.years?.[year]?.[satSubject] || null;
  }, [satSchoolForSelected, year, satSubject]);

  const satStateAvgPct = psatData?.stateAvg?.[year]?.[satSubject]?.pct;

  // Current rank display values
  const typeRank = getTypeRank();

  // The selected school's pct for current filter
  const displayPct = school ? getSchoolPct(school) : null;

  // Type label for display
  const typeLabel = schoolTypeFilter === "all" ? "" : ` ${schoolTypeFilter}`;

  return (
    <div>
      <div className="page-header">
        <h1 className="page-header-title">Rankings</h1>
        <p className="page-header-sub">
          {school ? `${school.name} — ${subject} ${year}` : `Select a school to see its rankings. Showing ${subject} ${year} distribution.`}
        </p>
      </div>

      {/* ── School Type Tabs ───────────────────────────────────────── */}
      <div className="p-section">
        <div className="tab-bar">
          {TYPE_TABS.map(tab => (
            <button
              key={tab.id}
              className={"tab" + (schoolTypeFilter === tab.id ? " active" : "")}
              onClick={() => setSchoolTypeFilter(tab.id)}
            >
              {tab.label} ({typeCounts[tab.id]})
            </button>
          ))}
        </div>
      </div>

      {school && (
        <>
          {/* ── Summary Badges ────────────────────────────────────── */}
          <div className="p-section">
            <div className="grid-4">
              <div className="rank-badge">
                <div className="rank-badge-label">{subject} — District Rank</div>
                <div className="rank-number">#{sd.distRank || "—"} <span style={{ fontSize: 13, color: "var(--text3)" }}>of {sd.distTotal || "—"}</span></div>
                <div className="rank-pctile">{sd.distPctile != null ? fmtOrd(Math.round(sd.distPctile)) + " percentile" : "—"}</div>
              </div>
              <div className="rank-badge">
                <div className="rank-badge-label">{subject} — State Rank{typeLabel && ` (${typeLabel.trim()})`}</div>
                <div className="rank-number">#{typeRank?.rank || "—"} <span style={{ fontSize: 13, color: "var(--text3)" }}>of {typeRank?.total || "—"}{typeLabel} schools</span></div>
                <div className="rank-pctile">{typeRank?.pctile != null ? fmtOrd(Math.round(typeRank.pctile)) + " percentile" : "—"}</div>
              </div>
              <div className="rank-badge">
                <div className="rank-badge-label">{subject} — Proficiency{typeLabel && ` (${typeLabel.trim()})`}</div>
                <div className="rank-number">{displayPct != null ? displayPct.toFixed(1) + "%" : "—"}</div>
                <div className="rank-pctile">% Met or Exceeded</div>
              </div>
              <div className="rank-badge">
                <div className="rank-badge-label">{subject} — Mean Score</div>
                <div className="rank-number">{sd.meanScore != null ? sd.meanScore.toFixed(0) : "—"}</div>
                <div className="rank-pctile">Scale Score</div>
              </div>
            </div>
          </div>

          {/* ── District Rank Chart ───────────────────────────────── */}
          <div className="p-section">
            <div className="card">
              <div className="card-head">
                <div className="card-title">Rank in {school.districtName} — {subject} {year}{typeLabel && ` (${typeLabel.trim()})`}</div>
                <div style={{ fontSize: 12, color: "var(--text3)" }}>{districtSchools.length}{typeLabel} schools</div>
              </div>
              <div className="card-body">
                <HBarChart items={districtSchools} highlightIdx={highlightIdx} maxHeight={400} />
              </div>
            </div>
          </div>
        </>
      )}

      {/* ── Statewide Distribution ────────────────────────────────── */}
      <div className="p-section">
        <div className="grid-2">
          <div className="card">
            <div className="card-head">
              <div className="card-title">Statewide Distribution — {subject} {year}{typeLabel && ` (${typeLabel.trim()})`}</div>
              <div style={{ fontSize: 12, color: "var(--text3)" }}>{allSchoolPcts.length}{typeLabel} schools</div>
            </div>
            <div className="card-body">
              <Histogram values={allSchoolPcts} highlightValue={displayPct} />
              {school && typeRank?.rank != null && (
                <div style={{ textAlign: "center", marginTop: 12, fontSize: 13, color: "var(--teal)", fontWeight: 600 }}>
                  #{typeRank.rank} of {typeRank.total}{typeLabel} — {fmtOrd(Math.round(typeRank.pctile))} percentile
                </div>
              )}
            </div>
          </div>

          {/* ── Scatter Plot ──────────────────────────────────────── */}
          <div className="card">
            <div className="card-head">
              <div className="card-title">Math vs ELA — {year}{typeLabel && ` (${typeLabel.trim()})`}</div>
              <div style={{ fontSize: 12, color: "var(--text3)" }}>{scatterPoints.length}{typeLabel} schools</div>
            </div>
            <div className="card-body">
              <ScatterPlot points={scatterPoints} highlightKeys={highlightKeys} />
            </div>
          </div>
        </div>
      </div>

      {/* ── SAT Grade 11 Rankings (High School tab only) ──────────── */}
      {schoolTypeFilter === "high" && psatData && (
        <div className="p-section">
          <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 16 }}>
            <div style={{ height: 1, flex: 1, background: "var(--border)" }} />
            <div style={{ fontSize: 12, color: "var(--text3)", fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase" }}>
              SAT Grade 11 Rankings
            </div>
            <div style={{ height: 1, flex: 1, background: "var(--border)" }} />
          </div>

          {/* SAT subject toggle */}
          <div style={{ display: "flex", gap: 8, marginBottom: 16 }}>
            {["SAT ERW", "SAT Math"].map(s => (
              <button key={s}
                className={"tab" + (satSubject === s ? " active" : "")}
                style={{ padding: "6px 16px", borderRadius: 6, cursor: "pointer", fontSize: 13, fontWeight: 500, border: "1px solid var(--border)", background: satSubject === s ? "var(--bg2)" : "transparent", color: satSubject === s ? "var(--text)" : "var(--text3)" }}
                onClick={() => setSatSubject(s)}
              >
                {s === "SAT ERW" ? "Evidence-Based Reading & Writing" : "Math"}
              </button>
            ))}
          </div>

          {/* SAT summary badges for selected school */}
          {school && satSelectedData && (
            <div className="grid-4" style={{ marginBottom: 20 }}>
              <div className="rank-badge">
                <div className="rank-badge-label">{satSubject} — State Rank</div>
                <div className="rank-number">
                  {satSelectedData.stateRank != null ? `#${satSelectedData.stateRank}` : "—"}{" "}
                  <span style={{ fontSize: 13, color: "var(--text3)" }}>of {satSelectedData.stateTotal || "—"}</span>
                </div>
                <div className="rank-pctile">
                  {satSelectedData.statePctile != null ? fmtOrd(Math.round(satSelectedData.statePctile)) + " percentile" : "—"}
                </div>
              </div>
              <div className="rank-badge">
                <div className="rank-badge-label">{satSubject} — % Met/Exceeded</div>
                <div className="rank-number">{satSelectedData.pct != null ? satSelectedData.pct.toFixed(1) + "%" : "—"}</div>
                <div className="rank-pctile">
                  {satStateAvgPct != null ? `State avg: ${satStateAvgPct.toFixed(1)}%` : ""}
                </div>
              </div>
              <div className="rank-badge">
                <div className="rank-badge-label">{satSubject} — Mean Score</div>
                <div className="rank-number">{satSelectedData.meanScore != null ? satSelectedData.meanScore : "—"}</div>
                <div className="rank-pctile">Scale Score (200–800)</div>
              </div>
              <div className="rank-badge">
                <div className="rank-badge-label">{satSubject} — District Rank</div>
                <div className="rank-number">
                  {satSelectedData.distRank != null ? `#${satSelectedData.distRank}` : "—"}{" "}
                  <span style={{ fontSize: 13, color: "var(--text3)" }}>of {satSelectedData.distTotal || "—"}</span>
                </div>
                <div className="rank-pctile">
                  {satSelectedData.distPctile != null ? fmtOrd(Math.round(satSelectedData.distPctile)) + " percentile" : "—"}
                </div>
              </div>
            </div>
          )}

          <div className="grid-2">
            {/* SAT Distribution Histogram */}
            <div className="card">
              <div className="card-head">
                <div className="card-title">{satSubject} Distribution — {year}</div>
                <div style={{ fontSize: 12, color: "var(--text3)" }}>{satAllPcts.length} high schools</div>
              </div>
              <div className="card-body">
                <Histogram values={satAllPcts} highlightValue={satSelectedData?.pct} />
                {satSelectedData?.stateRank != null && (
                  <div style={{ textAlign: "center", marginTop: 12, fontSize: 13, color: "var(--teal)", fontWeight: 600 }}>
                    #{satSelectedData.stateRank} of {satSelectedData.stateTotal} — {fmtOrd(Math.round(satSelectedData.statePctile))} percentile
                  </div>
                )}
              </div>
            </div>

            {/* SAT Leaderboard */}
            <div className="card">
              <div className="card-head">
                <div className="card-title">{satSubject} Leaderboard — {year}</div>
                <div style={{ fontSize: 12, color: "var(--text3)" }}>Top schools by % Met/Exceeded</div>
              </div>
              <div className="card-body" style={{ padding: 0, maxHeight: 400, overflowY: "auto" }}>
                <table className="data-table">
                  <thead>
                    <tr>
                      <th>#</th>
                      <th>School</th>
                      <th>% Met</th>
                      <th>Score</th>
                      <th>Pctile</th>
                    </tr>
                  </thead>
                  <tbody>
                    {satRankings.slice(0, 50).map((s, i) => {
                      const isSelected = school && s.code === school.code && s.districtCode === school.districtCode;
                      return (
                        <tr key={s.districtCode + "_" + s.code}
                          className={isSelected ? "highlighted" : ""}
                          onClick={() => navigateToSchool(s.districtCode, s.code)}>
                          <td><span className="rank-num">#{i + 1}</span></td>
                          <td style={{ fontWeight: isSelected ? 600 : 500 }}>
                            {s.name}
                            <div style={{ fontSize: 11, color: "var(--text3)" }}>{s.districtName}</div>
                          </td>
                          <td style={{ fontWeight: 600, fontVariantNumeric: "tabular-nums" }}>
                            {s.pct != null ? s.pct.toFixed(1) + "%" : "—"}
                          </td>
                          <td style={{ fontVariantNumeric: "tabular-nums" }}>
                            {s.meanScore != null ? s.meanScore : "—"}
                          </td>
                          <td>
                            {s.statePctile != null ? (
                              <span className={"pctile-badge " + pctileClass(s.statePctile)}>{fmtOrd(Math.round(s.statePctile))}</span>
                            ) : "—"}
                          </td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}