"use client";

import {
	ArrowRight,
	Eye,
	Folder,
	FolderTree,
	Home,
	Loader2,
	Plus,
	RefreshCw,
	Search,
	Wand2,
	X,
} from "lucide-react";
import { useRouter } from "next/navigation";
import { useTranslations } from "next-intl";
import { useCallback, useEffect, useMemo, useState } from "react";
import { toast } from "sonner";
import { organizeImportFurni } from "@/actions/catalog";
import { IconPicker } from "@/components/admin/catalog/icon-picker";
import { CatalogIcon, LAYOUT_COLORS } from "@/components/admin/catalog-tree";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
	Dialog,
	DialogContent,
	DialogHeader,
	DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import {
	Select,
	SelectContent,
	SelectItem,
	SelectTrigger,
	SelectValue,
} from "@/components/ui/select";
import {
	CATALOG_LAYOUTS,
	type CatalogLayout,
	isValidCatalogLayout,
	LAYOUT_DESCRIPTIONS,
} from "@/lib/catalog-layouts";
// import { CATALOG_LAYOUTS } from "@/lib/catalog-layouts";
import { getLocalIconUrl } from "@/lib/furni/classname";
import { cn } from "@/lib/utils";

interface OrganizeGroupOverride {
	caption?: string;
	icon?: number;
	layout?: CatalogLayout;
}

interface RootPage {
	id: number;
	caption: string;
}

interface OrganizeImportGroup {
	name: string;
	icon: number;
	layout: CatalogLayout | null;
	total: number;
	moved: number;
	added: number;
	thumbs: {
		itemName: string;
		publicName: string;
		spriteId: number;
		alreadyPlaced: boolean;
		sourcePageCaption: string | null;
	}[];
	items: {
		itemId: number;
		catalogItemId: number | null;
		alreadyPlaced: boolean;
	}[];
}

interface OrganizeImportsDialogProps {
	open: boolean;
	onOpenChange: (open: boolean) => void;
}

export function OrganizeImportsDialog({
	open,
	onOpenChange,
}: OrganizeImportsDialogProps) {
	const t = useTranslations("pages.admin.catalog.workspace.organizeImports");
	const router = useRouter();

	const [loading, setLoading] = useState(false);
	const [loadError, setLoadError] = useState(false);
	const [groups, setGroups] = useState<OrganizeImportGroup[]>([]);
	const [rootPages, setRootPages] = useState<RootPage[]>([]);
	const [importRootPageId, setImportRootPageId] = useState<number | null>(null);
	const [importRootCaption, setImportRootCaption] = useState<string | null>(
		null,
	);

	const [parentId, setParentId] = useState(-1);
	const [moveMode, setMoveMode] = useState(false);
	const [destinationPageId, setDestinationPageId] = useState<number | null>(
		null,
	);
	const [destinationCaption, setDestinationCaption] = useState<string | null>(
		null,
	);
	const [destQuery, setDestQuery] = useState("");
	const [destDebounced, setDestDebounced] = useState("");
	const [destResults, setDestResults] = useState<RootPage[]>([]);
	const [destSearchLoading, setDestSearchLoading] = useState(false);
	const [approved, setApproved] = useState<Record<string, boolean>>({});
	const [overrides, setOverrides] = useState<
		Record<string, OrganizeGroupOverride>
	>({});
	const [previewGroup, setPreviewGroup] = useState<OrganizeImportGroup | null>(
		null,
	);
	const [isCreating, setIsCreating] = useState(false);

	const [freeMode, setFreeMode] = useState(true);
	const [credits, setCredits] = useState(0);
	const [points, setPoints] = useState(0);
	const [pointsType, setPointsType] = useState(0);
	const [groupSearchQuery, setGroupSearchQuery] = useState("");
	const [onlyUnplaced, setOnlyUnplaced] = useState(false);
	const [batchLayout, setBatchLayout] = useState<CatalogLayout>("default_3x3");
	const [batchPrefix, setBatchPrefix] = useState("");

	const load = useCallback(async () => {
		setLoading(true);
		setLoadError(false);
		const controller = new AbortController();
		const timeout = setTimeout(() => controller.abort(), 45000);
		try {
			const [data, tree] = await Promise.all([
				fetch("/api/admin/import/organize", { signal: controller.signal }).then(
					(r) => r.json(),
				),
				fetch("/api/admin/catalog/tree?parentId=-1", {
					signal: controller.signal,
				}).then((r) => r.json()),
			]);
			setGroups(Array.isArray(data?.groups) ? data.groups : []);
			setImportRootPageId(data?.importRootPageId ?? null);
			setImportRootCaption(data?.importRootCaption ?? null);
			const pages = Array.isArray(tree?.pages) ? tree.pages : [];
			setRootPages(
				pages.map((p: { id: number; caption: string }) => ({
					id: Number(p.id),
					caption: String(p.caption ?? p.id),
				})),
			);
		} catch (error) {
			console.error("[OrganizeImports] load failed:", error);
			setLoadError(true);
			setGroups([]);
		} finally {
			clearTimeout(timeout);
			setLoading(false);
		}
	}, []);

	useEffect(() => {
		if (!open) return;
		setGroups([]);
		setApproved({});
		setOverrides({});
		setParentId(-1);
		setMoveMode(false);
		setDestinationPageId(null);
		setDestinationCaption(null);
		setDestQuery("");
		setDestDebounced("");
		setDestResults([]);
		setFreeMode(true);
		setCredits(0);
		setPoints(0);
		setPointsType(0);
		void load();
	}, [open, load]);

	useEffect(() => {
		const t = setTimeout(() => setDestDebounced(destQuery.trim()), 300);
		return () => clearTimeout(t);
	}, [destQuery]);

	useEffect(() => {
		if (!moveMode || destDebounced.length < 2) {
			if (!moveMode) setDestResults([]);
			return;
		}
		setDestSearchLoading(true);
		const ac = new AbortController();
		fetch(
			`/api/admin/catalog/tree?search=${encodeURIComponent(destDebounced)}`,
			{
				signal: ac.signal,
			},
		)
			.then((r) => r.json())
			.then((data) => {
				const pages = Array.isArray(data?.pages) ? data.pages : [];
				setDestResults(
					pages
						.filter((p: { id: number }) => Number(p.id) > 0)
						.map((p: { id: number; caption: string }) => ({
							id: Number(p.id),
							caption: String(p.caption ?? p.id),
						})),
				);
			})
			.catch((error) =>
				console.error("[OrganizeImports] page search failed:", error),
			)
			.finally(() => setDestSearchLoading(false));
		return () => ac.abort();
	}, [moveMode, destDebounced]);

	const allApproved =
		groups.length > 0 && groups.every((g) => approved[g.name]);
	const totalSelected = useMemo(
		() =>
			groups.reduce(
				(sum, g) => sum + (approved[g.name] ? g.items.length : 0),
				0,
			),
		[groups, approved],
	);

	// One approved group becomes exactly one page, so the "Create … pages"
	// label must count groups, not the furni items inside them.
	const selectedGroupsCount = useMemo(
		() => groups.filter((g) => approved[g.name]).length,
		[groups, approved],
	);

	const parentOptions = useMemo(() => {
		const options: RootPage[] = [];
		for (const p of rootPages) {
			if (importRootPageId != null && p.id === importRootPageId) continue;
			options.push(p);
		}
		return options;
	}, [rootPages, importRootPageId]);

	const toggleAll = () => {
		const next = !allApproved;
		setApproved(Object.fromEntries(groups.map((g) => [g.name, next])));
	};

	const updateGroup = (name: string, patch: OrganizeGroupOverride) => {
		setOverrides((prev) => ({ ...prev, [name]: { ...prev[name], ...patch } }));
	};

	const applyBatchLayout = (layout: CatalogLayout) => {
		setOverrides((prev) => {
			const next = { ...prev };
			for (const g of groups) {
				if (approved[g.name] !== false) {
					next[g.name] = { ...next[g.name], layout };
				}
			}
			return next;
		});
	};

	const applyBatchPrefix = () => {
		if (!batchPrefix.trim()) return;
		setOverrides((prev) => {
			const next = { ...prev };
			for (const g of groups) {
				if (approved[g.name] !== false) {
					const currentCaption = next[g.name]?.caption ?? g.name;
					if (!currentCaption.startsWith(batchPrefix)) {
						next[g.name] = {
							...next[g.name],
							caption: `${batchPrefix}${currentCaption}`,
						};
					}
				}
			}
			return next;
		});
	};

	const resetAllOverrides = () => {
		setOverrides({});
		setApproved(Object.fromEntries(groups.map((g) => [g.name, true])));
	};

	const filteredGroups = useMemo(() => {
		const q = groupSearchQuery.trim().toLowerCase();
		return groups.filter((g) => {
			if (onlyUnplaced && g.added === 0 && g.moved === 0) return false;
			if (!q) return true;
			if (g.name.toLowerCase().includes(q)) return true;
			const caption = overrides[g.name]?.caption?.toLowerCase();
			if (caption?.includes(q)) return true;
			return g.thumbs.some((t) => t.itemName.toLowerCase().includes(q));
		});
	}, [groups, groupSearchQuery, onlyUnplaced, overrides]);

	const handleCreate = async () => {
		if (isCreating) return;
		if (totalSelected > 1000) {
			toast.error(t("errorMaxItems"));
			return;
		}
		if (moveMode && destinationPageId == null) {
			toast.error(t("chooseDestination"));
			return;
		}
		const payload = groups
			.filter((g) => approved[g.name])
			.map((g) => {
				const o = overrides[g.name] ?? {};
				return {
					caption: moveMode
						? (destinationCaption ?? "Imported")
						: (o.caption ?? g.name).trim(),
					pageLayout: o.layout ?? g.layout ?? "default_3x3",
					iconImage: o.icon ?? g.icon,
					destinationPageId: moveMode ? destinationPageId : null,
					items: g.items.map((item) => ({
						itemId: item.itemId,
						catalogItemId: item.catalogItemId,
						credits: freeMode ? 0 : credits,
						points: freeMode ? 0 : points,
						pointsType: freeMode ? 0 : pointsType,
						amount: 1,
					})),
				};
			});

		// Frontend validation for group count
		const MAX_GROUPS = 50;
		if (payload.length > MAX_GROUPS) {
			toast.error(t("errorMaxGroups", { count: MAX_GROUPS }));
			return;
		}

		if (payload.length === 0 || payload.some((g) => !g.caption)) {
			toast.error(t("errorNoName"));
			return;
		}
		setIsCreating(true);
		try {
			const result = await organizeImportFurni({ parentId, groups: payload });
			if (!result.ok) throw new Error(result.error ?? "Failed");
			const created = result.data?.created ?? [];
			if (moveMode) {
				const moved = created.reduce((sum, c) => sum + c.moved, 0);
				const added = created.reduce((sum, c) => sum + c.added, 0);
				toast.success(
					t("successMove", {
						moved,
						added,
						destination: destinationCaption ?? "page",
					}),
				);
			} else {
				const moved = created.reduce((sum, c) => sum + c.moved, 0);
				const added = created.reduce((sum, c) => sum + c.added, 0);
				toast.success(
					t("successCreate", {
						count: created.length,
						moved,
						added,
					}),
				);
			}
			onOpenChange(false);
			router.refresh();
		} catch (error) {
			console.error("[OrganizeImports] create failed:", error);
			toast.error(t("errorFailed"));
		} finally {
			setIsCreating(false);
		}
	};

	return (
		<>
			<Dialog open={open} onOpenChange={onOpenChange}>
				<DialogContent className="flex h-[90vh] max-h-[90vh] w-[800px] max-w-[95vw] flex-col overflow-hidden p-0">
					<DialogHeader className="flex-none border-b px-4 py-3">
							<DialogTitle className="flex items-center gap-2 text-sm font-semibold">
								<FolderTree className="h-4 w-4" />
								{t("title")}
								{totalSelected > 0 && !loading && (
									<Badge variant="secondary" className="text-[10px]">
										{t("itemsBadge", { count: totalSelected })}
									</Badge>
								)}
								<div className="flex-1 text-[10px] text-muted-foreground ml-2">
									{moveMode 
										? t("tipMove") 
										: t("tipCreate")}
								</div>
								<p className="text-xs text-muted-foreground ml-2">{t("limitHint")}</p>
							</DialogTitle>
					</DialogHeader>

					<div className="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4">
						{/* Price (new offers only) */}
						{!loading && groups.length > 0 && (
							<div className="flex flex-wrap items-center gap-2 rounded-md border bg-[var(--admin-surface)] p-3 text-xs">
								<span className="text-xs font-medium text-[var(--admin-text-muted)]">
									{t("price")}
								</span>
								<Button
									type="button"
									variant={freeMode ? "default" : "outline"}
									size="sm"
									className="h-6 px-2 text-[10px]"
									onClick={() => setFreeMode(true)}
								>
									{t("free")}
								</Button>
								<Button
									type="button"
									variant={!freeMode ? "default" : "outline"}
									size="sm"
									className="h-6 px-2 text-[10px]"
									onClick={() => setFreeMode(false)}
								>
									{t("setPrice")}
								</Button>
								{!freeMode && (
									<>
										<label className="flex items-center gap-1 text-[10px] text-muted-foreground">
											{t("credits")}
											<input
												type="number"
												className="w-16 rounded border bg-[var(--admin-canvas)] px-1.5 py-1 text-xs"
												value={credits}
												onChange={(e) => setCredits(Number(e.target.value))}
												min={0}
											/>
										</label>
										<label className="flex items-center gap-1 text-[10px] text-muted-foreground">
											{t("points")}
											<input
												type="number"
												className="w-16 rounded border bg-[var(--admin-canvas)] px-1.5 py-1 text-xs"
												value={points}
												onChange={(e) => setPoints(Number(e.target.value))}
												min={0}
											/>
										</label>
										<span className="flex items-center gap-1 text-[10px] text-muted-foreground">
											{t("pointsType")}
											<Select
												value={String(pointsType)}
												onValueChange={(v) => setPointsType(Number(v))}
											>
												<SelectTrigger className="h-6 w-24 text-[10px]">
													<SelectValue />
												</SelectTrigger>
												<SelectContent>
													<SelectItem value="0" className="text-xs">
														Duckets
													</SelectItem>
													<SelectItem value="5" className="text-xs">
														Diamonds
													</SelectItem>
												</SelectContent>
											</Select>
										</span>
									</>
								)}
								<p className="w-full text-[10px] text-muted-foreground">
									{t("newPriceHint")}
								</p>
							</div>
						)}

						{/* Mode: create new pages vs move into an existing page */}
						{!loading && groups.length > 0 && (
							<div className="flex flex-wrap items-center gap-2 rounded-md border bg-[var(--admin-surface)] p-3 text-xs">
								<span className="text-xs font-medium text-[var(--admin-text-muted)]">
									{t("mode")}
								</span>
								<Button
									type="button"
									variant={!moveMode ? "default" : "outline"}
									size="sm"
									className={cn("h-7 px-3 text-[11px] gap-1.5", !moveMode && "ring-2 ring-primary ring-offset-1")}
									onClick={() => {
										setMoveMode(false);
										setDestinationPageId(null);
										setDestinationCaption(null);
									}}
								>
									<Plus className="h-3.5 w-3.5" />
									{t("modeCreate")}
								</Button>
								<Button
									type="button"
									variant={moveMode ? "default" : "outline"}
									size="sm"
									className={cn("h-7 px-3 text-[11px] gap-1.5", moveMode && "ring-2 ring-primary ring-offset-1")}
									onClick={() => setMoveMode(true)}
								>
									<ArrowRight className="h-3.5 w-3.5" />
									{t("modeMove")}
								</Button>
							</div>
						)}

						{/* Destination page (move mode) */}
						{moveMode && !loading && groups.length > 0 && (
							<div className="flex flex-col gap-1 rounded-md border bg-[var(--admin-surface)] p-3 text-xs font-medium text-[var(--admin-text-muted)]">
								<span className="text-[10px]">{t("destination")}</span>
								{destinationPageId != null ? (
									<div className="flex items-center gap-2 rounded border border-[var(--admin-accent)]/40 bg-[var(--admin-accent-subtle)] px-2 py-1.5">
										<Folder className="h-3.5 w-3.5 shrink-0" />
										<span className="min-w-0 flex-1 truncate text-sm font-semibold">
											{destinationCaption}
										</span>
										<Badge variant="secondary" className="h-4 text-[9px]">
											{t("destinationChosen")}
										</Badge>
										<button
											type="button"
											onClick={() => {
												setDestinationPageId(null);
												setDestinationCaption(null);
												setDestQuery("");
											}}
											className="text-muted-foreground hover:text-destructive"
										>
											<X className="h-3.5 w-3.5" />
										</button>
									</div>
								) : (
									<div className="relative">
										<Search className="absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
										<Input
											className="h-8 pl-8 text-xs"
											placeholder={t("destinationSearchPlaceholder")}
											value={destQuery}
											onChange={(e) => setDestQuery(e.target.value)}
										/>
										{destSearchLoading && (
											<Loader2 className="absolute right-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 animate-spin text-muted-foreground" />
										)}
									</div>
								)}
								{destinationPageId == null && destDebounced.length >= 2 && (
									<div className="max-h-[160px] divide-y overflow-y-auto rounded border">
										{destResults.length === 0 && !destSearchLoading ? (
											<p className="py-3 text-center text-[10px] text-muted-foreground">
												{t("noDestResults")}
											</p>
										) : (
											destResults.map((p) => (
												<button
													key={p.id}
													type="button"
													onClick={() => {
														setDestinationPageId(p.id);
														setDestinationCaption(p.caption);
													}}
													className="flex w-full items-center gap-2 px-2 py-1.5 text-left hover:bg-accent"
												>
													<Folder className="h-3.5 w-3.5 shrink-0" />
													<span className="min-w-0 flex-1 truncate text-xs">
														{p.caption}
													</span>
													<span className="font-mono text-[9px] text-muted-foreground">
														#{p.id}
													</span>
												</button>
											))
										)}
									</div>
								)}
								<p className="text-[10px] text-muted-foreground">
									{t("destinationHint")}
								</p>
							</div>
						)}

						{/* Parent */}
						{!moveMode && !loading && groups.length > 0 && (
							<div className="flex flex-col gap-1 rounded-md border bg-[var(--admin-surface)] p-3 text-xs font-medium text-[var(--admin-text-muted)]">
								{t("parent")}
								<Select
									value={String(parentId)}
									onValueChange={(v) => setParentId(Number(v))}
								>
									<SelectTrigger className="h-8 text-xs">
										<SelectValue />
									</SelectTrigger>
									<SelectContent>
										<SelectItem value="-1" className="text-xs">
											<span className="flex items-center gap-1.5">
												<Home className="h-3 w-3 shrink-0" />
												{t("root")}
											</span>
										</SelectItem>
										{importRootPageId != null && (
											<SelectItem
												value={String(importRootPageId)}
												className="text-xs"
											>
												<span className="flex items-center gap-1.5">
													<Folder className="h-3 w-3 shrink-0" />
													{importRootCaption ?? t("importedRoot")}
												</span>
											</SelectItem>
										)}
										{parentOptions.map((p) => (
											<SelectItem
												key={p.id}
												value={String(p.id)}
												className="text-xs"
											>
												<span className="flex items-center gap-1.5">
													<Folder className="h-3 w-3 shrink-0" />
													{p.caption}
												</span>
											</SelectItem>
										))}
									</SelectContent>
								</Select>
							</div>
						)}

						{/* Loading / empty / groups */}
						{loading ? (
							<div className="flex flex-1 items-center justify-center gap-2 text-sm text-muted-foreground">
								<Loader2 className="h-4 w-4 animate-spin" />
								{t("loading")}
							</div>
						) : groups.length === 0 ? (
							<div className="flex flex-1 flex-col items-center justify-center gap-3 text-sm text-muted-foreground">
								{loadError ? t("loadError") : t("empty")}
								<Button
									type="button"
									variant="outline"
									size="sm"
									onClick={() => void load()}
								>
									<RefreshCw className="mr-1 h-3 w-3" />
									{t("refresh")}
								</Button>
							</div>
						) : (
							<>
								<div className="flex flex-col gap-2 rounded-md border bg-[var(--admin-surface)] p-3 text-xs">
									<div className="flex items-center justify-between gap-2">
										<div className="relative flex-1">
											<Search className="absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
											<Input
												className="h-8 pl-8 text-xs"
												placeholder={t("searchGroups")}
												value={groupSearchQuery}
												onChange={(e) => setGroupSearchQuery(e.target.value)}
											/>
										</div>
										<label className="flex cursor-pointer items-center gap-1.5 select-none rounded border bg-background/50 px-2 py-1.5 text-[10px] text-muted-foreground transition-colors hover:text-foreground">
											<input
												type="checkbox"
												checked={onlyUnplaced}
												onChange={(e) => setOnlyUnplaced(e.target.checked)}
												className="h-3 w-3 rounded border-[var(--admin-border)]"
											/>
											<span>{t("onlyUnplaced")}</span>
										</label>
										<Button
											type="button"
											variant="outline"
											size="sm"
											className="h-8 px-2.5 text-[10px]"
											onClick={toggleAll}
										>
											{allApproved ? t("deselectAll") : t("selectAll")}
										</Button>
									</div>

									{/* Batch Actions Bar */}
									<div className="flex flex-wrap items-center gap-2 border-t pt-2.5">
										<span className="text-[10px] font-medium text-muted-foreground">
											{t("batchLabel")}
										</span>
										<Select
											value={batchLayout}
											onValueChange={(v) => {
												if (isValidCatalogLayout(v)) {
													setBatchLayout(v);
													applyBatchLayout(v);
												}
											}}
										>
											<SelectTrigger className="h-7 w-[140px] text-[10px]">
												<SelectValue placeholder={t("batchLayout")} />
											</SelectTrigger>
											<SelectContent>
												{CATALOG_LAYOUTS.map((l) => (
													<SelectItem key={l} value={l} className="text-xs">
														{l === "default_3x3" ? t("layoutFallbackDefault3x3") : l}
													</SelectItem>
												))}
											</SelectContent>
										</Select>

										<div className="flex items-center gap-1">
											<Input
												className="h-7 w-[120px] text-[10px]"
												placeholder={t("batchPrefix")}
												value={batchPrefix}
												onChange={(e) => setBatchPrefix(e.target.value)}
											/>
											<Button
												type="button"
												variant="secondary"
												size="sm"
												className="h-7 px-2 text-[10px]"
												onClick={applyBatchPrefix}
											>
												{t("applyBatch")}
											</Button>

											{Object.keys(overrides).length > 0 && (
												<Button
													type="button"
													variant="ghost"
													size="sm"
													className="h-7 px-2 text-[10px] text-muted-foreground hover:text-foreground"
													onClick={resetAllOverrides}
												>
													<RefreshCw className="mr-1 h-3 w-3" />
													{t("resetAll")}
												</Button>
											)}
										</div>
									</div>
								</div>

								{filteredGroups.map((group) => {
									const o = overrides[group.name] ?? {};
									const caption = o.caption ?? group.name;
									const icon = o.icon ?? group.icon;
									const layout = o.layout ?? group.layout ?? "default_3x3";
									const isApproved = approved[group.name] !== false;
									const moved = group.moved;
									const added = group.added;
									return (
										<label
											key={group.name}
											className={cn(
												"block rounded-md border bg-[var(--admin-surface)] p-3 transition-colors",
												isApproved
													? "border-[var(--admin-accent)]/40"
													: "opacity-60",
											)}
										>
											<div className="flex items-center gap-2">
												<input
													type="checkbox"
													checked={isApproved}
													onChange={(e) =>
														setApproved((prev) => ({
															...prev,
															[group.name]: e.target.checked,
														}))
													}
												/>
												<CatalogIcon iconImage={group.icon} size={20} />
												<p className="min-w-0 flex-1 truncate text-sm font-semibold">
													{group.name}
												</p>
												<Button
													type="button"
													variant="ghost"
													size="sm"
													className="h-5 gap-1 px-1.5 text-[10px]"
													onClick={(e) => {
														e.preventDefault();
														e.stopPropagation();
														setPreviewGroup(group);
													}}
												>
													<Eye className="h-3 w-3" />
													{t("visualPreview")}
												</Button>
												<Badge variant="secondary" className="h-4 text-[9px]">
													{group.total}
												</Badge>
												{moved > 0 && (
													<Badge
														variant="outline"
														className="h-4 gap-1 text-[9px] text-muted-foreground"
													>
														{t("movedLabel", { count: moved })}
													</Badge>
												)}
												{added > 0 && (
													<Badge
														variant="outline"
														className="h-4 gap-1 text-[9px] text-muted-foreground"
													>
														{t("newLabel", { count: added })}
													</Badge>
												)}
											</div>

											{!moveMode && (
												<div className="mt-3 space-y-2 border-t pt-2 text-xs font-medium text-[var(--admin-text-muted)]">
													<div className="flex items-center gap-1">
														<span className="w-12 shrink-0 text-[10px]">
															{t("name")}
														</span>
														<Input
															className="h-7 text-xs"
															value={caption}
															onClick={(e) => e.stopPropagation()}
															onChange={(e) =>
																updateGroup(group.name, {
																	caption: e.target.value,
																})
															}
														/>
														{caption !== group.name && (
															<Button
																type="button"
																variant="outline"
																size="sm"
																className="h-7 shrink-0 px-2 text-[10px]"
																onClick={(e) => {
																	e.preventDefault();
																	e.stopPropagation();
																	updateGroup(group.name, {
																		caption: group.name,
																	});
																}}
															>
																<Wand2 className="mr-0.5 h-2.5 w-2.5" />
																{t("resetSuggestion")}
															</Button>
														)}
													</div>

													<div className="flex items-center gap-1">
														<span className="w-12 shrink-0 text-[10px]">
															{t("icon")}
														</span>
														<IconPicker
															value={icon}
															onChange={(id) =>
																updateGroup(group.name, { icon: id })
															}
														>
															<Button
																type="button"
																variant="outline"
																size="sm"
																className="h-7 gap-1.5 px-2"
																onClick={(e) => e.stopPropagation()}
															>
																<CatalogIcon iconImage={icon} size={16} />
																<span className="font-mono text-[10px] text-muted-foreground">
																	#{icon}
																</span>
															</Button>
														</IconPicker>
														{icon !== group.icon && (
															<Button
																type="button"
																variant="outline"
																size="sm"
																className="h-7 px-2 text-[10px]"
																onClick={(e) => {
																	e.preventDefault();
																	e.stopPropagation();
																	updateGroup(group.name, { icon: group.icon });
																}}
															>
																<Wand2 className="mr-0.5 h-2.5 w-2.5" />
																{group.icon}
															</Button>
														)}
													</div>

													<div className="flex items-center gap-1">
														<span className="w-12 shrink-0 text-[10px]">
															{t("layout")}
														</span>
														<div className="flex flex-wrap gap-1">
															{CATALOG_LAYOUTS.map((l) => {
																const color =
																	LAYOUT_COLORS[l] ||
																	"bg-muted text-muted-foreground";
																return (
																	<button
																		key={l}
																		type="button"
																		onClick={(e) => {
																			e.preventDefault();
																			e.stopPropagation();
																			updateGroup(group.name, { layout: l });
																		}}
																		className={cn(
																			"rounded border px-1.5 py-0.5 font-mono text-[10px] transition-colors",
																			layout === l
																				? cn(
																						color,
																						"border-current ring-1 ring-current/20",
																					)
																				: "border-[var(--admin-border)] bg-[var(--admin-canvas)] text-[var(--admin-text-muted)] hover:border-current",
																		)}
																	>
																		{l.replace("default_3x3", "3x3")}
																	</button>
																);
															})}
														</div>
														{group.layout &&
															layout !== group.layout &&
															group.layout !== "default_3x3" && (
																<Button
																	type="button"
																	variant="ghost"
																	size="sm"
																	className="h-6 w-fit border border-[var(--admin-warning-border)] bg-[var(--admin-warning-subtle)] px-2 text-[10px] text-[var(--admin-warning)]"
																	onClick={(e) => {
																		e.preventDefault();
																		e.stopPropagation();
																		updateGroup(group.name, {
																			layout:
																				group.layout === null
																					? undefined
																					: isValidCatalogLayout(group.layout)
																						? group.layout
																						: undefined,
																		});
																	}}
																>
																	<Wand2 className="mr-0.5 h-2.5 w-2.5" />
																	{t("suggestedLayout", {
																		layout: group.layout,
																	})}
																</Button>
															)}
													</div>
												</div>
											)}

											<div className="mt-2 flex flex-wrap gap-1.5 border-t pt-2">
												{group.thumbs.slice(0, 12).map((thumb) => (
													<div
														key={thumb.itemName}
														className="group flex flex-col items-center gap-0.5"
													>
														<div
															className="relative"
															title={thumb.publicName || thumb.itemName}
														>
															<FurniThumb item={{ itemName: thumb.itemName }} />
														</div>
														{thumb.alreadyPlaced ? (
															<span className="max-w-14 truncate text-[8px] text-muted-foreground">
																{thumb.sourcePageCaption
																	? thumb.sourcePageCaption.replace(
																			new RegExp(`^${t("impPrefix")}`),
																			"",
																	  )
																	: t("isMoved")}
															</span>
														) : (
															<span className="max-w-14 truncate text-[8px] text-muted-foreground">
																{t("isNew")}
															</span>
														)}
													</div>
												))}
												{group.total > 12 && (
													<p className="self-center text-[10px] text-muted-foreground">
														+{group.total - 12}
													</p>
												)}
											</div>
										</label>
									);
								})}
							</>
						)}
					</div>

					<div className="flex flex-none justify-end gap-2 border-t px-4 py-2.5">
						<Button
							type="button"
							variant="outline"
							size="sm"
							onClick={() => onOpenChange(false)}
						>
							{t("cancel")}
						</Button>
						<Button
							type="button"
							size="sm"
							className="gap-1"
							disabled={
								loading ||
								isCreating ||
								totalSelected === 0 ||
								(moveMode && destinationPageId == null)
							}
							onClick={() => void handleCreate()}
						>
							{isCreating ? (
								<Loader2 className="h-3 w-3 animate-spin" />
							) : (
								<Plus className="h-3 w-3" />
							)}
							{moveMode
								? t("move", { count: totalSelected })
								: t("create", { count: selectedGroupsCount })}
						</Button>
					</div>
				</DialogContent>
			</Dialog>

			{/* Visual Preview Sub-Dialog */}
			<Dialog
				open={previewGroup != null}
				onOpenChange={(open) => !open && setPreviewGroup(null)}
			>
				<DialogContent className="max-w-md">
					<DialogHeader>
						<DialogTitle className="flex items-center gap-2 text-base">
							<CatalogIcon iconImage={previewGroup?.icon ?? 1} size={24} />
							<span>{previewGroup?.name}</span>
						</DialogTitle>
					</DialogHeader>
					{previewGroup && (
						<div className="flex flex-col gap-3 py-2 text-xs">
							<div className="flex items-center justify-between rounded border bg-muted/30 p-2.5">
								<div>
									<span className="font-semibold">{t("layout")}:</span>{" "}
									<span className="font-mono text-[11px]">
										{previewGroup.layout ?? "default_3x3"}
									</span>
								</div>
								<Badge variant="outline" className="text-[10px]">
									{previewGroup.total} items
								</Badge>
							</div>
							{previewGroup.layout &&
								LAYOUT_DESCRIPTIONS[previewGroup.layout] && (
									<p className="text-[11px] text-muted-foreground italic">
										{LAYOUT_DESCRIPTIONS[previewGroup.layout]}
									</p>
								)}
							<div className="max-h-[220px] overflow-y-auto rounded border p-2">
								<div className="grid grid-cols-4 gap-1.5">
									{previewGroup.thumbs.map((thumb) => (
										<div
											key={thumb.itemName}
											className="flex flex-col items-center gap-1 rounded border bg-background p-1.5"
										>
											<FurniThumb item={thumb} size={32} />
											<span className="w-full truncate text-center text-[9px] text-muted-foreground">
												{thumb.itemName}
											</span>
										</div>
									))}
								</div>
							</div>
						</div>
					)}
				</DialogContent>
			</Dialog>
		</>
	);
}

function FurniThumb({
	item,
	size = 24,
}: {
	item: { itemName: string };
	size?: number;
}) {
	const primary = getLocalIconUrl(item.itemName);
	return (
		<div
			className="flex items-center justify-center rounded bg-muted/50"
			style={{ width: size, height: size }}
		>
			{/* eslint-disable-next-line @next/next/no-img-element */}
			<img
				src={primary}
				alt={item.itemName}
				className="max-h-full max-w-full object-contain"
				style={{ imageRendering: "pixelated" }}
				onError={(e) => {
					const img = e.target as HTMLImageElement;
					img.style.opacity = "0";
				}}
				loading="lazy"
			/>
		</div>
	);
}