/* screens-game.jsx — active Würfelpoker scoreboard (bilingual). */
const { useState: useStateGame, useEffect: useEffectGame } = React;
const WP = window.WP;

function Game({ sess, account, nav, onChange, density, lang, setLang }) {
  const [viewIdx, setViewIdx] = useStateGame(sess.turn);
  const [editing, setEditing] = useStateGame(null); // {p,col,catId}
  const [showResults, setShowResults] = useStateGame(false);
  const [showRules, setShowRules] = useStateGame(false);
  const [toast, setToast] = useStateGame("");

  useEffectGame(() => { setViewIdx(sess.turn); }, [sess.turn]);
  useEffectGame(() => { if (sess.status === "finished") setShowResults(true); }, [sess.status]);
  useEffectGame(() => { if (!toast) return; const tm = setTimeout(() => setToast(""), 1700); return () => clearTimeout(tm); }, [toast]);

  const isActiveView = viewIdx === sess.turn && sess.status === "active";
  const entry = sess.entryThisTurn;

  function patch(updater) {
    const next = JSON.parse(JSON.stringify(sess));
    updater(next);
    onChange(next);
  }

  function commitEntry(catId, value) {
    const { col } = editing;
    patch((n) => {
      if (n.entryThisTurn && !(n.entryThisTurn.col === col && n.entryThisTurn.catId === catId)) {
        const e = n.entryThisTurn;
        n.boards[e.player][e.col][e.catId] = null;
      }
      n.boards[sess.turn][col][catId] = value;
      n.entryThisTurn = { player: sess.turn, col, catId };
      const done = n.players.every((_, pi) => WP.isBoardComplete(n.boards[pi], n.columns));
      if (done) n.status = "finished";
    });
    setEditing(null);
  }

  function clearEntry() {
    const { col, catId } = editing;
    patch((n) => {
      n.boards[sess.turn][col][catId] = null;
      if (n.entryThisTurn && n.entryThisTurn.col === col && n.entryThisTurn.catId === catId) n.entryThisTurn = null;
    });
    setEditing(null);
  }

  function nextPlayer() {
    if (!entry) { setToast(t("game.enterfirst")); return; }
    patch((n) => {
      const np = (n.turn + 1) % n.players.length;
      if (np === 0) n.round += 1;
      n.turn = np;
      n.entryThisTurn = null;
    });
  }

  const board = sess.boards[viewIdx];
  const totals = sess.players.map((_, i) => WP.playerTotal(sess.boards[i]));
  const leadVal = Math.max(...totals);

  return (
    <div className="app">
      <AppHeader account={account} nav={nav} onSignOut={() => {}} crumb={t("game.wp.name")} lang={lang} setLang={setLang} />
      <main className="wrap" style={{ flex: 1, paddingBottom: 30 }}>
        <div className="game-top">
          <button className="btn ghost sm" onClick={() => nav("#/")} style={{ paddingLeft: 6 }}><Icon name="back" size={16} />{t("nav.dashboard")}</button>
          <span className="round-pill">{t("sess.round", { n: sess.round })}</span>
          <span className="round-pill">{sess.columns > 1 ? t("sess.cols", { n: sess.columns }) : t("sess.col1")}</span>
          <span className="spacer" style={{ flex: 1 }}></span>
          <button className="btn sm" onClick={() => setShowRules(true)}><Icon name="book" size={15} />{t("game.rules")}</button>
          {sess.status === "finished" && <button className="btn sm primary" onClick={() => setShowResults(true)}><Icon name="crown" size={15} />{t("game.results")}</button>}
        </div>

        <div className="player-rail">
          {sess.players.map((p, i) => {
            const isTurn = i === sess.turn && sess.status === "active";
            return (
              <div key={i} className={"pchip" + (i === viewIdx ? " active" : "") + (totals[i] === leadVal && leadVal > 0 ? " lead" : "")} onClick={() => setViewIdx(i)}>
                <div className="ptop">
                  <Avatar name={p.name} size="sm" idx={i} />
                  <span className="pname">{p.name}</span>
                  {totals[i] === leadVal && leadVal > 0 && <span className="crown"><Icon name="crown" size={15} /></span>}
                  {isTurn && <span className="turn-dot" title="Turn"></span>}
                </div>
                <div className="score">{totals[i]}</div>
              </div>
            );
          })}
        </div>

        {!isActiveView && sess.status === "active" && (
          <div style={{ display: "flex", alignItems: "center", gap: 10, background: "var(--surface-2)", border: "1px solid var(--line)", borderRadius: 10, padding: "10px 14px", marginBottom: 12 }}>
            <Icon name="info" size={16} />
            <span className="muted" style={{ fontSize: 13.5 }}>{t("game.viewing", { a: sess.players[viewIdx].name, b: sess.players[sess.turn].name })}</span>
            <button className="btn sm ghost" style={{ marginLeft: "auto" }} onClick={() => setViewIdx(sess.turn)}>{t("game.goactive")}</button>
          </div>
        )}

        <Sheet
          board={board} columns={sess.columns} editable={isActiveView} lang={lang}
          entry={isActiveView ? entry : null}
          onCell={(col, catId) => { if (isActiveView) setEditing({ p: sess.turn, col, catId }); }}
        />
      </main>

      {sess.status === "active" && (
        <div className="action-bar">
          <div className="wrap inner">
            <Avatar name={sess.players[sess.turn].name} idx={sess.turn} />
            <span className="turn-label"><b>{sess.players[sess.turn].name}</b> — {entry ? t("game.readynext") : t("game.addscore")}</span>
            <span style={{ flex: 1 }}></span>
            {entry && <button className="btn sm ghost" onClick={() => setEditing({ p: sess.turn, col: entry.col, catId: entry.catId })}>{t("game.undo")}</button>}
            <button className="btn primary lg" disabled={!entry} onClick={nextPlayer}>{t("game.next")}<Icon name="arrow" /></button>
          </div>
        </div>
      )}

      {editing && <EntryModal sess={sess} editing={editing} lang={lang} onCommit={commitEntry} onClear={clearEntry} onClose={() => setEditing(null)} />}
      {showResults && <Results sess={sess} totals={totals} onClose={() => setShowResults(false)} nav={nav} />}
      {showRules && <RulesModal lang={lang} onClose={() => setShowRules(false)} />}
      <Toast msg={toast} />
    </div>
  );
}

/* ---------------- Sheet ---------------- */
function Sheet({ board, columns, editable, entry, onCell, lang }) {
  const colIdx = Array.from({ length: columns }, (_, i) => i);
  const rowSum = (catId) => board.reduce((s, c) => (typeof c[catId] === "number" ? s + c[catId] : s), 0);
  const anyFilled = (catId) => board.some((c) => typeof c[catId] === "number");

  function cell(col, c) {
    const v = board[col][c.id];
    const isEntry = entry && entry.col === col && entry.catId === c.id;
    const locked = !editable || (entry && !isEntry);
    let cls = "scell ";
    if (v === null || v === undefined) cls += "empty";
    else if (v === 0) cls += "struck";
    else cls += "filled";
    if (locked) cls += " locked";
    if (isEntry) cls += " lastentry";
    return (
      <td key={col} className={cls} onClick={() => { if (!locked) onCell(col, c.id); }}>
        {typeof v === "number" && v !== 0 ? v : ""}
      </td>
    );
  }

  function renderRows(list, upper) {
    return list.map((c) => {
      const sub = WP.sub(c, lang);
      return (
        <tr key={c.id}>
          <td className="cat-cell">
            <div className="cl">
              <span className="face"><Face face={WP.face(c, lang)} k={upper} /></span>
              <span>
                <span className="clabel">{WP.name(c, lang)}</span>
                {sub && <span className="csub" style={{ display: "block" }}>{sub}</span>}
              </span>
              <span className="cval">{upper ? "×" + c.rank : c.value}</span>
            </div>
          </td>
          {colIdx.map((col) => cell(col, c))}
          <td className="scell" style={{ color: anyFilled(c.id) ? "var(--ink-2)" : "var(--faint)", cursor: "default", background: "var(--surface-2)" }}>{anyFilled(c.id) ? rowSum(c.id) : ""}</td>
        </tr>
      );
    });
  }

  const upperSums = colIdx.map((col) => WP.columnTotals(board[col]).upper);
  const lowerSums = colIdx.map((col) => WP.columnTotals(board[col]).lower);
  const grand = colIdx.map((col) => WP.columnTotals(board[col]).total);

  return (
    <div className="sheet-wrap">
      <table className="sheet">
        <thead>
          <tr>
            <th className="cat-cell" style={{ textAlign: "left", background: "var(--surface-2)" }}>{t("sheet.category")}</th>
            {colIdx.map((c) => <th key={c}>{t("sheet.col", { n: c + 1 })}</th>)}
            <th style={{ color: "var(--accent)" }}>Σ</th>
          </tr>
        </thead>
        <tbody>
          {renderRows(WP.UPPER, true)}
          <tr className="sub-row">
            <td className="cat-cell">{t("sheet.upper")}</td>
            {upperSums.map((v, i) => <td key={i} className="scell">{v}</td>)}
            <td className="scell" style={{ color: "var(--accent)" }}>{upperSums.reduce((a, b) => a + b, 0)}</td>
          </tr>
          {renderRows(WP.LOWER, false)}
          <tr className="sub-row">
            <td className="cat-cell">{t("sheet.lower")}</td>
            {lowerSums.map((v, i) => <td key={i} className="scell">{v}</td>)}
            <td className="scell" style={{ color: "var(--accent)" }}>{lowerSums.reduce((a, b) => a + b, 0)}</td>
          </tr>
          <tr className="total-row">
            <td className="cat-cell">{t("sheet.total")}</td>
            {grand.map((v, i) => <td key={i} className="scell">{v}</td>)}
            <td className="scell">{grand.reduce((a, b) => a + b, 0)}</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}

/* ---------------- Entry modal ---------------- */
function EntryModal({ sess, editing, onCommit, onClose, onClear, lang }) {
  const c = WP.catById(editing.catId);
  const opts = WP.optionsFor(editing.catId);
  const isUpper = WP.isUpper(editing.catId);
  const name = WP.name(c, lang);
  const current = sess.boards[editing.p][editing.col][editing.catId];
  const hasValue = typeof current === "number";

  return (
    <div className="scrim" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <span className="face" style={{ width: 38, height: 38 }}><Face face={WP.face(c, lang)} k={isUpper} /></span>
          <div>
            <h3>{name}</h3>
            <span className="muted" style={{ fontSize: 13.5 }}>{isUpper ? t("entry.howmany", { x: name, r: c.rank }) : WP.sub(c, lang)}</span>
          </div>
          <span style={{ flex: 1 }}></span>
          <span className="muted" style={{ fontSize: 13 }}>{t("entry.column", { n: editing.col + 1 })}</span>
        </div>

        {isUpper ? (
          <div className="entry-grid">
            {opts.map((o) => (
              <div key={o.count} className={"entry-opt" + (o.count === 0 ? " zero" : "")} onClick={() => onCommit(c.id, o.value)}>
                <span className="pts" style={o.count === 0 ? { color: "var(--strike)", fontSize: 18 } : {}}>{o.count === 0 ? t("entry.strike") : o.value}</span>
                <span className="cnt">{o.count === 0 ? t("entry.points0") : t("entry.times", { n: o.count, x: name })}</span>
              </div>
            ))}
          </div>
        ) : (
          <div className="entry-grid" style={{ gridTemplateColumns: "1fr 1fr 1fr", margin: "20px 0" }}>
            <div className="entry-opt zero" style={{ height: 80 }} onClick={() => onCommit(c.id, 0)}>
              <span className="pts" style={{ color: "var(--strike)", fontSize: 17 }}>{t("entry.strike")}</span>
              <span className="cnt">{t("entry.points0")}</span>
            </div>
            <div className="entry-opt" style={{ height: 80 }} onClick={() => onCommit(c.id, c.value)}>
              <span className="pts" style={{ fontSize: 28 }}>{c.value}</span>
              <span className="cnt">{t("entry.normal")}</span>
            </div>
            <div className="entry-opt" style={{ height: 80, borderColor: "var(--gold)", background: "oklch(0.97 0.03 85)" }} onClick={() => onCommit(c.id, c.valueFR)}>
              <span className="pts" style={{ fontSize: 28, color: "oklch(0.55 0.13 75)" }}>{c.valueFR}</span>
              <span className="cnt" style={{ color: "oklch(0.55 0.13 75)" }}>⭐ {t("entry.firstroll")}</span>
            </div>
          </div>
        )}

        <div style={{ display: "flex", gap: 10 }}>
          {hasValue && <button className="btn block" onClick={onClear}>{t("entry.clear")}</button>}
          <button className="btn ghost block" onClick={onClose}>{t("entry.cancel")}</button>
        </div>
      </div>
    </div>
  );
}

/* ---------------- Results ---------------- */
function Results({ sess, totals, onClose, nav }) {
  const ranked = sess.players.map((p, i) => ({ name: p.name, total: totals[i], idx: i })).sort((a, b) => b.total - a.total);
  const allDone = sess.status === "finished";
  return (
    <div className="scrim" onClick={onClose}>
      <div className="modal wide" onClick={(e) => e.stopPropagation()}>
        <div style={{ textAlign: "center", marginBottom: 6 }}>
          <div style={{ color: "var(--gold)", display: "flex", justifyContent: "center" }}><Icon name="crown" size={34} /></div>
          <h3 style={{ fontSize: 24, marginTop: 8 }}>{allDone ? t("res.over") : t("res.standings")}</h3>
          <p className="muted" style={{ fontSize: 14 }}>{allDone ? t("res.wins", { name: ranked[0].name, n: ranked[0].total }) : t("res.current")}</p>
        </div>
        <div style={{ margin: "18px 0" }}>
          {ranked.map((r, pos) => (
            <div className="results-row" key={r.idx}>
              <span className={"rank-badge" + (pos === 0 ? " gold" : "")}>{pos + 1}</span>
              <Avatar name={r.name} idx={r.idx} />
              <span style={{ fontWeight: 700, flex: 1 }}>{r.name}</span>
              <span style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 22 }}>{r.total}</span>
            </div>
          ))}
        </div>
        <div style={{ display: "flex", gap: 10 }}>
          {allDone && <button className="btn primary block" onClick={() => nav("#/new")}>{t("res.newgame")}</button>}
          <button className="btn ghost block" onClick={onClose}>{allDone ? t("res.review") : t("res.close")}</button>
        </div>
      </div>
    </div>
  );
}

/* ---------------- Rules modal ---------------- */
function RulesModal({ onClose, lang }) {
  const introParts = t("rules.intro", { b: "§§" }).split("§§");
  return (
    <div className="scrim" onClick={onClose}>
      <div className="modal wide" onClick={(e) => e.stopPropagation()} style={{ maxHeight: "86vh", overflowY: "auto" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <Icon name="book" size={20} /><h3>{t("rules.title")}</h3>
          <button className="iconbtn" style={{ marginLeft: "auto", width: 32, height: 32 }} onClick={onClose}><Icon name="x" size={16} /></button>
        </div>
        <p className="muted" style={{ fontSize: 14, margin: "10px 0 16px" }}>{introParts[0]}<b style={{ color: "var(--ink)" }}>{t("rules.introB")}</b>{introParts[1]}</p>

        <div className="eyebrow" style={{ marginBottom: 8 }}>{t("rules.upper")}</div>
        <div className="rules-list">
          {WP.UPPER.map((c) => (
            <div className="rule-line" key={c.id}>
              <span className="face"><Face face={WP.face(c, lang)} k /></span>
              <span className="rl-name">{WP.name(c, lang)} {WP.sub(c, lang) && <span className="faint" style={{ fontWeight: 400 }}>({WP.sub(c, lang)})</span>}</span>
              <span className="rl-pts">{t("rules.countx", { r: c.rank })}</span>
            </div>
          ))}
        </div>

        <div className="eyebrow" style={{ margin: "18px 0 8px" }}>{t("rules.lower")}</div>
        <div className="rules-list">
          {WP.LOWER.map((c) => (
            <div className="rule-line" key={c.id}>
              <span className="face"><Face face={WP.face(c, lang)} /></span>
              <span className="rl-name">{WP.name(c, lang)} <span className="faint" style={{ fontWeight: 400 }}>({WP.sub(c, lang)})</span></span>
              <span className="rl-pts">{t("rules.points", { n: c.value, fr: c.valueFR })}</span>
            </div>
          ))}
        </div>
        <p className="faint" style={{ fontSize: 12.5, marginTop: 16 }}>{t("rules.foot")}</p>
      </div>
    </div>
  );
}

Object.assign(window, { Game, Sheet, EntryModal, Results, RulesModal });