"use client";
import AnimatedGradientText from "@/components/ui/animated-gradient-text";
import { Button } from "@/components/ui/button";
import { CardFooter } from "@/components/ui/card";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import Particles from "@/components/ui/particles";
import { Separator } from "@/components/ui/separator";
import { basePath } from "@/config/siteConfig";
import { cn } from "@/lib/utils";
import { ArrowRightIcon, ExternalLink } from "lucide-react";
import { useTheme } from "next-themes";
import Link from "next/link";
import { useEffect, useState } from "react";
import { FaGithub } from "react-icons/fa";

function CustomArrowRightIcon() {
  return <ArrowRightIcon className="h-4 w-4" width={1} />;
}

export default function Page() {
  const { theme } = useTheme();

  const [color, setColor] = useState("#000000");

  useEffect(() => {
    setColor(theme === "dark" ? "#ffffff" : "#000000");
  }, [theme]);

  return (
			<div className="w-full mt-16">
				<Particles
					className="absolute inset-0 -z-40"
					quantity={100}
					ease={80}
					color={color}
					refresh
				/>
				<div className="container mx-auto">
					<div className="flex h-[80vh] flex-col items-center justify-center gap-4 py-20 lg:py-40">
						<Dialog>
							<DialogTrigger>
								<div>
									<AnimatedGradientText>
										<div
											className={cn(
												`absolute inset-0 block size-full animate-gradient bg-gradient-to-r from-[#ffaa40]/50 via-[#9c40ff]/50 to-[#ffaa40]/50 bg-[length:var(--bg-size)_100%] [border-radius:inherit] [mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)]`,
												`p-px ![mask-composite:subtract]`,
											)}
										/>
										❤️ <Separator className="mx-2 h-4" orientation="vertical" />
										<span
											className={cn(
												`animate-gradient bg-gradient-to-r from-[#ffaa40] via-[#9c40ff] to-[#ffaa40] bg-[length:var(--bg-size)_100%] bg-clip-text text-transparent`,
												`inline`,
											)}
										>
											Develop Instance
										</span>
									</AnimatedGradientText>
								</div>
							</DialogTrigger>
							<DialogContent>
								<DialogHeader>
									<DialogTitle>Thank You!</DialogTitle>
									<DialogDescription>
										A big thank you to tteck and the many contributors who have
										made this project possible. Your hard work is truly
										appreciated by the entire Proxmox community!
									</DialogDescription>
								</DialogHeader>
								<CardFooter className="flex flex-col gap-2">
									<Button className="w-full" variant="outline" asChild>
										<a
											href="https://github.com/tteck"
											target="_blank"
											rel="noopener noreferrer"
											className="flex items-center justify-center"
										>
											<FaGithub className="mr-2 h-4 w-4" /> Tteck&apos;s GitHub
										</a>
									</Button>
									<Button className="w-full" asChild>
										<a
											href={`https://github.com/community-scripts/${basePath}`}
											target="_blank"
											rel="noopener noreferrer"
											className="flex items-center justify-center"
										>
											<ExternalLink className="mr-2 h-4 w-4" /> Proxmox Helper
											Scripts
										</a>
									</Button>
								</CardFooter>
							</DialogContent>
						</Dialog>

						<div className="flex flex-col gap-4">
							<h1 className="max-w-2xl text-center text-3xl font-semibold tracking-tighter md:text-7xl">
								Beta Scripts
							</h1>
							<div className="max-w-2xl gap-2 flex flex-col text-center sm:text-lg text-sm leading-relaxed tracking-tight text-muted-foreground md:text-xl">
								<p>
									On this Website you can find a collection of scripts that are under development and only for testing.
                                    We do not provide any support for these scripts when run in production, but you can help us by testing them and providing feedback.
								</p>
							</div>
						</div>
						<div className="flex flex-row gap-3">
							<Link href="/scripts">
								<Button
									size="lg"
									variant="expandIcon"
									Icon={CustomArrowRightIcon}
									iconPlacement="right"
									className="hover:"
								>
									View Scripts
								</Button>
							</Link>
						</div>
					</div>
				</div>
			</div>
		);
}