/* global React, GameEngine */

function IntroOverlay({ sideCount, yourSeat, onStart }) {
  return React.createElement("div", { className: "overlay" },
    React.createElement("div", { className: "overlay-card" },
      React.createElement("div", { className: "overlay-eyebrow" }, "Pong · Battle Royale"),
      React.createElement("h1", { className: "overlay-title" },
        "Last paddle ",
        React.createElement("b", null, "standing")
      ),
      React.createElement("p", { className: "overlay-sub" },
        sideCount === 6
          ? "Six players. One ball. The arena closes in, the ball speeds up, paddles narrow. Miss once and your wall stays in play — bouncing the ball back into the fight."
          : "Four players. The classic square. Same rules: closing arena, faster ball, narrowing paddles. Miss and you're a wall."
      ),
      React.createElement("div", { className: "legend" },
        React.createElement("div", { className: "legend-row" },
          React.createElement("span", { className: "legend-dot", style: { background: "#FDDA24" } }),
          "Your paddle"
        ),
        React.createElement("div", { className: "legend-row" },
          React.createElement("span", { className: "legend-dot", style: { background: "#B7ACE8" } }),
          "Live opponent"
        ),
        React.createElement("div", { className: "legend-row" },
          React.createElement("span", { className: "legend-dot", style: {
            background: "repeating-linear-gradient(45deg,#00A7B5 0 4px,#0F0F0F 4px 8px)"
          } }),
          "Eliminated · wall"
        ),
      ),
      React.createElement("div", { className: "overlay-actions" },
        React.createElement("button", { className: "btn primary", onClick: onStart },
          "▶  Start Match"
        ),
      ),
      React.createElement("div", {
        style: {
          marginTop: 18,
          fontFamily: "ui-monospace, Menlo, monospace",
          fontSize: 10,
          letterSpacing: 2,
          color: "#5F6164",
          textTransform: "uppercase",
        }
      },
        "Move ",
        React.createElement("span", { className: "kbd" }, "MOUSE"),
        " or ",
        React.createElement("span", { className: "kbd" }, "←"),
        React.createElement("span", { className: "kbd" }, "→"),
        " · ",
        React.createElement("span", { className: "kbd" }, "SPACE"),
        " to start"
      ),
    )
  );
}

function ResultOverlay({ game, yourSeat, onRestart }) {
  if (!game) return null;
  const you = game.players[yourSeat];
  const winner = game.players.find(p => p.placement === 1);
  const youWon = you && you.placement === 1;
  const youPlaced = you ? (you.placement || game.n) : game.n;

  // Build leaderboard sorted by placement (1 = best)
  const board = [...game.players].sort((a, b) => (a.placement || 99) - (b.placement || 99));

  return React.createElement("div", { className: "overlay" },
    React.createElement("div", { className: "overlay-card" },
      React.createElement("div", {
        className: "overlay-eyebrow",
        style: { color: youWon ? "#FDDA24" : "#B7ACE8" }
      },
        youWon ? "Victory · Last Paddle Standing" : "Round Over"
      ),
      React.createElement("h1", { className: "overlay-title" },
        youWon
          ? React.createElement(React.Fragment, null,
              "You ", React.createElement("b", null, "won"))
          : React.createElement(React.Fragment, null,
              React.createElement("b", null, GameEngine.PALETTE[winner.seat].name),
              " takes it")
      ),
      React.createElement("div", { className: "result-rank" },
        "You placed ",
        React.createElement("b", null, "#" + youPlaced),
        ` of ${game.n}`
      ),

      // Leaderboard rows
      React.createElement("div", {
        style: {
          margin: "26px 0 22px",
          display: "grid",
          gap: 6,
        }
      },
        board.map((p) => {
          const meta = GameEngine.PALETTE[p.seat];
          const place = p.placement || game.n;
          return React.createElement("div", {
            key: p.seat,
            style: {
              display: "grid",
              gridTemplateColumns: "32px 18px 1fr auto",
              alignItems: "center",
              gap: 10,
              padding: "10px 14px",
              border: "1px solid rgba(255,255,255,0.06)",
              borderRadius: 4,
              background: place === 1 ? "rgba(253,218,36,0.08)" : "rgba(255,255,255,0.02)",
              fontFamily: "ui-monospace, Menlo, monospace",
              fontSize: 12,
              letterSpacing: 1,
              textTransform: "uppercase",
            }
          },
            React.createElement("span", {
              style: {
                color: place === 1 ? "#FDDA24" : "#8E9194",
                fontWeight: 700,
                textAlign: "left",
              }
            }, "#" + place),
            React.createElement("span", {
              style: {
                width: 14, height: 14, borderRadius: 999,
                background: meta.color,
                border: "1.5px solid rgba(0,0,0,0.4)",
              }
            }),
            React.createElement("span", {
              style: { textAlign: "left", color: "#FFFFFF" }
            },
              meta.name,
              p.seat === yourSeat
                ? React.createElement("span", { style: { color: "#FDDA24", marginLeft: 8 } }, "· YOU")
                : null
            ),
            React.createElement("span", {
              style: { color: "#8E9194", fontSize: 10 }
            },
              place === 1 ? "WINNER" : "OUT"
            ),
          );
        })
      ),

      React.createElement("div", { className: "overlay-actions" },
        React.createElement("button", { className: "btn primary", onClick: onRestart },
          "↻  Play Again"
        ),
      ),
    )
  );
}

window.HexRoyaleIntroOverlay = IntroOverlay;
window.HexRoyaleResultOverlay = ResultOverlay;