import { useState, useEffect, useRef, useCallback } from "react";

/* ============================================================
   CONSTANTS
   ============================================================ */

const DENOMS = [1, 5, 10, 25, 50, 100, 500, 1000, 5000, 10000];
const MAX_STACK = 10000;
const DEFAULT_RATIO = { chips: 100000, rs: 100 }; // 1000 chips = 1 rs
const DEFAULT_STACK = 10000;
const ROUND_LABELS = {
  1: "Round 1 · Pre-flop",
  2: "Round 2 · Flop",
  3: "Round 3 · Turn",
  4: "Round 4 · River",
};
const POLL_MS = 1800;
const CODE_CHARS = "ABCDEFGHJKLMNPQRSTUVWXYZ23456789";

/* ============================================================
   UTILITIES
   ============================================================ */

function genId() {
  return Math.random().toString(36).slice(2, 10) + Date.now().toString(36).slice(-4);
}

function genRoomCode(len = 5) {
  let out = "";
  for (let i = 0; i < len; i++) out += CODE_CHARS[Math.floor(Math.random() * CODE_CHARS.length)];
  return out;
}

function chipsToRs(chips, ratio) {
  const r = ratio || DEFAULT_RATIO;
  if (!r.chips) return 0;
  return (chips * r.rs) / r.chips;
}

function fmtChips(n) {
  const v = Number.isFinite(n) ? n : 0;
  return v.toLocaleString("en-IN");
}

function fmtRs(chips, ratio) {
  const rs = chipsToRs(chips, ratio);
  return rs.toLocaleString("en-IN", { maximumFractionDigits: 2 });
}

/* ============================================================
   STORAGE HELPERS  (window.storage — never browser localStorage)
   ============================================================ */

async function loadGame(roomCode) {
  if (!roomCode) return null;
  try {
    const res = await window.storage.get(`game:${roomCode}`, true);
    return res && res.value ? JSON.parse(res.value) : null;
  } catch (e) {
    return null;
  }
}

async function saveGame(game) {
  const toSave = { ...game, updatedAt: Date.now() };
  try {
    await window.storage.set(`game:${toSave.roomCode}`, JSON.stringify(toSave), true);
  } catch (e) {
    console.error("Failed to save game", e);
  }
  return toSave;
}

async function deleteGame(roomCode) {
  try {
    await window.storage.delete(`game:${roomCode}`, true);
  } catch (e) {
    /* ignore */
  }
}

async function loadMySession() {
  try {
    const res = await window.storage.get("my-session", false);
    return res && res.value ? JSON.parse(res.value) : null;
  } catch (e) {
    return null;
  }
}

async function saveMySession(session) {
  try {
    await window.storage.set("my-session", JSON.stringify(session), false);
  } catch (e) {
    /* ignore */
  }
}

async function clearMySession() {
  try {
    await window.storage.delete("my-session", false);
  } catch (e) {
    /* ignore */
  }
}

/* ============================================================
   PURE GAME-LOGIC FUNCTIONS
   ============================================================ */

function defaultConfig() {
  return {
    numPlayers: 4,
    chipMode: "flat", // 'flat' | 'denoms'
    flatStack: DEFAULT_STACK,
    denomCombo: [], // [{value,count}]
    startingStackValue: DEFAULT_STACK,
    ratio: { ...DEFAULT_RATIO },
    preFlopEnabled: true,
    smallBlind: Math.max(1, Math.round(DEFAULT_STACK / 200)),
    bigBlind: Math.max(2, Math.round(DEFAULT_STACK / 200) * 2),
  };
}

function buildInitialGame({ roomCode, adminName, config }) {
  const adminPlayer = {
    id: genId(),
    name: adminName.trim(),
    isAdmin: true,
    stack: config.startingStackValue,
    startingStackAtJoin: config.startingStackValue,
    isDealer: false,
    isSB: false,
    isBB: false,
    isFolded: false,
    currentBet: 0,
    position: 0,
    connected: true,
  };
  return {
    roomCode,
    createdAt: Date.now(),
    config,
    players: [adminPlayer],
    status: "lobby", // lobby -> playing -> showdown -> hand-ended -> ended
    pot: 0,
    currentRound: 0,
    turnPlayerId: null,
    dealerIndex: 0,
    handNumber: 0,
    actedThisRound: [],
    autoWinner: null,
    handHistory: [],
    updatedAt: Date.now(),
  };
}

function getNextActivePlayerId(game, fromId) {
  const players = game.players;
  const n = players.length;
  const fromIdx = players.findIndex((p) => p.id === fromId);
  if (fromIdx === -1) return fromId;
  for (let i = 1; i <= n; i++) {
    const idx = (fromIdx + i) % n;
    if (!players[idx].isFolded) return players[idx].id;
  }
  return fromId;
}

function startHand(game, isFirst) {
  let players = game.players.map((p) => ({
    ...p,
    isFolded: false,
    currentBet: 0,
    isDealer: false,
    isSB: false,
    isBB: false,
  }));
  const n = players.length;
  const dealerIndex = isFirst ? Math.floor(Math.random() * n) : (game.dealerIndex + 1) % n;
  players[dealerIndex].isDealer = true;

  const { smallBlind, bigBlind, preFlopEnabled } = game.config;
  let pot = 0;
  let turnPlayerId;

  if (preFlopEnabled) {
    // Heads-up (2 players) is a special case: the dealer posts the small blind
    // and acts first preflop. 3+ players use the standard SB/BB-after-dealer order.
    const sbIdx = n === 2 ? dealerIndex : (dealerIndex + 1) % n;
    const bbIdx = n === 2 ? (dealerIndex + 1) % n : (dealerIndex + 2) % n;
    players[sbIdx].isSB = true;
    players[bbIdx].isBB = true;
    const sbAmt = Math.min(smallBlind, players[sbIdx].stack);
    players[sbIdx].stack -= sbAmt;
    players[sbIdx].currentBet = sbAmt;
    pot += sbAmt;
    const bbAmt = Math.min(bigBlind, players[bbIdx].stack);
    players[bbIdx].stack -= bbAmt;
    players[bbIdx].currentBet += bbAmt;
    pot += bbAmt;
    const firstIdx = (bbIdx + 1) % n;
    turnPlayerId = players[firstIdx].id;
  } else {
    players = players.map((p) => {
      const amt = Math.min(smallBlind, p.stack);
      return { ...p, stack: p.stack - amt, currentBet: amt };
    });
    pot = players.reduce((s, p) => s + p.currentBet, 0);
    const firstIdx = (dealerIndex + 1) % n;
    turnPlayerId = players[firstIdx].id;
  }

  return {
    ...game,
    players,
    pot,
    currentRound: 1,
    status: "playing",
    dealerIndex,
    turnPlayerId,
    actedThisRound: [],
    autoWinner: null,
    handNumber: game.handNumber + 1,
  };
}

function checkAutoWin(game, players) {
  const active = players.filter((p) => !p.isFolded);
  if (active.length === 1) {
    return {
      ...game,
      players,
      status: "showdown",
      autoWinner: active[0].id,
      turnPlayerId: null,
    };
  }
  return null;
}

function applyFold(game, playerId) {
  if (game.turnPlayerId !== playerId) return game;
  const players = game.players.map((p) => (p.id === playerId ? { ...p, isFolded: true } : p));
  const auto = checkAutoWin(game, players);
  if (auto) return auto;
  const actedThisRound = Array.from(new Set([...game.actedThisRound, playerId]));
  const next = { ...game, players, actedThisRound };
  next.turnPlayerId = getNextActivePlayerId(next, playerId);
  return next;
}

function applyCallCheck(game, playerId) {
  if (game.turnPlayerId !== playerId) return game;
  const active = game.players.filter((p) => !p.isFolded);
  const maxBet = Math.max(0, ...active.map((p) => p.currentBet));
  let added = 0;
  const players = game.players.map((p) => {
    if (p.id !== playerId) return p;
    const owe = Math.max(0, Math.min(maxBet - p.currentBet, p.stack));
    added = owe;
    return { ...p, stack: p.stack - owe, currentBet: p.currentBet + owe };
  });
  const pot = game.pot + added;
  const actedThisRound = Array.from(new Set([...game.actedThisRound, playerId]));
  const next = { ...game, players, pot, actedThisRound };
  next.turnPlayerId = getNextActivePlayerId(next, playerId);
  return next;
}

function applyRaise(game, playerId, raiseToAmount) {
  if (game.turnPlayerId !== playerId) return game;
  const player = game.players.find((p) => p.id === playerId);
  if (!player) return game;
  const cappedTo = Math.min(raiseToAmount, player.currentBet + player.stack);
  const addAmt = Math.max(0, cappedTo - player.currentBet);
  if (addAmt <= 0) return game;
  const players = game.players.map((p) =>
    p.id === playerId ? { ...p, stack: p.stack - addAmt, currentBet: p.currentBet + addAmt } : p
  );
  const pot = game.pot + addAmt;
  const next = { ...game, players, pot, actedThisRound: [playerId] };
  next.turnPlayerId = getNextActivePlayerId(next, playerId);
  return next;
}

function isRoundComplete(game) {
  const active = game.players.filter((p) => !p.isFolded);
  if (active.length <= 1) return true;
  const maxBet = Math.max(0, ...active.map((p) => p.currentBet));
  return active.every((p) => (p.currentBet === maxBet || p.stack === 0) && game.actedThisRound.includes(p.id));
}

function advanceRound(game) {
  if (game.currentRound >= 4) return game;
  const players = game.players.map((p) => ({ ...p, currentBet: 0 }));
  const nextRound = game.currentRound + 1;
  const n = players.length;
  let firstIdx = null;
  for (let i = 1; i <= n; i++) {
    const idx = (game.dealerIndex + i) % n;
    if (!players[idx].isFolded) {
      firstIdx = idx;
      break;
    }
  }
  return {
    ...game,
    players,
    currentRound: nextRound,
    actedThisRound: [],
    turnPlayerId: players[firstIdx].id,
  };
}

function goToShowdown(game) {
  return { ...game, status: "showdown", turnPlayerId: null };
}

function orderByClockwiseFromDealer(game, ids) {
  const n = game.players.length;
  const seq = [];
  for (let i = 1; i <= n; i++) {
    const idx = (game.dealerIndex + i) % n;
    if (ids.includes(game.players[idx].id)) seq.push(game.players[idx].id);
  }
  return seq;
}

function distributePot(game, winnerIds, manualAmounts) {
  const pot = game.pot;
  let amounts = {};
  if (manualAmounts) {
    amounts = manualAmounts;
  } else {
    const share = Math.floor(pot / winnerIds.length);
    let remainder = pot - share * winnerIds.length;
    winnerIds.forEach((id) => (amounts[id] = share));
    const order = orderByClockwiseFromDealer(game, winnerIds);
    let i = 0;
    while (remainder > 0 && order.length > 0) {
      amounts[order[i % order.length]] += 1;
      remainder--;
      i++;
    }
  }
  const players = game.players.map((p) =>
    winnerIds.includes(p.id) ? { ...p, stack: p.stack + (amounts[p.id] || 0) } : p
  );
  const handHistory = [
    ...game.handHistory,
    {
      handNumber: game.handNumber,
      pot,
      winners: winnerIds.map((id) => ({
        id,
        name: game.players.find((p) => p.id === id)?.name || "?",
        amount: amounts[id] || 0,
      })),
      endedAt: Date.now(),
    },
  ];
  return {
    ...game,
    players,
    pot: 0,
    status: "hand-ended",
    handHistory,
    turnPlayerId: null,
    autoWinner: null,
  };
}

/* ============================================================
   SMALL PRESENTATIONAL PIECES
   ============================================================ */

function GlobalStyle() {
  return (
    <style>{`
      @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=IBM+Plex+Mono:wght@500;600;700&display=swap');
      .pct-display { font-family: 'Fraunces', serif; }
      .pct-mono { font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; }
      @keyframes pct-pulse {
        0%, 100% { box-shadow: 0 0 0 0 rgba(251,191,36,0.55); }
        50% { box-shadow: 0 0 0 8px rgba(251,191,36,0); }
      }
      .pct-turn-glow { animation: pct-pulse 1.8s ease-in-out infinite; }
      .pct-stripe {
        background: repeating-conic-gradient(#fbbf24 0deg 18deg, #b45309 18deg 36deg);
      }
      @media (prefers-reduced-motion: reduce) {
        .pct-turn-glow { animation: none; }
      }
    `}</style>
  );
}

function ChipBadge({ chips, ratio, size = "md", tone = "amber" }) {
  const sizes = {
    sm: { outer: "w-12 h-12", text: "text-xs", rs: "text-xs" },
    md: { outer: "w-16 h-16", text: "text-sm", rs: "text-xs" },
    lg: { outer: "w-24 h-24", text: "text-lg", rs: "text-xs" },
  };
  const s = sizes[size];
  return (
    <div className={`pct-stripe rounded-full p-1 ${s.outer} shrink-0`}>
      <div className="bg-emerald-950 rounded-full w-full h-full flex flex-col items-center justify-center border border-emerald-800">
        <span className={`pct-mono text-amber-300 font-semibold leading-none ${s.text}`}>{fmtChips(chips)}</span>
        <span className={`pct-mono text-stone-400 leading-none mt-1 ${s.rs}`}>₹{fmtRs(chips, ratio)}</span>
      </div>
    </div>
  );
}

function Tag({ children, tone = "amber" }) {
  const tones = {
    amber: "bg-amber-400 text-emerald-950",
    sky: "bg-sky-400 text-emerald-950",
    rose: "bg-rose-500 text-stone-50",
    stone: "bg-stone-600 text-stone-100",
  };
  return (
    <span className={`pct-mono inline-flex items-center justify-center text-xs font-bold px-1.5 py-0.5 rounded ${tones[tone]}`}>
      {children}
    </span>
  );
}

function Button({ children, onClick, variant = "primary", className = "", disabled, type = "button" }) {
  const variants = {
    primary: "bg-amber-400 hover:bg-amber-300 text-emerald-950 disabled:bg-stone-700 disabled:text-stone-500",
    secondary: "bg-emerald-800 hover:bg-emerald-700 text-stone-100 border border-emerald-600 disabled:opacity-40",
    danger: "bg-rose-600 hover:bg-rose-500 text-stone-50 disabled:opacity-40",
    ghost: "bg-transparent hover:bg-emerald-800 text-stone-200 border border-emerald-700 disabled:opacity-40",
  };
  return (
    <button
      type={type}
      onClick={onClick}
      disabled={disabled}
      className={`px-4 py-2.5 rounded-xl font-semibold text-sm transition-colors disabled:cursor-not-allowed ${variants[variant]} ${className}`}
    >
      {children}
    </button>
  );
}

function Field({ label, children, hint }) {
  return (
    <label className="block mb-4">
      <span className="block text-xs font-semibold uppercase tracking-wide text-stone-400 mb-1.5">{label}</span>
      {children}
      {hint && <span className="block text-xs text-stone-500 mt-1">{hint}</span>}
    </label>
  );
}

function TextInput(props) {
  return (
    <input
      {...props}
      className={`w-full bg-emerald-900 border border-emerald-700 rounded-lg px-3 py-2.5 text-stone-100 placeholder-stone-500 focus:outline-none focus:ring-2 focus:ring-amber-400 pct-mono ${props.className || ""}`}
    />
  );
}

function Modal({ title, onClose, children, wide }) {
  return (
    <div className="fixed inset-0 bg-black/60 flex items-end sm:items-center justify-center z-50 p-0 sm:p-4">
      <div
        className={`bg-emerald-950 border border-emerald-700 rounded-t-2xl sm:rounded-2xl w-full overflow-y-auto ${wide ? "sm:max-w-2xl" : "sm:max-w-md"}`}
        style={{ maxHeight: "88vh" }}
      >
        <div className="flex items-center justify-between px-5 py-4 border-b border-emerald-800 sticky top-0 bg-emerald-950">
          <h3 className="pct-display text-lg text-amber-300">{title}</h3>
          {onClose && (
            <button onClick={onClose} className="text-stone-400 hover:text-stone-100 text-xl leading-none px-2">
              ×
            </button>
          )}
        </div>
        <div className="p-5">{children}</div>
      </div>
    </div>
  );
}

function CardsReminder() {
  return (
    <p className="text-center text-xs text-stone-500 mt-6">
      🂠 Cards stay on the table — this app only tracks chips, blinds &amp; the pot.
    </p>
  );
}

/* ============================================================
   LANDING
   ============================================================ */

function LandingScreen({ onChooseCreate, onChooseJoin }) {
  return (
    <div className="min-h-screen bg-emerald-950 flex flex-col items-center justify-center px-6 py-12">
      <GlobalStyle />
      <div className="w-full max-w-sm text-center">
        <div className="pct-stripe rounded-full w-20 h-20 mx-auto mb-5 p-1">
          <div className="bg-emerald-950 rounded-full w-full h-full flex items-center justify-center">
            <span className="pct-display text-amber-300 text-2xl">♠</span>
          </div>
        </div>
        <h1 className="pct-display text-4xl text-stone-50 mb-2">Chip Rail</h1>
        <p className="text-stone-400 text-sm mb-10">
          Chips, blinds and the pot — tracked live for your home game. The cards stay on the table.
        </p>
        <div className="flex flex-col gap-3">
          <Button onClick={onChooseCreate} className="w-full py-3.5">
            Start a new game
          </Button>
          <Button onClick={onChooseJoin} variant="secondary" className="w-full py-3.5">
            Join with a room code
          </Button>
        </div>
        <CardsReminder />
      </div>
    </div>
  );
}

/* ============================================================
   JOIN
   ============================================================ */

function JoinScreen({ onBack, onJoined }) {
  const [name, setName] = useState("");
  const [code, setCode] = useState("");
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState("");

  async function handleJoin(e) {
    e.preventDefault();
    setError("");
    const roomCode = code.trim().toUpperCase();
    const trimmedName = name.trim();
    if (!trimmedName || !roomCode) {
      setError("Enter your name and the room code.");
      return;
    }
    setBusy(true);
    const game = await loadGame(roomCode);
    if (!game) {
      setBusy(false);
      setError("No game found with that room code.");
      return;
    }
    const existing = game.players.find((p) => p.name.toLowerCase() === trimmedName.toLowerCase());
    if (existing) {
      const players = game.players.map((p) => (p.id === existing.id ? { ...p, connected: true } : p));
      const updated = await saveGame({ ...game, players });
      const session = { roomCode, playerId: existing.id, name: existing.name };
      await saveMySession(session);
      setBusy(false);
      onJoined(session, updated);
      return;
    }
    if (game.status !== "lobby") {
      setBusy(false);
      setError("This game is already in progress. Only players already at the table can rejoin.");
      return;
    }
    if (game.players.length >= game.config.numPlayers) {
      setBusy(false);
      setError("This table is full.");
      return;
    }
    const newPlayer = {
      id: genId(),
      name: trimmedName,
      isAdmin: false,
      stack: game.config.startingStackValue,
      startingStackAtJoin: game.config.startingStackValue,
      isDealer: false,
      isSB: false,
      isBB: false,
      isFolded: false,
      currentBet: 0,
      position: game.players.length,
      connected: true,
    };
    const updated = await saveGame({ ...game, players: [...game.players, newPlayer] });
    const session = { roomCode, playerId: newPlayer.id, name: newPlayer.name };
    await saveMySession(session);
    setBusy(false);
    onJoined(session, updated);
  }

  return (
    <div className="min-h-screen bg-emerald-950 flex flex-col items-center justify-center px-6 py-12">
      <GlobalStyle />
      <div className="w-full max-w-sm">
        <button onClick={onBack} className="text-stone-400 text-sm mb-6">
          ← Back
        </button>
        <h2 className="pct-display text-2xl text-stone-50 mb-6">Join a game</h2>
        <form onSubmit={handleJoin}>
          <Field label="Your name">
            <TextInput value={name} onChange={(e) => setName(e.target.value)} placeholder="e.g. Priya" maxLength={20} autoFocus />
          </Field>
          <Field label="Room code">
            <TextInput
              value={code}
              onChange={(e) => setCode(e.target.value.toUpperCase())}
              placeholder="e.g. K7QPL"
              maxLength={8}
              className="tracking-widest text-center text-lg"
            />
          </Field>
          {error && <p className="text-rose-400 text-sm mb-4">{error}</p>}
          <Button type="submit" className="w-full py-3.5" disabled={busy}>
            {busy ? "Joining…" : "Join table"}
          </Button>
        </form>
      </div>
    </div>
  );
}

/* ============================================================
   CONFIG (admin sets up the game, then creates the room)
   ============================================================ */

function ConfigScreen({ onBack, onCreated }) {
  const [adminName, setAdminName] = useState("");
  const [numPlayers, setNumPlayers] = useState(4);
  const [chipMode, setChipMode] = useState("flat");
  const [flatStack, setFlatStack] = useState(DEFAULT_STACK);
  const [combo, setCombo] = useState(() => DENOMS.map((v) => ({ value: v, count: 0 })));
  const [customDenom, setCustomDenom] = useState("");
  const [ratioChips, setRatioChips] = useState(DEFAULT_RATIO.chips);
  const [ratioRs, setRatioRs] = useState(DEFAULT_RATIO.rs);
  const [preFlopEnabled, setPreFlopEnabled] = useState(true);
  const [smallBlind, setSmallBlind] = useState(50);
  const [bigBlind, setBigBlind] = useState(100);
  const [blindsTouched, setBlindsTouched] = useState(false);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState("");

  const comboTotal = combo.reduce((s, d) => s + d.value * d.count, 0);
  const startingStackValue = chipMode === "flat" ? flatStack : comboTotal;

  // keep suggested blinds in sync with the stack until the admin edits them directly
  useEffect(() => {
    if (blindsTouched) return;
    if (chipMode === "flat") {
      const sb = Math.max(1, Math.round(flatStack / 200));
      setSmallBlind(sb);
      setBigBlind(sb * 2);
    } else {
      const used = combo.filter((d) => d.count > 0).map((d) => d.value);
      const smallest = used.length ? Math.min(...used) : 1;
      setSmallBlind(smallest);
      setBigBlind(smallest * 2);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [chipMode, flatStack, combo, blindsTouched]);

  function updateCount(value, delta) {
    setCombo((prev) =>
      prev.map((d) => {
        if (d.value !== value) return d;
        const nextCount = Math.max(0, d.count + delta);
        const nextTotal = comboTotal - d.value * d.count + d.value * nextCount;
        if (nextTotal > MAX_STACK) return d;
        return { ...d, count: nextCount };
      })
    );
  }

  function addCustomDenom() {
    const v = parseInt(customDenom, 10);
    if (!v || v <= 0) return;
    if (combo.some((d) => d.value === v)) {
      setCustomDenom("");
      return;
    }
    setCombo((prev) => [...prev, { value: v, count: 0 }].sort((a, b) => a.value - b.value));
    setCustomDenom("");
  }

  async function handleCreate() {
    setError("");
    const trimmedName = adminName.trim();
    if (!trimmedName) {
      setError("Enter your name.");
      return;
    }
    if (numPlayers < 2 || numPlayers > 10) {
      setError("Number of players must be between 2 and 10.");
      return;
    }
    if (startingStackValue <= 0) {
      setError(chipMode === "flat" ? "Set a starting stack." : "Add at least one chip to the starting stack.");
      return;
    }
    if (startingStackValue > MAX_STACK) {
      setError(`Starting stack can't exceed ${fmtChips(MAX_STACK)} chips.`);
      return;
    }
    if (!ratioChips || !ratioRs) {
      setError("Set a valid conversion ratio.");
      return;
    }
    if (smallBlind <= 0 || bigBlind <= 0) {
      setError("Blind amounts must be greater than zero.");
      return;
    }
    setBusy(true);
    const config = {
      numPlayers,
      chipMode,
      flatStack,
      denomCombo: combo.filter((d) => d.count > 0),
      startingStackValue,
      ratio: { chips: ratioChips, rs: ratioRs },
      preFlopEnabled,
      smallBlind,
      bigBlind,
    };
    let roomCode = genRoomCode();
    // avoid an unlikely collision with an existing room
    for (let i = 0; i < 5; i++) {
      const existing = await loadGame(roomCode);
      if (!existing) break;
      roomCode = genRoomCode();
    }
    const game = buildInitialGame({ roomCode, adminName: trimmedName, config });
    await saveGame(game);
    const session = { roomCode, playerId: game.players[0].id, name: game.players[0].name };
    await saveMySession(session);
    setBusy(false);
    onCreated(session, game);
  }

  return (
    <div className="min-h-screen bg-emerald-950 px-5 py-8">
      <GlobalStyle />
      <div className="max-w-xl mx-auto">
        <button onClick={onBack} className="text-stone-400 text-sm mb-6">
          ← Back
        </button>
        <h2 className="pct-display text-2xl text-stone-50 mb-1">Set up the table</h2>
        <p className="text-stone-400 text-sm mb-8">You're the admin — you'll also be a player at the table.</p>

        <Field label="Your name">
          <TextInput value={adminName} onChange={(e) => setAdminName(e.target.value)} placeholder="e.g. Arjun" maxLength={20} />
        </Field>

        <Field label="Number of players" hint="2–10 players">
          <div className="flex items-center gap-3">
            <Button variant="ghost" onClick={() => setNumPlayers((n) => Math.max(2, n - 1))}>
              −
            </Button>
            <span className="pct-mono text-2xl text-amber-300 w-10 text-center">{numPlayers}</span>
            <Button variant="ghost" onClick={() => setNumPlayers((n) => Math.min(10, n + 1))}>
              +
            </Button>
          </div>
        </Field>

        <Field label="Starting stack">
          <div className="flex gap-2 mb-3">
            <button
              onClick={() => setChipMode("flat")}
              className={`flex-1 py-2 rounded-lg text-sm font-semibold ${chipMode === "flat" ? "bg-amber-400 text-emerald-950" : "bg-emerald-900 text-stone-300 border border-emerald-700"}`}
            >
              Quick stack
            </button>
            <button
              onClick={() => setChipMode("denoms")}
              className={`flex-1 py-2 rounded-lg text-sm font-semibold ${chipMode === "denoms" ? "bg-amber-400 text-emerald-950" : "bg-emerald-900 text-stone-300 border border-emerald-700"}`}
            >
              Build with chips
            </button>
          </div>

          {chipMode === "flat" ? (
            <TextInput
              type="number"
              min={1}
              max={MAX_STACK}
              value={flatStack}
              onChange={(e) => setFlatStack(Math.min(MAX_STACK, Math.max(0, parseInt(e.target.value, 10) || 0)))}
            />
          ) : (
            <div className="bg-emerald-900/60 border border-emerald-700 rounded-lg p-3">
              <div className="space-y-2 max-h-64 overflow-y-auto pr-1">
                {combo.map((d) => (
                  <div key={d.value} className="flex items-center justify-between">
                    <span className="pct-mono text-stone-200 text-sm">{fmtChips(d.value)} chip</span>
                    <div className="flex items-center gap-2">
                      <button onClick={() => updateCount(d.value, -1)} className="w-7 h-7 rounded bg-emerald-800 text-stone-200 border border-emerald-600">
                        −
                      </button>
                      <span className="pct-mono text-amber-300 w-8 text-center">{d.count}</span>
                      <button onClick={() => updateCount(d.value, 1)} className="w-7 h-7 rounded bg-emerald-800 text-stone-200 border border-emerald-600">
                        +
                      </button>
                    </div>
                  </div>
                ))}
              </div>
              <div className="flex gap-2 mt-3">
                <TextInput
                  type="number"
                  placeholder="Custom denomination"
                  value={customDenom}
                  onChange={(e) => setCustomDenom(e.target.value)}
                  className="text-sm py-1.5"
                />
                <Button variant="secondary" onClick={addCustomDenom} className="px-3 py-1.5">
                  Add
                </Button>
              </div>
            </div>
          )}
          <div className="flex justify-between mt-2 text-sm">
            <span className="text-stone-400">Per player</span>
            <span className={`pct-mono font-semibold ${startingStackValue > MAX_STACK ? "text-rose-400" : "text-amber-300"}`}>
              {fmtChips(startingStackValue)} chips · ₹{fmtRs(startingStackValue, { chips: ratioChips, rs: ratioRs })}
            </span>
          </div>
          <p className="text-xs text-stone-500 mt-1">Cap is {fmtChips(MAX_STACK)} chips per player.</p>
        </Field>

        <Field label="Conversion ratio" hint="Editable any time — this just sets the rupee display.">
          <div className="flex items-center gap-2">
            <TextInput type="number" value={ratioChips} onChange={(e) => setRatioChips(parseInt(e.target.value, 10) || 0)} />
            <span className="text-stone-400 text-sm">chips =</span>
            <TextInput type="number" value={ratioRs} onChange={(e) => setRatioRs(parseInt(e.target.value, 10) || 0)} />
            <span className="text-stone-400 text-sm">₹</span>
          </div>
        </Field>

        <Field label="Pre-flop betting">
          <div className="flex gap-2">
            <button
              onClick={() => setPreFlopEnabled(true)}
              className={`flex-1 py-2 rounded-lg text-sm font-semibold ${preFlopEnabled ? "bg-amber-400 text-emerald-950" : "bg-emerald-900 text-stone-300 border border-emerald-700"}`}
            >
              On — SB / BB
            </button>
            <button
              onClick={() => setPreFlopEnabled(false)}
              className={`flex-1 py-2 rounded-lg text-sm font-semibold ${!preFlopEnabled ? "bg-amber-400 text-emerald-950" : "bg-emerald-900 text-stone-300 border border-emerald-700"}`}
            >
              Off — everyone antes
            </button>
          </div>
        </Field>

        <Field label={preFlopEnabled ? "Small blind / Big blind" : "Ante (per player, round 1)"}>
          <div className="flex items-center gap-2">
            <TextInput
              type="number"
              value={smallBlind}
              onChange={(e) => {
                setBlindsTouched(true);
                setSmallBlind(parseInt(e.target.value, 10) || 0);
              }}
            />
            {preFlopEnabled && (
              <>
                <span className="text-stone-500">/</span>
                <TextInput
                  type="number"
                  value={bigBlind}
                  onChange={(e) => {
                    setBlindsTouched(true);
                    setBigBlind(parseInt(e.target.value, 10) || 0);
                  }}
                />
              </>
            )}
          </div>
        </Field>

        {error && <p className="text-rose-400 text-sm mb-4">{error}</p>}
        <Button onClick={handleCreate} className="w-full py-3.5" disabled={busy}>
          {busy ? "Creating room…" : "Create room"}
        </Button>
        <CardsReminder />
      </div>
    </div>
  );
}

/* ============================================================
   LOBBY
   ============================================================ */

function LobbyScreen({ game, session, onStart, onLeave, onSaveConfig, onKick, onMakeAdmin, onEndGame }) {
  const isAdmin = session.playerId === game.players.find((p) => p.isAdmin)?.id;
  const [copied, setCopied] = useState(false);
  const [settingsOpen, setSettingsOpen] = useState(false);
  const ready = game.players.length >= game.config.numPlayers;

  async function copyCode() {
    try {
      await navigator.clipboard.writeText(game.roomCode);
      setCopied(true);
      setTimeout(() => setCopied(false), 1500);
    } catch (e) {
      /* ignore */
    }
  }

  return (
    <div className="min-h-screen bg-emerald-950 px-5 py-8">
      <GlobalStyle />
      <div className="max-w-md mx-auto">
        <div className="text-center mb-8">
          <p className="text-stone-400 text-xs uppercase tracking-wide mb-1">Room code</p>
          <button onClick={copyCode} className="pct-mono text-4xl text-amber-300 tracking-widest font-bold">
            {game.roomCode}
          </button>
          <p className="text-stone-500 text-xs mt-1">{copied ? "Copied!" : "Tap to copy · share with the table"}</p>
        </div>

        <div className="bg-emerald-900/50 border border-emerald-700 rounded-xl p-4 mb-5">
          <div className="flex justify-between text-sm mb-2">
            <span className="text-stone-400">Starting stack</span>
            <span className="pct-mono text-stone-100">
              {fmtChips(game.config.startingStackValue)} · ₹{fmtRs(game.config.startingStackValue, game.config.ratio)}
            </span>
          </div>
          <div className="flex justify-between text-sm mb-2">
            <span className="text-stone-400">{game.config.preFlopEnabled ? "Blinds" : "Ante"}</span>
            <span className="pct-mono text-stone-100">
              {game.config.preFlopEnabled ? `${fmtChips(game.config.smallBlind)} / ${fmtChips(game.config.bigBlind)}` : fmtChips(game.config.smallBlind)}
            </span>
          </div>
          <div className="flex justify-between text-sm">
            <span className="text-stone-400">Mode</span>
            <span className="text-stone-100">{game.config.preFlopEnabled ? "Standard pre-flop" : "No pre-flop (ante)"}</span>
          </div>
        </div>

        <p className="text-stone-400 text-xs uppercase tracking-wide mb-2">
          Players ({game.players.length}/{game.config.numPlayers})
        </p>
        <div className="space-y-2 mb-6">
          {game.players.map((p) => (
            <div key={p.id} className="flex items-center justify-between bg-emerald-900/40 border border-emerald-800 rounded-lg px-3 py-2.5">
              <span className="text-stone-100 text-sm">
                {p.name} {p.id === session.playerId && <span className="text-stone-500">(you)</span>}
              </span>
              {p.isAdmin && <Tag>ADMIN</Tag>}
            </div>
          ))}
          {Array.from({ length: Math.max(0, game.config.numPlayers - game.players.length) }).map((_, i) => (
            <div key={`empty-${i}`} className="flex items-center bg-emerald-950 border border-dashed border-emerald-800 rounded-lg px-3 py-2.5">
              <span className="text-stone-600 text-sm">Waiting for player…</span>
            </div>
          ))}
        </div>

        {isAdmin ? (
          <div className="flex flex-col gap-2">
            <Button onClick={onStart} disabled={game.players.length < 2} className="w-full py-3.5">
              {ready ? "Start game" : `Start anyway (${game.players.length}/${game.config.numPlayers} joined)`}
            </Button>
            <Button variant="ghost" onClick={() => setSettingsOpen(true)} className="w-full">
              Edit settings
            </Button>
          </div>
        ) : (
          <p className="text-center text-stone-400 text-sm py-2">Waiting for the admin to start the game…</p>
        )}
        <button onClick={onLeave} className="block mx-auto text-stone-500 text-xs mt-6">
          Leave table
        </button>
      </div>
      {settingsOpen && (
        <SettingsModal
          game={game}
          locked={false}
          session={session}
          onClose={() => setSettingsOpen(false)}
          onSave={(cfg) => {
            setSettingsOpen(false);
            onSaveConfig(cfg);
          }}
          onKick={onKick}
          onMakeAdmin={onMakeAdmin}
          onEndGame={() => {
            setSettingsOpen(false);
            onEndGame();
          }}
        />
      )}
    </div>
  );
}

/* ============================================================
   RAISE MODAL
   ============================================================ */

function RaiseModal({ me, maxBet, onClose, onConfirm, ratio }) {
  const allInTo = me.currentBet + me.stack;
  const floor = Math.min(allInTo, Math.max(maxBet + 1, me.currentBet + 1));
  const [amount, setAmount] = useState(floor);

  function clamp(v) {
    return Math.max(floor, Math.min(allInTo, v));
  }

  return (
    <Modal title="Raise" onClose={onClose}>
      <p className="text-stone-400 text-sm mb-4">
        You have <span className="pct-mono text-amber-300">{fmtChips(me.stack)}</span> chips left
        (₹{fmtRs(me.stack, ratio)}). Enter the total amount you want your bet to be this round.
      </p>
      <Field label="Raise to (total this round)">
        <TextInput
          type="number"
          value={amount}
          min={floor}
          max={allInTo}
          onChange={(e) => setAmount(clamp(parseInt(e.target.value, 10) || floor))}
          className="text-center text-xl"
        />
      </Field>
      <p className="text-center text-stone-500 text-xs mb-4">≈ ₹{fmtRs(amount, ratio)}</p>
      <div className="flex gap-2 mb-5">
        <Button variant="secondary" className="flex-1" onClick={() => setAmount(floor)}>
          Min
        </Button>
        <Button variant="secondary" className="flex-1" onClick={() => setAmount(clamp(Math.round((floor + allInTo) / 2)))}>
          Half
        </Button>
        <Button variant="danger" className="flex-1" onClick={() => setAmount(allInTo)}>
          All-in
        </Button>
      </div>
      <Button onClick={() => onConfirm(amount)} className="w-full py-3">
        Confirm raise to {fmtChips(amount)}
      </Button>
    </Modal>
  );
}

/* ============================================================
   HISTORY MODAL
   ============================================================ */

function HistoryModal({ game, onClose }) {
  return (
    <Modal title="Hand history" onClose={onClose}>
      {game.handHistory.length === 0 ? (
        <p className="text-stone-500 text-sm">No hands completed yet.</p>
      ) : (
        <div className="space-y-3">
          {[...game.handHistory].reverse().map((h) => (
            <div key={h.handNumber} className="bg-emerald-900/50 border border-emerald-800 rounded-lg p-3">
              <div className="flex justify-between text-sm mb-1">
                <span className="text-stone-300 font-semibold">Hand #{h.handNumber}</span>
                <span className="pct-mono text-amber-300">{fmtChips(h.pot)} pot</span>
              </div>
              {h.winners.map((w) => (
                <p key={w.id} className="text-stone-400 text-xs">
                  🏆 {w.name} won {fmtChips(w.amount)} chips
                </p>
              ))}
            </div>
          ))}
        </div>
      )}
    </Modal>
  );
}

/* ============================================================
   SETTINGS DRAWER (admin)
   ============================================================ */

function SettingsModal({ game, locked, onClose, onSave, onKick, onMakeAdmin, onEndGame, session }) {
  const [ratioChips, setRatioChips] = useState(game.config.ratio.chips);
  const [ratioRs, setRatioRs] = useState(game.config.ratio.rs);
  const [preFlopEnabled, setPreFlopEnabled] = useState(game.config.preFlopEnabled);
  const [smallBlind, setSmallBlind] = useState(game.config.smallBlind);
  const [bigBlind, setBigBlind] = useState(game.config.bigBlind);

  function save() {
    onSave({
      ...game.config,
      ratio: { chips: ratioChips || 1, rs: ratioRs || 0 },
      preFlopEnabled: locked ? game.config.preFlopEnabled : preFlopEnabled,
      smallBlind: locked ? game.config.smallBlind : smallBlind,
      bigBlind: locked ? game.config.bigBlind : bigBlind,
    });
  }

  return (
    <Modal title="Admin settings" onClose={onClose} wide>
      <Field label="Conversion ratio" hint="Always editable — just changes the rupee display.">
        <div className="flex items-center gap-2">
          <TextInput type="number" value={ratioChips} onChange={(e) => setRatioChips(parseInt(e.target.value, 10) || 0)} />
          <span className="text-stone-400 text-sm">chips =</span>
          <TextInput type="number" value={ratioRs} onChange={(e) => setRatioRs(parseInt(e.target.value, 10) || 0)} />
          <span className="text-stone-400 text-sm">₹</span>
        </div>
      </Field>

      {locked && (
        <p className="text-xs text-amber-400/80 bg-amber-400/10 border border-amber-400/30 rounded-lg px-3 py-2 mb-4">
          Player count, starting stack and chip combo lock once a game is underway.
        </p>
      )}

      <Field label="Pre-flop betting">
        <div className="flex gap-2">
          <button
            disabled={locked}
            onClick={() => setPreFlopEnabled(true)}
            className={`flex-1 py-2 rounded-lg text-sm font-semibold disabled:opacity-40 ${preFlopEnabled ? "bg-amber-400 text-emerald-950" : "bg-emerald-900 text-stone-300 border border-emerald-700"}`}
          >
            On — SB / BB
          </button>
          <button
            disabled={locked}
            onClick={() => setPreFlopEnabled(false)}
            className={`flex-1 py-2 rounded-lg text-sm font-semibold disabled:opacity-40 ${!preFlopEnabled ? "bg-amber-400 text-emerald-950" : "bg-emerald-900 text-stone-300 border border-emerald-700"}`}
          >
            Off — everyone antes
          </button>
        </div>
      </Field>

      <Field label="Blinds">
        <div className="flex items-center gap-2">
          <TextInput disabled={locked} type="number" value={smallBlind} onChange={(e) => setSmallBlind(parseInt(e.target.value, 10) || 0)} />
          {preFlopEnabled && (
            <>
              <span className="text-stone-500">/</span>
              <TextInput disabled={locked} type="number" value={bigBlind} onChange={(e) => setBigBlind(parseInt(e.target.value, 10) || 0)} />
            </>
          )}
        </div>
      </Field>

      <Button onClick={save} className="w-full py-3 mb-6">
        Save settings
      </Button>

      <p className="text-stone-400 text-xs uppercase tracking-wide mb-2">Players</p>
      <div className="space-y-2 mb-6">
        {game.players.map((p) => (
          <div key={p.id} className="flex items-center justify-between bg-emerald-900/40 border border-emerald-800 rounded-lg px-3 py-2">
            <span className="text-stone-100 text-sm">
              {p.name} {p.isAdmin && <Tag>ADMIN</Tag>}
            </span>
            {!p.isAdmin && (
              <div className="flex gap-2">
                <button onClick={() => onMakeAdmin(p.id)} className="text-xs text-sky-400">
                  Make admin
                </button>
                {(game.status === "lobby" || game.status === "hand-ended") && (
                  <button onClick={() => onKick(p.id)} className="text-xs text-rose-400">
                    Kick
                  </button>
                )}
              </div>
            )}
          </div>
        ))}
      </div>

      <Button variant="danger" onClick={onEndGame} className="w-full">
        End game
      </Button>
    </Modal>
  );
}

/* ============================================================
   SHOWDOWN PANEL
   ============================================================ */

function ShowdownPanel({ game, isAdmin, onAward }) {
  const active = game.players.filter((p) => !p.isFolded);
  const [selected, setSelected] = useState(game.autoWinner ? [game.autoWinner] : []);
  const [manual, setManual] = useState(null);

  const share = selected.length ? Math.floor(game.pot / selected.length) : 0;
  const order = selected.length ? orderByClockwiseFromDealer(game, selected) : [];
  const remainder = selected.length ? game.pot - share * selected.length : 0;

  function toggle(id) {
    if (game.autoWinner) return;
    setSelected((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));
    setManual(null);
  }

  function computedAmounts() {
    if (manual) return manual;
    const amounts = {};
    selected.forEach((id) => (amounts[id] = share));
    let rem = remainder;
    let i = 0;
    while (rem > 0 && order.length) {
      amounts[order[i % order.length]] += 1;
      rem--;
      i++;
    }
    return amounts;
  }

  function adjust(id, delta) {
    const base = computedAmounts();
    setManual({ ...base, [id]: Math.max(0, (base[id] || 0) + delta) });
  }

  const amounts = computedAmounts();
  const allocated = Object.values(amounts).reduce((s, v) => s + v, 0);

  return (
    <div className="bg-emerald-900/50 border border-emerald-700 rounded-xl p-4">
      <h3 className="pct-display text-amber-300 text-lg mb-1">
        {game.autoWinner ? "Everyone else folded" : "Showdown — declare winner(s)"}
      </h3>
      <p className="text-stone-400 text-sm mb-4">
        Pot: <span className="pct-mono text-amber-300">{fmtChips(game.pot)}</span> chips · ₹{fmtRs(game.pot, game.config.ratio)}
      </p>

      {isAdmin ? (
        <>
          <div className="space-y-2 mb-4">
            {active.map((p) => (
              <label
                key={p.id}
                className={`flex items-center justify-between rounded-lg px-3 py-2.5 border ${selected.includes(p.id) ? "border-amber-400 bg-amber-400/10" : "border-emerald-800"} ${game.autoWinner ? "" : "cursor-pointer"}`}
              >
                <span className="flex items-center gap-2 text-stone-100 text-sm">
                  <input type="checkbox" checked={selected.includes(p.id)} disabled={!!game.autoWinner} onChange={() => toggle(p.id)} />
                  {p.name}
                </span>
                {selected.includes(p.id) && (
                  <span className="flex items-center gap-1">
                    <button onClick={() => adjust(p.id, -1)} className="w-6 h-6 rounded bg-emerald-800 text-stone-200 text-xs">
                      −
                    </button>
                    <span className="pct-mono text-amber-300 text-sm w-14 text-center">{fmtChips(amounts[p.id] || 0)}</span>
                    <button onClick={() => adjust(p.id, 1)} className="w-6 h-6 rounded bg-emerald-800 text-stone-200 text-xs">
                      +
                    </button>
                  </span>
                )}
              </label>
            ))}
          </div>
          {allocated !== game.pot && selected.length > 0 && (
            <p className="text-rose-400 text-xs mb-3">Allocated {fmtChips(allocated)} of {fmtChips(game.pot)} — adjust to match the pot.</p>
          )}
          <Button onClick={() => onAward(selected, amounts)} disabled={selected.length === 0 || allocated !== game.pot} className="w-full py-3">
            {game.autoWinner ? `Award pot to ${active.find((p) => p.id === game.autoWinner)?.name || ""}` : "Confirm & award pot"}
          </Button>
        </>
      ) : (
        <p className="text-stone-400 text-sm">Waiting for the admin to declare the winner…</p>
      )}
    </div>
  );
}

/* ============================================================
   TABLE (main game) SCREEN
   ============================================================ */

function PlayerSeat({ p, isMe, isTurn, ratio }) {
  return (
    <div
      className={`rounded-xl border p-3 flex items-center gap-3 transition-all ${
        p.isFolded ? "border-emerald-900 bg-emerald-950/60 opacity-50" : "border-emerald-700 bg-emerald-900/40"
      } ${isTurn ? "pct-turn-glow ring-2 ring-amber-400" : ""}`}
    >
      <ChipBadge chips={p.stack} ratio={ratio} size="sm" />
      <div className="flex-1 min-w-0">
        <div className="flex items-center gap-1.5 flex-wrap">
          <span className="text-stone-100 text-sm font-medium truncate">{p.name}</span>
          {isMe && <span className="text-stone-500 text-xs">(you)</span>}
          {p.isDealer && <Tag tone="stone">D</Tag>}
          {p.isSB && <Tag tone="sky">SB</Tag>}
          {p.isBB && <Tag tone="sky">BB</Tag>}
          {p.isAdmin && <Tag>ADM</Tag>}
        </div>
        <p className="text-xs text-stone-500 mt-0.5">
          {p.isFolded ? "Folded" : p.currentBet > 0 ? `Bet ${fmtChips(p.currentBet)} this round` : "No bet yet"}
        </p>
      </div>
    </div>
  );
}

function TableScreen({ game, session, onAction, onAdvanceRound, onGoShowdown, onAward, onStartNextHand, onSaveConfig, onKick, onMakeAdmin, onEndGame, onLeave }) {
  const [raiseOpen, setRaiseOpen] = useState(false);
  const [historyOpen, setHistoryOpen] = useState(false);
  const [settingsOpen, setSettingsOpen] = useState(false);

  const me = game.players.find((p) => p.id === session.playerId);
  const isAdmin = !!me?.isAdmin;
  const isMyTurn = game.status === "playing" && game.turnPlayerId === session.playerId;
  const active = game.players.filter((p) => !p.isFolded);
  const maxBet = Math.max(0, ...active.map((p) => p.currentBet));
  const roundDone = game.status === "playing" && isRoundComplete(game);
  const lastHand = game.handHistory[game.handHistory.length - 1];

  return (
    <div className="min-h-screen bg-emerald-950 pb-28">
      <GlobalStyle />
      <div className="sticky top-0 z-10 bg-emerald-950/95 backdrop-blur border-b border-emerald-800 px-4 py-3">
        <div className="max-w-2xl mx-auto flex items-center justify-between">
          <div>
            <p className="text-stone-500 text-xs">
              Hand #{game.handNumber} · Room {game.roomCode}
            </p>
            <p className="pct-display text-amber-300 text-base">
              {game.status === "playing" ? ROUND_LABELS[game.currentRound] : game.status === "showdown" ? "Showdown" : "Between hands"}
            </p>
          </div>
          <div className="flex items-center gap-2">
            <button onClick={() => setHistoryOpen(true)} className="text-stone-400 text-xs border border-emerald-700 rounded-lg px-2.5 py-1.5">
              History
            </button>
            {isAdmin && (
              <button onClick={() => setSettingsOpen(true)} className="text-stone-400 text-xs border border-emerald-700 rounded-lg px-2.5 py-1.5">
                ⚙ Admin
              </button>
            )}
          </div>
        </div>
      </div>

      <div className="max-w-2xl mx-auto px-4 py-5">
        <div className="flex items-center justify-center mb-6">
          <div className="text-center">
            <ChipBadge chips={game.pot} ratio={game.config.ratio} size="lg" />
            <p className="text-stone-500 text-xs mt-2 uppercase tracking-wide">Pot</p>
          </div>
        </div>

        {game.status === "hand-ended" && lastHand && (
          <div className="bg-amber-400/10 border border-amber-400/30 rounded-xl p-3 mb-5 text-center">
            <p className="text-amber-300 text-sm">
              🏆 {lastHand.winners.map((w) => `${w.name} (+${fmtChips(w.amount)})`).join(", ")}
            </p>
          </div>
        )}

        {game.status === "showdown" && (
          <div className="mb-5">
            <ShowdownPanel game={game} isAdmin={isAdmin} onAward={onAward} />
          </div>
        )}

        <div className="space-y-2 mb-6">
          {game.players.map((p) => (
            <PlayerSeat key={p.id} p={p} isMe={p.id === session.playerId} isTurn={game.status === "playing" && game.turnPlayerId === p.id} ratio={game.config.ratio} />
          ))}
        </div>

        {game.status === "playing" && isAdmin && (
          <div className="flex gap-2 mb-4">
            {game.currentRound < 4 ? (
              <Button variant="secondary" disabled={!roundDone} onClick={onAdvanceRound} className="flex-1">
                {roundDone ? "Next round" : "Waiting on bets…"}
              </Button>
            ) : (
              <Button variant="secondary" disabled={!roundDone} onClick={onGoShowdown} className="flex-1">
                {roundDone ? "Go to showdown" : "Waiting on bets…"}
              </Button>
            )}
          </div>
        )}

        {game.status === "hand-ended" && isAdmin && (
          <div className="flex gap-2">
            <Button onClick={onStartNextHand} className="flex-1 py-3">
              Start next hand
            </Button>
          </div>
        )}

        {game.status === "hand-ended" && !isAdmin && <p className="text-center text-stone-400 text-sm">Waiting for the admin to start the next hand…</p>}

        <button onClick={onLeave} className="block mx-auto text-stone-600 text-xs mt-8">
          Leave table
        </button>
      </div>

      {game.status === "playing" && (
        <div className="fixed bottom-0 inset-x-0 bg-emerald-950 border-t border-emerald-800 px-4 py-4">
          <div className="max-w-2xl mx-auto">
            {isMyTurn ? (
              <div className="flex gap-2">
                <Button variant="danger" className="flex-1 py-3.5" onClick={() => onAction("fold")}>
                  Fold
                </Button>
                <Button variant="secondary" className="flex-1 py-3.5" onClick={() => onAction("call")}>
                  {me.currentBet === maxBet ? "Check" : `Call ${fmtChips(maxBet - me.currentBet)}`}
                </Button>
                <Button className="flex-1 py-3.5" onClick={() => setRaiseOpen(true)}>
                  Raise
                </Button>
              </div>
            ) : (
              <p className="text-center text-stone-400 text-sm py-2">
                Waiting on <span className="text-stone-200">{game.players.find((p) => p.id === game.turnPlayerId)?.name}</span>…
              </p>
            )}
          </div>
        </div>
      )}

      {raiseOpen && me && (
        <RaiseModal
          me={me}
          maxBet={maxBet}
          ratio={game.config.ratio}
          onClose={() => setRaiseOpen(false)}
          onConfirm={(amt) => {
            setRaiseOpen(false);
            onAction("raise", amt);
          }}
        />
      )}
      {historyOpen && <HistoryModal game={game} onClose={() => setHistoryOpen(false)} />}
      {settingsOpen && (
        <SettingsModal
          game={game}
          locked={game.status !== "lobby"}
          session={session}
          onClose={() => setSettingsOpen(false)}
          onSave={(cfg) => {
            setSettingsOpen(false);
            onSaveConfig(cfg);
          }}
          onKick={onKick}
          onMakeAdmin={onMakeAdmin}
          onEndGame={() => {
            setSettingsOpen(false);
            onEndGame();
          }}
        />
      )}
    </div>
  );
}

/* ============================================================
   END GAME SCREEN
   ============================================================ */

function EndGameScreen({ game, onReturnHome, isAdmin, onDeleteRoom }) {
  const standings = [...game.players].sort((a, b) => b.stack - a.stack);
  return (
    <div className="min-h-screen bg-emerald-950 px-6 py-12 flex flex-col items-center">
      <GlobalStyle />
      <h2 className="pct-display text-3xl text-amber-300 mb-1">Game over</h2>
      <p className="text-stone-400 text-sm mb-8">Final standings</p>
      <div className="w-full max-w-sm space-y-2 mb-10">
        {standings.map((p, i) => {
          const net = p.stack - p.startingStackAtJoin;
          return (
            <div key={p.id} className="flex items-center justify-between bg-emerald-900/40 border border-emerald-800 rounded-lg px-4 py-3">
              <span className="text-stone-100 text-sm">
                <span className="text-stone-500 pct-mono mr-2">#{i + 1}</span>
                {p.name}
              </span>
              <span className="text-right">
                <span className="pct-mono text-amber-300 block text-sm">{fmtChips(p.stack)}</span>
                <span className={`pct-mono text-xs ${net >= 0 ? "text-emerald-400" : "text-rose-400"}`}>
                  {net >= 0 ? "+" : ""}
                  {fmtChips(net)}
                </span>
              </span>
            </div>
          );
        })}
      </div>
      <Button onClick={onReturnHome} className="w-full max-w-sm py-3.5 mb-3">
        Return home
      </Button>
      {isAdmin && (
        <button onClick={onDeleteRoom} className="text-stone-500 text-xs">
          Delete this room's data
        </button>
      )}
    </div>
  );
}

/* ============================================================
   ROOT APP
   ============================================================ */

export default function App() {
  const [screen, setScreen] = useState("loading"); // loading, landing, join, config, lobby, table, ended
  const [session, setSession] = useState(null);
  const [game, setGame] = useState(null);
  const pollRef = useRef(null);

  useEffect(() => {
    (async () => {
      const sess = await loadMySession();
      if (sess) {
        const g = await loadGame(sess.roomCode);
        if (g && g.players.find((p) => p.id === sess.playerId)) {
          setSession(sess);
          setGame(g);
          setScreen(g.status === "lobby" ? "lobby" : g.status === "ended" ? "ended" : "table");
          return;
        } else {
          await clearMySession();
        }
      }
      setScreen("landing");
    })();
  }, []);

  useEffect(() => {
    if (!session?.roomCode) return;
    pollRef.current = setInterval(async () => {
      const g = await loadGame(session.roomCode);
      if (g) {
        setGame(g);
        setScreen((prev) => {
          if (prev === "table" || prev === "lobby" || prev === "ended") {
            return g.status === "lobby" ? "lobby" : g.status === "ended" ? "ended" : "table";
          }
          return prev;
        });
      }
    }, POLL_MS);
    return () => clearInterval(pollRef.current);
  }, [session?.roomCode]);

  const runAction = useCallback(
    async (updaterFn) => {
      if (!session?.roomCode) return;
      const latest = (await loadGame(session.roomCode)) || game;
      if (!latest) return;
      const updated = updaterFn(latest);
      if (!updated) return;
      const saved = await saveGame(updated);
      setGame(saved);
    },
    [session, game]
  );

  function handleCreated(sess, g) {
    setSession(sess);
    setGame(g);
    setScreen("lobby");
  }

  function handleJoined(sess, g) {
    setSession(sess);
    setGame(g);
    setScreen(g.status === "lobby" ? "lobby" : g.status === "ended" ? "ended" : "table");
  }

  async function handleStart() {
    runAction((g) => startHand(g, true));
    setScreen("table");
  }

  function handleAction(type, amount) {
    if (type === "fold") runAction((g) => applyFold(g, session.playerId));
    if (type === "call") runAction((g) => applyCallCheck(g, session.playerId));
    if (type === "raise") runAction((g) => applyRaise(g, session.playerId, amount));
  }

  function handleAdvanceRound() {
    runAction((g) => (isRoundComplete(g) ? advanceRound(g) : g));
  }

  function handleGoShowdown() {
    runAction((g) => (isRoundComplete(g) ? goToShowdown(g) : g));
  }

  function handleAward(winnerIds, amounts) {
    runAction((g) => distributePot(g, winnerIds, amounts));
  }

  function handleStartNextHand() {
    runAction((g) => startHand(g, false));
  }

  function handleSaveConfig(cfg) {
    runAction((g) => ({ ...g, config: cfg }));
  }

  function handleKick(playerId) {
    runAction((g) => ({ ...g, players: g.players.filter((p) => p.id !== playerId).map((p, i) => ({ ...p, position: i })) }));
  }

  function handleMakeAdmin(playerId) {
    runAction((g) => ({ ...g, players: g.players.map((p) => ({ ...p, isAdmin: p.id === playerId })) }));
  }

  async function handleEndGame() {
    await runAction((g) => ({ ...g, status: "ended" }));
    setScreen("ended");
  }

  async function handleLeave() {
    await clearMySession();
    setSession(null);
    setGame(null);
    setScreen("landing");
  }

  async function handleDeleteRoom() {
    if (session?.roomCode) await deleteGame(session.roomCode);
    await handleLeave();
  }

  if (screen === "loading") {
    return (
      <div className="min-h-screen bg-emerald-950 flex items-center justify-center">
        <GlobalStyle />
        <p className="text-stone-500 text-sm">Loading…</p>
      </div>
    );
  }

  if (screen === "landing") {
    return <LandingScreen onChooseCreate={() => setScreen("config")} onChooseJoin={() => setScreen("join")} />;
  }

  if (screen === "join") {
    return <JoinScreen onBack={() => setScreen("landing")} onJoined={handleJoined} />;
  }

  if (screen === "config") {
    return <ConfigScreen onBack={() => setScreen("landing")} onCreated={handleCreated} />;
  }

  if (screen === "lobby" && game && session) {
    return (
      <LobbyScreen
        game={game}
        session={session}
        onStart={handleStart}
        onLeave={handleLeave}
        onSaveConfig={handleSaveConfig}
        onKick={handleKick}
        onMakeAdmin={handleMakeAdmin}
        onEndGame={handleEndGame}
      />
    );
  }

  if (screen === "table" && game && session) {
    return (
      <TableScreen
        game={game}
        session={session}
        onAction={handleAction}
        onAdvanceRound={handleAdvanceRound}
        onGoShowdown={handleGoShowdown}
        onAward={handleAward}
        onStartNextHand={handleStartNextHand}
        onSaveConfig={handleSaveConfig}
        onKick={handleKick}
        onMakeAdmin={handleMakeAdmin}
        onEndGame={handleEndGame}
        onLeave={handleLeave}
      />
    );
  }

  if (screen === "ended" && game && session) {
    const isAdmin = game.players.find((p) => p.id === session.playerId)?.isAdmin;
    return <EndGameScreen game={game} isAdmin={isAdmin} onReturnHome={handleLeave} onDeleteRoom={handleDeleteRoom} />;
  }

  return (
    <div className="min-h-screen bg-emerald-950 flex items-center justify-center">
      <GlobalStyle />
      <p className="text-stone-500 text-sm">Something went wrong — please refresh.</p>
    </div>
  );
}