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.catalogPage.findUnique({
    where: { id: pageId },
  })

  if (!catalogPage) notFound()

  const [children, itemsData, ancestors] = await Promise.all([
    prisma.catalogPage.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>
  )
}