import { RotateCcw } from "lucide-react";
import { cn } from "@/lib/utils";
import { pkPageCursorClass } from "../constants";
import type { Team } from "../types";

type Winner = Team | "draw";

type EndScreenProps = {
  winner: Winner;
  scoreRed: number;
  scoreBlue: number;
  onRestart: () => void;
};

export function EndScreen({ winner, scoreRed, scoreBlue, onRestart }: EndScreenProps) {
  return (
    <main
      className={cn(
        pkPageCursorClass,
        "pk-end-stage mx-auto grid min-h-[calc(100vh-60px)] max-w-5xl place-items-center px-4 py-4",
      )}
    >
      <section className="pk-end-card w-full rounded-[28px] bg-white p-[clamp(28px,6vw,72px)] text-center shadow-soft">
        <div className="pk-end-visual mb-5 text-[clamp(72px,10vw,118px)] leading-none">{winner === "draw" ? "🤝" : "🏆"}</div>
        <h1 className="pk-end-title text-[clamp(32px,5vw,54px)] font-black text-rose-500">PK结束！</h1>
        <p
          className={cn(
            "pk-end-result mt-4 text-[clamp(26px,4vw,44px)] font-black",
            winner === "red" && "text-red-600",
            winner === "blue" && "text-blue-600",
            winner === "draw" && "text-amber-500",
          )}
        >
          {winner === "red" ? "🔴 红队获胜！" : winner === "blue" ? "🔵 蓝队获胜！" : "平局！势均力敌！"}
        </p>
        <div className="pk-end-score-grid mx-auto mt-8 grid max-w-lg grid-cols-2 gap-4">
          <div className="pk-end-score-card rounded-lg bg-red-50 p-5 text-red-700">
            <div className="font-bold">红队</div>
            <div className="pk-end-score text-4xl font-black">{scoreRed}</div>
          </div>
          <div className="pk-end-score-card rounded-lg bg-blue-50 p-5 text-blue-700">
            <div className="font-bold">蓝队</div>
            <div className="pk-end-score text-4xl font-black">{scoreBlue}</div>
          </div>
        </div>
        <button
          onClick={onRestart}
          className="pk-end-button mt-8 inline-flex items-center gap-2 rounded-full bg-rose-500 px-10 py-4 text-lg font-bold text-white shadow-lg transition hover:bg-rose-600"
        >
          <RotateCcw className="size-5" />
          再来一局
        </button>
      </section>
    </main>
  );
}