// Standings — full league table

const StandingsPage = ({ persona, standings }) => {
  const D = window.NASEF_DATA;
  const data = standings || D.standings;
  const [div, setDiv] = React.useState("pacific");

  return (
    <div>
      <PageHeader
        eyebrow="CIF SSBU Varsity · Fall 2026"
        title="Standings"
        subtitle="Pacific Coast Division. Top 8 advance to playoffs after Week 8."
      />

      <div style={{ marginBottom: 16, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <Tabs value={div} onChange={setDiv} items={[
          { value: "pacific", label: "Pacific Coast" },
          { value: "valley", label: "Valley · Demo placeholder" },
          { value: "south", label: "Southern · Demo placeholder" },
        ]} />
        <div className="muted" style={{ fontSize: 12 }}>Updated 4:18 PM PT · auto-refreshes every match</div>
      </div>

      <div className="card" style={{ padding: 0, overflow: "hidden" }}>
        <table className="table">
          <thead>
            <tr>
              <th style={{ width: 56 }}>#</th>
              <th>Team</th>
              <th style={{ textAlign: "right" }}>W</th>
              <th style={{ textAlign: "right" }}>L</th>
              <th style={{ textAlign: "right" }}>Sets +/-</th>
              <th style={{ textAlign: "right" }}>Win %</th>
              <th style={{ textAlign: "right" }}>Streak</th>
              <th style={{ textAlign: "right", width: 120 }}>Last 5</th>
            </tr>
          </thead>
          <tbody>
            {data.map(s => {
              const sch = D.schoolsById[s.schoolId];
              const me = s.schoolId === "ham";
              const playoff = s.rank <= 8;
              const winPct = s.w + s.l > 0 ? (s.w / (s.w + s.l) * 100).toFixed(0) : "—";
              return (
                <tr key={s.schoolId} style={me ? { background: "rgba(242,104,34,0.06)" } : {}}>
                  <td>
                    <div className="row-tight">
                      {playoff && <span style={{
                        width: 4, height: 22, borderRadius: 99,
                        background: s.rank <= 4 ? "var(--nasef-orange)" : "var(--neon-cyan)",
                      }} />}
                      <span className="mono" style={{ fontWeight: 600, color: playoff ? "var(--text)" : "var(--text-muted)" }}>{s.rank}</span>
                    </div>
                  </td>
                  <td>
                    <div className="row" style={{ gap: 12 }}>
                      <Crest school={sch} size="sm" />
                      <div>
                        <div style={{ fontWeight: me ? 600 : 500 }}>{sch.name}</div>
                        <div className="muted" style={{ fontSize: 11 }}>{sch.city} · {sch.mascot}</div>
                      </div>
                      {me && <span className="badge orange" style={{ fontSize: 10 }}>You</span>}
                    </div>
                  </td>
                  <td className="mono" style={{ textAlign: "right", fontWeight: 600, color: "var(--success)" }}>{s.w}</td>
                  <td className="mono" style={{ textAlign: "right", color: "var(--text-muted)" }}>{s.l}</td>
                  <td className="mono" style={{ textAlign: "right" }}>
                    <span style={{ color: s.pf - s.pa > 0 ? "var(--success)" : s.pf - s.pa < 0 ? "var(--text-muted)" : "var(--text-secondary)" }}>
                      {s.pf - s.pa > 0 ? "+" : ""}{s.pf - s.pa}
                    </span>
                  </td>
                  <td className="mono" style={{ textAlign: "right" }}>{winPct === "—" ? "—" : `${winPct}%`}</td>
                  <td className="mono" style={{ textAlign: "right", color: s.streak.startsWith("W") ? "var(--success)" : s.streak.startsWith("L") ? "var(--danger)" : "var(--text-muted)", fontWeight: 700 }}>
                    {s.streak.replace(/[WL\u2014\u2013-]/g, "").trim() || "—"}
                  </td>
                  <td style={{ textAlign: "right" }}>
                    <div style={{ display: "inline-flex", gap: 3 }}>
                      {Array.from({ length: 5 }, (_, i) => {
                        if (i >= s.w + s.l) return <span key={i} style={{ width: 8, height: 16, borderRadius: 2, background: "var(--bg-elevated)" }} />;
                        // fake last-5 from streak
                        const isWin = s.streak.startsWith("W") ? (i >= 5 - parseInt(s.streak.slice(1) || 0)) : false;
                        return <span key={i} style={{ width: 8, height: 16, borderRadius: 2, background: isWin ? "var(--success)" : "var(--text-faint)" }} />;
                      })}
                    </div>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>

      <div style={{ marginTop: 16, display: "flex", gap: 16, color: "var(--text-muted)", fontSize: 12 }}>
        <div className="row-tight"><span style={{ width: 4, height: 14, borderRadius: 99, background: "var(--nasef-orange)" }} />Bye to semifinals (top 4)</div>
        <div className="row-tight"><span style={{ width: 4, height: 14, borderRadius: 99, background: "var(--neon-cyan)" }} />Quarterfinal qualifier (top 8)</div>
      </div>
    </div>
  );
};

window.StandingsPage = StandingsPage;