import Link from "next/link";
import { Button } from "@/components/ui/button";
import { Sparkles, Users, Plus } from "lucide-react";
import CreateLobbyDialog from "../_components/lobby/create-lobby-dialog";
import { auth } from "@/server/auth";
import { Icons } from "@/components/icons";
import { appConfig } from "@/config/app.config";
import { api } from "@/trpc/server";
import { appRoutes } from "@/config/app.routes";

export default async function QuizGameStartPage() {
  const session = await auth();
  const currentLobby = session ? await api.lobby.getCurrentLobby() : null;

  return (
    <>
      <div className="mb-8 flex flex-col items-center justify-center gap-2 pt-12 text-center">
        <Icons.logo className="animate-puls text-primary h-10 w-10" />

        <h1 className="from-primary to-secondary bg-gradient-to-b bg-clip-text text-5xl font-black tracking-tight text-transparent uppercase">
          {appConfig.name}
        </h1>
        <p className="text-lg font-medium text-indigo-200">
          {appConfig.description}
        </p>
      </div>

      <div className="container-bg w-full max-w-md p-8">
        {currentLobby ? (
          <Button variant={"party"} size={"xxl"} className="w-full" asChild>
            <Link href={appRoutes.currentlobby}>Jump to Lobby</Link>
          </Button>
        ) : (
          <div className="space-y-6">
            {session ? (
              <CreateLobbyDialog className="text-shadow-primary w-full" />
            ) : (
              <Button
                size={"xxl"}
                variant={"party"}
                asChild
                className="text-shadow-primary w-full font-black uppercase"
              >
                <Link href={"/api/auth/signin"}>Sign-in to create a Lobby</Link>
              </Button>
            )}

            {/* Join Lobby Button */}
            <Button
              size={"xxl"}
              variant={"party"}
              className="w-full rounded-xl bg-gradient-to-r from-blue-500 via-blue-600 to-indigo-600 text-white hover:from-blue-600 hover:to-indigo-700"
            >
              <Users className="mr-2 h-6 w-6" />
              Join Lobby
            </Button>

            {/* Quick Play Option */}
            <div className="border-t border-white/10 pt-4">
              <Button
                variant="ghost"
                className="w-full text-indigo-200 hover:bg-white/10 hover:text-white"
              >
                Quick Play
              </Button>
            </div>
          </div>
        )}
      </div>
    </>
  );
}
