import { ChevronRight } from "lucide-react";
import Link from "next/link";
import { notFound, redirect } from "next/navigation";
import { Fragment } from "react";
import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
import { prisma } from "@/lib/prisma";
import { loadCatalogItemsData } from "@/lib/services/catalog-items-loader";
import { getAncestors } from "@/lib/services/catalog-tree";
import { CatalogDetailTabs } from "./catalog-detail-tabs";

export default async function CatalogEditPage({
  params,
}: {
  params: Promise<{ locale: string; id: string }>;
}) {
  const { id } = await params;
  const { session, permissions } = await getAdminContext();
  if (!canAccess(permissions, PERMS.CATALOG_VIEW, session.user.rank)) {
    redirect("/admin");
  }

  const pageId = parseInt(id, 10);
  if (Number.isNaN(pageId)) notFound();

  const catalogPage = await prisma.catalogPages.findUnique({
    where: { id: pageId },
  });

  if (!catalogPage) notFound();

  const [children, itemsData, ancestors] = await Promise.all([
    prisma.catalogPages.findMany({
      where: { parentId: pageId },
      orderBy: { orderNum: "asc" },
      select: { id: true, caption: true, enabled: true },
    }),
    loadCatalogItemsData(pageId),
    getAncestors(catalogPage.parentId),
  ]);

  const {
    items: catalogItems,
    baseItems,
    catalogNameMap,
    furniDataIdList,
    furniDescriptionMap,
    furniRevisionMap,
    interactionTypes,
    allPages,
  } = itemsData;

  const canEdit = canAccess(permissions, PERMS.CATALOG_EDIT, session.user.rank);

  return (
    <div className="space-y-6">
      {/* Breadcrumb */}
      <nav className="flex items-center gap-1 text-sm text-muted-foreground">
        <Link href={"/admin/catalog"} className="hover:text-foreground transition-colors">
          Catalog
        </Link>
        {ancestors.map((bc) => (
          <Fragment key={bc.id}>
            <ChevronRight className="h-3 w-3 flex-shrink-0" />
            <Link href={`/admin/catalog/${bc.id}`} className="hover:text-foreground transition-colors">
              {bc.caption}
            </Link>
          </Fragment>
        ))}
        <ChevronRight className="h-3 w-3 flex-shrink-0" />
        <span className="text-foreground font-medium">{catalogPage.caption}</span>
      </nav>

      {/* Title */}
      <div>
        <h1 className="text-3xl font-bold tracking-tight">
          {catalogPage.caption}
          <span className="ml-2 text-base font-normal text-muted-foreground">#{catalogPage.id}</span>
        </h1>
        <p className="text-muted-foreground">
          Layout: {catalogPage.pageLayout} &middot; {catalogItems.length} items
        </p>
      </div>

      {/* Tabs */}
      <CatalogDetailTabs
        catalogPage={{
          id: catalogPage.id,
          caption: catalogPage.caption,
          parentId: catalogPage.parentId,
          pageLayout: catalogPage.pageLayout,
          enabled: catalogPage.enabled,
          visible: catalogPage.visible,
          minRank: catalogPage.minRank,
          clubOnly: catalogPage.clubOnly,
          orderNum: catalogPage.orderNum,
          iconImage: catalogPage.iconImage,
          iconColor: catalogPage.iconColor,
          pageHeadline: catalogPage.pageHeadline,
          pageTeaser: catalogPage.pageTeaser,
          pageSpecial: catalogPage.pageSpecial,
          pageText1: catalogPage.pageText1,
          pageText2: catalogPage.pageText2,
          pageTextDetails: catalogPage.pageTextDetails,
          pageTextTeaser: catalogPage.pageTextTeaser,
        }}
        items={catalogItems}
        baseItems={baseItems}
        catalogNameMap={catalogNameMap}
        childPages={children}
        pageId={catalogPage.id}
        canEdit={canEdit}
        furniDataIdList={furniDataIdList}
        furniDescriptionMap={furniDescriptionMap}
        furniRevisionMap={furniRevisionMap}
        allPages={allPages}
        interactionTypes={interactionTypes}
      />
    </div>
  );
}