/* screens-stats.jsx — Statistics page: games played, wins, breakdown. */
const { useState: useStats } = React;

function statsWinner(s) {
  const gt = s.gameType || s.game;
  if (gt === "wp") {
    let best = { name: null, total: -1 };
    (s.players || []).forEach((p, i) => {
      const tot = window.WP ? window.WP.playerTotal(s.boards[i]) : 0;
      if (tot > best.total) best = { name: p.name, total: tot };
    });
    return best.name;
  }
  if (s.winner !== undefined && s.winner !== null && s.players) {
    if (gt === "tfb") {
      const split = s.players.length <= 2 ? 1 : 2;
      const team = s.winner === 0 ? s.players.slice(0, split) : s.players.slice(split);
      return team.map(p => p.name).join(" & ");
    }
    return s.players[s.winner]?.name || null;
  }
  if (gt === "round") {
    const tots = Array(s.players?.length || 0).fill(0);
    (s.rounds || []).forEach(r => r.scores?.forEach((sc, i) => { tots[i] += typeof sc === "number" ? sc : 0; }));
    (s.catScores || []).forEach(row => row?.forEach((v, i) => { tots[i] += typeof v === "number" ? v : 0; }));
    (s.currentVP || []).forEach((v, i) => { tots[i] = (tots[i] || 0) + (typeof v === "number" ? v : 0); });
    const hw = s.cfg?.highWins !== false;
    const best = hw ? Math.max(...tots) : Math.min(...tots);
    const idx = tots.indexOf(best);
    return s.players?.[idx]?.name || null;
  }
  return null;
}

function Stats({ account, sessions, nav, onSignOut, lang, setLang }) {
  const [tab, setTab] = useStats("overview");

  const finished = sessions.filter(s => s.status === "finished");
  const active   = sessions.filter(s => s.status === "active");

  // By game
  const byGame = {};
  sessions.forEach(s => {
    const key = s.game;
    if (!byGame[key]) byGame[key] = { id: key, played: 0, finished: 0 };
    byGame[key].played++;
    if (s.status === "finished") byGame[key].finished++;
  });
  const gameList = Object.values(byGame).sort((a, b) => b.played - a.played);

  // Player wins
  const playerData = {};
  sessions.forEach(s => {
    (s.players || []).forEach(p => {
      if (!playerData[p.name]) playerData[p.name] = { name: p.name, played: 0, won: 0 };
      playerData[p.name].played++;
    });
    if (s.status === "finished") {
      const w = statsWinner(s);
      if (w && playerData[w]) playerData[w].won++;
    }
  });
  const playerList = Object.values(playerData).filter(p => p.played > 0).sort((a, b) => b.won - a.won || b.played - a.played);

  const maxPlayed = Math.max(...gameList.map(g => g.played), 1);
  const maxWins   = Math.max(...playerList.map(p => p.won), 1);

  return (
    <div className="app">
      <AppHeader account={account} nav={nav} onSignOut={onSignOut} lang={lang} setLang={setLang} crumb="Stats" />
      <main className="wrap" style={{ flex: 1, paddingBottom: 60 }}>
        <section style={{ padding: "32px 0 24px" }}>
          <span className="eyebrow">Statistics</span>
          <h1 style={{ fontSize: "clamp(26px,4vw,38px)", marginTop: 10 }}>
            {lang === "de" ? "Deine Statistiken" : "Your statistics"}
          </h1>
        </section>

        {/* Overview cards */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14, marginBottom: 32 }}>
          {[
            { label: lang === "de" ? "Gesamt gespielt" : "Total played",  val: sessions.length, icon: "dice" },
            { label: lang === "de" ? "Aktiv"           : "In progress",   val: active.length,   icon: "play" },
            { label: lang === "de" ? "Abgeschlossen"   : "Finished",      val: finished.length, icon: "trophy" },
          ].map(c => (
            <div key={c.label} className="card" style={{ padding: "18px 16px", textAlign: "center" }}>
              <div style={{ color: "var(--accent)", display: "flex", justifyContent: "center", marginBottom: 8 }}>
                <Icon name={c.icon} size={22} />
              </div>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 34, letterSpacing: "-0.03em" }}>{c.val}</div>
              <div className="muted" style={{ fontSize: 13, marginTop: 4 }}>{c.label}</div>
            </div>
          ))}
        </div>

        {sessions.length === 0 && (
          <div className="card empty-state">
            <p>{lang === "de" ? "Noch keine Spiele — starte dein erstes Spiel!" : "No games yet — start your first game!"}</p>
            <button className="btn primary" style={{ marginTop: 14 }} onClick={() => nav("#/")}>{lang === "de" ? "Zur Bibliothek" : "Game library"}</button>
          </div>
        )}

        {gameList.length > 0 && (
          <section style={{ marginBottom: 32 }}>
            <div className="section-head">
              <h2 style={{ fontSize: 20 }}>{lang === "de" ? "Spiele gespielt" : "Games played"}</h2>
            </div>
            <div className="card" style={{ overflow: "hidden" }}>
              {gameList.map(g => {
                const name = t("game." + g.id + ".name");
                const pct = (g.played / maxPlayed) * 100;
                return (
                  <div key={g.id} style={{ padding: "14px 18px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", gap: 14 }}>
                    <div style={{ width: 36, height: 36, borderRadius: "var(--r-sm)", background: "var(--accent-50)", display: "grid", placeItems: "center", flexShrink: 0 }}>
                      <Icon name={(window.CATALOG?.byId(g.id)?.icon) || "dice"} size={18} />
                    </div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontWeight: 700, fontSize: 14 }}>{name}</div>
                      <div style={{ height: 6, borderRadius: 3, background: "var(--line-2)", marginTop: 6, overflow: "hidden" }}>
                        <div style={{ width: pct + "%", height: "100%", borderRadius: 3, background: "var(--accent)", transition: "width .6s ease" }}></div>
                      </div>
                    </div>
                    <div style={{ textAlign: "right", flexShrink: 0 }}>
                      <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 18 }}>{g.played}</div>
                      <div className="faint" style={{ fontSize: 11.5 }}>{g.finished} {lang === "de" ? "fertig" : "done"}</div>
                    </div>
                  </div>
                );
              })}
            </div>
          </section>
        )}

        {playerList.length > 0 && (
          <section>
            <div className="section-head">
              <h2 style={{ fontSize: 20 }}>{lang === "de" ? "Spieler-Rangliste" : "Player leaderboard"}</h2>
            </div>
            <div className="card" style={{ overflow: "hidden" }}>
              {playerList.map((p, pos) => {
                const rate = p.played > 0 ? Math.round((p.won / p.played) * 100) : 0;
                const pct = (p.won / maxWins) * 100;
                return (
                  <div key={p.name} style={{ padding: "14px 18px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", gap: 14 }}>
                    <span className={"rank-badge" + (pos === 0 ? " gold" : "")}>{pos + 1}</span>
                    <Avatar name={p.name} idx={pos} />
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontWeight: 700, fontSize: 14 }}>{p.name}</div>
                      <div style={{ height: 6, borderRadius: 3, background: "var(--line-2)", marginTop: 6, overflow: "hidden" }}>
                        <div style={{ width: (pct||0) + "%", height: "100%", borderRadius: 3, background: pos === 0 ? "var(--gold)" : "var(--accent)", transition: "width .6s ease" }}></div>
                      </div>
                    </div>
                    <div style={{ textAlign: "right", flexShrink: 0 }}>
                      <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 18 }}>
                        {p.won} <span style={{ fontSize: 13, color: "var(--muted)", fontWeight: 500 }}>{lang === "de" ? "Siege" : "wins"}</span>
                      </div>
                      <div className="faint" style={{ fontSize: 11.5 }}>{p.played} {lang === "de" ? "Spiele" : "games"} · {rate}%</div>
                    </div>
                  </div>
                );
              })}
            </div>
          </section>
        )}
      </main>
    </div>
  );
}

Object.assign(window, { Stats });