/* screens-dashboard.jsx — scalable overview: uses CATALOG for all games. */
const { useState: useStateDash } = React;

function dashGameType(s) { return s.gameType || (s.game === "wuerfelpoker" ? "wp" : s.game === "tischfussball" ? "tfb" : s.game); }
function getIcon(s) { const c = window.CATALOG?.byId(s.game); return c?.icon || (dashGameType(s) === "wp" ? "dice" : dashGameType(s) === "tfb" ? "play" : "dice"); }
function getGameName(s) { return t("game." + s.game + ".name") || s.game; }

function sessionWinner(s) {
  const gt = dashGameType(s);
  if (gt === "wp") return leaderOf(s);
  if (gt === "tfb") { const ti = s.winner ?? 0; const split = s.players.length <= 2 ? 1 : 2; const team = s.players.slice(ti === 0 ? 0 : split, ti === 0 ? split : s.players.length); return { name: team.map((p) => p.name).join(" & "), total: null }; }
  if (gt === "kniffel") { let best = { name: "—", total: -1 }; s.players.forEach((p, i) => { const tot = (s.boards[i] ? Object.values(s.boards[i]).reduce((a, v) => a + (typeof v === "number" ? v : 0), 0) : 0); if (tot > best.total) best = { name: p.name, total: tot }; }); return best; }
  if (gt === "round") { const tots = Array(s.players.length).fill(0); (s.rounds || []).forEach((r) => r.scores.forEach((sc, i) => { tots[i] += typeof sc === "number" ? sc : 0; })); const catTots = (s.catScores || []).reduce((acc, catRow) => { catRow.forEach((v, i) => { acc[i] = (acc[i] || 0) + (typeof v === "number" ? v : 0); }); return acc; }, Array(s.players.length).fill(0)); const vpTots = s.currentVP || []; const allTots = tots.map((v, i) => v + (catTots[i] || 0) + (vpTots[i] || 0)); const hi = allTots.indexOf(Math.max(...allTots)); return { name: s.players[hi]?.name || "—", total: allTots[hi] }; }
  if (s.winner !== undefined && s.winner !== null) return { name: s.players[s.winner]?.name || "—", total: null };
  return { name: "—", total: null };
}

function sessionStatusLine(s) {
  const gt = dashGameType(s);
  if (gt === "wp") return t("sess.round", { n: s.round }) + " · " + t("sess.isup", { name: s.players[s.turn]?.name || "?" });
  if (gt === "tfb") return t("tfb.match", { n: s.round || 1 }) + " · " + (s.current?.scores || [0, 0]).join(":");
  if (gt === "racket") { const isTT = s.sport === "tischtennis"; const w = isTT ? (s.gameWins || [0, 0]) : (s.setWins || [0, 0]); return (isTT ? t("racket.game") : t("racket.set")) + " " + w.join(":"); }
  if (gt === "dart") return t("dart.remaining") + ": " + (s.scores || []).join(" / ");
  if (gt === "kniffel") return t("sess.round", { n: s.round }) + " · " + t("sess.isup", { name: s.players[s.turn]?.name || "?" });
  if (gt === "bowling") return t("bowling.frame") + " · " + t("sess.isup", { name: s.players[s.currentPlayer]?.name || "?" });
  return t("round.round", { n: s.currentRound || 1 });
}

function Dashboard({ account, sessions, nav, onSignOut, onDelete, lang, setLang }) {
  const [query, setQuery] = useStateDash("");
  const [cat, setCat] = useStateDash("all");
  const [showAllPast, setShowAllPast] = useStateDash(false);

  const GAMES = window.CATALOG ? window.CATALOG.GAMES : [];
  const active = sessions.filter((s) => s.status === "active");
  const finished = sessions.filter((s) => s.status === "finished");
  const pastShown = showAllPast ? finished : finished.slice(0, 4);

  const cats = [
    { id: "all", label: t("dash.cat.all") },
    { id: "dice", label: t("dash.cat.dice") },
    { id: "sports", label: t("dash.cat.sports") },
    { id: "cards", label: t("dash.cat.cards") },
    { id: "board", label: t("dash.cat.board") },
  ];

  const filtered = GAMES.filter((g) =>
    (cat === "all" || g.cat === cat) &&
    (query.trim() === "" || t("game." + g.id + ".name").toLowerCase().includes(query.trim().toLowerCase()))
  );

  return (
    <div className="app">
      <AppHeader account={account} nav={nav} onSignOut={onSignOut} lang={lang} setLang={setLang} />
      <main className="wrap" style={{ flex: 1, paddingBottom: 60 }}>
        <section style={{ padding: "32px 0 24px", display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 16, flexWrap: "wrap" }}>
          <div>
            <span className="eyebrow">{t("dash.eyebrow")}</span>
            <h1 style={{ fontSize: "clamp(28px,4vw,40px)", marginTop: 10 }}>{t("dash.hi", { name: account.displayName.split(" ")[0] })}</h1>
            <p className="muted" style={{ marginTop: 6, fontSize: 16 }}>{t("dash.sub")}</p>
          </div>
          {sessions.length > 0 && <span className="dash-stat"><Icon name="dice" size={15} />{t("dash.played", { n: sessions.length })}</span>}
        </section>

        {active.length > 0 && (
          <section style={{ marginBottom: 34 }}>
            <div className="section-head"><h2>{t("dash.continue")}</h2></div>
            <div className="continue-rail">
              {active.map((s) => <ContinueCard key={s.id} s={s} nav={nav} />)}
            </div>
          </section>
        )}

        <section style={{ marginBottom: 34 }}>
          <div className="section-head"><h2>{t("dash.library")}</h2></div>
          <div className="lib-toolbar">
            <div className="search">
              <span className="si"><Icon name="search" size={17} /></span>
              <input className="input" placeholder={t("dash.search")} value={query} onChange={(e) => setQuery(e.target.value)} />
            </div>
            <div className="chips" style={{ flexWrap: "wrap" }}>
              {cats.map((c) => (
                <button key={c.id} className={"chip-filter" + (cat === c.id ? " on" : "")} onClick={() => setCat(c.id)}>{c.label}</button>
              ))}
            </div>
          </div>
          {filtered.length === 0 ? (
            <div className="card empty-state">{t("dash.noresults")}</div>
          ) : (
            <div className="games-grid">
              {filtered.map((g) => <GameCard key={g.id} g={g} nav={nav} />)}
            </div>
          )}
        </section>

        {finished.length > 0 && (
          <section>
            <div className="section-head"><h2>{t("dash.past")}</h2></div>
            <div className="card" style={{ overflow: "hidden" }}>
              {pastShown.map((s) => <SessionRow key={s.id} s={s} nav={nav} onDelete={onDelete} finished />)}
            </div>
            {finished.length > 4 && (
              <button className="btn ghost sm" style={{ marginTop: 12 }} onClick={() => setShowAllPast((v) => !v)}>
                {showAllPast ? t("dash.showless") : t("dash.showall", { n: finished.length })}
              </button>
            )}
          </section>
        )}

        {sessions.length === 0 && <div className="card empty-state">{t("dash.empty")}</div>}
      </main>
    </div>
  );
}

function GameCard({ g, nav }) {
  const ready = g.status === "ready";
  const name = t("game." + g.id + ".name");
  const desc = t("game." + g.id + ".desc");
  return (
    <div className={"card game-card" + (ready ? "" : " soon")} onClick={() => ready && nav("#/new/" + g.id)}>
      <span className="cat-badge">{t("dash.cat." + g.cat)}</span>
      <div className="game-icon" style={ready ? { color: "var(--accent)" } : { background: "var(--bg-2)", borderColor: "var(--line)", color: "var(--faint)" }}>
        <Icon name={g.icon} size={26} />
      </div>
      <div>
        <h3 style={ready ? {} : { color: "var(--ink-2)" }}>{name}</h3>
        <p className={ready ? "muted" : "faint"} style={{ fontSize: 13.5, marginTop: 4 }}>{desc}</p>
      </div>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginTop: "auto" }}>
        {ready
          ? <span className="tag live"><span style={{ width: 6, height: 6, borderRadius: 99, background: "var(--good)" }}></span> {t("tag.ready")}</span>
          : <span className="tag soon">{t("tag.soon")}</span>}
        {ready && <span className="btn sm primary">{t("btn.newgame")}<Icon name="arrow" size={15} /></span>}
      </div>
    </div>
  );
}

function ContinueCard({ s, nav }) {
  const icon = getIcon(s);
  const name = getGameName(s);
  const statusLine = sessionStatusLine(s);
  return (
    <div className="card continue-card" onClick={() => nav("#/game/" + s.id)}>
      <div className="cc-top">
        <div className="game-icon" style={{ width: 38, height: 38, borderRadius: 11 }}><Icon name={icon} size={19} /></div>
        <span className="cc-title">{name}</span>
      </div>
      <div className="cc-players">
        <span className="pcount">
          {s.players.slice(0, 4).map((p, i) => <Avatar key={i} name={p.name} size="sm" idx={i} />)}
          {s.players.length > 4 && <span className="avatar sm" style={{ background: "var(--faint)" }}>+{s.players.length - 4}</span>}
        </span>
      </div>
      <div className="cc-foot">
        <span className="muted" style={{ fontSize: 13, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{statusLine}</span>
        <span className="btn sm primary" style={{ marginLeft: "auto", flexShrink: 0 }}><Icon name="play" size={14} />{t("btn.resume")}</span>
      </div>
    </div>
  );
}

function SessionRow({ s, nav, onDelete, finished }) {
  const icon = getIcon(s);
  const name = getGameName(s);
  const winner = finished ? sessionWinner(s) : null;
  return (
    <div className="session-row" onClick={() => nav("#/game/" + s.id)}>
      <div className="game-icon" style={{ width: 40, height: 40, borderRadius: 11 }}><Icon name={icon} size={20} /></div>
      <div className="meta">
        <div style={{ fontWeight: 700, fontSize: 15 }}>{name}</div>
        <div className="muted" style={{ fontSize: 13 }}>
          {finished
            ? <span>🏆 {winner.name}{winner.total !== null ? " · " + t("sess.pts", { n: winner.total }) : ""}</span>
            : <span>{sessionStatusLine(s)}</span>}
          <span className="faint"> · {timeAgo(s.updatedAt)}</span>
        </div>
      </div>
      <span className="pcount">
        {s.players.slice(0, 4).map((p, i) => <Avatar key={i} name={p.name} size="sm" idx={i} />)}
        {s.players.length > 4 && <span className="avatar sm" style={{ background: "var(--faint)" }}>+{s.players.length - 4}</span>}
      </span>
      <button className="iconbtn" style={{ width: 32, height: 32 }} onClick={(e) => { e.stopPropagation(); if (confirm(t("confirm.delete"))) onDelete(s.id); }}><Icon name="trash" size={15} /></button>
      <Icon name="chevron" size={18} />
    </div>
  );
}

function leaderOf(s) {
  let best = { name: "—", total: -1 };
  s.players.forEach((p, i) => { const tot = window.WP.playerTotal(s.boards[i]); if (tot > best.total) best = { name: p.name, total: tot }; });
  return best;
}
function timeAgo(ts) {
  const d = Date.now() - ts, m = Math.floor(d / 60000), h = Math.floor(m / 60), day = Math.floor(h / 24);
  if (m < 1) return t("time.now"); if (m < 60) return t("time.m", { n: m }); if (h < 24) return t("time.h", { n: h }); return t("time.d", { n: day });
}

Object.assign(window, { Dashboard, GameCard, ContinueCard, SessionRow });