// Spiller stats — pre-season. Ærlig om at sesong ikke har startet,
// men viser strukturen som kommer + topp fra avsluttede warm-up turneringer.

const StatsPage = ({ accent }) => {
  const [topPlayers, setTopPlayers] = React.useState([]);
  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    Promise.all([
      WZN_Store.getTopPlayers(5),
      WZN_Store.getTournaments(),
    ]).then(([players, trns]) => {
      setTopPlayers(players || []);
      setLoading(false);
    });
  }, []);

  return (
    <>
      <PageHeader
        eyebrow="DATA / 04"
        title={<>SPILLER <span style={{ color: accent }}>STATS</span>.</>}
        sub="Når liga-sesongen starter, viser vi rangerte stats per spiller og lag her. I mellomtiden — topp fra siste warm-up turneringer."
        accent={accent}
        right={
          <div style={{
            padding: "6px 14px", border: `1px solid var(--line-2)`, color: "var(--text-dim)",
            fontFamily: "var(--font-stencil)", fontSize: 12, letterSpacing: "0.08em",
          }}>PRE-SEASON · DATA-INNSAMLING</div>
        }
      />

      {/* Pre-season banner */}
      <section style={{
        padding: "32px 48px",
        background: "var(--bg-1)",
        borderBottom: "1px solid var(--line)",
      }}>
        <div style={{
          display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 28, alignItems: "center",
          padding: "20px 24px", border: `1px dashed ${accent}`, background: "rgba(255,107,53,0.04)",
        }}>
          <div style={{
            fontFamily: "var(--font-stencil)", fontSize: 11, letterSpacing: "0.08em",
            background: accent, color: "var(--bg-0)", padding: "5px 12px",
          }}>PRE-SEASON</div>
          <div style={{
            fontFamily: "var(--font-body)", fontSize: 15, color: "var(--text-dim)", lineHeight: 1.5,
          }}>
            Rangerte ligastatistikker kommer når sesong 01 starter. Frem til da viser vi
            aggregerte tall fra warm-up turneringer — og hva som vil tracket i ligaen.
          </div>
          <a href="#" style={{
            padding: "10px 16px", border: `1px solid ${accent}`, color: accent,
            fontFamily: "var(--font-stencil)", fontSize: 12, letterSpacing: "0.06em",
            textDecoration: "none",
          }}>MELD INTERESSE FOR LIGA →</a>
        </div>
      </section>

      {/* Top from warm-up tournaments */}
      <section style={{
        padding: "56px 48px", borderBottom: "1px solid var(--line)",
      }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 28 }}>
          <div>
            <div style={{
              fontFamily: "var(--font-mono)", fontSize: 11, color: accent, letterSpacing: "0.25em", marginBottom: 8,
            }}>WARM-UP / 04.A</div>
            <h2 style={{ fontFamily: "var(--font-stencil)", fontSize: 44, letterSpacing: "0.02em", margin: 0 }}>
              TOPP FRA SISTE 4 TURNERINGER
            </h2>
            <p style={{
              fontFamily: "var(--font-body)", fontSize: 14, color: "var(--text-dim)", marginTop: 8, maxWidth: 620,
            }}>
              Aggregerte tall fra warm-up turneringer som har vært. Ikke offisielle liga-stats — bare en pekepinn på hvem som leverer.
            </p>
          </div>
          <div style={{
            fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--text-faint)", letterSpacing: "0.18em", textAlign: "right",
          }}>
            <div>BASERT PÅ 4 TURNERINGER</div>
            <div style={{ marginTop: 4 }}>OPPDATERT 19.05.2026</div>
          </div>
        </div>

        {loading ? (
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--text-faint)", letterSpacing: "0.2em", padding: "48px 0", textAlign: "center" }}>
            LASTER…
          </div>
        ) : topPlayers.length === 0 ? (
          <div style={{
            padding: "48px 24px", textAlign: "center",
            border: "1px solid var(--line)", background: "var(--bg-1)",
            fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--text-faint)", letterSpacing: "0.2em",
          }}>
            INGEN DATA ENNÅ
          </div>
        ) : (
          <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 12 }}>
            {topPlayers.map((p, i) => (
              <div key={p.team} style={{
                background: "var(--bg-1)", border: i === 0 ? `1px solid ${accent}` : "1px solid var(--line)",
                padding: 18, position: "relative",
              }}>
                {i === 0 && (
                  <div style={{
                    position: "absolute", top: 12, right: 12,
                    fontFamily: "var(--font-stencil)", fontSize: 11, letterSpacing: "0.06em",
                    color: accent, border: `1px solid ${accent}`, padding: "2px 6px",
                  }}>★ TOPP</div>
                )}
                <div style={{ fontFamily: "var(--font-stencil)", fontSize: 38, color: accent, lineHeight: 1 }}>
                  {String(i+1).padStart(2,"0")}
                </div>
                <div style={{
                  fontFamily: "var(--font-stencil)", fontSize: 22, marginTop: 12, letterSpacing: "0.02em",
                }}>{p.team}</div>
                <div style={{
                  fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--text-dim)",
                  letterSpacing: "0.12em", marginTop: 4,
                }}>LAG</div>
                <div style={{
                  display: "grid", gridTemplateColumns: "repeat(3, 1fr)",
                  marginTop: 14, paddingTop: 14, borderTop: "1px solid var(--line)",
                }}>
                  {[
                    ["K/G", p.kd],
                    ["KILLS", p.kills],
                    ["VINN", p.wins],
                  ].map(([k, v]) => (
                    <div key={k}>
                      <div style={{ fontFamily: "var(--font-mono)", fontSize: 9, color: "var(--text-faint)", letterSpacing: "0.15em" }}>{k}</div>
                      <div style={{ fontFamily: "var(--font-stencil)", fontSize: 18, color: "var(--text)", marginTop: 2 }}>{v}</div>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        )}
      </section>

      {/* Hva tracker vi når sesong starter */}
      <section style={{
        padding: "64px 48px",
        borderBottom: "1px solid var(--line)",
      }}>
        <div style={{ marginBottom: 36 }}>
          <div style={{
            fontFamily: "var(--font-mono)", fontSize: 11, color: accent, letterSpacing: "0.25em", marginBottom: 10,
          }}>COMING / 04.C</div>
          <h2 style={{
            fontFamily: "var(--font-stencil)", fontSize: 56, letterSpacing: "0.02em", margin: 0, lineHeight: 0.95,
          }}>HVA VI <span style={{ color: accent }}>SPORER</span><br/>NÅR SESONG STARTER.</h2>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14 }}>
          {[
            { k: "PLACEMENT", ex: "1.4", l: "Snitt plassering per game", desc: "Lavere = bedre. 1.0 betyr du vinner alt." },
            { k: "K/D", ex: "1.82", l: "Kills per death", desc: "Standard duell-rating — hvor mange du tar før du dør." },
            { k: "LP", ex: "1840", l: "Ligapoeng (sesong)", desc: "Placement-poeng + 1p/kill. Beste 4 av 5 games per matchday. Bygges opp gjennom hele sesongen." },
            { k: "HS%", ex: "38%", l: "Headshot-rate", desc: "Andel headshots av totale kills." },
            { k: "GULAG", ex: "71%", l: "Gulag win-rate", desc: "Hvor ofte du vinner ditt gulag." },
            { k: "REVIVES", ex: "12.3", l: "Revives per matchday", desc: "Hvor god du er på å pikke opp lagkamerater." },
            { k: "DAMAGE", ex: "3.2K", l: "Damage per game", desc: "Snitt damage — sier mer enn kills alene." },
            { k: "MVP", ex: "08", l: "Top-fragger games", desc: "Antall ganger du var topp på laget i en game." },
          ].map((s, i) => (
            <div key={s.k} style={{
              background: "var(--bg-1)", border: "1px solid var(--line)",
              padding: 22, position: "relative", overflow: "hidden", minHeight: 180,
            }}>
              <div style={{
                fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--text-faint)",
                letterSpacing: "0.18em",
              }}>{s.k}</div>
              <div style={{
                fontFamily: "var(--font-stencil)", fontSize: 44, lineHeight: 1, marginTop: 8,
                color: accent, letterSpacing: "0.02em",
              }}>{s.ex}</div>
              <div style={{
                fontFamily: "var(--font-stencil)", fontSize: 13, letterSpacing: "0.04em", marginTop: 6,
                color: "var(--text)",
              }}>{s.l}</div>
              <p style={{
                fontFamily: "var(--font-body)", fontSize: 12, color: "var(--text-dim)",
                marginTop: 8, lineHeight: 1.55,
              }}>{s.desc}</p>
              <div style={{
                position: "absolute", bottom: 12, right: 14,
                fontFamily: "var(--font-mono)", fontSize: 9, color: "var(--text-faint)",
                letterSpacing: "0.18em",
              }}>EKS. VERDI</div>
            </div>
          ))}
        </div>
      </section>
    </>
  );
};

Object.assign(window, { StatsPage });