/* ─── School Profile Page ─────────────────────────────────────────── */

const SAT_COLORS = {
  "SAT ERW":  "#06b6d4",   // teal — reading/writing ~ ELA
  "SAT Math": "#f59e0b",   // amber — math
};

function SchoolProfilePage() {
  const { selectedSchool, year, subject, showSLA, addToCompare, navigateToDistrict, navigateToSchool } = useApp();
  const [searchQuery, setSearchQuery] = useState("");
  const [searchFocused, setSearchFocused] = useState(false);
  const data = window.CMAS;
  const psatData = window.PSAT;

  const school = selectedSchool ? getSchool(selectedSchool.districtCode, selectedSchool.schoolCode) : null;
  const subjects = showSLA ? ["ELA", "Math", "Science", "Spanish Language Arts"] : ["ELA", "Math", "Science"];
  const years = ["2022", "2023", "2024", "2025"];

  // ALL hooks before any conditional return
  const searchResults = useMemo(() => {
    if (!searchQuery || searchQuery.length < 2) return [];
    const q = searchQuery.toLowerCase();
    return data.schools
      .filter(s => s.name.toLowerCase().includes(q) || s.districtName.toLowerCase().includes(q))
      .slice(0, 10)
      .map(s => ({ name: s.name, sub: s.districtName, districtCode: s.districtCode, code: s.code }));
  }, [searchQuery, data]);

  const rankBadges = useMemo(() => {
    if (!school) return [];
    return subjects.filter(s => s !== "Spanish Language Arts").map(subj => {
      const d = school.years?.[year]?.[subj] || {};
      return {
        subject: subj,
        distRank: d.distRank,
        distTotal: d.distTotal,
        distPctile: d.distPctile,
        stateRank: d.stateRank,
        stateTotal: d.stateTotal,
        statePctile: d.statePctile,
      };
    });
  }, [school, year, subjects]);

  const barSeries = useMemo(() => {
    if (!school) return [];
    return subjects.map(subj => ({
      label: subj,
      color: CHART_COLORS[subj],
      values: years.map(y => school.years?.[y]?.[subj]?.pct ?? null),
    }));
  }, [school, subjects]);

  const trendDatasets = useMemo(() => {
    if (!school) return [];
    return subjects.map(subj => ({
      label: subj,
      color: CHART_COLORS[subj],
      values: years.map(y => school.years?.[y]?.[subj]?.pct ?? null),
    }));
  }, [school, subjects]);

  // ── PSAT/SAT data for this school ──
  const psatSchool = 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 isHighSchool = school ? (school.types || []).includes("high") : false;

  // SAT rank badges (for selected year)
  const satBadges = useMemo(() => {
    if (!psatSchool) return [];
    return ["SAT ERW", "SAT Math"].map(subj => {
      const d = psatSchool.years?.[year]?.[subj] || {};
      return {
        subject: subj,
        pct: d.pct,
        meanScore: d.meanScore,
        participationRate: d.participationRate,
        distRank: d.distRank,
        distTotal: d.distTotal,
        distPctile: d.distPctile,
        stateRank: d.stateRank,
        stateTotal: d.stateTotal,
        statePctile: d.statePctile,
      };
    });
  }, [psatSchool, year]);

  // SAT trend datasets (for line chart)
  const satTrendDatasets = useMemo(() => {
    if (!psatSchool) return [];
    return ["SAT ERW", "SAT Math"].map(subj => ({
      label: subj,
      color: SAT_COLORS[subj],
      values: years.map(y => psatSchool.years?.[y]?.[subj]?.pct ?? null),
    }));
  }, [psatSchool]);

  // SAT state avg for reference line
  const satStateAvg = useMemo(() => {
    if (!psatData) return {};
    const out = {};
    ["SAT ERW", "SAT Math"].forEach(subj => {
      out[subj] = years.map(y => psatData.stateAvg?.[y]?.[subj]?.pct ?? null);
    });
    return out;
  }, [psatData]);

  // ── No school selected ──
  if (!school) {
    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 }}>Select a School</h2>
        <p style={{ color: "var(--text3)", marginBottom: 24 }}>Search for a school to view its profile</p>
        <div className="search-container" style={{ maxWidth: 500, margin: "0 auto" }}>
          <div className="search-icon"><Icons.search /></div>
          <input className="search-input" placeholder="Find your school..." value={searchQuery}
            onChange={e => setSearchQuery(e.target.value)}
            onFocus={() => setSearchFocused(true)}
            onBlur={() => setTimeout(() => setSearchFocused(false), 200)} />
          {searchFocused && searchResults.length > 0 && (
            <div className="search-results">
              {searchResults.map((r, i) => (
                <div key={i} className="search-result-item"
                  onMouseDown={() => { navigateToSchool(r.districtCode, r.code); setSearchQuery(""); }}>
                  <div className="search-result-icon school">🎓</div>
                  <div><div className="search-result-name">{r.name}</div><div className="search-result-sub">{r.sub}</div></div>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    );
  }

  const sd = school.years?.[year]?.[subject] || {};
  const stateRef = data.stateAvg[year]?.[subject]?.pctMetExceeded;
  const partRate = sd.participationRate;
  const partLevel = participationLevel(partRate);

  return (
    <div>
      {/* ── Header ────────────────────────────────────────────────── */}
      <div className="page-header">
        <div className="page-header-eyebrow" style={{ cursor: "pointer" }} onClick={() => navigateToDistrict(school.districtCode)}>
          {school.districtName} →
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 16, flexWrap: "wrap" }}>
          <h1 className="page-header-title">{school.name}</h1>
          {partRate != null && (
            <div className={"participation-badge " + partLevel}>
              {partLevel === "red" && "⚠ "}
              {partRate.toFixed(1)}% participation
            </div>
          )}
          <button className="btn btn-outline" style={{ marginLeft: "auto" }}
            onClick={() => addToCompare(school.districtCode, school.code)}>
            + Compare
          </button>
        </div>
      </div>

      {/* ── CMAS Rank Badges ──────────────────────────────────────── */}
      <div className="p-section">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))", gap: 12 }}>
          {rankBadges.map(rb => (
            <React.Fragment key={rb.subject}>
              <div className="rank-badge">
                <div className="rank-badge-label">{rb.subject} — District</div>
                <div className="rank-number">
                  {rb.distRank != null ? `#${rb.distRank}` : "—"} <span style={{ fontSize: 13, color: "var(--text3)" }}>of {rb.distTotal || "—"}</span>
                </div>
                <div className="rank-pctile">
                  {rb.distPctile != null ? fmtOrd(Math.round(rb.distPctile)) + " percentile" : "—"}
                </div>
              </div>
              <div className="rank-badge">
                <div className="rank-badge-label">{rb.subject} — State</div>
                <div className="rank-number">
                  {rb.stateRank != null ? `#${rb.stateRank}` : "—"} <span style={{ fontSize: 13, color: "var(--text3)" }}>of {rb.stateTotal || "—"}</span>
                </div>
                <div className="rank-pctile">
                  {rb.statePctile != null ? fmtOrd(Math.round(rb.statePctile)) + " percentile" : "—"}
                </div>
              </div>
            </React.Fragment>
          ))}
        </div>
      </div>

      {/* ── CMAS Charts Row ───────────────────────────────────────── */}
      <div className="p-section">
        <div className="grid-2">
          <div className="card">
            <div className="card-head">
              <div className="card-title">Proficiency by Subject & Year</div>
              <div style={{ display: "flex", gap: 10 }}>
                {subjects.map(s => (
                  <div key={s} style={{ display: "flex", alignItems: "center", gap: 4, fontSize: 11, color: "var(--text3)" }}>
                    <span style={{ width: 10, height: 10, borderRadius: 3, background: CHART_COLORS[s], flexShrink: 0 }} />{s === "Spanish Language Arts" ? "SLA" : s}
                  </div>
                ))}
              </div>
            </div>
            <div className="card-body">
              <GroupedBarChart
                groups={years}
                series={barSeries}
                refLine={stateRef != null ? { value: stateRef, label: "State" } : null}
              />
            </div>
          </div>
          <div className="card">
            <div className="card-head">
              <div className="card-title">Year-over-Year Trends</div>
              <div style={{ display: "flex", gap: 10 }}>
                {subjects.map(s => (
                  <div key={s} style={{ display: "flex", alignItems: "center", gap: 4, fontSize: 11, color: "var(--text3)" }}>
                    <span style={{ width: 10, height: 3, borderRadius: 2, background: CHART_COLORS[s] }} />{s === "Spanish Language Arts" ? "SLA" : s}
                  </div>
                ))}
              </div>
            </div>
            <div className="card-body">
              <LineChart datasets={trendDatasets} labels={years} height={240} />
            </div>
          </div>
        </div>
      </div>

      {/* ── Grade Heatmap ─────────────────────────────────────────── */}
      <div className="p-section">
        <div className="card">
          <div className="card-head">
            <div className="card-title">Grade-Level Heatmap — {subject}</div>
            <div style={{ fontSize: 11, color: "var(--text3)" }}>% Met or Exceeded Expectations</div>
          </div>
          <div className="card-body">
            <GradeHeatmap schoolData={school} subject={subject} />
          </div>
        </div>
      </div>

      {/* ── SAT Grade 11 Section (high schools only) ──────────────── */}
      {isHighSchool && (
        <div className="p-section">
          {/* Section divider */}
          <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
            </div>
            <div style={{ height: 1, flex: 1, background: "var(--border)" }} />
          </div>

          {!psatSchool ? (
            <div style={{ textAlign: "center", padding: "24px 0", color: "var(--text3)", fontSize: 13 }}>
              No SAT data available for this school.
            </div>
          ) : (
            <>
              {/* ── SAT Rank Badges ── */}
              <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))", gap: 12, marginBottom: 20 }}>
                {satBadges.map(rb => (
                  <React.Fragment key={rb.subject}>
                    <div className="rank-badge" style={{ "--accent-color": SAT_COLORS[rb.subject] }}>
                      <div className="rank-badge-label">{rb.subject} — District</div>
                      <div className="rank-number">
                        {rb.distRank != null ? `#${rb.distRank}` : "—"} <span style={{ fontSize: 13, color: "var(--text3)" }}>of {rb.distTotal || "—"}</span>
                      </div>
                      <div className="rank-pctile">
                        {rb.distPctile != null ? fmtOrd(Math.round(rb.distPctile)) + " percentile" : "—"}
                      </div>
                    </div>
                    <div className="rank-badge" style={{ "--accent-color": SAT_COLORS[rb.subject] }}>
                      <div className="rank-badge-label">{rb.subject} — State</div>
                      <div className="rank-number">
                        {rb.stateRank != null ? `#${rb.stateRank}` : "—"} <span style={{ fontSize: 13, color: "var(--text3)" }}>of {rb.stateTotal || "—"}</span>
                      </div>
                      <div className="rank-pctile">
                        {rb.statePctile != null ? fmtOrd(Math.round(rb.statePctile)) + " percentile" : "—"}
                      </div>
                    </div>
                  </React.Fragment>
                ))}
              </div>

              {/* ── SAT Summary Table + Trend ── */}
              <div className="grid-2">
                {/* Year-by-year table */}
                <div className="card">
                  <div className="card-head">
                    <div className="card-title">SAT Results by Year</div>
                    <div style={{ display: "flex", gap: 10 }}>
                      {["SAT ERW", "SAT Math"].map(s => (
                        <div key={s} style={{ display: "flex", alignItems: "center", gap: 4, fontSize: 11, color: "var(--text3)" }}>
                          <span style={{ width: 10, height: 10, borderRadius: 3, background: SAT_COLORS[s], flexShrink: 0 }} />
                          {s === "SAT ERW" ? "ERW" : "Math"}
                        </div>
                      ))}
                    </div>
                  </div>
                  <div className="card-body" style={{ padding: 0 }}>
                    <table className="data-table">
                      <thead>
                        <tr>
                          <th>Year</th>
                          <th>ERW % Met</th>
                          <th>ERW Score</th>
                          <th>Math % Met</th>
                          <th>Math Score</th>
                        </tr>
                      </thead>
                      <tbody>
                        {years.map(y => {
                          const erw  = psatSchool.years?.[y]?.["SAT ERW"]  || {};
                          const math = psatSchool.years?.[y]?.["SAT Math"] || {};
                          const sawgErw  = psatData?.stateAvg?.[y]?.["SAT ERW"]?.pct;
                          const sawgMath = psatData?.stateAvg?.[y]?.["SAT Math"]?.pct;
                          return (
                            <tr key={y}>
                              <td style={{ fontWeight: 600 }}>{y}</td>
                              <td>
                                {erw.pct != null ? (
                                  <span>
                                    <span style={{ fontWeight: 600, color: "var(--teal)" }}>{erw.pct.toFixed(1)}%</span>
                                    {sawgErw != null && (
                                      <span style={{ fontSize: 10, color: "var(--text3)", marginLeft: 4 }}>
                                        (state {sawgErw.toFixed(1)}%)
                                      </span>
                                    )}
                                  </span>
                                ) : <span className="suppressed">—</span>}
                              </td>
                              <td style={{ fontVariantNumeric: "tabular-nums" }}>
                                {erw.meanScore != null ? erw.meanScore : <span className="suppressed">—</span>}
                              </td>
                              <td>
                                {math.pct != null ? (
                                  <span>
                                    <span style={{ fontWeight: 600, color: "var(--amber)" }}>{math.pct.toFixed(1)}%</span>
                                    {sawgMath != null && (
                                      <span style={{ fontSize: 10, color: "var(--text3)", marginLeft: 4 }}>
                                        (state {sawgMath.toFixed(1)}%)
                                      </span>
                                    )}
                                  </span>
                                ) : <span className="suppressed">—</span>}
                              </td>
                              <td style={{ fontVariantNumeric: "tabular-nums" }}>
                                {math.meanScore != null ? math.meanScore : <span className="suppressed">—</span>}
                              </td>
                            </tr>
                          );
                        })}
                      </tbody>
                    </table>
                  </div>
                </div>

                {/* Trend line chart */}
                <div className="card">
                  <div className="card-head">
                    <div className="card-title">SAT Trends 2022–2025</div>
                    <div style={{ display: "flex", gap: 10 }}>
                      {["SAT ERW", "SAT Math"].map(s => (
                        <div key={s} style={{ display: "flex", alignItems: "center", gap: 4, fontSize: 11, color: "var(--text3)" }}>
                          <span style={{ width: 10, height: 3, borderRadius: 2, background: SAT_COLORS[s] }} />
                          {s === "SAT ERW" ? "ERW" : "Math"}
                        </div>
                      ))}
                    </div>
                  </div>
                  <div className="card-body">
                    <LineChart datasets={satTrendDatasets} labels={years} height={240} />
                  </div>
                </div>
              </div>
            </>
          )}
        </div>
      )}
    </div>
  );
}