// Hall of Fame — legender, rekorder og tidligere turneringsvinnere.

const HallOfFamePage = ({ accent, onNav }) => {
  const [topPlayers, setTopPlayers] = React.useState([]);
  const [pastTournaments, setPastTournaments] = React.useState([]);
  React.useEffect(() => {
    WZN_Store.getTopPlayers(10).then(setTopPlayers);
    WZN_Store.getTournaments().then(all => setPastTournaments(all.filter(t => t.status === "completed")));
  }, []);
  return (
  <>
    <PageHeader
      eyebrow="HALL OF FAME / 09"
      title={<>HALL OF <span style={{ color: accent }}>FAME</span>.</>}
      sub="De som har satt spor i norsk Warzone-konkurransehistorie. Vinnere, rekorder og legender fra turneringer som har vært."
      accent={accent}
    />

    {/* Gold tier — tournament winners */}
    <section style={{
      padding: "64px 48px", borderBottom: "1px solid var(--line)",
      background: "var(--bg-0)", position: "relative", overflow: "hidden",
    }}>
      <div style={{
        position: "absolute", right: -40, top: -80,
        fontFamily: "var(--font-stencil)", fontSize: 400, lineHeight: 0.9,
        color: "rgba(255,255,255,0.018)", pointerEvents: "none", letterSpacing: "-0.02em",
      }}>HOF</div>

      <div style={{ position: "relative", zIndex: 1 }}>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: accent, letterSpacing: "0.25em", marginBottom: 28 }}>
          TURNERINGSVINNERE / 09.A
        </div>

        {pastTournaments.length === 0 ? (
          <div style={{ padding: "48px 0", color: "var(--text-faint)", fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.15em" }}>
            INGEN FULLFØRTE TURNERINGER ENNÅ — HISTORIEN SKRIVES SNART.
          </div>
        ) : (
          <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
            {pastTournaments.map((t, i) => (
              <div key={t.id} style={{
                display: "grid", gridTemplateColumns: "80px 2fr 1fr 1fr 200px",
                gap: 28, alignItems: "center",
                padding: "28px 0", borderBottom: i < pastTournaments.length - 1 ? "1px solid var(--line)" : "none",
              }}>
                <div style={{ fontFamily: "var(--font-stencil)", fontSize: 64, lineHeight: 0.9, color: "var(--text-dim)", letterSpacing: "-0.02em" }}>
                  {String(i+1).padStart(2,"0")}
                </div>
                <div>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--text-faint)", letterSpacing: "0.18em", marginBottom: 6 }}>
                    {t.start_date ? formatTrnDate(t.start_date).date : "—"} · {(t.team_size || "trios").toUpperCase()}
                  </div>
                  <div style={{ fontFamily: "var(--font-stencil)", fontSize: 32, letterSpacing: "0.02em", lineHeight: 1 }}>{t.name}</div>
                </div>
                <div style={{ borderLeft: `3px solid ${accent}`, paddingLeft: 18 }}>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--text-faint)", letterSpacing: "0.18em" }}>VINNER</div>
                  <div style={{ fontFamily: "var(--font-stencil)", fontSize: 18, marginTop: 8, color: accent }}>—</div>
                </div>
                <div>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--text-faint)", letterSpacing: "0.18em" }}>POTT</div>
                  <div style={{ fontFamily: "var(--font-stencil)", fontSize: 22, marginTop: 4, color: accent }}>
                    {t.prize_pool ? t.prize_pool.toLocaleString() + " kr" : "—"}
                  </div>
                </div>
                <button onClick={() => onNav && onNav("turnering", { tournamentId: t.id })} style={{
                  padding: "10px 18px", border: `1px solid ${accent}`, color: accent, background: "transparent",
                  fontFamily: "var(--font-stencil)", fontSize: 12, letterSpacing: "0.06em", cursor: "pointer",
                }}>SE DETALJER →</button>
              </div>
            ))}
          </div>
        )}
      </div>
    </section>

    {/* Records */}
    <section style={{
      padding: "64px 48px", borderBottom: "1px solid var(--line)",
      background: "var(--bg-1)",
    }}>
      <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: accent, letterSpacing: "0.25em", marginBottom: 32 }}>
        REKORDER / 09.B · ALLE TURNERINGER
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
        {[
          { title: "HØYEST K/D", val: "—", sub: "Ingen rekord ennå", icon: "K/D" },
          { title: "FLEST KILLS I ÉN GAME", val: "—", sub: "Ingen rekord ennå", icon: "KIL" },
          { title: "MEST WINS TOTALT", val: "—", sub: "Ingen rekord ennå", icon: "WIN" },
          { title: "HØYEST GULAG%", val: "—", sub: "Ingen rekord ennå", icon: "GUL" },
          { title: "BESTE PLACEMENT SNITT", val: "—", sub: "Ingen rekord ennå", icon: "PLC" },
          { title: "FLEST TURNERINGSVINNER", val: "—", sub: "Ingen rekord ennå", icon: "CUP" },
        ].map((r, i) => (
          <div key={i} style={{
            background: "var(--bg-2)", border: i === 0 || i === 2 ? `1px solid ${accent}` : "1px solid var(--line)",
            padding: 28, position: "relative", overflow: "hidden",
          }}>
            <div style={{
              position: "absolute", right: -8, bottom: -24,
              fontFamily: "var(--font-stencil)", fontSize: 100, lineHeight: 1,
              color: "rgba(255,255,255,0.03)", pointerEvents: "none",
            }}>{r.icon}</div>
            <span className="hcard-corners"><span /><span /><span /><span /></span>
            <div style={{ position: "relative", zIndex: 1 }}>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--text-faint)", letterSpacing: "0.2em", marginBottom: 10 }}>{r.title}</div>
              <div style={{ fontFamily: "var(--font-stencil)", fontSize: 64, color: accent, lineHeight: 0.95, letterSpacing: "-0.01em" }}>{r.val}</div>
              <div style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "var(--text-dim)", marginTop: 10, lineHeight: 1.5 }}>{r.sub}</div>
            </div>
          </div>
        ))}
      </div>
    </section>

    {/* Legends — top players of all time (from warm-ups) */}
    <section style={{
      padding: "64px 48px", borderBottom: "1px solid var(--line)",
    }}>
      <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: accent, letterSpacing: "0.25em", marginBottom: 32 }}>
        LEGENDER / 09.C · TOPP 5 SPILLERE TOTALT
      </div>
      {topPlayers.length === 0 ? (
        <div style={{ padding: "32px 0", color: "var(--text-faint)", fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.15em" }}>
          INGEN REKORDER ENNÅ — VINN EN TURNERING FOR Å KOMME HER.
        </div>
      ) : (
        <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 12 }}>
          {topPlayers.slice(0, 5).map((p, i) => (
            <div key={p.team_name} style={{
              background: i === 0 ? "var(--bg-2)" : "var(--bg-1)",
              border: `1px solid ${i === 0 ? accent : "var(--line)"}`,
              padding: 24, position: "relative", overflow: "hidden",
            }}>
              {i === 0 && (
                <div style={{
                  position: "absolute", top: 0, right: 0, background: accent, color: "var(--bg-0)",
                  fontFamily: "var(--font-stencil)", fontSize: 10, letterSpacing: "0.08em", padding: "4px 10px",
                }}>★ #1</div>
              )}
              <div style={{ position: "absolute", right: -8, bottom: -28, fontFamily: "var(--font-stencil)", fontSize: 140, lineHeight: 1, color: "rgba(255,255,255,0.025)", pointerEvents: "none" }}>
                {String(i+1).padStart(2,"0")}
              </div>
              <div style={{ position: "relative", zIndex: 1 }}>
                <div style={{ fontFamily: "var(--font-stencil)", fontSize: 32, color: accent, lineHeight: 1 }}>#{i+1}</div>
                <div style={{ fontFamily: "var(--font-stencil)", fontSize: 22, marginTop: 12, letterSpacing: "0.02em" }}>{p.team_name}</div>
                <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 8, marginTop: 16, paddingTop: 14, borderTop: "1px solid var(--line)" }}>
                  {[["K/D", p.kd?.toFixed ? p.kd.toFixed(2) : "—"], ["WINS", 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: 20, marginTop: 2 }}>{v}</div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          ))}
        </div>
      )}
    </section>

    {/* Liga CTA */}
    <section style={{
      padding: "56px 48px", background: "var(--bg-1)",
      display: "flex", justifyContent: "space-between", alignItems: "center",
    }}>
      <div>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: accent, letterSpacing: "0.25em", marginBottom: 10 }}>
          SKRIV HISTORIEN / 09.D
        </div>
        <h2 style={{ fontFamily: "var(--font-stencil)", fontSize: 52, letterSpacing: "0.02em", margin: 0, lineHeight: 1 }}>
          DIN PLASS HER ER <span style={{ color: accent }}>LEDIG.</span>
        </h2>
        <p style={{ fontFamily: "var(--font-body)", fontSize: 16, color: "var(--text-dim)", marginTop: 12, maxWidth: 520, lineHeight: 1.55 }}>
          Ingen liga-vinnere ennå. Sesong 01 er åpen for påmelding. Bli den første til å ta tittelen.
        </p>
      </div>
      <div style={{ display: "flex", gap: 12 }}>
        <button onClick={() => onNav && onNav("liga", { anchor: "interesse" })} className="cta" style={{
          background: accent, color: "var(--bg-0)", borderColor: accent,
          fontWeight: 700, padding: "16px 28px", cursor: "pointer",
        }}>
          <span>MELD INTERESSE</span> <span>▶</span>
        </button>
        <button onClick={() => onNav && onNav("turneringer")} className="cta cta-ghost" style={{
          padding: "16px 22px", cursor: "pointer",
        }}>
          <span>SE TURNERINGER</span> <span>↗</span>
        </button>
      </div>
    </section>
  </>
  );
};

Object.assign(window, { HallOfFamePage });