// My School — school overview with all teams + contacts

const SchoolPage = () => {
  const D = window.NASEF_DATA;
  const ham = D.schoolsById.ham;
  const coach = D.coaches.ham;

  return (
    <div>
      <PageHeader
        eyebrow="School profile"
        title="Hamilton High School"
        subtitle="Los Angeles · LAUSD · CIF Southern Section"
        actions={[<button key="edit" className="btn"><IconEdit size={14} />Edit profile</button>]}
      />

      <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 24 }}>
        <div className="col" style={{ gap: 24 }}>
          {/* School hero */}
          <div className="card" style={{ padding: 0, overflow: "hidden" }}>
            <div style={{
              height: 140,
              backgroundImage: "url(assets/esports-banner.png)",
              backgroundSize: "cover",
              backgroundPosition: "center",
              position: "relative",
            }}>
              <div style={{ position: "absolute", bottom: -32, left: 28 }}>
                <Crest school={ham} size="xl" />
              </div>
            </div>
            <div style={{ padding: "44px 28px 24px" }}>
              <h2 style={{ fontSize: 22, marginBottom: 4 }}>Hamilton Yankees</h2>
              <p className="muted" style={{ fontSize: 13, marginBottom: 16 }}>Established 1931 · 2,800 students · NASEF member since 2022</p>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 10 }}>
                <Stat label="Active teams" value={D.teams.length} />
                <Stat label="Players" value={D.hamiltonRoster.length} />
                <Stat label="Wins this season" value="14" color="var(--success)" />
                <Stat label="NASEF rank" value="#2" color="var(--nasef-orange-soft)" />
              </div>
            </div>
          </div>

          {/* Teams list */}
          <div className="card" style={{ padding: 0 }}>
            <div className="card-header"><h3>Teams</h3></div>
            <div style={{ padding: 8 }}>
              {D.teams.map(t => (
                <div key={t.id} style={{
                  display: "grid",
                  gridTemplateColumns: "auto 1fr auto auto auto",
                  gap: 16, alignItems: "center",
                  padding: "12px 16px",
                  borderRadius: "var(--r-md)",
                }}>
                  <GameTag game={t.game} />
                  <div>
                    <div style={{ fontWeight: 600, fontSize: 13 }}>{t.gameName}</div>
                    <div className="muted" style={{ fontSize: 11 }}>{t.division} · {t.season}</div>
                  </div>
                  <span className="muted" style={{ fontSize: 12 }}>{t.roster.length || 0} players</span>
                  <span className="mono" style={{ fontSize: 13, fontWeight: 600 }}>{t.record}</span>
                  {t.rank && <span className="badge orange" style={{ fontSize: 11 }}>#{t.rank}</span>}
                  {!t.rank && <span style={{ width: 30 }} />}
                </div>
              ))}
            </div>
          </div>

          {/* Match history overview */}
          <div className="card" style={{ padding: 0 }}>
            <div className="card-header">
              <h3>Recent results · all teams</h3>
              <span className="muted" style={{ fontSize: 12 }}>Past 30 days</span>
            </div>
            <div style={{ padding: 8 }}>
              {D.matches.filter(m => m.status === "complete").map(m => (
                <MatchRow key={m.id} match={m} schools={D.schoolsById} compact />
              ))}
            </div>
          </div>
        </div>

        <div className="col" style={{ gap: 24 }}>
          {/* Coach */}
          <div className="card">
            <div className="card-header"><h3>Coach</h3></div>
            <div style={{ padding: 18 }}>
              <div className="row" style={{ gap: 14, marginBottom: 16 }}>
                <div className="crest lg" style={{ "--c1": "#F26822", "--c2": "#7C2D12" }}>{coach.avatar}</div>
                <div>
                  <div style={{ fontWeight: 600, fontSize: 15 }}>{coach.name}</div>
                  <div className="muted" style={{ fontSize: 12 }}>Head Coach · Hamilton Esports</div>
                </div>
              </div>
              <div style={{ display: "flex", flexDirection: "column", gap: 8, fontSize: 13 }}>
                <div className="row-tight"><IconChat size={13} style={{ color: "var(--text-muted)" }} /><span className="mono" style={{ fontSize: 12 }}>{coach.email}</span></div>
                <div className="row-tight"><IconClock size={13} style={{ color: "var(--text-muted)" }} /><span className="mono" style={{ fontSize: 12 }}>{coach.phone}</span></div>
                <div className="row-tight"><IconDiscord size={13} style={{ color: "#5865F2" }} /><span className="mono" style={{ fontSize: 12 }}>@{coach.discord}</span></div>
              </div>
              <div style={{ marginTop: 16, paddingTop: 16, borderTop: "1px solid var(--border-soft)" }}>
                <button className="btn" style={{ width: "100%" }}><IconChat size={13} /> Message coach</button>
              </div>
            </div>
          </div>

          {/* Resources */}
          <div className="card">
            <div className="card-header"><h3>Resources</h3></div>
            <div style={{ padding: 14, display: "flex", flexDirection: "column", gap: 4 }}>
              {[
                { name: "CIF Esports Initiative — Code of Conduct", type: "PDF" },
                { name: "SSBU Stage List — Spring 2026", type: "PDF" },
                { name: "Match dispute resolution flow", type: "DOC" },
                { name: "Parental consent template", type: "PDF" },
                { name: "Streaming guidelines", type: "PDF" },
              ].map(r => (
                <a key={r.name} className="row" style={{ padding: "9px 12px", borderRadius: "var(--r-sm)", cursor: "pointer", fontSize: 13, gap: 10 }}
                  onMouseEnter={e => e.currentTarget.style.background = "var(--bg-elevated)"}
                  onMouseLeave={e => e.currentTarget.style.background = "transparent"}>
                  <div style={{ width: 28, height: 28, borderRadius: 6, background: "var(--bg-elevated)", color: "var(--text-secondary)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 9, fontWeight: 600, fontFamily: "var(--font-display)" }}>{r.type}</div>
                  <span style={{ flex: 1 }}>{r.name}</span>
                  <IconExternal size={12} style={{ color: "var(--text-muted)" }} />
                </a>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

// Inline Stat reused here
const Stat = ({ label, value, color }) => (
  <div style={{ padding: 14, background: "var(--bg-base)", borderRadius: "var(--r-md)", border: "1px solid var(--border-soft)" }}>
    <div className="upper muted" style={{ fontSize: 10, marginBottom: 4 }}>{label}</div>
    <div style={{ fontSize: 18, fontWeight: 600, color: color || "var(--text)", fontFamily: "var(--font-display)" }}>{value}</div>
  </div>
);

window.SchoolPage = SchoolPage;