// end-screen.jsx — Arcade HIGH SCORE table
// Exports: EndScreen

function EndScreen({ teams, onRestart, onAddRound }) {
  const { useEffect } = React;
  const sorted = [...teams].sort((a, b) => b.score - a.score);
  const medals = ["🥇", "🥈", "🥉", "4️⃣"];

  useEffect(() => {
    window.sfx && window.sfx.win();
  }, []);

  return (
    <div className="screen fade-in" style={{ paddingTop: 10, gap: 14 }}>
      <Marquee title="High Score" subtitle="— champion crowned —" mini />

      <div style={{ textAlign: "center", marginTop: 4 }}>
        <div style={{ fontSize: 72, lineHeight: 1, marginBottom: 6 }}>🏆</div>
        <div className="winner-name">{sorted[0].name}</div>
        <div style={{
          fontFamily: "var(--font-arcade)",
          fontSize: 12,
          letterSpacing: 2,
          color: "var(--fg-dim)",
          marginTop: 4,
        }}>
          WINS · {sorted[0].score} PTS
        </div>
      </div>

      <div style={tableStyle}>
        <div style={tableHeadStyle} className="table-grid">
          <span>RANK</span>
          <span>NAME</span>
          <span style={{ textAlign: "right" }}>SCORE</span>
        </div>
        {sorted.map((t, i) => (
          <div key={t.name + i} className="table-grid" style={{
            ...tableRowStyle,
            ...(i === 0 ? tableRowWinnerStyle : null),
          }}>
            <span style={{
              fontFamily: "var(--font-arcade)",
              fontSize: 14,
              color: i === 0 ? "var(--accent-2)" : "var(--fg-dim)",
              display: "flex", alignItems: "center", gap: 6,
            }}>
              <span style={{ fontSize: 18 }}>{medals[i] || `${i + 1}`}</span>
            </span>
            <span style={{
              fontFamily: "var(--font-arcade)",
              fontSize: 14,
              letterSpacing: 2,
              color: i === 0 ? "var(--accent)" : "var(--fg)",
            }}>{t.name}</span>
            <span style={{
              fontFamily: "var(--font-arcade)",
              fontSize: 18,
              color: i === 0 ? "var(--accent-2)" : "var(--fg-dim)",
              textAlign: "right",
            }}>{String(t.score).padStart(2, "0")}</span>
          </div>
        ))}
      </div>

      <div className="spacer" />

      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        {onAddRound && (
          <button className="btn go" onClick={() => { window.sfx && window.sfx.start(); onAddRound(); }}>
            + One More Round
          </button>
        )}
        <button className="btn" onClick={() => { window.sfx && window.sfx.start(); onRestart(); }}>
          ▶ Insert Coin · Again
        </button>
      </div>

      <div style={{ textAlign: "center", fontFamily: "var(--font-arcade)", fontSize: 8, letterSpacing: 3, color: "var(--fg-quiet)", marginTop: 8, lineHeight: 2.2 }}>
        © 2026 · GUESSDIT · NO TALKING<br />
        <span style={{ color: "var(--accent-2)", opacity: 0.7 }}>✦ MISCELLANEOUS GAMES ✦</span>
      </div>
    </div>
  );
}

const tableStyle = {
  background: "rgba(0, 0, 0, 0.35)",
  border: "1px solid rgba(255, 210, 63, 0.18)",
  borderRadius: 14,
  padding: 14,
  display: "flex",
  flexDirection: "column",
  gap: 6,
};
const tableHeadStyle = {
  fontFamily: "var(--font-arcade)",
  fontSize: 9,
  letterSpacing: 2,
  color: "var(--fg-quiet)",
  paddingBottom: 6,
  borderBottom: "1px dashed rgba(255, 255, 255, 0.1)",
  marginBottom: 4,
};
const tableRowStyle = {
  padding: "10px 6px",
  borderRadius: 8,
};
const tableRowWinnerStyle = {
  background: "linear-gradient(90deg, rgba(255, 210, 63, 0.18), rgba(255, 94, 58, 0.10))",
  border: "1px solid rgba(255, 210, 63, 0.35)",
  boxShadow: "inset 0 0 0 1px rgba(255, 210, 63, 0.1)",
};

window.EndScreen = EndScreen;