/* ─── Landing / State Overview Page ───────────────────────────────── */

function LandingPage() {
  const { year, subject, showSLA, navigateToSchool, navigateToDistrict, setPage } = useApp();
  const [searchQuery, setSearchQuery] = useState("");
  const [searchFocused, setSearchFocused] = useState(false);

  const data = window.CMAS;
  const stateAvg = data.stateAvg;

  // ── Search results ────────────────────────────────────────────────
  const searchResults = useMemo(() => {
    if (!searchQuery || searchQuery.length < 2) return [];
    const q = searchQuery.toLowerCase();
    const results = [];
    // Schools
    for (const s of data.schools) {
      if (s.name.toLowerCase().includes(q) || s.districtName.toLowerCase().includes(q)) {
        results.push({ type: "school", name: s.name, sub: s.districtName, districtCode: s.districtCode, code: s.code });
        if (results.length > 20) break;
      }
    }
    // Districts
    for (const d of data.districts) {
      if (d.name.toLowerCase().includes(q)) {
        results.push({ type: "district", name: d.name, sub: "District", code: d.code });
      }
      if (results.length > 30) break;
    }
    return results.slice(0, 15);
  }, [searchQuery, data]);

  // ── KPI data ──────────────────────────────────────────────────────
  const subjects = showSLA ? ["ELA", "Math", "Science", "Spanish Language Arts"] : ["ELA", "Math", "Science"];
  const kpiCards = subjects.map(subj => {
    const d = stateAvg[year]?.[subj];
    return {
      subject: subj,
      pct: d?.pctMetExceeded,
      delta: d?.delta,
      color: CHART_COLORS[subj],
    };
  });

  // ── Trend chart data ──────────────────────────────────────────────
  const years = ["2022", "2023", "2024", "2025"];
  const trendDatasets = subjects.map(subj => ({
    label: subj,
    color: CHART_COLORS[subj],
    values: years.map(y => stateAvg[y]?.[subj]?.pctMetExceeded ?? null),
  }));

  // ── District leaderboard ──────────────────────────────────────────
  const [sortCol, setSortCol] = useState("pct");
  const [sortDir, setSortDir] = useState("desc");

  const districtRows = useMemo(() => {
    const rows = 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,
      };
    });
    rows.sort((a, b) => {
      const va = a[sortCol] ?? -Infinity;
      const vb = b[sortCol] ?? -Infinity;
      return sortDir === "desc" ? vb - va : va - vb;
    });
    return rows;
  }, [data, year, subject, sortCol, sortDir]);

  function handleSort(col) {
    if (sortCol === col) setSortDir(d => d === "desc" ? "asc" : "desc");
    else { setSortCol(col); setSortDir("desc"); }
  }

  return (
    <div>
      {/* ── Hero ──────────────────────────────────────────────────── */}
      <div className="page-header" style={{ textAlign: "center", paddingBottom: 28 }}>
        <div className="fade-in" style={{ display: "inline-flex", alignItems: "center", gap: 6, background: "rgba(16,185,129,0.15)", color: "var(--green)", fontSize: 11, fontWeight: 700, padding: "4px 12px", borderRadius: 20, marginBottom: 16, letterSpacing: "0.06em" }}>
          <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--green)" }} />
          {year} RESULTS AVAILABLE
        </div>
        <h1 className="page-header-title slide-up" style={{ fontSize: 32, marginBottom: 8 }}>Colorado CMAS Results</h1>
        <p className="page-header-sub">Academic proficiency data for {data.schools.length.toLocaleString()} schools across {data.districts.length} Colorado districts</p>

        {/* ── Search ──────────────────────────────────────────────── */}
        <div className="search-container" style={{ marginTop: 24 }}>
          <div className="search-icon"><Icons.search /></div>
          <input
            className="search-input"
            type="text"
            placeholder="Find your school or district..."
            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={() => {
                    if (r.type === "school") navigateToSchool(r.districtCode, r.code);
                    else navigateToDistrict(r.code);
                    setSearchQuery("");
                  }}
                >
                  <div className={"search-result-icon " + r.type}>
                    {r.type === "school" ? "🎓" : "🏛️"}
                  </div>
                  <div>
                    <div className="search-result-name">{r.name}</div>
                    <div className="search-result-sub">{r.sub}</div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>

      {/* ── KPI Cards ────────────────────────────────────────────── */}
      <div className="p-section">
        <div className={"grid-" + (kpiCards.length <= 3 ? "3" : "4")}>
          {kpiCards.map(k => {
            const da = deltaArrow(k.delta);
            return (
              <div key={k.subject} className="kpi-card" style={{ "--accent-color": k.color }}>
                <div className="kpi-label">{k.subject} — State Avg</div>
                <div className="kpi-value">
                  {k.pct != null ? k.pct.toFixed(1) + "%" : "—"}
                  {k.delta != null && (
                    <span className={"kpi-delta " + da.cls} style={{ fontSize: 13, marginLeft: 10 }}>{da.text}</span>
                  )}
                </div>
                <div className="kpi-sub">% Met or Exceeded · {year}</div>
              </div>
            );
          })}
        </div>
      </div>

      {/* ── Trend + Map Row ──────────────────────────────────────── */}
      <div className="p-section">
        <div className="grid-2">
          <div className="card">
            <div className="card-head">
              <div className="card-title">Statewide Trends 2022–2025</div>
              <div style={{ display: "flex", gap: 12 }}>
                {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 className="card">
            <div className="card-head">
              <div className="card-title">District Map — {subject} Proficiency {year}</div>
              <button className="btn btn-outline" style={{ fontSize: 11, padding: "4px 10px" }} onClick={() => setPage("map")}>
                Full View →
              </button>
            </div>
            <div className="card-body">
              <ColoradoDistrictMap
                year={year}
                subject={subject}
                onDistrictClick={(code) => navigateToDistrict(code)}
              />
            </div>
          </div>
        </div>
      </div>

      {/* ── District Leaderboard ──────────────────────────────────── */}
      <div className="p-section">
        <div className="card">
          <div className="card-head">
            <div className="card-title">District Leaderboard — {subject} {year}</div>
            <div style={{ fontSize: 12, color: "var(--text3)" }}>{districtRows.length} districts</div>
          </div>
          <div className="card-body" style={{ padding: 0, maxHeight: 500, overflowY: "auto" }}>
            <table className="data-table">
              <thead>
                <tr>
                  <th onClick={() => handleSort("rank")} className={sortCol === "rank" ? "sorted" : ""}>Rank</th>
                  <th onClick={() => handleSort("name")} className={sortCol === "name" ? "sorted" : ""}>District</th>
                  <th onClick={() => handleSort("pct")} className={sortCol === "pct" ? "sorted" : ""}>% Met/Exceeded</th>
                  <th>Percentile</th>
                  <th>Proficiency</th>
                </tr>
              </thead>
              <tbody>
                {districtRows.map(d => (
                  <tr key={d.code} onClick={() => navigateToDistrict(d.code)}>
                    <td><span className="rank-num">{d.rank != null ? `#${d.rank}` : "—"}</span> <span style={{ color: "var(--text3)", fontSize: 11 }}>of {d.total || "—"}</span></td>
                    <td style={{ fontWeight: 500 }}>{d.name}</td>
                    <td style={{ fontVariantNumeric: "tabular-nums", fontWeight: 600 }}>
                      {d.pct != null ? d.pct.toFixed(1) + "%" : <span className="suppressed">— <Icons.info /></span>}
                    </td>
                    <td>
                      {d.pctile != null ? (
                        <span className={"pctile-badge " + pctileClass(d.pctile)}>{fmtOrd(Math.round(d.pctile))}</span>
                      ) : "—"}
                    </td>
                    <td style={{ width: 100 }}>
                      <ProgressBar value={d.pct} color={subjectColor(subject)} width={100} />
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  );
}