import {
	BadgeCheck,
	Cat,
	ClipboardCheck,
	Copy,
	Dumbbell,
	ImageIcon,
	Puzzle,
	RefreshCw,
	Shirt,
	Upload,
} from "lucide-react";
import Link from "next/link";
import { redirect } from "next/navigation";
import { getTranslations } from "next-intl/server";
import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";

export default async function ImportPage() {
	const t = await getTranslations("pages.admin.import");
	const { session, permissions } = await getAdminContext();
	if (!canAccess(permissions, PERMS.ASSETS_IMPORT, session.user.rank)) {
		redirect("/admin");
	}

	const SECTIONS = [
		{
			href: "/admin/import/badges",
			label: t("badges"),
			icon: BadgeCheck,
			description: t("badgesDescription"),
		},
		{
			href: "/admin/import/furni",
			label: t("furni"),
			icon: Puzzle,
			description: t("furniDescription"),
		},
		{
			href: "/admin/import/furni/upload",
			label: t("upload"),
			icon: Upload,
			description: t("uploadDescription"),
		},
		{
			href: "/admin/import/clothing",
			label: t("clothing"),
			icon: Shirt,
			description: t("clothingDescription"),
		},
		{
			href: "/admin/import/effects",
			label: t("effects"),
			icon: Dumbbell,
			description: t("effectsDescription"),
		},
		{
			href: "/admin/import/pets",
			label: t("pets"),
			icon: Cat,
			description: t("petsDescription"),
		},
		{
			href: "/admin/import/clone",
			label: t("clone"),
			icon: Copy,
			description: t("cloneDescription"),
		},
		{
			href: "/admin/import/sync",
			label: t("sync"),
			icon: RefreshCw,
			description: t("syncDescription"),
		},
		{
			href: "/admin/import/repair-icons",
			label: t("repairIcons"),
			icon: ImageIcon,
			description: t("repairIconsDescription"),
		},
		{
			href: "/admin/import/audit",
			label: t("audit"),
			icon: ClipboardCheck,
			description: t("auditDescription"),
		},
	] as const;

	return (
		<div className="space-y-6">
			<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
				{SECTIONS.map(({ href, label, icon: Icon, description }) => (
					<Link
						key={href}
						href={href}
						className="group rounded-lg border bg-card p-4 transition-colors hover:border-primary hover:bg-accent"
					>
						<div className="flex items-center gap-3">
							<div className="rounded-md bg-primary/10 p-2 text-primary">
								<Icon className="h-5 w-5" />
							</div>
							<div>
								<h2 className="font-semibold group-hover:text-primary">
									{label}
								</h2>
								<p className="text-xs text-muted-foreground">{description}</p>
							</div>
						</div>
					</Link>
				))}
			</div>
		</div>
	);
}