import Image from "next/image";
import Link from "next/link";
import { getTranslations } from "next-intl/server";
import { LanguageSwitcher } from "@/components/language-switcher";
import { MobileNav } from "@/components/mobile-nav";
import { NavDropdown } from "@/components/nav-dropdown";
import { NavbarColorPicker } from "@/components/navbar-color-picker";
import { ThemeSwitcher } from "@/components/theme-switcher";
import { auth } from "@/lib/auth";

export async function Navigation() {
	const session = await auth();
	const t = await getTranslations("nav");
	const isStaff = (session?.user?.rank ?? 0) >= 7;

	return (
		<nav
			className="sticky top-0 z-40 shadow-sm"
			style={{ backgroundColor: "var(--color-navbar)" }}
		>
			<div className="relative mx-auto flex min-h-[56px] max-w-7xl items-center px-4 md:px-6 gap-x-1">
				<div
					className="absolute bottom-0 left-0 right-0 h-[3px]"
					style={{ backgroundColor: "var(--color-primary, #eeb425)" }}
				/>

				<div className="hidden md:flex items-center gap-x-1">
					<Link href="/" className="nav-item shrink-0">
						<Image
							src="/assets/images/icons/navigation/me.png"
							alt=""
							width={20}
							height={20}
							className="mr-1.5"
						/>
						<span>{t("home")}</span>
					</Link>
				</div>

				<MobileNav
					menuLabel={t("openMenu") || "Open menu"}
					closeLabel={t("closeMenu") || "Close menu"}
				>
					<Link href="/" className="nav-item md:hidden" role="menuitem">
						<Image
							src="/assets/images/icons/navigation/me.png"
							alt=""
							width={20}
							height={20}
							className="mr-1.5"
						/>
						{t("home")}
					</Link>

					<NavDropdown
						label={t("community")}
						icon="/assets/images/icons/navigation/community.png"
					>
						<Link href="/news" className="dropdown-item" role="menuitem">
							{t("articles")}
						</Link>
						<Link href="/photos" className="dropdown-item" role="menuitem">
							{t("photos")}
						</Link>
						<Link href="/staff" className="dropdown-item" role="menuitem">
							{t("staff")}
						</Link>
						<Link href="/rankings" className="dropdown-item" role="menuitem">
							{t("rankings")}
						</Link>
						<Link href="/guilds" className="dropdown-item" role="menuitem">
							{t("guilds")}
						</Link>
					</NavDropdown>

					<NavDropdown
						label={t("shop")}
						icon="/assets/images/icons/navigation/shop.png"
					>
						<Link href="/shop" className="dropdown-item" role="menuitem">
							{t("shop")}
						</Link>
						<Link href="/marketplace" className="dropdown-item" role="menuitem">
							{t("market")}
						</Link>
						<Link href="/rares" className="dropdown-item" role="menuitem">
							{t("rareValues")}
						</Link>
					</NavDropdown>

					<Link href="/leaderboard" className="nav-item" role="menuitem">
						<Image
							src="/assets/images/icons/navigation/leaderboards.png"
							alt=""
							width={20}
							height={20}
							className="mr-1.5"
						/>
						{t("leaderboards")}
					</Link>

					<Link href="/radio" className="nav-item" role="menuitem">
						<Image
							src="/assets/images/icons/navigation/bb.png"
							alt=""
							width={20}
							height={20}
							className="mr-1.5"
						/>
						{t("radio")}
					</Link>

					<NavDropdown
						label={t("assistance")}
						icon="/assets/images/icons/navigation/rules.gif"
					>
						<Link href="/help" className="dropdown-item" role="menuitem">
							{t("helpCenter")}
						</Link>
						{session?.user ? (
							<Link
								href="/help/tickets"
								className="dropdown-item"
								role="menuitem"
							>
								{t("myTickets")}
							</Link>
						) : null}
						<Link href="/badges" className="dropdown-item" role="menuitem">
							{t("badges")}
						</Link>
						<Link href="/draw-badge" className="dropdown-item" role="menuitem">
							{t("drawBadge")}
						</Link>
					</NavDropdown>

					{session?.user ? (
						<>
							<Link href="/friends" className="nav-item">
								<Image
									src="/assets/images/icons/navigation/goody.png"
									alt=""
									width={20}
									height={20}
									className="mr-1.5"
								/>
								{t("friends")}
							</Link>
							<Link href="/messages" className="nav-item">
								<Image
									src="/assets/images/icons/navigation/bb.png"
									alt=""
									width={20}
									height={20}
									className="mr-1.5"
								/>
								{t("messages")}
							</Link>
						</>
					) : null}

					{isStaff ? (
						<Link href="/admin" className="nav-item">
							<Image
								src="/assets/images/icons/navigation/home.png"
								alt=""
								width={20}
								height={20}
								className="mr-1.5"
							/>
							{t("admin")}
						</Link>
					) : null}

					<div
						className="flex items-center gap-x-1 pt-2 mt-2 border-t md:hidden"
						style={{
							borderColor:
								"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
						}}
					>
						<LanguageSwitcher />
						<NavbarColorPicker />
						<ThemeSwitcher />
					</div>
				</MobileNav>

				<div className="ml-auto flex items-center gap-x-1 hidden md:flex">
					<LanguageSwitcher />
					<NavbarColorPicker />
					<ThemeSwitcher />
				</div>
			</div>
		</nav>
	);
}