import { Link } from "wouter"
import { Button } from "@workspace/ui/components/button"
import { useRoomStore } from "@/store/room"

export function LobbyPage({ code }: { code: string }) {
  const snapshot = useRoomStore((s) => s.snapshot)
  const playerId = useRoomStore((s) => s.playerId)
  const connected = useRoomStore((s) => s.connected)

  // Pas de snapshot pour ce code (accès direct / refresh) : on renvoie à l'accueil.
  if (!snapshot || snapshot.code !== code) {
    return (
      <div className="flex min-h-svh flex-col items-center justify-center gap-4 p-6 text-center">
        <p className="text-muted-foreground text-sm">
          Room introuvable ou session perdue.
        </p>
        <Link href="/">
          <Button variant="secondary">Retour à l'accueil</Button>
        </Link>
      </div>
    )
  }

  return (
    <div className="flex min-h-svh items-center justify-center p-6">
      <div className="flex w-full max-w-md flex-col gap-6">
        <header className="flex items-center justify-between">
          <div>
            <p className="text-muted-foreground text-xs uppercase">Code room</p>
            <p className="font-heading text-3xl font-bold tracking-widest">
              {snapshot.code}
            </p>
          </div>
          <span
            className={`size-2.5 rounded-full ${connected ? "bg-green-500" : "bg-red-500"}`}
            title={connected ? "Connecté" : "Déconnecté"}
          />
        </header>

        <section className="flex flex-col gap-2">
          <h2 className="text-muted-foreground text-sm font-medium">
            Joueurs ({snapshot.players.length})
          </h2>
          <ul className="flex flex-col gap-1">
            {snapshot.players.map((p) => (
              <li
                key={p.id}
                className="bg-muted/40 flex items-center justify-between rounded-md px-3 py-2 text-sm"
              >
                <span className={p.connected ? "" : "opacity-40"}>
                  {p.name}
                  {p.id === playerId && (
                    <span className="text-muted-foreground"> (toi)</span>
                  )}
                </span>
                <span className="text-muted-foreground text-xs">
                  {p.id === snapshot.hostId ? "Hôte" : ""}
                  {!p.connected && " · hors ligne"}
                </span>
              </li>
            ))}
          </ul>
        </section>

        <p className="text-muted-foreground text-center text-xs">
          En attente du lancement de la partie par l'hôte…
        </p>
      </div>
    </div>
  )
}