GearBox/src/client/components/CatalogSearchOverlay.tsx

import { useNavigate } from "@tanstack/react-router";
import { AnimatePresence, motion } from "framer-motion";
import { ArrowLeft, Filter, LayoutGrid, LayoutList, X } from "lucide-react";
import { useEffect, useMemo, useState } from "react";
import { toast } from "sonner";
import { useFormatters } from "../hooks/useFormatters";
import { useGlobalItems } from "../hooks/useGlobalItems";
import { useTags } from "../hooks/useTags";
import { useUIStore } from "../stores/uiStore";
import { GearImage } from "./GearImage";
import { ManualEntryForm } from "./ManualEntryForm";

type ViewMode = "grid" | "list";

export function CatalogSearchOverlay() {
	const catalogSearchOpen = useUIStore((s) => s.catalogSearchOpen);
	const catalogSearchMode = useUIStore((s) => s.catalogSearchMode);
	const closeCatalogSearch = useUIStore((s) => s.closeCatalogSearch);

	const [searchInput, setSearchInput] = useState("");
	const [debouncedQuery, setDebouncedQuery] = useState("");
	const [selectedTags, setSelectedTags] = useState<string[]>([]);
	const [filterOpen, setFilterOpen] = useState(false);
	const [viewMode, setViewMode] = useState<ViewMode>("grid");
	const [manualEntryMode, setManualEntryMode] = useState(false);
	const [savedItemName, setSavedItemName] = useState<string | null>(null);
	const [catalogSubmitted, setCatalogSubmitted] = useState(false);

	// Range filters (client-side)
	const [weightMin, setWeightMin] = useState(0);
	const [weightMax, setWeightMax] = useState(5000);
	const [priceMin, setPriceMin] = useState(0);
	const [priceMax, setPriceMax] = useState(100000); // in cents

	const { weight, price } = useFormatters();
	const { data: tags } = useTags();
	const { data: rawItems, isLoading } = useGlobalItems(
		debouncedQuery || undefined,
		selectedTags.length > 0 ? selectedTags : undefined,
	);

	// Client-side range filtering
	const hasRangeFilters =
		weightMin > 0 || weightMax < 5000 || priceMin > 0 || priceMax < 100000;

	const items = useMemo(() => {
		if (!rawItems || !hasRangeFilters) return rawItems;
		return rawItems.filter((item) => {
			if (item.weightGrams != null) {
				if (item.weightGrams < weightMin || item.weightGrams > weightMax)
					return false;
			}
			if (item.priceCents != null) {
				if (item.priceCents < priceMin || item.priceCents > priceMax)
					return false;
			}
			return true;
		});
	}, [rawItems, weightMin, weightMax, priceMin, priceMax, hasRangeFilters]);

	// Debounce search input
	useEffect(() => {
		const timer = setTimeout(() => {
			setDebouncedQuery(searchInput);
		}, 300);
		return () => clearTimeout(timer);
	}, [searchInput]);

	// Lock body scroll when overlay is open
	useEffect(() => {
		if (catalogSearchOpen) {
			document.body.style.overflow = "hidden";
		} else {
			document.body.style.overflow = "";
		}
		return () => {
			document.body.style.overflow = "";
		};
	}, [catalogSearchOpen]);

	// Reset state when overlay closes
	useEffect(() => {
		if (!catalogSearchOpen) {
			setSearchInput("");
			setDebouncedQuery("");
			setSelectedTags([]);
			setFilterOpen(false);
			setWeightMin(0);
			setWeightMax(5000);
			setPriceMin(0);
			setPriceMax(100000);
			setManualEntryMode(false);
			setSavedItemName(null);
			setCatalogSubmitted(false);
		}
	}, [catalogSearchOpen]);

	function toggleTag(tagName: string) {
		setSelectedTags((prev) =>
			prev.includes(tagName)
				? prev.filter((t) => t !== tagName)
				: [...prev, tagName],
		);
	}

	function removeTag(tagName: string) {
		setSelectedTags((prev) => prev.filter((t) => t !== tagName));
	}

	function handleEnterManualMode() {
		setManualEntryMode(true);
	}

	function handleManualSuccess(itemName: string) {
		setSavedItemName(itemName);
	}

	function handleAddAnother() {
		setManualEntryMode(false);
		setSavedItemName(null);
		setCatalogSubmitted(false);
	}

	const navigate = useNavigate();

	function handleCardClick(itemId: number) {
		closeCatalogSearch();
		navigate({
			to: "/global-items/$globalItemId",
			params: { globalItemId: String(itemId) },
		});
	}

	function handleAddStub(e: React.MouseEvent) {
		e.stopPropagation();
		// Stub: actual add-to-collection / add-to-thread wired in Phase 22
	}

	const contextText = (() => {
		if (manualEntryMode && savedItemName) return "Item Added";
		if (manualEntryMode) return "Manual Entry";
		return catalogSearchMode === "collection"
			? "Adding to Collection"
			: "Starting a Thread";
	})();

	return (
		<AnimatePresence>
			{catalogSearchOpen && (
				<motion.div
					className="fixed inset-x-0 top-[57px] bottom-0 z-40 bg-gray-50 flex flex-col"
					initial={{ opacity: 0, y: 10 }}
					animate={{ opacity: 1, y: 0 }}
					exit={{ opacity: 0, y: 10 }}
					transition={{ duration: 0.2, ease: "easeOut" }}
				>
					{/* Header bar */}
					<div className="bg-white border-b border-gray-100">
						<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
							{/* Context text with back arrow */}
							<div className="flex items-center gap-1.5 mb-2">
								<button
									type="button"
									onClick={
										manualEntryMode
											? () => {
													setManualEntryMode(false);
													setSavedItemName(null);
													setCatalogSubmitted(false);
												}
											: closeCatalogSearch
									}
									className="p-0.5 text-gray-400 hover:text-gray-600 transition-colors"
								>
									<ArrowLeft className="w-4 h-4" />
								</button>
								<p className="text-xs font-medium text-gray-400">
									{contextText}
								</p>
							</div>

							{/* Search row — hidden in manual entry mode */}
							{!manualEntryMode && (
								<>
									<div className="flex items-center gap-3">
										<div className="relative flex-1 max-w-lg">
											<input
												type="text"
												value={searchInput}
												onChange={(e) => setSearchInput(e.target.value)}
												placeholder="Search the catalog..."
												className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent transition-colors"
												autoFocus
											/>
										</div>

										{/* Filter toggle */}
										<button
											type="button"
											onClick={() => setFilterOpen((prev) => !prev)}
											className={`relative p-2 rounded-lg transition-colors ${
												filterOpen || selectedTags.length > 0 || hasRangeFilters
													? "bg-gray-200 text-gray-700"
													: "text-gray-400 hover:text-gray-600 hover:bg-gray-100"
											}`}
											title="Filters"
										>
											<Filter className="w-4 h-4" />
										</button>

										{/* View toggle */}
										<div className="flex items-center gap-1 bg-gray-100 rounded-lg p-0.5">
											<button
												type="button"
												onClick={() => setViewMode("list")}
												className={`p-1.5 rounded-md transition-colors ${
													viewMode === "list"
														? "bg-gray-200 text-gray-900"
														: "text-gray-400 hover:text-gray-600"
												}`}
												title="List view"
											>
												<LayoutList className="w-4 h-4" />
											</button>
											<button
												type="button"
												onClick={() => setViewMode("grid")}
												className={`p-1.5 rounded-md transition-colors ${
													viewMode === "grid"
														? "bg-gray-200 text-gray-900"
														: "text-gray-400 hover:text-gray-600"
												}`}
												title="Grid view"
											>
												<LayoutGrid className="w-4 h-4" />
											</button>
										</div>
									</div>

									{/* Active filter pills */}
									{(selectedTags.length > 0 || hasRangeFilters) && (
										<div className="flex flex-wrap gap-1.5 mt-2">
											{selectedTags.map((tag) => (
												<button
													key={tag}
													type="button"
													onClick={() => removeTag(tag)}
													className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-700 hover:bg-blue-200 transition-colors"
												>
													{tag}
													<X className="w-3 h-3" />
												</button>
											))}
											{weightMin > 0 && (
												<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-500">
													≥{weight(weightMin)}
													<button type="button" onClick={() => setWeightMin(0)}>
														<X className="w-3 h-3" />
													</button>
												</span>
											)}
											{weightMax < 5000 && (
												<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-500">
													≤{weight(weightMax)}
													<button
														type="button"
														onClick={() => setWeightMax(5000)}
													>
														<X className="w-3 h-3" />
													</button>
												</span>
											)}
											{priceMin > 0 && (
												<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-600">
													≥{price(priceMin)}
													<button type="button" onClick={() => setPriceMin(0)}>
														<X className="w-3 h-3" />
													</button>
												</span>
											)}
											{priceMax < 100000 && (
												<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-600">
													≤{price(priceMax)}
													<button
														type="button"
														onClick={() => setPriceMax(100000)}
													>
														<X className="w-3 h-3" />
													</button>
												</span>
											)}
											<button
												type="button"
												onClick={() => {
													setSelectedTags([]);
													setWeightMin(0);
													setWeightMax(5000);
													setPriceMin(0);
													setPriceMax(100000);
												}}
												className="text-xs text-gray-400 hover:text-gray-600 px-1"
											>
												Clear all
											</button>
										</div>
									)}
								</>
							)}
						</div>
					</div>

					{/* Main content area */}
					<div className="flex-1 flex overflow-hidden">
						{/* Filter sidebar — hidden in manual entry mode */}
						{!manualEntryMode && (
							<AnimatePresence>
								{filterOpen && tags && tags.length > 0 && (
									<motion.aside
										className="w-56 bg-white border-r border-gray-100 overflow-y-auto shrink-0"
										initial={{ width: 0, opacity: 0 }}
										animate={{ width: 224, opacity: 1 }}
										exit={{ width: 0, opacity: 0 }}
										transition={{ duration: 0.15, ease: "easeOut" }}
									>
										<div className="p-4 space-y-6">
											{/* Tags */}
											<div>
												<h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-3">
													Tags
												</h3>
												<div className="space-y-1">
													{tags.map((tag) => {
														const isActive = selectedTags.includes(tag.name);
														return (
															<button
																key={tag.id}
																type="button"
																onClick={() => toggleTag(tag.name)}
																className={`w-full text-left px-2.5 py-1.5 rounded-lg text-sm transition-colors ${
																	isActive
																		? "bg-blue-50 text-blue-700 font-medium"
																		: "text-gray-600 hover:bg-gray-50"
																}`}
															>
																{tag.name}
															</button>
														);
													})}
												</div>
											</div>

											{/* Weight range */}
											<div>
												<h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-3">
													Weight
												</h3>
												<div className="space-y-2">
													<div className="flex items-center gap-2">
														<input
															type="range"
															min={0}
															max={5000}
															step={50}
															value={weightMin}
															onChange={(e) =>
																setWeightMin(
																	Math.min(
																		Number(e.target.value),
																		weightMax - 50,
																	),
																)
															}
															className="flex-1 h-1.5 bg-gray-200 rounded-full appearance-none accent-blue-500"
														/>
													</div>
													<div className="flex items-center gap-2">
														<input
															type="range"
															min={0}
															max={5000}
															step={50}
															value={weightMax}
															onChange={(e) =>
																setWeightMax(
																	Math.max(
																		Number(e.target.value),
																		weightMin + 50,
																	),
																)
															}
															className="flex-1 h-1.5 bg-gray-200 rounded-full appearance-none accent-blue-500"
														/>
													</div>
													<div className="flex justify-between text-xs text-gray-400">
														<span>{weight(weightMin)}</span>
														<span>{weight(weightMax)}</span>
													</div>
												</div>
											</div>

											{/* Price range */}
											<div>
												<h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-3">
													Price
												</h3>
												<div className="space-y-2">
													<div className="flex items-center gap-2">
														<input
															type="range"
															min={0}
															max={100000}
															step={500}
															value={priceMin}
															onChange={(e) =>
																setPriceMin(
																	Math.min(
																		Number(e.target.value),
																		priceMax - 500,
																	),
																)
															}
															className="flex-1 h-1.5 bg-gray-200 rounded-full appearance-none accent-green-500"
														/>
													</div>
													<div className="flex items-center gap-2">
														<input
															type="range"
															min={0}
															max={100000}
															step={500}
															value={priceMax}
															onChange={(e) =>
																setPriceMax(
																	Math.max(
																		Number(e.target.value),
																		priceMin + 500,
																	),
																)
															}
															className="flex-1 h-1.5 bg-gray-200 rounded-full appearance-none accent-green-500"
														/>
													</div>
													<div className="flex justify-between text-xs text-gray-400">
														<span>{price(priceMin)}</span>
														<span>{price(priceMax)}</span>
													</div>
												</div>
											</div>
										</div>
									</motion.aside>
								)}
							</AnimatePresence>
						)}

						{/* Results / Manual Entry */}
						<div className="flex-1 overflow-y-auto">
							{manualEntryMode && savedItemName ? (
								/* Success card */
								<div className="flex flex-col items-center justify-center py-20 px-4">
									<div className="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mb-4">
										<svg
											className="w-6 h-6 text-green-600"
											fill="none"
											stroke="currentColor"
											viewBox="0 0 24 24"
										>
											<path
												strokeLinecap="round"
												strokeLinejoin="round"
												strokeWidth={2}
												d="M5 13l4 4L19 7"
											/>
										</svg>
									</div>
									<p className="text-sm font-medium text-gray-900 mb-1">
										Added {savedItemName} to collection
									</p>
									<button
										type="button"
										onClick={() => {
											setCatalogSubmitted(true);
											toast(
												"Coming soon — catalog submissions are on the roadmap!",
											);
										}}
										disabled={catalogSubmitted}
										className={`mt-3 inline-flex items-center gap-2 text-sm px-3 py-1.5 rounded-full border transition-colors ${
											catalogSubmitted
												? "border-green-300 bg-green-50 text-green-700 cursor-default"
												: "border-gray-300 text-gray-600 hover:border-blue-300 hover:text-blue-600 hover:bg-blue-50"
										}`}
									>
										<span
											className={`inline-flex items-center justify-center w-4 h-4 rounded border transition-colors ${
												catalogSubmitted
													? "border-green-500 bg-green-500"
													: "border-gray-300"
											}`}
										>
											{catalogSubmitted && (
												<svg
													className="w-3 h-3 text-white"
													fill="none"
													stroke="currentColor"
													viewBox="0 0 24 24"
												>
													<path
														strokeLinecap="round"
														strokeLinejoin="round"
														strokeWidth={3}
														d="M5 13l4 4L19 7"
													/>
												</svg>
											)}
										</span>
										Submit to Catalog
									</button>
									<div className="flex gap-4 mt-6">
										<button
											type="button"
											onClick={handleAddAnother}
											className="px-4 py-2 text-sm text-gray-600 hover:text-gray-800 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
										>
											Add Another
										</button>
										<button
											type="button"
											onClick={closeCatalogSearch}
											className="px-4 py-2 text-sm text-white bg-gray-900 rounded-lg hover:bg-gray-800 transition-colors"
										>
											Done
										</button>
									</div>
								</div>
							) : manualEntryMode ? (
								/* Manual entry form */
								<ManualEntryForm
									initialName={searchInput}
									onSuccess={handleManualSuccess}
								/>
							) : (
								/* Normal catalog results */
								<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
									{isLoading ? (
										viewMode === "grid" ? (
											<SkeletonGrid />
										) : (
											<SkeletonList />
										)
									) : items && items.length > 0 ? (
										<>
											{viewMode === "grid" ? (
												<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
													{items.map((item) => (
														<GridCard
															key={item.id}
															item={item}
															onAdd={handleAddStub}
															onCardClick={() => handleCardClick(item.id)}
															weight={weight}
															price={price}
														/>
													))}
												</div>
											) : (
												<div className="space-y-2">
													{items.map((item) => (
														<ListRow
															key={item.id}
															item={item}
															onAdd={handleAddStub}
															onCardClick={() => handleCardClick(item.id)}
															weight={weight}
															price={price}
														/>
													))}
												</div>
											)}
											{/* Persistent "Add Manually" link below results */}
											<div className="flex justify-center py-6">
												<button
													type="button"
													onClick={handleEnterManualMode}
													className="text-sm text-gray-400 hover:text-gray-600 underline underline-offset-2"
												>
													Can't find it? Add manually
												</button>
											</div>
										</>
									) : (
										<EmptyState
											hasQuery={!!debouncedQuery || selectedTags.length > 0}
											onAddManually={handleEnterManualMode}
										/>
									)}
								</div>
							)}
						</div>
					</div>
				</motion.div>
			)}
		</AnimatePresence>
	);
}

// ── Grid Card ──────────────────────────────────────────────────────────

interface CardProps {
	item: {
		id: number;
		brand: string;
		model: string;
		category: string | null;
		weightGrams: number | null;
		priceCents: number | null;
		imageUrl: string | null;
	};
	onAdd: (e: React.MouseEvent) => void;
	onCardClick: () => void;
	weight: (g: number) => string;
	price: (cents: number) => string;
}

function GridCard({ item, onAdd, onCardClick, weight, price }: CardProps) {
	return (
		<div
			className="bg-white rounded-xl border border-gray-100 overflow-hidden cursor-pointer hover:border-gray-200 hover:shadow-sm transition-all"
			onClick={onCardClick}
		>
			<div
				className="aspect-[4/3] overflow-hidden"
				style={{
					backgroundColor: item.imageUrl
						? ((item as Record<string, unknown>).dominantColor as string) ||
							"#f3f4f6"
						: undefined,
				}}
			>
				{item.imageUrl ? (
					<GearImage src={item.imageUrl} alt={`${item.brand} ${item.model}`} />
				) : (
					<div className="w-full h-full bg-gray-50 flex items-center justify-center">
						<svg
							className="w-9 h-9 text-gray-300"
							fill="none"
							stroke="currentColor"
							viewBox="0 0 24 24"
						>
							<path
								strokeLinecap="round"
								strokeLinejoin="round"
								strokeWidth={1.5}
								d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
							/>
						</svg>
					</div>
				)}
			</div>
			<div className="p-4">
				<p className="text-xs font-medium text-gray-400 uppercase tracking-wide mb-0.5">
					{item.brand}
				</p>
				<h3 className="text-sm font-semibold text-gray-900 truncate mb-2">
					{item.model}
				</h3>
				<div className="flex flex-wrap gap-1.5 mb-3">
					{item.weightGrams != null && (
						<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-400">
							{weight(item.weightGrams)}
						</span>
					)}
					{item.priceCents != null && (
						<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-500">
							{price(item.priceCents)}
						</span>
					)}
					{item.category && (
						<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-50 text-gray-600">
							{item.category}
						</span>
					)}
				</div>
				<button
					type="button"
					onClick={onAdd}
					className="bg-gray-700 text-white rounded-lg px-3 py-1.5 text-xs font-medium hover:bg-gray-800 transition-colors"
				>
					Add
				</button>
			</div>
		</div>
	);
}

// ── List Row ───────────────────────────────────────────────────────────

function ListRow({ item, onAdd, onCardClick, weight, price }: CardProps) {
	return (
		<div
			className="bg-white rounded-xl border border-gray-100 flex items-center gap-4 px-4 py-3 cursor-pointer hover:border-gray-200 hover:shadow-sm transition-all"
			onClick={onCardClick}
		>
			{/* Thumbnail */}
			<div
				className="w-12 h-12 rounded-lg shrink-0 overflow-hidden"
				style={{
					backgroundColor: item.imageUrl
						? ((item as Record<string, unknown>).dominantColor as string) ||
							"#f3f4f6"
						: undefined,
				}}
			>
				{item.imageUrl ? (
					<GearImage src={item.imageUrl} alt={`${item.brand} ${item.model}`} />
				) : (
					<div className="w-full h-full bg-gray-50 flex items-center justify-center">
						<svg
							className="w-5 h-5 text-gray-300"
							fill="none"
							stroke="currentColor"
							viewBox="0 0 24 24"
						>
							<path
								strokeLinecap="round"
								strokeLinejoin="round"
								strokeWidth={1.5}
								d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
							/>
						</svg>
					</div>
				)}
			</div>

			{/* Info */}
			<div className="flex-1 min-w-0">
				<p className="text-sm font-semibold text-gray-900 truncate">
					{item.brand} {item.model}
				</p>
				<div className="flex flex-wrap gap-1.5 mt-1">
					{item.weightGrams != null && (
						<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-400">
							{weight(item.weightGrams)}
						</span>
					)}
					{item.priceCents != null && (
						<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-500">
							{price(item.priceCents)}
						</span>
					)}
					{item.category && (
						<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-50 text-gray-600">
							{item.category}
						</span>
					)}
				</div>
			</div>

			{/* Add button */}
			<button
				type="button"
				onClick={onAdd}
				className="bg-gray-700 text-white rounded-lg px-3 py-1.5 text-xs font-medium hover:bg-gray-800 transition-colors shrink-0"
			>
				Add
			</button>
		</div>
	);
}

// ── Skeletons ──────────────────────────────────────────────────────────

function SkeletonGrid() {
	return (
		<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
			{[1, 2, 3, 4, 5, 6].map((id) => (
				<div
					key={id}
					className="bg-white rounded-xl border border-gray-100 overflow-hidden animate-pulse"
				>
					<div className="aspect-[4/3] bg-gray-100" />
					<div className="p-4 space-y-2">
						<div className="h-3 bg-gray-100 rounded w-16" />
						<div className="h-4 bg-gray-100 rounded w-32" />
						<div className="flex gap-1.5">
							<div className="h-5 bg-gray-100 rounded-full w-14" />
							<div className="h-5 bg-gray-100 rounded-full w-14" />
						</div>
						<div className="h-7 bg-gray-100 rounded-lg w-12 mt-2" />
					</div>
				</div>
			))}
		</div>
	);
}

function SkeletonList() {
	return (
		<div className="space-y-2">
			{[1, 2, 3, 4, 5, 6].map((id) => (
				<div
					key={id}
					className="bg-white rounded-xl border border-gray-100 flex items-center gap-4 px-4 py-3 animate-pulse"
				>
					<div className="w-12 h-12 rounded-lg bg-gray-100 shrink-0" />
					<div className="flex-1 space-y-2">
						<div className="h-4 bg-gray-100 rounded w-48" />
						<div className="flex gap-1.5">
							<div className="h-5 bg-gray-100 rounded-full w-14" />
							<div className="h-5 bg-gray-100 rounded-full w-14" />
						</div>
					</div>
					<div className="h-7 bg-gray-100 rounded-lg w-12" />
				</div>
			))}
		</div>
	);
}

// ── Empty State ────────────────────────────────────────────────────────

function EmptyState({
	hasQuery,
	onAddManually,
}: {
	hasQuery: boolean;
	onAddManually: () => void;
}) {
	return (
		<div className="flex flex-col items-center justify-center py-20 px-4">
			<svg
				className="w-12 h-12 text-gray-300 mb-4"
				fill="none"
				stroke="currentColor"
				viewBox="0 0 24 24"
			>
				<path
					strokeLinecap="round"
					strokeLinejoin="round"
					strokeWidth={1.5}
					d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
				/>
			</svg>
			<p className="text-sm text-gray-500 text-center mb-3">
				{hasQuery
					? "No items found matching your search"
					: "Search the catalog to find gear"}
			</p>
			<button
				type="button"
				onClick={onAddManually}
				className="text-sm text-gray-500 hover:text-gray-700 underline underline-offset-2"
			>
				{hasQuery ? "Can't find it? Add manually" : "Add Manually"}
			</button>
		</div>
	);
}