nerdware/apps/web/src/components/game-end-view.tsx

import { Link } from "wouter"
import { motion } from "framer-motion"
import { Crown } from "lucide-react"
import type { PlayerScore, RoomSnapshot } from "@nerdware/shared"
import { Button } from "@workspace/ui/components/button"
import { useRoomStore } from "@/store/room"
import { Avatar } from "@/components/avatar"

type Place = 1 | 2 | 3

// Hauteur de marche, couleurs (or / argent / bronze) et taille d'avatar par place.
const PODIUM: Record<Place, {
  bar: string
  pedestal: string
  text: string
  ring: string
  avatar: string
}> = {
  1: {
    bar: "h-24",
    pedestal: "border-amber-400 bg-gradient-to-b from-amber-400/30 to-amber-400/5",
    text: "text-amber-400",
    ring: "ring-amber-400",
    avatar: "size-20",
  },
  2: {
    bar: "h-16",
    pedestal: "border-zinc-300/70 bg-gradient-to-b from-zinc-300/20 to-zinc-300/5",
    text: "text-zinc-300",
    ring: "ring-zinc-300",
    avatar: "size-16",
  },
  3: {
    bar: "h-12",
    pedestal: "border-amber-700/70 bg-gradient-to-b from-amber-700/25 to-amber-700/5",
    text: "text-amber-600",
    ring: "ring-amber-700",
    avatar: "size-16",
  },
}

function PodiumColumn({
  entry,
  place,
  name,
  isMe,
  delay,
}: {
  entry: PlayerScore
  place: Place
  name: string
  isMe: boolean
  delay: number
}) {
  const cfg = PODIUM[place]
  return (
    <motion.div
      initial={{ y: 30, opacity: 0 }}
      animate={{ y: 0, opacity: 1 }}
      transition={{ type: "spring", stiffness: 260, damping: 22, delay }}
      className="flex w-24 flex-col items-center gap-1"
    >
      <div className="relative">
        {place === 1 && (
          <motion.span
            initial={{ y: -26, rotate: -25, opacity: 0 }}
            animate={{ y: 0, rotate: 0, opacity: 1 }}
            transition={{ type: "spring", stiffness: 500, damping: 14, delay: delay + 0.25 }}
            className="absolute -top-5 left-1/2 z-10 -translate-x-1/2"
          >
            <Crown className="size-8 fill-amber-400 text-amber-400 drop-shadow" />
          </motion.span>
        )}
        <motion.div
          animate={
            place === 1
              ? {
                  boxShadow: [
                    "0 0 0px 0px rgba(251,191,36,0)",
                    "0 0 24px 4px rgba(251,191,36,0.5)",
                    "0 0 12px 2px rgba(251,191,36,0.25)",
                  ],
                }
              : undefined
          }
          transition={{ duration: 2, repeat: Infinity, repeatType: "reverse" }}
          className="rounded-full"
        >
          <Avatar seed={name} className={`${cfg.avatar} ring-2 ${cfg.ring}`} />
        </motion.div>
      </div>

      <span className="max-w-24 truncate text-sm font-medium">
        {name}
        {isMe && <span className="text-muted-foreground"> (toi)</span>}
      </span>
      <span className={`font-heading text-lg font-black tabular-nums ${cfg.text}`}>
        {entry.score}
      </span>

      <div
        className={`mt-1 flex w-full items-start justify-center rounded-t-lg border-x border-t-2 pt-1 ${cfg.bar} ${cfg.pedestal}`}
      >
        <span className={`font-heading text-2xl font-black ${cfg.text}`}>
          {place}
        </span>
      </div>
    </motion.div>
  )
}

export function GameEndView({ snapshot }: { snapshot: RoomSnapshot }) {
  const playerId = useRoomStore((s) => s.playerId)
  const finalScores = useRoomStore((s) => s.finalScores)
  const reset = useRoomStore((s) => s.reset)

  const scores: PlayerScore[] = finalScores ?? snapshot.scores
  const ranked = [...scores].sort((a, b) => b.score - a.score)
  const nameOf = (id: string) =>
    snapshot.players.find((p) => p.id === id)?.name ?? "?"
  const isMe = (id: string) => id === playerId

  const [first, second, third] = ranked
  const rest = ranked.slice(3)

  return (
    <div className="flex w-full max-w-md flex-col gap-6 text-center">
      <header>
        <p className="text-muted-foreground text-xs uppercase">
          Partie terminée
        </p>
        <h2 className="font-heading text-2xl font-bold">
          🏆 {first ? nameOf(first.playerId) : "?"} l'emporte !
        </h2>
      </header>

      {/* Podium : 2e à gauche, champion au centre, 3e à droite. */}
      <div className="mt-4 flex items-end justify-center gap-2">
        {second && (
          <PodiumColumn
            entry={second}
            place={2}
            name={nameOf(second.playerId)}
            isMe={isMe(second.playerId)}
            delay={0.1}
          />
        )}
        {first && (
          <PodiumColumn
            entry={first}
            place={1}
            name={nameOf(first.playerId)}
            isMe={isMe(first.playerId)}
            delay={0.3}
          />
        )}
        {third && (
          <PodiumColumn
            entry={third}
            place={3}
            name={nameOf(third.playerId)}
            isMe={isMe(third.playerId)}
            delay={0}
          />
        )}
      </div>

      {rest.length > 0 && (
        <ol className="flex flex-col gap-1">
          {rest.map((s, i) => (
            <li
              key={s.playerId}
              className={`bg-muted/40 flex items-center justify-between rounded-md px-3 py-2 text-sm ${
                isMe(s.playerId) ? "ring-primary ring-2" : ""
              }`}
            >
              <span className="flex items-center gap-2">
                <span className="text-muted-foreground w-5 text-right tabular-nums">
                  {i + 4}
                </span>
                <Avatar seed={nameOf(s.playerId)} className="size-7" />
                <span>
                  {nameOf(s.playerId)}
                  {isMe(s.playerId) && (
                    <span className="text-muted-foreground"> (toi)</span>
                  )}
                </span>
              </span>
              <span className="font-heading font-bold tabular-nums">
                {s.score}
              </span>
            </li>
          ))}
        </ol>
      )}

      <Link href="/">
        <Button variant="secondary" className="w-full" onClick={reset}>
          Retour à l'accueil
        </Button>
      </Link>
    </div>
  )
}