"use client";

import { Package } from "lucide-react";
import type { CatalogItemData } from "@/components/admin/catalog/catalog-items-table/types";
import { cn } from "@/lib/utils";
import {
	getShopGridClass,
	getShopTileSize,
	parseFirstItemId,
	ShopTile,
} from "./shop-tile";

interface ItemsShopPreviewProps {
	items: CatalogItemData[];
	furniRevisionMap: Record<number, { classname: string; revision: number }>;
	layout: string;
	canEdit: boolean;
	onItemClick?: (item: CatalogItemData) => void;
}

export function ItemsShopPreview({
	items,
	furniRevisionMap,
	layout,
	canEdit,
	onItemClick,
}: ItemsShopPreviewProps) {
	if (items.length === 0) {
		return (
			<div className="flex flex-col items-center justify-center rounded-lg border-2 border-dashed p-12 text-center">
				<Package className="h-10 w-10 text-muted-foreground/40" />
				<p className="mt-2 text-sm text-muted-foreground">
					No items in this page yet
				</p>
			</div>
		);
	}

	const gridClass = getShopGridClass(layout);
	const tileSize = getShopTileSize(layout);

	return (
		<div className="rounded-lg border bg-gradient-to-b from-[var(--admin-surface)] to-[var(--admin-canvas)] p-4">
			<div className="mb-3 flex items-center justify-between text-xs text-[var(--admin-text-muted)]">
				<span className="font-medium">Shop preview · {layout}</span>
				<span>{items.length} items</span>
			</div>
			<div className={cn("grid gap-2", gridClass)}>
				{items.map((item) => {
					const firstId = parseFirstItemId(item.itemIds);
					const furni = firstId != null ? furniRevisionMap[firstId] : undefined;

					return (
						<ShopTile
							key={item.id}
							item={item}
							furni={furni}
							iconHeight={tileSize}
							canEdit={canEdit}
							onClick={onItemClick}
						/>
					);
				})}
			</div>
		</div>
	);
}