'use client'

import { Languages, Package, Settings } from 'lucide-react'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import type { CatalogItemData } from './catalog-items-table'
import { CatalogItemsTable } from './catalog-items-table'
import { CatalogPageForm } from './catalog-page-form'
import { CatalogTranslateTab } from './catalog-translate-tab'

interface CatalogPageData {
  id: number
  caption: string
  parentId: number
  pageLayout: string
  enabled: string
  visible: string
  minRank: number
  clubOnly: string
  orderNum: number
  iconImage: number
  iconColor: number
  pageHeadline: string
  pageTeaser: string
  pageSpecial: string | null
  pageText1: string | null
  pageText2: string | null
  pageTextDetails: string | null
  pageTextTeaser: string | null
}

interface BaseItemData {
  id: number
  publicName: string
  itemName: string
  spriteId: number
  type: string
}

interface CatalogDetailTabsProps {
  catalogPage: CatalogPageData
  items: CatalogItemData[]
  baseItems: BaseItemData[]
  catalogNameMap: Record<number, string>
  childPages: { id: number; caption: string; enabled: string }[]
  pageId: number
  canEdit: boolean
  furniDataIdList: number[]
  furniDescriptionMap: Record<number, string>
  furniRevisionMap: Record<number, { classname: string; revision: number }>
  allPages: { id: number; caption: string }[]
  interactionTypes: string[]
}

export function CatalogDetailTabs({
  catalogPage,
  items,
  baseItems,
  catalogNameMap,
  childPages,
  pageId,
  canEdit,
  furniDataIdList,
  furniDescriptionMap,
  furniRevisionMap,
  allPages,
  interactionTypes,
}: CatalogDetailTabsProps) {
  return (
    <Tabs defaultValue="settings">
      <TabsList>
        <TabsTrigger value="settings" className="gap-2">
          <Settings className="h-4 w-4" />
          Settings
        </TabsTrigger>
        <TabsTrigger value="items" className="gap-2">
          <Package className="h-4 w-4" />
          Items ({items.length})
        </TabsTrigger>
        <TabsTrigger value="translate" className="gap-2">
          <Languages className="h-4 w-4" />
          Translate ({baseItems.length}){(() => {
            const furniSet = new Set(furniDataIdList)
            const missing = baseItems.filter((b) => !furniSet.has(b.id)).length
            return missing > 0 ? (
            <span className="ml-1 rounded-full bg-[var(--admin-warning-subtle)] text-[var(--admin-warning)] text-[10px] px-1.5 py-0.5 leading-none font-medium">
                {missing}
              </span>
            ) : null
          })()}
        </TabsTrigger>
      </TabsList>

      <TabsContent value="settings" className="mt-4">
        <CatalogPageForm
          catalogPage={catalogPage}
          childPages={childPages}
          canEdit={canEdit}
          allPages={allPages}
        />
      </TabsContent>

      <TabsContent value="items" className="mt-4">
        <CatalogItemsTable
          items={items}
          pageId={pageId}
          pageLayout={catalogPage.pageLayout}
          canEdit={canEdit}
          interactionTypes={interactionTypes}
          furniRevisionMap={furniRevisionMap}
          allPages={allPages}
        />
      </TabsContent>

      <TabsContent value="translate" className="mt-4">
        <CatalogTranslateTab
          baseItems={baseItems}
          catalogNameMap={catalogNameMap}
          canEdit={canEdit}
          furniDataIdList={furniDataIdList}
          furniDescriptionMap={furniDescriptionMap}
          furniRevisionMap={furniRevisionMap}
        />
      </TabsContent>
    </Tabs>
  )
}