import { BadgeCheck, Cat, Copy, Dumbbell, Puzzle, Shirt, Wrench } from "lucide-react";
import Link from "next/link";
import { redirect } from "next/navigation";
import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";

const SECTIONS = [
  { href: "/admin/import/badges", label: "Badges", icon: BadgeCheck, description: "Import and manage badge assets from external sources." },
  { href: "/admin/import/furni", label: "Furni", icon: Puzzle, description: "Import furniture definitions, SWF files, and icons." },
  { href: "/admin/import/clothing", label: "Clothing", icon: Shirt, description: "Import clothing and wearables for avatars." },
  { href: "/admin/import/effects", label: "Effects", icon: Dumbbell, description: "Import avatar effects and animations." },
  { href: "/admin/import/pets", label: "Pets", icon: Cat, description: "Import pet data and icons." },
  { href: "/admin/import/clone", label: "Clone", icon: Copy, description: "Clone existing items from one source to another." },
  { href: "/admin/import/repair", label: "Repair", icon: Wrench, description: "Audit and repair imported assets." },
] as const;

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

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold">Import</h1>
        <p className="text-muted-foreground">Import assets from external sources into your hotel.</p>
      </div>

      <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>
  );
}