// Lag — liste over alle lag + lagprofil for ett lag.

const LagPage = ({ accent }) => {
  const [selected, setSelected] = React.useState(null);
  const [teams, setTeams] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  React.useEffect(() => {
    WZN_Store.getApprovedTeams().then(data => { setTeams(data); setLoading(false); });
  }, []);
  if (selected) return <LagProfil t={selected} accent={accent} onBack={() => setSelected(null)} />;

  return (
    <>
      <PageHeader
        eyebrow="LAG / 08"
        title={<>LAG<span style={{ color: accent }}>OVERSIKT</span>.</>}
        sub="Alle registrerte lag sortert etter LP (Ligapoeng) fra siste warm-up turneringer. Placement-poeng + kills per game. Klikk et lag for full profil."
        accent={accent}
      />

      <section style={{ padding: "32px 48px 64px" }}>
        {loading ? (
          <div style={{ padding: 32, fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--text-faint)", letterSpacing: "0.18em" }}>LASTER...</div>
        ) : teams.length === 0 ? (
          <div style={{ padding: "48px 0", fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--text-faint)", letterSpacing: "0.15em" }}>
            INGEN GODKJENTE LAG ENNÅ — LAG VISES HER ETTER GODKJENNING AV ADMIN.
          </div>
        ) : (
        <>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 12, marginBottom: 24 }}>
          {teams.slice(0, 3).map((t, i) => (
            <div key={t.id} onClick={() => setSelected(t)} style={{
              background: "var(--bg-1)", border: `1px solid ${i === 0 ? accent : "var(--line)"}`,
              padding: 24, cursor: "pointer", gridColumn: i === 0 ? "span 2" : "span 1",
              position: "relative", overflow: "hidden", transition: "border-color 0.15s",
            }}
              onMouseEnter={e => e.currentTarget.style.borderColor = accent}
              onMouseLeave={e => e.currentTarget.style.borderColor = i === 0 ? accent : "var(--line)"}
            >
              <div style={{
                position: "absolute", right: -20, top: -40,
                fontFamily: "var(--font-stencil)", fontSize: i === 0 ? 240 : 160, lineHeight: 1,
                color: "rgba(255,255,255,0.025)", pointerEvents: "none", letterSpacing: "-0.02em",
              }}>{(t.team_tag || "?")}</div>
              <div style={{ position: "relative", zIndex: 1, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <div>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: accent, letterSpacing: "0.25em", marginBottom: 8 }}>
                    #{i+1} PLASS · {t.region || "NO"}
                  </div>
                  <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
                    <span style={{
                      fontFamily: "var(--font-stencil)", fontSize: 14, padding: "5px 10px",
                      border: `2px solid ${accent}`, color: accent, letterSpacing: "0.04em",
                    }}>{t.team_tag || "—"}</span>
                    <h3 style={{
                      fontFamily: "var(--font-stencil)", fontSize: i === 0 ? 52 : 36, letterSpacing: "0.02em", margin: 0, lineHeight: 1,
                    }}>{(t.team_name || "UKJENT").toUpperCase()}</h3>
                  </div>
                </div>
                <div style={{ textAlign: "right" }}>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--text-faint)", letterSpacing: "0.18em" }}>KAPTEIN</div>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 13, color: accent, lineHeight: 1.3, marginTop: 4 }}>{t.captain_discord || "—"}</div>
                </div>
              </div>
            </div>
          ))}
        </div>

        <div style={{ background: "var(--bg-1)", border: "1px solid var(--line)", overflow: "hidden" }}>
          <table style={{ width: "100%", borderCollapse: "collapse" }}>
            <thead>
              <tr>
                {["#", "LAG", "REGION", "KAPTEIN", "PÅMELDT"].map(h => (
                  <th key={h} style={{
                    textAlign: "left", padding: "12px 14px", borderBottom: "1px solid var(--line)",
                    fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--text-faint)", letterSpacing: "0.18em",
                  }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {teams.map((t, idx) => (
                <tr key={t.id} onClick={() => setSelected(t)} style={{
                  borderBottom: "1px solid var(--line)", cursor: "pointer", transition: "background 0.1s",
                }}
                  onMouseEnter={e => e.currentTarget.style.background = "var(--bg-2)"}
                  onMouseLeave={e => e.currentTarget.style.background = "transparent"}
                >
                  <td style={{ padding: "14px" }}>
                    <span style={{ fontFamily: "var(--font-stencil)", fontSize: 22, color: idx < 3 ? accent : "var(--text-dim)" }}>
                      {String(idx+1).padStart(2,"0")}
                    </span>
                  </td>
                  <td style={{ padding: "14px" }}>
                    <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                      <span style={{
                        fontFamily: "var(--font-stencil)", fontSize: 12, padding: "3px 7px",
                        border: `1px solid ${idx < 3 ? accent : "var(--line-2)"}`,
                        color: idx < 3 ? accent : "var(--text)", letterSpacing: "0.04em",
                      }}>{t.team_tag || "—"}</span>
                      <span style={{ fontFamily: "var(--font-stencil)", fontSize: 15, letterSpacing: "0.04em" }}>{t.team_name}</span>
                    </div>
                  </td>
                  <td style={{ padding: "14px", fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--text-dim)", letterSpacing: "0.15em" }}>{t.region || "NO"}</td>
                  <td style={{ padding: "14px", fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--text-dim)" }}>{t.captain_discord || "—"}</td>
                  <td style={{ padding: "14px", fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--text-faint)" }}>
                    {t.registered_at ? new Date(t.registered_at).toLocaleDateString("no-NO") : t.created_at ? new Date(t.created_at).toLocaleDateString("no-NO") : "—"}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        </>
        )}
      </section>
    </>
  );
};

// ───────── Lag profil ─────────
const LagProfil = ({ t, accent, onBack }) => {
  const roster = Array.isArray(t.roster) ? t.roster : (t.roster ? JSON.parse(t.roster) : []);
  return (
    <>
      <section style={{
        padding: "20px 48px", background: "var(--bg-1)", borderBottom: "1px solid var(--line)",
        display: "flex", alignItems: "center", gap: 18,
        fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.18em",
      }}>
        <button onClick={onBack} style={{
          background: "transparent", border: "none", cursor: "pointer",
          color: "var(--text-dim)", fontFamily: "inherit", fontSize: 11, letterSpacing: "0.18em",
        }}>← LAG</button>
        <span style={{ color: "var(--text-faint)" }}>/</span>
        <span style={{ color: accent }}>{(t.team_tag || "—")} · {(t.team_name || "UKJENT").toUpperCase()}</span>
      </section>

      <section style={{
        padding: "56px 48px", background: "var(--bg-0)", borderBottom: "1px solid var(--line)",
        position: "relative", overflow: "hidden",
      }}>
        <div style={{
          position: "absolute", right: -30, top: -60,
          fontFamily: "var(--font-stencil)", fontSize: 320, lineHeight: 0.9,
          color: "rgba(255,255,255,0.025)", pointerEvents: "none", letterSpacing: "-0.02em",
        }}>{t.team_tag || "?"}</div>

        <div style={{ position: "relative", zIndex: 1 }}>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: accent, letterSpacing: "0.25em", marginBottom: 8 }}>
            GODKJENT LAG · {t.region || "NO"}
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 18, marginBottom: 24 }}>
            <span style={{
              fontFamily: "var(--font-stencil)", fontSize: 18, padding: "6px 14px",
              border: `2px solid ${accent}`, color: accent, letterSpacing: "0.04em",
            }}>{t.team_tag || "—"}</span>
            <h1 style={{ fontFamily: "var(--font-stencil)", fontSize: 72, lineHeight: 0.95, margin: 0 }}>{(t.team_name || "UKJENT").toUpperCase()}</h1>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", border: "1px solid var(--line)", background: "var(--bg-1)", maxWidth: 480 }}>
            {[
              { k: "REGION", v: t.region || "NO" },
              { k: "KAPTEIN", v: t.captain_discord || "—" },
              { k: "STATUS", v: "GODKJENT" },
            ].map((s, i) => (
              <div key={s.k} style={{ padding: "14px 18px", borderRight: i < 2 ? "1px solid var(--line)" : "none" }}>
                <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: 18, color: i === 2 ? accent : "var(--text)", lineHeight: 1, marginTop: 4 }}>{s.v}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {roster.length > 0 && (
        <section style={{ padding: "48px 48px", borderBottom: "1px solid var(--line)" }}>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: accent, letterSpacing: "0.25em", marginBottom: 18 }}>ROSTER / 08.B</div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12 }}>
            {roster.map((p, i) => (
              <div key={i} style={{
                background: "var(--bg-1)", border: i === 0 ? `1px solid ${accent}` : "1px solid var(--line)",
                padding: 20, display: "flex", alignItems: "center", gap: 16,
              }}>
                <div style={{
                  width: 52, height: 52, border: `2px solid ${i === 0 ? accent : "var(--line-2)"}`,
                  display: "flex", alignItems: "center", justifyContent: "center",
                  fontFamily: "var(--font-stencil)", fontSize: 16, color: i === 0 ? accent : "var(--text-dim)",
                  background: "var(--bg-3)",
                }}>{(p.name || p.discord || "?").slice(0,2).toUpperCase()}</div>
                <div>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 9, color: "var(--text-faint)", letterSpacing: "0.2em" }}>
                    {i === 0 ? "KAPTEIN" : "SPILLER"}
                  </div>
                  <div style={{ fontFamily: "var(--font-stencil)", fontSize: 18, marginTop: 4 }}>{p.name || p.discord || "—"}</div>
                  {p.activision && <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--text-dim)", marginTop: 2 }}>{p.activision}</div>}
                </div>
              </div>
            ))}
          </div>
        </section>
      )}
    </>
  );
};

Object.assign(window, { LagPage });