"use client";

import { Languages, Package, Settings } from "lucide-react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { type CatalogItemData, 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[];
	gamedataHotel: string;
}

export function CatalogDetailTabs({
	catalogPage,
	items,
	baseItems,
	catalogNameMap,
	childPages,
	pageId,
	canEdit,
	furniDataIdList,
	furniDescriptionMap,
	furniRevisionMap,
	allPages,
	interactionTypes,
	gamedataHotel,
}: CatalogDetailTabsProps) {
	return (
		<Tabs defaultValue="settings">
			<TabsList className="overflow-x-auto flex-nowrap w-full">
				<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}
					gamedataHotel={gamedataHotel}
				/>
			</TabsContent>
		</Tabs>
	);
}