/*
 * MHSF, Minehut Server List
 * All external content is rather licensed under the ECA Agreement
 * located here: https://mhsf.app/docs/legal/external-content-agreement
 *
 * All code under MHSF is licensed under the MIT License
 * by open source contributors
 *
 * Copyright (c) 2025 dvelo
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to
 * deal in the Software without restriction, including without limitation the
 * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
 * sell copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
 * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
 * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
 * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
 * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
 * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
 * OTHER DEALINGS IN THE SOFTWARE.
 */

"use client";
import {
	BrandingGenericIcon,
	brandingIconClipboard,
} from "@/components/feat/icons/branding-icons";
import { Button } from "@/components/ui/button";
import {
	ContextMenu,
	ContextMenuContent,
	ContextMenuItem,
	ContextMenuSeparator,
	ContextMenuTrigger,
} from "@/components/ui/context-menu";
import {
	DropdownMenu,
	DropdownMenuContent,
	DropdownMenuSeparator,
	DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import Github from "@/components/ui/github";
import { Link } from "@/components/util/link";
import { version } from "@/config/version";
import { useScroll } from "@/lib/hooks/use-scroll";
import { cn } from "@/lib/utils";
import { Home, Image, Menu, ServerCrash } from "lucide-react";
import { MenuDropdown } from "./menu-dropdown";
import useClipboard from "@/lib/useClipboard";
import { toast } from "sonner";
import { SignedIn, SignedOut, useUser } from "@clerk/nextjs";
import NextImage from "next/image";
import { usePathname } from "next/navigation";

const animatedTopbarPages = ["/home"];

export function NavBar() {
	const showBorder = useScroll(40);
	const clipboard = useClipboard();
	const pathname = usePathname();
	const { user } = useUser();

	return (
		<div
			className={cn(
				"w-screen h-[3rem] grid-cols-3 fixed z-10 flex",
				"items-center justify-self-start me-auto pl-4 flex-1 transition-all justify-between",
				"lg:top-0 max-lg:bottom-0",
				showBorder
					? "border-b backdrop-blur-xl"
					: "max-lg:border-b max-lg:backdrop-blur-xl",
				pathname !== null && animatedTopbarPages.includes(pathname)
					? "[--animation-delay:1000ms] opacity-0 animate-fade-in"
					: "",
			)}
		>
			<span>
				<ContextMenu>
					<ContextMenuTrigger>
						<Link className="gap-5 flex items-center " href="/">
							<BrandingGenericIcon className="max-w-[32px] max-h-[32px] mt-0.5" />
							<span className="gap-2 flex group hover:text-blue-500 hover:underline transition-all">
								<strong className="">MHSF</strong>
								<span className="text-muted-foreground group-hover:text-blue-500 transition-all">
									v{version}
								</span>
							</span>
						</Link>
					</ContextMenuTrigger>
					<ContextMenuContent className="overflow-hidden min-w-[300px]">
						<DropdownMenuSeparator>Platform</DropdownMenuSeparator>
						<Link href="Special:Root">
							<ContextMenuItem>
								<span className="pl-2 flex gap-2 items-center">
									<ServerCrash size={16} /> Go to Dynamic Home Page
								</span>
							</ContextMenuItem>
						</Link>

						<Link href="/home">
							<ContextMenuItem>
								<span className="pl-2 flex gap-2 items-center">
									<Home size={16} /> Go to Home Page
								</span>
							</ContextMenuItem>
						</Link>
						<ContextMenuSeparator />

						<ContextMenuItem
							onClick={() => {
								clipboard.writeText(brandingIconClipboard);
								toast.success("Copied icon to clipboard!");
							}}
						>
							<span className="pl-2 flex gap-2 items-center">
								<Image size={16} /> Copy Logo as SVG
							</span>
						</ContextMenuItem>
						<ContextMenuSeparator />
						<Link href="Special:GitHub">
							<ContextMenuItem>
								<span className="pl-2 flex gap-2 items-center">
									<Github /> Open GitHub
								</span>
							</ContextMenuItem>
						</Link>
						<Link href="Special:GitHub/releases">
							<ContextMenuItem>
								<span className="pl-2 flex gap-2 items-center">
									<Github /> Open GitHub Releases
								</span>
							</ContextMenuItem>
						</Link>
					</ContextMenuContent>
				</ContextMenu>
			</span>
			<span className="mr-3 flex items-center">
				<DropdownMenu>
					<SignedOut>
						<DropdownMenuTrigger asChild>
							<Button
								className={cn(
									"rounded-full flex items-center",
									pathname !== null && animatedTopbarPages.includes(pathname)
										? "[--animation-delay:2000ms] opacity-0 animate-fade-in"
										: "",
								)}
								size="square-lg"
								variant="secondary"
							>
								<Menu size={16} />
							</Button>
						</DropdownMenuTrigger>
					</SignedOut>
					<SignedIn>
						<DropdownMenuTrigger asChild>
							<Button
								size="square-lg"
								variant="tertiary"
								className={cn(
									"rounded-full flex items-center",
									pathname !== null && animatedTopbarPages.includes(pathname)
										? "[--animation-delay:2000ms] opacity-0 animate-fade-in"
										: "",
								)}
							>
								<NextImage
									alt="Clerk Image"
									src={
										user?.imageUrl === undefined
											? "https://img.clerk.com/preview.png?size=144&seed=seed&initials=AD&isSquare=true&bgType=marble&bgColor=6c47ff&fgType=silhouette&fgColor=FFFFFF&type=user&w=48&q=75"
											: user?.imageUrl
									}
									width={26}
									height={26}
									className="rounded-full"
								/>
							</Button>
						</DropdownMenuTrigger>
					</SignedIn>
					<DropdownMenuContent className="max-w-[280px] w-[280px] mt-2 mr-2">
						<MenuDropdown />
					</DropdownMenuContent>
				</DropdownMenu>
				<SignedIn>
					<div
						className="absolute right-0 -z-10 h-full
       overflow-hidden w-full ml-auto"
						style={{ borderRadius: "inherit" }}
					>
						<img
							src={user?.imageUrl ?? ""}
							className="blur-2xl -z-10 object-cover w-48 h-48 opacity-20 dark:opacity-50 ml-auto"
							alt=""
						/>
					</div>
				</SignedIn>
			</span>
		</div>
	);
}
