/* ─── Comparison Page ─────────────────────────────────────────────── */

const SAT_SUBJS = ["SAT ERW", "SAT Math"];

function ComparisonPage() {
  const { compareList, year, subject, showSLA, removeFromCompare, navigateToSchool } = useApp();
  const data = window.CMAS;
  const psatData = window.PSAT;
  const subjects = showSLA ? ["ELA", "Math", "Science", "Spanish Language Arts"] : ["ELA", "Math", "Science"];
  const years = ["2022", "2023", "2024", "2025"];

  const schools = compareList.map(c => getSchool(c.districtCode, c.code)).filter(Boolean);

  // SAT data for each compared school
  const satSchools = useMemo(() => {
    if (!psatData) return [];
    return compareList.map(c => {
      const key = `${c.districtCode}_${c.code}`;
      const idx = psatData.schoolIndex?.[key];
      return idx != null ? psatData.schools[idx] : null;
    });
  }, [compareList, psatData]);

  const allHighSchool = schools.length > 0 && schools.every(s => (s.types || []).includes("high"));
  const anyHasSAT = satSchools.some(s => s != null);

  if (schools.length === 0) {
    return (
      <div style={{ padding: 60, textAlign: "center" }}>
        <div style={{ fontSize: 48, marginBottom: 16, opacity: 0.3 }}>📊</div>
        <h2 style={{ fontFamily: "var(--font-head)", fontSize: 22, marginBottom: 8 }}>No Schools Selected</h2>
        <p style={{ color: "var(--text3)" }}>Visit a school profile and click "+ Compare" to add schools here.</p>
      </div>
    );
  }

  const schoolColors = ["#06b6d4", "#f59e0b", "#f43f5e", "#6366f1", "#10b981"];

  // Radar data — include SAT subjects for high schools
  const radarLabels = allHighSchool && anyHasSAT
    ? [...subjects, "SAT ERW", "SAT Math"]
    : subjects;
  const radarDatasets = schools.map((s, i) => {
    const cmasVals = subjects.map(subj => s.years?.[year]?.[subj]?.pct ?? null);
    if (allHighSchool && anyHasSAT) {
      const sat = satSchools[i];
      const satVals = SAT_SUBJS.map(subj => sat?.years?.[year]?.[subj]?.pct ?? null);
      return { label: s.name, color: schoolColors[i % schoolColors.length], values: [...cmasVals, ...satVals] };
    }
    return { label: s.name, color: schoolColors[i % schoolColors.length], values: cmasVals };
  });

  return (
    <div>
      <div className="page-header">
        <h1 className="page-header-title">School Comparison</h1>
        <p className="page-header-sub">Comparing {schools.length} school{schools.length !== 1 ? "s" : ""} — {subject} {year}</p>
      </div>

      {/* ── Radar Chart ───────────────────────────────────────────── */}
      <div className="p-section">
        <div className="grid-2">
          <div className="card">
            <div className="card-head">
              <div className="card-title">Subject Profile — {year}</div>
              <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
                {schools.map((s, i) => (
                  <div key={i} style={{ display: "flex", alignItems: "center", gap: 4, fontSize: 11, color: "var(--text3)" }}>
                    <span style={{ width: 10, height: 3, borderRadius: 2, background: schoolColors[i] }} />{s.name.length > 20 ? s.name.slice(0, 18) + "…" : s.name}
                  </div>
                ))}
              </div>
            </div>
            <div className="card-body" style={{ display: "flex", justifyContent: "center" }}>
              <RadarChart datasets={radarDatasets} labels={radarLabels} width={320} height={320} />
            </div>
          </div>

          {/* ── Side-by-side bars ──────────────────────────────────── */}
          <div className="card">
            <div className="card-head">
              <div className="card-title">{subject} Proficiency by Year</div>
            </div>
            <div className="card-body">
              <GroupedBarChart
                groups={years}
                series={schools.map((s, i) => ({
                  label: s.name.length > 15 ? s.name.slice(0, 13) + "…" : s.name,
                  color: schoolColors[i % schoolColors.length],
                  values: years.map(y => s.years?.[y]?.[subject]?.pct ?? null),
                }))}
              />
            </div>
          </div>
        </div>
      </div>

      {/* ── CMAS Ranking Table ────────────────────────────────────── */}
      <div className="p-section">
        <div className="card">
          <div className="card-head">
            <div className="card-title">CMAS Ranking Summary — {subject} {year}</div>
          </div>
          <div className="card-body" style={{ padding: 0 }}>
            <table className="data-table">
              <thead>
                <tr>
                  <th>School</th>
                  <th>District</th>
                  <th>% Met/Exceeded</th>
                  <th>District Rank</th>
                  <th>State Rank</th>
                  <th>State Pctile</th>
                  <th>Trend</th>
                </tr>
              </thead>
              <tbody>
                {schools.map((s, i) => {
                  const sd = s.years?.[year]?.[subject] || {};
                  return (
                    <tr key={i} onClick={() => navigateToSchool(s.districtCode, s.code)} style={{ cursor: "pointer" }}>
                      <td style={{ fontWeight: 600, color: schoolColors[i] }}>{s.name}</td>
                      <td style={{ color: "var(--text2)" }}>{s.districtName}</td>
                      <td style={{ fontWeight: 600, fontVariantNumeric: "tabular-nums" }}>
                        {sd.pct != null ? sd.pct.toFixed(1) + "%" : <span className="suppressed">—</span>}
                      </td>
                      <td>
                        <span className="rank-num">{sd.distRank != null ? `#${sd.distRank}` : "—"}</span>
                        <span style={{ color: "var(--text3)", fontSize: 11 }}> of {sd.distTotal || "—"}</span>
                      </td>
                      <td>
                        <span className="rank-num">{sd.stateRank != null ? `#${sd.stateRank}` : "—"}</span>
                        <span style={{ color: "var(--text3)", fontSize: 11 }}> of {sd.stateTotal || "—"}</span>
                      </td>
                      <td>
                        {sd.statePctile != null ? (
                          <span className={"pctile-badge " + pctileClass(sd.statePctile)}>{fmtOrd(Math.round(sd.statePctile))}</span>
                        ) : "—"}
                      </td>
                      <td>
                        <Sparkline
                          values={years.map(y => s.years?.[y]?.[subject]?.pct ?? null)}
                          color={schoolColors[i]}
                        />
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>
      </div>

      {/* ── SAT Comparison (when any compared school has SAT data) ── */}
      {anyHasSAT && (
        <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 Comparison
            </div>
            <div style={{ height: 1, flex: 1, background: "var(--border)" }} />
          </div>

          <div className="grid-2">
            {/* SAT ERW by year */}
            <div className="card">
              <div className="card-head">
                <div className="card-title">SAT ERW — % Met/Exceeded by Year</div>
              </div>
              <div className="card-body">
                <GroupedBarChart
                  groups={years}
                  series={schools.map((s, i) => {
                    const sat = satSchools[i];
                    return {
                      label: s.name.length > 15 ? s.name.slice(0, 13) + "…" : s.name,
                      color: schoolColors[i % schoolColors.length],
                      values: years.map(y => sat?.years?.[y]?.["SAT ERW"]?.pct ?? null),
                    };
                  })}
                />
              </div>
            </div>

            {/* SAT Math by year */}
            <div className="card">
              <div className="card-head">
                <div className="card-title">SAT Math — % Met/Exceeded by Year</div>
              </div>
              <div className="card-body">
                <GroupedBarChart
                  groups={years}
                  series={schools.map((s, i) => {
                    const sat = satSchools[i];
                    return {
                      label: s.name.length > 15 ? s.name.slice(0, 13) + "…" : s.name,
                      color: schoolColors[i % schoolColors.length],
                      values: years.map(y => sat?.years?.[y]?.["SAT Math"]?.pct ?? null),
                    };
                  })}
                />
              </div>
            </div>
          </div>

          {/* SAT Ranking Table */}
          <div style={{ marginTop: 16 }}>
            <div className="card">
              <div className="card-head">
                <div className="card-title">SAT Summary — {year}</div>
              </div>
              <div className="card-body" style={{ padding: 0 }}>
                <table className="data-table">
                  <thead>
                    <tr>
                      <th>School</th>
                      <th>ERW %</th>
                      <th>ERW Score</th>
                      <th>ERW Rank</th>
                      <th>Math %</th>
                      <th>Math Score</th>
                      <th>Math Rank</th>
                    </tr>
                  </thead>
                  <tbody>
                    {schools.map((s, i) => {
                      const sat = satSchools[i];
                      const erw = sat?.years?.[year]?.["SAT ERW"] || {};
                      const math = sat?.years?.[year]?.["SAT Math"] || {};
                      return (
                        <tr key={i} onClick={() => navigateToSchool(s.districtCode, s.code)} style={{ cursor: "pointer" }}>
                          <td style={{ fontWeight: 600, color: schoolColors[i] }}>{s.name}</td>
                          <td style={{ fontWeight: 600, fontVariantNumeric: "tabular-nums", color: "var(--teal)" }}>
                            {erw.pct != null ? erw.pct.toFixed(1) + "%" : <span className="suppressed">—</span>}
                          </td>
                          <td style={{ fontVariantNumeric: "tabular-nums" }}>
                            {erw.meanScore != null ? erw.meanScore : "—"}
                          </td>
                          <td>
                            {erw.stateRank != null ? (
                              <span>
                                <span className="rank-num">#{erw.stateRank}</span>
                                <span style={{ color: "var(--text3)", fontSize: 11 }}> of {erw.stateTotal}</span>
                              </span>
                            ) : "—"}
                          </td>
                          <td style={{ fontWeight: 600, fontVariantNumeric: "tabular-nums", color: "var(--amber)" }}>
                            {math.pct != null ? math.pct.toFixed(1) + "%" : <span className="suppressed">—</span>}
                          </td>
                          <td style={{ fontVariantNumeric: "tabular-nums" }}>
                            {math.meanScore != null ? math.meanScore : "—"}
                          </td>
                          <td>
                            {math.stateRank != null ? (
                              <span>
                                <span className="rank-num">#{math.stateRank}</span>
                                <span style={{ color: "var(--text3)", fontSize: 11 }}> of {math.stateTotal}</span>
                              </span>
                            ) : "—"}
                          </td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}