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

export default async function QuizGameStartPage() {
  const session = await auth();
  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>

      {/* Game card */}
      <div className="container-bg max-w-md p-8">
        {/* Create Lobby Button */}
        <div className="space-y-6">
          {session ? (
            <LobbyDialog
              buttonProps={{
                className: "text-shadow-primary w-full",
                size: "xxl",
                variant: "party",
              }}
            />
          ) : (
            <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>
    </>
  );
}