"use client";

import {
	ArrowUpDown,
	Check,
	CircleAlert,
	CloudDownload,
	Download,
	Layers,
	LayoutGrid,
	List,
	Loader2,
	Package,
	PanelLeftClose,
	PanelLeftOpen,
	Pencil,
	RefreshCw,
	Search,
	Sparkles,
	Trash2,
	WandSparkles,
	X,
} from "lucide-react";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { toast } from "sonner";
import { deleteImportedFurni } from "@/actions/import-furni";
import { NitroEditorDialog } from "@/app/admin/import/furni/nitro-editor-dialog";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import {
	Dialog,
	DialogContent,
	DialogFooter,
	DialogHeader,
	DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import {
	Select,
	SelectContent,
	SelectItem,
	SelectTrigger,
	SelectValue,
} from "@/components/ui/select";
import { adminFetch } from "@/lib/admin-fetch";
import {
	type AutoCatalogPreview,
	previewAutoCatalog,
} from "@/lib/furni/auto-catalog";
import type { FurniImportSource } from "@/lib/habbo-gamedata-hotel";
import { cn } from "@/lib/utils";
import type { TreeNode } from "@/types/catalog";
import { BatchProgress } from "./batch-progress";
import { CatalogRail } from "./catalog-rail";
import { CheckboxDot } from "./checkbox-dot";
import {
	getFurniImageUrl,
	handleImgError,
	TYPE_LABELS,
} from "./studio-furni-icons";
import type {
	BatchItemStatus,
	FurniItem,
	FurniStats,
	Meta,
	VerificationSummary,
} from "./studio-types";

export function StudioClient({
	source,
	initialTree,
}: {
	source: FurniImportSource;
	initialTree: TreeNode[];
}) {
	// Catalog tree
	const [tree] = useState<TreeNode[]>(initialTree);
	const [selectedPage, setSelectedPage] = useState<number | null>(null);
	const [railOpen, setRailOpen] = useState(true);

	// Search & list
	const [searchTerm, setSearchTerm] = useState("");
	const [activeSearch, setActiveSearch] = useState("");
	const [items, setItems] = useState<FurniItem[]>([]);
	const [meta, setMeta] = useState<Meta | null>(null);
	const [loading, setLoading] = useState(false);
	const [error, setError] = useState("");

	// Custom clone sources (retro hotels); empty string = official Habbo furnidata
	const [sources, setSources] = useState<Array<{ id: string; name: string }>>(
		[],
	);
	const [activeSource, setActiveSource] = useState<string>("");
	const [activeSourceName, setActiveSourceName] = useState("");

	// Filters
	const [typeFilter, setTypeFilter] = useState<string>("all");
	const [categoryFilter, setCategoryFilter] = useState<string>("all");
	const [statusFilter, setStatusFilter] = useState<string>("all");
	const [sortBy, setSortBy] = useState<string>("default");
	const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
	const searchRef = useRef<HTMLInputElement>(null);
	const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);

	// Stats
	const [stats, setStats] = useState<FurniStats | null>(null);

	// Selection + detail
	const [selected, setSelected] = useState<Set<string>>(new Set());
	const [detail, setDetail] = useState<FurniItem | null>(null);

	// Import state
	const [importingId, setImportingId] = useState<string | null>(null);
	const [batchProgress, setBatchProgress] = useState<Map<
		string,
		BatchItemStatus
	> | null>(null);
	const [batchDone, setBatchDone] = useState(false);
	const [batchSucceeded, setBatchSucceeded] = useState(0);
	const [batchFailed, setBatchFailed] = useState(0);
	const [batchCancelling, setBatchCancelling] = useState(false);
	const [verification, setVerification] = useState<VerificationSummary | null>(
		null,
	);
	const batchAbortRef = useRef<AbortController | null>(null);

	// Nitro editor
	const [editingClassname, setEditingClassname] = useState<string | null>(null);

	// Delete confirm
	const [deleting, setDeleting] = useState<string | null>(null);
	const [confirmDelete, setConfirmDelete] = useState(false);

	// Nitro regeneration (missing .nitro)
	const [regeneratingNitro, setRegeneratingNitro] = useState<Set<string>>(
		new Set(),
	);

	const categories = useMemo(() => {
		const cats = new Set(items.map((i) => i.category).filter(Boolean));
		return ["all", ...Array.from(cats).sort()];
	}, [items]);

	const filteredItems = useMemo(() => {
		let result = items;
		if (typeFilter !== "all") {
			result = result.filter((i) => i.type === typeFilter);
		}
		if (categoryFilter !== "all") {
			result = result.filter((i) => i.category === categoryFilter);
		}
		if (statusFilter !== "all") {
			if (statusFilter === "imported")
				result = result.filter((i) => i.alreadyImported);
			else if (statusFilter === "inCatalog")
				result = result.filter((i) => i.alreadyImported && i.nitroExists);
			else if (statusFilter === "missingNitro")
				result = result.filter((i) => i.alreadyImported && !i.nitroExists);
		}
		// Not imported filter - works independently (also with statusFilter === "all")
		if (statusFilter === "notImported" || statusFilter === "all")
			result = result.filter((i) => i.alreadyImported === false);
		const sorted = [...result];
		if (sortBy === "name") sorted.sort((a, b) => a.name.localeCompare(b.name));
		else if (sortBy === "classname")
			sorted.sort((a, b) => a.classname.localeCompare(b.classname));
		else if (sortBy === "category")
			sorted.sort((a, b) => (a.category || "").localeCompare(b.category || ""));
		else if (sortBy === "imported-first")
			sorted.sort(
				(a, b) => (b.alreadyImported ? 1 : 0) - (a.alreadyImported ? 1 : 0),
			);
		else if (sortBy === "not-imported-first")
			sorted.sort(
				(a, b) => (a.alreadyImported ? 1 : 0) - (b.alreadyImported ? 1 : 0),
			);
		return sorted;
	}, [items, typeFilter, categoryFilter, statusFilter, sortBy]);

	const allSelected = useMemo(
		() =>
			filteredItems.length > 0 &&
			filteredItems.every((i) => selected.has(i.classname)),
		[filteredItems, selected],
	);

	const fetchStats = useCallback(async () => {
		try {
			const res = await adminFetch("/api/admin/import/furni?action=stats");
			if (res.ok) {
				const data = await res.json();
				setStats(data);
			}
		} catch {
			/* ignore */
		}
	}, []);

	const fetchItems = useCallback(
		async (search: string, page: number, source?: string) => {
			setLoading(true);
			setError("");
			try {
				const qs = new URLSearchParams({ page: String(page) });
				if (search) qs.set("search", search);
				if (source) qs.set("source", source);
				const res = await adminFetch(
					`/api/admin/import/furni?${qs.toString()}`,
				);
				if (!res.ok) {
					setError(`Request failed (${res.status})`);
					setLoading(false);
					return;
				}
				const data = await res.json();
				if (page === 1) {
					setItems(data.items ?? []);
				} else {
					setItems((prev) => [...prev, ...(data.items ?? [])]);
				}
				setMeta(data.meta ?? null);
			} catch {
				setError("Network error");
			} finally {
				setLoading(false);
			}
		},
		[],
	);

	const changeSource = (sourceId: string) => {
		setActiveSource(sourceId);
		setActiveSourceName(
			sourceId ? (sources.find((s) => s.id === sourceId)?.name ?? "") : "",
		);
		setSelected(new Set());
		setItems([]);
		setActiveSearch("");
		setSearchTerm("");
	};

	const fetchSources = useCallback(async () => {
		try {
			const res = await adminFetch("/api/admin/import/clone?action=sources");
			if (res.ok) {
				const data = await res.json();
				setSources(data.sources ?? []);
			}
		} catch {
			/* ignore */
		}
	}, []);

	useEffect(() => {
		fetchItems("", 1, activeSource);
		fetchStats();
		fetchSources();
	}, [fetchItems, fetchStats, fetchSources, activeSource]);

	// Debounced auto-search (also triggered by the "/" shortcut focus).
	useEffect(() => {
		if (debounceRef.current) clearTimeout(debounceRef.current);
		debounceRef.current = setTimeout(() => {
			if (searchTerm !== activeSearch) {
				setActiveSearch(searchTerm);
				fetchItems(searchTerm, 1, activeSource);
			}
		}, 400);
		return () => {
			if (debounceRef.current) clearTimeout(debounceRef.current);
		};
	}, [searchTerm, fetchItems, activeSearch, activeSource]);

	// Keep detail in sync with the refreshed list.
	useEffect(() => {
		if (!detail) return;
		const updated = items.find((i) => i.classname === detail.classname);
		if (updated) setDetail(updated);
	}, [items, detail]);

	const clearSearch = () => {
		setSearchTerm("");
		setActiveSearch("");
		fetchItems("", 1, activeSource);
	};

	const submitSearch = () => {
		setActiveSearch(searchTerm);
		fetchItems(searchTerm, 1, activeSource);
	};

	function toggleSelect(classname: string) {
		setSelected((prev) => {
			const next = new Set(prev);
			if (next.has(classname)) next.delete(classname);
			else next.add(classname);
			return next;
		});
	}

	const toggleAll = useCallback(() => {
		if (allSelected) {
			const toRemove = new Set(filteredItems.map((i) => i.classname));
			setSelected((prev) => {
				const next = new Set(prev);
				for (const cn of toRemove) next.delete(cn);
				return next;
			});
		} else {
			setSelected((prev) => {
				const next = new Set(prev);
				for (const i of filteredItems) next.add(i.classname);
				return next;
			});
		}
	}, [allSelected, filteredItems]);

	// Keyboard shortcuts: "/" focus search, Ctrl/Cmd+A select all, Esc clear.
	useEffect(() => {
		function onKeyDown(e: KeyboardEvent) {
			const tag = (e.target as HTMLElement)?.tagName;
			const isInput = tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT";
			if (e.key === "/" && !e.metaKey && !e.ctrlKey && !e.altKey && !isInput) {
				e.preventDefault();
				searchRef.current?.focus();
			}
			if (e.key === "a" && (e.metaKey || e.ctrlKey) && !isInput) {
				e.preventDefault();
				toggleAll();
			}
			if (e.key === "Escape" && !isInput) {
				setSelected(new Set());
				searchRef.current?.blur();
			}
		}
		document.addEventListener("keydown", onKeyDown);
		return () => document.removeEventListener("keydown", onKeyDown);
	}, [toggleAll]);

	async function importSingle(item: FurniItem) {
		setImportingId(item.classname);
		try {
			const res = await adminFetch("/api/admin/import/furni", {
				method: "POST",
				headers: { "Content-Type": "application/json" },
				body: JSON.stringify({
					id: item.id,
					classname: item.classname,
					name: item.name,
					description: item.description,
					type: item.type,
					revision: item.revision,
					category: item.category,
					sourceId: activeSource || undefined,
				}),
			});
			const data = await res.json();
			if (res.ok) {
				setItems((prev) =>
					prev.map((i) =>
						i.classname === item.classname
							? { ...i, alreadyImported: true, nitroExists: true }
							: i,
					),
				);
				if (detail?.classname === item.classname) {
					setDetail({ ...item, alreadyImported: true, nitroExists: true });
				}
				fetchStats();
				const parts = [`${item.classname} imported into the catalog`];
				if (typeof data.furniDataFixedIds === "number") {
					parts.push(
						`verified: ${data.offerIdsFixed} offer_id, ${data.furniDataFixedIds} furnidata id`,
					);
				}
				if (data.furniDataMissing > 0) {
					parts.push(`${data.furniDataMissing} furnidata missing`);
				}
				toast.success(parts.join(" · "));
			} else {
				toast.error(data.error || `Import failed for ${item.classname}`);
			}
		} catch {
			toast.error("Network error");
		} finally {
			setImportingId(null);
		}
	}

	async function importBatch() {
		const toImport = filteredItems.filter(
			(i) => selected.has(i.classname) && !i.alreadyImported,
		);
		if (toImport.length === 0) {
			toast.info("Select furni that isn't imported yet");
			return;
		}

		setBatchProgress(new Map());
		setBatchDone(false);
		setBatchSucceeded(0);
		setBatchFailed(0);
		setBatchCancelling(false);

		const initial = new Map<string, BatchItemStatus>();
		for (const i of toImport) {
			initial.set(i.classname, { classname: i.classname, status: "pending" });
		}
		setBatchProgress(new Map(initial));

		const abort = new AbortController();
		batchAbortRef.current = abort;

		try {
			const res = await adminFetch("/api/admin/import/furni/batch", {
				method: "POST",
				headers: { "Content-Type": "application/json" },
				body: JSON.stringify({
					sourceId: activeSource || undefined,
					items: toImport.map((i) => ({
						id: i.id,
						classname: i.classname,
						name: i.name,
						description: i.description,
						type: i.type,
						revision: i.revision,
						category: i.category,
					})),
					concurrency: 3,
				}),
				signal: abort.signal,
			});

			if (!res.ok || !res.body) {
				setBatchProgress(null);
				return;
			}

			const reader = res.body.getReader();
			const decoder = new TextDecoder();
			let buffer = "";

			while (true) {
				const { done, value } = await reader.read();
				if (done) break;
				buffer += decoder.decode(value, { stream: true });
				const lines = buffer.split("\n");
				buffer = lines.pop() || "";
				for (const line of lines) {
					if (!line.startsWith("data: ")) continue;
					try {
						const event = JSON.parse(line.slice(6));
						if (event.type === "item_progress") {
							setBatchProgress((prev) => {
								if (!prev) return prev;
								const next = new Map(prev);
								next.set(event.classname, {
									classname: event.classname,
									status: event.status,
									message: event.message,
									warnings: event.warnings,
									itemId: event.itemId,
								});
								return next;
							});
							if (event.status === "done") {
								setItems((prev) =>
									prev.map((i) =>
										i.classname === event.classname
											? { ...i, alreadyImported: true, nitroExists: true }
											: i,
									),
								);
							}
						} else if (event.type === "batch_complete") {
							setBatchSucceeded(event.succeeded);
							setBatchFailed(event.failed);
							setVerification({
								offerIdsFixed: event.offerIdsFixed ?? 0,
								furniDataFixedIds: event.furniDataFixedIds ?? 0,
								furniDataMissing: event.furniDataMissing ?? 0,
								furniDataConflicts: event.furniDataConflicts ?? 0,
								nitrosSynced: event.nitrosSynced ?? [],
								iconsSynced: event.iconsSynced ?? [],
								ownershipFixed: event.ownershipFixed ?? [],
							});
							setBatchDone(true);
						}
					} catch {
						/* skip malformed */
					}
				}
			}
		} catch (err) {
			if ((err as Error).name === "AbortError") {
				toast.info("Batch import cancelled");
			} else {
				toast.error("Connection lost during batch import");
			}
		} finally {
			batchAbortRef.current = null;
			setBatchCancelling(false);
			setSelected(new Set());
			fetchStats();
			if (!batchDone) setBatchProgress(null);
		}
	}

	const cancelBatch = () => {
		if (batchAbortRef.current) {
			setBatchCancelling(true);
			batchAbortRef.current.abort();
		}
	};

	const [organizing, setOrganizing] = useState(false);

	async function organizeAll() {
		if (organizing) return;
		setOrganizing(true);
		try {
			const res = await adminFetch("/api/admin/import/furni/organize", {
				method: "POST",
			});
			const data = await res.json();
			if (res.ok) {
				const parts = [
					`Catalogus georganiseerd`,
					data.pagesCreated > 0
						? `${data.pagesCreated} pagina's aangemaakt`
						: null,
					data.catalogAdded > 0 ? `${data.catalogAdded} nieuw` : null,
					data.catalogRehomed > 0 ? `${data.catalogRehomed} bijgewerkt` : null,
				].filter(Boolean);
				toast.success(parts.join(" · "));
				fetchStats();
			} else {
				toast.error(data.error || "Organiseren mislukt");
			}
		} catch {
			toast.error("Netwerkfout");
		} finally {
			setOrganizing(false);
		}
	}

	async function deleteItem() {
		if (!deleting) return;
		try {
			const result = await deleteImportedFurni({ classname: deleting });
			if (result.ok) {
				const data = result.data as {
					deletedFiles: string[];
					errors?: string[];
				};
				setItems((prev) => prev.filter((i) => i.classname !== deleting));
				if (detail?.classname === deleting) setDetail(null);
				fetchStats();
				toast.success(
					`Deleted ${deleting} (${data.deletedFiles?.length ?? 0} files)`,
				);
			} else {
				toast.error(result.error || "Delete failed");
			}
		} catch {
			toast.error("Network error");
		} finally {
			setDeleting(null);
			setConfirmDelete(false);
		}
	}

	async function regenNitro(item: FurniItem) {
		setRegeneratingNitro((prev) => new Set(prev).add(item.classname));
		try {
			const res = await adminFetch("/api/admin/import/furni", {
				method: "PATCH",
				headers: { "Content-Type": "application/json" },
				body: JSON.stringify({
					items: [{ classname: item.classname, revision: item.revision }],
				}),
			});
			const data = await res.json();
			if (res.ok && data.succeeded > 0) {
				setItems((prev) =>
					prev.map((i) =>
						i.classname === item.classname ? { ...i, nitroExists: true } : i,
					),
				);
				toast.success(`Nitro file regenerated for ${item.classname}`);
			} else {
				toast.error(
					data.results?.[0]?.warning || data.error || "Regeneration failed",
				);
			}
		} catch {
			toast.error("Network error");
		} finally {
			setRegeneratingNitro((prev) => {
				const next = new Set(prev);
				next.delete(item.classname);
				return next;
			});
		}
	}

	const detailPreview = useMemo<AutoCatalogPreview | null>(() => {
		if (!detail) return null;
		return previewAutoCatalog(
			detail.classname,
			detail.type === "wallitem" ? "i" : "s",
		);
	}, [detail]);

	const selectedNonImported = useMemo(
		() =>
			filteredItems.filter(
				(i) => selected.has(i.classname) && !i.alreadyImported,
			).length,
		[filteredItems, selected],
	);

	const missingNitroCount = useMemo(
		() =>
			filteredItems.filter((i) => i.alreadyImported && !i.nitroExists).length,
		[filteredItems],
	);

	const notImportedCount = useMemo(
		() => filteredItems.filter((i) => i.alreadyImported === false).length,
		[filteredItems],
	);

	return (
		<div
			className="flex h-[calc(100dvh-7rem)] min-h-[520px] flex-col overflow-hidden rounded-xl border border-[var(--admin-border)]"
			style={{ backgroundColor: "var(--admin-canvas)" }}
		>
			{/* ── Header ─────────────────────────────────────────── */}
			<header className="flex shrink-0 flex-wrap items-center gap-3 border-b border-[var(--admin-border)] bg-[var(--admin-surface)] px-4 py-3">
				<div className="flex items-center gap-2.5">
					<div className="grid h-9 w-9 place-items-center rounded-xl bg-gradient-to-br from-[var(--admin-accent)]/30 to-[var(--admin-accent)]/10">
						<Sparkles size={16} className="text-[var(--admin-accent)]" />
					</div>
					<div>
						<h1 className="text-base font-extrabold leading-tight text-[var(--admin-text)]">
							Studio
						</h1>
						<p className="text-[0.65rem] uppercase tracking-wider text-[var(--admin-text-muted)]">
							{activeSourceName || source.label} furnidata
						</p>
					</div>
				</div>

				<div className="flex flex-1 items-center gap-2">
					<div className="relative w-full max-w-md">
						<Search
							size={14}
							className="absolute left-2.5 top-1/2 -translate-y-1/2 text-[var(--admin-text-muted)]"
						/>
						<Input
							ref={searchRef}
							value={searchTerm}
							onChange={(e) => setSearchTerm(e.target.value)}
							onKeyDown={(e) => {
								if (e.key === "Enter") submitSearch();
								if (e.key === "Escape") clearSearch();
							}}
							placeholder="Search furni, classnames, keywords…  (/)"
							className="pl-8 pr-8"
						/>
						{searchTerm ? (
							<button
								type="button"
								onClick={clearSearch}
								aria-label="Clear search"
								className="absolute right-2 top-1/2 -translate-y-1/2 grid h-5 w-5 place-items-center rounded-md text-[var(--admin-text-muted)] transition-colors hover:bg-[var(--admin-accent)]/10 hover:text-[var(--admin-text)]"
							>
								<X size={12} />
							</button>
						) : null}
					</div>
					{meta && (
						<span className="shrink-0 text-xs font-semibold text-[var(--admin-text-muted)]">
							{meta.total.toLocaleString()} results
						</span>
					)}
				</div>

				<div className="flex flex-wrap items-center gap-1.5">
					{stats && (
						<>
							<Badge variant="secondary" className="gap-1">
								<Package size={11} /> {stats.totalInDb} in DB
							</Badge>
							<Badge variant="secondary" className="gap-1">
								<Layers size={11} /> {stats.inCatalog} in catalog
							</Badge>
							<Badge
								variant="secondary"
								className={cn(
									stats.missingNitro > 0 &&
										"text-[var(--admin-warning)] border-[var(--admin-warning)]/40",
								)}
							>
								<CircleAlert size={11} /> {stats.missingNitro} missing nitro
							</Badge>
						</>
					)}
				</div>
			</header>

			{/* ── Filters + actions ─────────────────────────────── */}
			<div className="flex shrink-0 flex-wrap items-center gap-2 border-b border-[var(--admin-border)] bg-[var(--admin-surface)] px-4 py-2">
				<button
					type="button"
					onClick={() => setRailOpen((v) => !v)}
					aria-label={railOpen ? "Hide catalog tree" : "Show catalog tree"}
					title={railOpen ? "Hide catalog tree" : "Show catalog tree"}
					className={cn(
						"flex h-8 items-center gap-1.5 rounded-md border px-2.5 text-xs font-medium transition-colors",
						railOpen
							? "border-[var(--admin-border)] text-[var(--admin-text-muted)] hover:bg-[var(--admin-accent)]/10 hover:text-[var(--admin-text)]"
							: "border-[var(--admin-accent)]/40 bg-[var(--admin-accent)]/10 text-[var(--admin-accent)]",
					)}
				>
					{railOpen ? (
						<PanelLeftClose size={13} />
					) : (
						<PanelLeftOpen size={13} />
					)}
					Catalog
				</button>

				<Select value={activeSource} onValueChange={changeSource}>
					<SelectTrigger className="h-8 w-44 text-xs">
						<SelectValue placeholder="Furni source" />
					</SelectTrigger>
					<SelectContent>
						<SelectItem value="">{source.label} (official)</SelectItem>
						{sources.map((s) => (
							<SelectItem key={s.id} value={s.id}>
								{s.name}
							</SelectItem>
						))}
					</SelectContent>
				</Select>

				<Select value={typeFilter} onValueChange={setTypeFilter}>
					<SelectTrigger className="h-8 w-32 text-xs">
						<SelectValue placeholder="Type" />
					</SelectTrigger>
					<SelectContent>
						<SelectItem value="all">All types</SelectItem>
						<SelectItem value="flooritem">Floor items</SelectItem>
						<SelectItem value="wallitem">Wall items</SelectItem>
					</SelectContent>
				</Select>

				<Select value={categoryFilter} onValueChange={setCategoryFilter}>
					<SelectTrigger className="h-8 w-40 text-xs">
						<SelectValue placeholder="Category" />
					</SelectTrigger>
					<SelectContent>
						{categories.map((cat) => (
							<SelectItem key={cat} value={cat}>
								{cat === "all" ? "All categories" : cat}
							</SelectItem>
						))}
					</SelectContent>
				</Select>

				<Select value={statusFilter} onValueChange={setStatusFilter}>
					<SelectTrigger className="h-8 w-36 text-xs">
						<SelectValue placeholder="Status" />
					</SelectTrigger>
					<SelectContent>
						<SelectItem value="all">
							All statuses {notImportedCount > 0 && notImportedCount}
						</SelectItem>
						<SelectItem value="imported">Imported</SelectItem>
						<SelectItem value="inCatalog">In catalog</SelectItem>
						<SelectItem value="missingNitro">Missing nitro</SelectItem>
					</SelectContent>
				</Select>

				<Select value={sortBy} onValueChange={setSortBy}>
					<SelectTrigger className="h-8 w-44 text-xs">
						<ArrowUpDown size={12} className="mr-1" />
						<SelectValue placeholder="Sort" />
					</SelectTrigger>
					<SelectContent>
						<SelectItem value="default">Default order</SelectItem>
						<SelectItem value="name">Name A–Z</SelectItem>
						<SelectItem value="classname">Classname A–Z</SelectItem>
						<SelectItem value="category">Category</SelectItem>
						<SelectItem value="imported-first">Imported first</SelectItem>
						<SelectItem value="not-imported-first">
							Not imported first
						</SelectItem>
					</SelectContent>
				</Select>

				{missingNitroCount > 0 && (
					<button
						type="button"
						onClick={() => setStatusFilter("missingNitro")}
						className={cn(
							"flex h-8 items-center gap-1.5 rounded-md border px-2.5 text-xs font-medium transition-colors",
							statusFilter === "missingNitro"
								? "border-[var(--admin-warning)] bg-[var(--admin-warning)]/10 text-[var(--admin-warning)]"
								: "border-[var(--admin-border)] text-[var(--admin-warning)] hover:bg-[var(--admin-warning)]/10",
						)}
					>
						<CircleAlert size={12} />
						{missingNitroCount} no nitro
					</button>
				)}

				<div className="flex h-8 items-center overflow-hidden rounded-md border border-[var(--admin-border)]">
					<button
						type="button"
						onClick={() => setViewMode("grid")}
						aria-label="Grid view"
						className={cn(
							"grid h-8 w-8 place-items-center transition-colors",
							viewMode === "grid"
								? "bg-[var(--admin-accent)] text-[var(--admin-accent-foreground)]"
								: "text-[var(--admin-text-muted)] hover:bg-[var(--admin-accent)]/10",
						)}
					>
						<LayoutGrid size={13} />
					</button>
					<button
						type="button"
						onClick={() => setViewMode("list")}
						aria-label="List view"
						className={cn(
							"grid h-8 w-8 place-items-center transition-colors",
							viewMode === "list"
								? "bg-[var(--admin-accent)] text-[var(--admin-accent-foreground)]"
								: "text-[var(--admin-text-muted)] hover:bg-[var(--admin-accent)]/10",
						)}
					>
						<List size={13} />
					</button>
				</div>

				<button
					type="button"
					onClick={toggleAll}
					className="flex h-8 items-center gap-1.5 rounded-md border border-[var(--admin-border)] px-2.5 text-xs font-medium text-[var(--admin-text-muted)] transition-colors hover:bg-[var(--admin-accent)]/10 hover:text-[var(--admin-text)]"
				>
					<CheckboxDot checked={allSelected} />
					Select all
				</button>

				{selected.size > 0 && (
					<span className="flex h-8 items-center gap-1.5 rounded-md border border-[var(--admin-border)] bg-[var(--admin-accent)]/5 px-2.5 text-xs font-medium text-[var(--admin-text)]">
						{selected.size} selected
					</span>
				)}

				{selected.size > 0 && (
					<button
						type="button"
						onClick={() => setSelected(new Set())}
						className="flex h-8 items-center gap-1 rounded-md px-2 text-xs font-medium text-[var(--admin-text-muted)] transition-colors hover:text-[var(--admin-warning)]"
					>
						<X size={12} />
						Clear
					</button>
				)}

				<div className="flex-1" />

				<Button
					size="sm"
					variant="outline"
					className="gap-1.5"
					disabled={organizing || !!batchProgress}
					onClick={organizeAll}
					title="Alle meubels uit de Import-sectie automatisch ordenen in catalogus-pagina's (pagina's worden aangemaakt indien nodig)"
				>
					{organizing ? (
						<Loader2 size={14} className="animate-spin" />
					) : (
						<WandSparkles size={14} />
					)}
					Organiseer import
				</Button>

				{selectedNonImported > 0 && (
					<Button
						size="sm"
						className="gap-1.5"
						disabled={!!batchProgress}
						onClick={importBatch}
					>
						{batchProgress ? (
							<Loader2 size={14} className="animate-spin" />
						) : (
							<CloudDownload size={14} />
						)}
						Import {selectedNonImported} auto
					</Button>
				)}
			</div>

			{/* ── Body: rail + grid + drawer ────────────────────── */}
			<div className="relative flex min-h-0 flex-1">
				{railOpen ? (
					<CatalogRail
						tree={tree}
						selectedId={selectedPage}
						onSelect={setSelectedPage}
					/>
				) : null}

				<main className="flex min-h-0 flex-1 flex-col">
					<div className="min-h-0 flex-1 overflow-y-auto p-3">
						{loading && items.length === 0 ? (
							<div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
								{Array.from({ length: 10 }, (_, i) => i).map((n) => (
									<div
										key={`skeleton-${n}`}
										className="overflow-hidden rounded-xl border border-[var(--admin-border)] bg-[var(--admin-surface)]"
									>
										<div className="h-24 animate-pulse bg-[var(--admin-accent)]/10" />
										<div className="space-y-2 border-t border-[var(--admin-border)] p-2.5">
											<div className="h-3 w-3/4 animate-pulse rounded bg-[var(--admin-accent)]/10" />
											<div className="h-2.5 w-1/2 animate-pulse rounded bg-[var(--admin-accent)]/10" />
										</div>
									</div>
								))}
							</div>
						) : error ? (
							<div className="py-16 text-center text-sm text-[var(--admin-warning)]">
								{error}
							</div>
						) : filteredItems.length === 0 ? (
							<div className="flex flex-col items-center py-16 text-center">
								<div className="mb-3 grid h-14 w-14 place-items-center rounded-2xl border border-[var(--admin-border)] bg-[var(--admin-surface)]">
									<Search
										size={22}
										className="text-[var(--admin-text-muted)]"
									/>
								</div>
								<p className="text-sm font-semibold text-[var(--admin-text)]">
									{activeSearch
										? `No furni found for "${activeSearch}"`
										: "No furni to show yet"}
								</p>
								<p className="mt-1 text-xs text-[var(--admin-text-muted)]">
									{activeSearch
										? "Try a different search or clear your filters."
										: "Search a furni library to get started."}
								</p>
							</div>
						) : (
							<>
								{viewMode === "grid" ? (
									<div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
										{filteredItems.map((item) => {
											const isSel = selected.has(item.classname);
											return (
												<div key={item.classname} className="group relative">
													<button
														type="button"
														onClick={() => setDetail(item)}
														onDoubleClick={() => toggleSelect(item.classname)}
														className={cn(
															"flex w-full flex-col overflow-hidden rounded-xl border text-left transition-all outline-none focus-visible:ring-2 focus-visible:ring-[var(--admin-accent)]",
															isSel
																? "border-[var(--admin-accent)] bg-[var(--admin-accent)]/10"
																: "border-[var(--admin-border)] bg-[var(--admin-surface)] hover:-translate-y-0.5 hover:border-[var(--admin-accent)]/60 hover:shadow-lg hover:shadow-[var(--admin-accent)]/10",
														)}
													>
														<div
															className="relative flex h-24 items-center justify-center overflow-hidden"
															style={{
																backgroundImage:
																	"radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--admin-text-muted) 14%, transparent) 1px, transparent 0)",
																backgroundSize: "14px 14px",
															}}
														>
															<img
																src={getFurniImageUrl(item)}
																alt={item.name}
																className="h-14 w-14 object-contain transition-transform group-hover:scale-110"
																style={{ imageRendering: "pixelated" }}
																loading="lazy"
																onError={(e) => handleImgError(e, item)}
															/>
														</div>
														<div className="flex items-start justify-between gap-1 border-t border-[var(--admin-border)] px-2 py-1.5">
															<div className="min-w-0">
																<p className="truncate text-xs font-semibold text-[var(--admin-text)]">
																	{item.name}
																</p>
																<p className="truncate font-mono text-[0.6rem] text-[var(--admin-text-muted)]">
																	{item.classname}
																</p>
															</div>
														</div>
														<div className="flex items-center gap-1 px-2 pb-1.5">
															<Badge className="h-4 text-[var(--admin-accent-foreground)]">
																{TYPE_LABELS[item.type] ?? item.type}
															</Badge>
															{item.alreadyImported ? (
																<Badge
																	variant="secondary"
																	className={cn(
																		"h-4",
																		item.nitroExists
																			? "text-[var(--admin-success)] border-[var(--admin-success)]/40"
																			: "text-[var(--admin-warning)] border-[var(--admin-warning)]/40",
																	)}
																>
																	{item.nitroExists ? "Imported" : "No nitro"}
																</Badge>
															) : (
																<Badge className="h-4 text-[var(--admin-accent-foreground)]">
																	New
																</Badge>
															)}
														</div>
													</button>
													<button
														type="button"
														onClick={(e) => {
															e.stopPropagation();
															toggleSelect(item.classname);
														}}
														className={cn(
															"absolute right-1.5 top-1.5 grid h-5 w-5 place-items-center rounded-md border transition-colors",
															isSel
																? "border-[var(--admin-accent)] bg-[var(--admin-accent)]"
																: "border-[var(--admin-border)] bg-[var(--admin-surface)] hover:border-[var(--admin-accent)]/60",
														)}
														aria-label={isSel ? "Deselect" : "Select"}
													>
														{isSel ? (
															<Check
																size={12}
																className="text-[var(--admin-accent-foreground)]"
															/>
														) : null}
													</button>
												</div>
											);
										})}
									</div>
								) : (
									<div className="overflow-x-auto rounded-lg border border-[var(--admin-border)]">
										<table className="w-full text-xs">
											<thead className="bg-[var(--admin-accent)]/8">
												<tr>
													<th className="w-9 px-2 py-2 text-left">
														<Checkbox
															checked={allSelected}
															onCheckedChange={toggleAll}
															aria-label="Select all"
														/>
													</th>
													<th className="w-12 px-1 py-2" />
													<th className="px-2 py-2 text-left font-semibold text-[var(--admin-text-muted)]">
														Name
													</th>
													<th className="px-2 py-2 text-left font-semibold text-[var(--admin-text-muted)]">
														Classname
													</th>
													<th className="px-2 py-2 text-left font-semibold text-[var(--admin-text-muted)]">
														Type
													</th>
													<th className="px-2 py-2 text-left font-semibold text-[var(--admin-text-muted)]">
														Category
													</th>
													<th className="px-2 py-2 text-left font-semibold text-[var(--admin-text-muted)]">
														Status
													</th>
													<th className="w-28 px-2 py-2 text-right font-semibold text-[var(--admin-text-muted)]">
														Actions
													</th>
												</tr>
											</thead>
											<tbody>
												{filteredItems.map((item) => {
													const isSel = selected.has(item.classname);
													return (
														<tr
															key={item.classname}
															className="border-t border-[var(--admin-border)] transition-colors hover:bg-[var(--admin-accent)]/5"
														>
															<td className="px-2 py-1.5">
																<Checkbox
																	checked={isSel}
																	onCheckedChange={() =>
																		toggleSelect(item.classname)
																	}
																	aria-label={`Select ${item.classname}`}
																/>
															</td>
															<td className="px-1 py-1.5">
																<button
																	type="button"
																	onClick={() => setDetail(item)}
																	className="rounded outline-none focus-visible:ring-2 focus-visible:ring-[var(--admin-accent)]"
																	aria-label={`View ${item.name}`}
																>
																	<img
																		src={getFurniImageUrl(item)}
																		alt=""
																		className="h-8 w-8 object-contain"
																		style={{ imageRendering: "pixelated" }}
																		loading="lazy"
																		onError={(e) => handleImgError(e, item)}
																	/>
																</button>
															</td>
															<td className="max-w-[220px] truncate px-2 py-1.5 font-medium text-[var(--admin-text)]">
																{item.name}
															</td>
															<td className="max-w-[180px] truncate px-2 py-1.5 font-mono text-[0.7rem] text-[var(--admin-text-muted)]">
																{item.classname}
															</td>
															<td className="px-2 py-1.5 text-[var(--admin-text-muted)]">
																{TYPE_LABELS[item.type] ?? item.type}
															</td>
															<td className="max-w-[140px] truncate px-2 py-1.5 text-[var(--admin-text-muted)]">
																{item.category || "—"}
															</td>
															<td className="px-2 py-1.5">
																{item.alreadyImported ? (
																	<Badge
																		variant="secondary"
																		className={cn(
																			"h-4",
																			item.nitroExists
																				? "text-[var(--admin-success)] border-[var(--admin-success)]/40"
																				: "text-[var(--admin-warning)] border-[var(--admin-warning)]/40",
																		)}
																	>
																		{item.nitroExists ? "Imported" : "No nitro"}
																	</Badge>
																) : (
																	<Badge className="h-4 text-[var(--admin-accent-foreground)]">
																		New
																	</Badge>
																)}
															</td>
															<td className="px-2 py-1.5">
																<div className="flex items-center justify-end gap-1">
																	{!item.alreadyImported && (
																		<button
																			type="button"
																			onClick={() => importSingle(item)}
																			disabled={importingId !== null}
																			aria-label={`Import ${item.classname}`}
																			className="grid h-6 w-6 place-items-center rounded-md text-[var(--admin-text-muted)] transition-colors hover:bg-[var(--admin-accent)]/10 hover:text-[var(--admin-text)] disabled:opacity-50"
																		>
																			{importingId === item.classname ? (
																				<Loader2
																					size={12}
																					className="animate-spin"
																				/>
																			) : (
																				<CloudDownload size={12} />
																			)}
																		</button>
																	)}
																	{item.alreadyImported && item.nitroExists && (
																		<button
																			type="button"
																			onClick={() =>
																				setEditingClassname(item.classname)
																			}
																			aria-label={`Edit nitro ${item.classname}`}
																			className="grid h-6 w-6 place-items-center rounded-md text-[var(--admin-text-muted)] transition-colors hover:bg-[var(--admin-accent)]/10 hover:text-[var(--admin-text)]"
																		>
																			<Pencil size={12} />
																		</button>
																	)}
																	{item.alreadyImported &&
																		!item.nitroExists && (
																			<button
																				type="button"
																				onClick={() => regenNitro(item)}
																				disabled={regeneratingNitro.has(
																					item.classname,
																				)}
																				aria-label={`Regenerate nitro ${item.classname}`}
																				className="grid h-6 w-6 place-items-center rounded-md text-[var(--admin-warning)] transition-colors hover:bg-[var(--admin-warning)]/10 disabled:opacity-50"
																			>
																				{regeneratingNitro.has(
																					item.classname,
																				) ? (
																					<Loader2
																						size={12}
																						className="animate-spin"
																					/>
																				) : (
																					<RefreshCw size={12} />
																				)}
																			</button>
																		)}
																</div>
															</td>
														</tr>
													);
												})}
											</tbody>
										</table>
									</div>
								)}

								{meta && meta.currentPage < meta.lastPage && (
									<div className="mt-4 flex justify-center">
										<Button
											variant="secondary"
											onClick={() =>
												fetchItems(
													activeSearch,
													meta.currentPage + 1,
													activeSource,
												)
											}
											disabled={loading}
										>
											{loading ? (
												<Loader2 size={14} className="animate-spin" />
											) : (
												<Download size={14} />
											)}
											Load more ({meta.total - meta.currentPage * meta.perPage}{" "}
											left)
										</Button>
									</div>
								)}
							</>
						)}
					</div>

					{batchProgress ? (
						<BatchProgress
							progress={batchProgress}
							done={batchDone}
							succeeded={batchSucceeded}
							failed={batchFailed}
							cancelling={batchCancelling}
							verification={verification}
							onCancel={cancelBatch}
							onDismiss={() => {
								setBatchProgress(null);
								setBatchDone(false);
								setVerification(null);
							}}
						/>
					) : null}
				</main>

				{/* ── Detail drawer ─────────────────────────────── */}
				{detail ? (
					<aside className="absolute inset-y-0 right-0 z-20 flex h-full w-80 shrink-0 flex-col border-l border-[var(--admin-border)] bg-[var(--admin-surface)] shadow-xl lg:static lg:h-full lg:shadow-none">
						<div className="flex shrink-0 items-center justify-between border-b border-[var(--admin-border)] px-3 py-2.5">
							<span className="text-xs font-bold uppercase tracking-wider text-[var(--admin-text-muted)]">
								Furni detail
							</span>
							<button
								type="button"
								onClick={() => setDetail(null)}
								className="rounded-md p-1 text-[var(--admin-text-muted)] hover:bg-[var(--admin-accent)]/10 hover:text-[var(--admin-text)]"
							>
								<X size={14} />
							</button>
						</div>

						<div className="min-h-0 flex-1 overflow-y-auto p-4">
							<div
								className="mb-4 grid h-40 place-items-center overflow-hidden rounded-xl border border-[var(--admin-border)]"
								style={{
									backgroundImage:
										"radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--admin-text-muted) 14%, transparent) 1px, transparent 0)",
									backgroundSize: "14px 14px",
								}}
							>
								<img
									src={getFurniImageUrl(detail)}
									alt={detail.name}
									className="h-28 w-28 object-contain"
									style={{ imageRendering: "pixelated" }}
									onError={(e) => handleImgError(e, detail)}
								/>
							</div>

							<h2 className="text-base font-bold leading-tight text-[var(--admin-text)]">
								{detail.name}
							</h2>
							<p className="mb-3 mt-0.5 font-mono text-xs text-[var(--admin-text-muted)]">
								{detail.classname}
							</p>

							{detail.description ? (
								<p className="mb-3 text-xs leading-relaxed text-[var(--admin-text-muted)]">
									{detail.description}
								</p>
							) : null}

							<div className="mb-4 flex flex-wrap gap-1.5">
								<Badge variant="secondary">
									{TYPE_LABELS[detail.type] ?? detail.type}
								</Badge>
								<Badge variant="secondary">rev {detail.revision}</Badge>
								{detail.alreadyImported ? (
									<Badge className="text-[var(--admin-success)] border-[var(--admin-success)]/40">
										<Check size={10} /> In catalog
									</Badge>
								) : (
									<Badge className="text-[var(--admin-accent-foreground)]">
										<Sparkles size={10} /> Auto-import ready
									</Badge>
								)}
							</div>

							{/* Auto-catalog preview */}
							{detailPreview && (
								<div className="mb-4 rounded-lg border border-[var(--admin-border)] bg-[var(--admin-canvas)] p-3">
									<div className="mb-2 flex items-center gap-1.5 text-[0.65rem] font-bold uppercase tracking-wider text-[var(--admin-text-muted)]">
										<WandSparkles
											size={12}
											className="text-[var(--admin-accent)]"
										/>
										Automatic placement
									</div>
									<div className="space-y-2">
										<div className="flex items-center justify-between text-xs">
											<span className="text-[var(--admin-text-muted)]">
												Category
											</span>
											<span className="font-semibold text-[var(--admin-text)]">
												{detailPreview.categoryLabel}
											</span>
										</div>
										<div className="flex items-center justify-between text-xs">
											<span className="text-[var(--admin-text-muted)]">
												Price
											</span>
											<span className="font-semibold text-[var(--admin-text)]">
												{detailPreview.credits} credits
												{detailPreview.points > 0
													? ` + ${detailPreview.points} points`
													: ""}
											</span>
										</div>
									</div>
								</div>
							)}
						</div>

						<div className="shrink-0 border-t border-[var(--admin-border)] bg-[var(--admin-surface)] p-3">
							<div className="space-y-2">
								{!detail.alreadyImported ? (
									<Button
										className="w-full gap-1.5"
										disabled={importingId !== null}
										onClick={() => importSingle(detail)}
									>
										{importingId === detail.classname ? (
											<Loader2 size={14} className="animate-spin" />
										) : (
											<CloudDownload size={14} />
										)}
										Import & add to catalog
									</Button>
								) : (
									<div className="space-y-2">
										{!detail.nitroExists && (
											<>
												<p className="rounded-md border border-[var(--admin-warning)]/30 bg-[var(--admin-warning)]/10 p-2 text-[0.65rem] text-[var(--admin-warning)]">
													This furni is in the DB but the .nitro file is
													missing.
												</p>
												<Button
													variant="outline"
													className="w-full gap-1.5 text-[var(--admin-warning)]"
													disabled={regeneratingNitro.has(detail.classname)}
													onClick={() => regenNitro(detail)}
												>
													{regeneratingNitro.has(detail.classname) ? (
														<Loader2 size={14} className="animate-spin" />
													) : (
														<RefreshCw size={14} />
													)}
													Regenerate .nitro
												</Button>
											</>
										)}
										<Button
											variant="secondary"
											className="w-full gap-1.5"
											onClick={() => setEditingClassname(detail.classname)}
										>
											<Pencil size={14} />
											Edit nitro
										</Button>
									</div>
								)}

								{detail.alreadyImported && (
									<Button
										variant="outline"
										className="w-full gap-1.5 text-[var(--admin-warning)]"
										onClick={() => {
											setDeleting(detail.classname);
											setConfirmDelete(true);
										}}
									>
										<Trash2 size={14} />
										Delete imported furni
									</Button>
								)}
							</div>
						</div>
					</aside>
				) : null}
			</div>

			<NitroEditorDialog
				classname={editingClassname ?? ""}
				name={detail?.name ?? ""}
				open={editingClassname !== null}
				onOpenChange={(open) => !open && setEditingClassname(null)}
			/>

			<Dialog open={confirmDelete} onOpenChange={setConfirmDelete}>
				<DialogContent>
					<DialogHeader>
						<DialogTitle>Delete imported furni</DialogTitle>
					</DialogHeader>
					<p className="text-sm text-muted-foreground">
						This permanently removes{" "}
						<span className="font-mono font-semibold text-foreground">
							{deleting}
						</span>{" "}
						from items_base and the catalog, plus its asset files.
					</p>
					<DialogFooter>
						<Button variant="outline" onClick={() => setConfirmDelete(false)}>
							Cancel
						</Button>
						<Button
							variant="destructive"
							className="gap-1.5"
							onClick={deleteItem}
							disabled={!deleting}
						>
							<Trash2 size={14} />
							Delete
						</Button>
					</DialogFooter>
				</DialogContent>
			</Dialog>
		</div>
	);
}