import { notFound } from "next/navigation";
import { getGameById, incrementPlayCount } from "@/lib/games/service";
import { getCurrentSession } from "@/lib/auth/session";
import { TEMPLATE_LABELS } from "@/lib/games/types";
import { PlaySession } from "@/components/play-session";

const TEMPLATE_HINTS: Record<string, string> = {
  quiz: "Выбирайте вариант ответа мышкой.",
  clicker: "Кликайте по кругу и покупайте улучшения.",
  maze: "Управление — стрелки на клавиатуре.",
};

export default async function PlayPage({ params }: { params: Promise<{ gameId: string }> }) {
  const { gameId } = await params;
  const game = await getGameById(gameId);
  if (!game) notFound();

  if (game.status === "draft") {
    const session = await getCurrentSession();
    if (!session || session.user.id !== game.ownerId) notFound();
  } else {
    await incrementPlayCount(gameId);
  }

  return (
    <div className="flex flex-1 flex-col">
      <div className="mx-auto w-full max-w-4xl px-4 pt-6 sm:px-6">
        <div className="mb-1 flex items-center gap-2">
          <span className="badge">{TEMPLATE_LABELS[game.templateType]}</span>
          {game.status === "draft" && <span className="badge bg-danger-soft text-danger-soft-text">Черновик</span>}
        </div>
        <h1 className="font-display text-2xl font-bold tracking-tight">{game.title}</h1>
        {game.description && <p className="mt-1 text-sm text-text-muted">{game.description}</p>}
        <p className="mt-1 text-xs text-text-faint">{TEMPLATE_HINTS[game.templateType]}</p>
      </div>
      <PlaySession templateType={game.templateType} definition={game.definition} />
    </div>
  );
}