import { createFileRoute, Link } from "@tanstack/react-router";
import { useEffect, useState } from "react";
import { GlobalItemCard } from "../../components/GlobalItemCard";
import { useGlobalItems } from "../../hooks/useGlobalItems";

export const Route = createFileRoute("/global-items/")({
	component: GlobalItemsCatalog,
});

function GlobalItemsCatalog() {
	const [searchInput, setSearchInput] = useState("");
	const [debouncedQuery, setDebouncedQuery] = useState("");

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

	const { data: items, isLoading } = useGlobalItems(
		debouncedQuery || undefined,
	);

	return (
		<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
			<div className="mb-6">
				<Link
					to="/"
					className="text-sm text-gray-400 hover:text-gray-600 transition-colors"
				>
					&larr; Dashboard
				</Link>
			</div>

			<div className="mb-8">
				<h1 className="text-2xl font-bold text-gray-900 mb-1">
					Global Gear Catalog
				</h1>
				<p className="text-sm text-gray-500">
					Browse and discover gear from the shared catalog
				</p>
			</div>

			{/* Search */}
			<div className="mb-8">
				<div className="relative max-w-md">
					<svg
						className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"
						fill="none"
						stroke="currentColor"
						viewBox="0 0 24 24"
					>
						<path
							strokeLinecap="round"
							strokeLinejoin="round"
							strokeWidth={2}
							d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
						/>
					</svg>
					<input
						type="text"
						value={searchInput}
						onChange={(e) => setSearchInput(e.target.value)}
						placeholder="Search gear by brand or model..."
						className="w-full pl-10 pr-4 py-2.5 bg-white border border-gray-200 rounded-lg text-sm text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-200 focus:border-gray-300 transition-colors"
					/>
					{searchInput && (
						<button
							type="button"
							onClick={() => setSearchInput("")}
							className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
						>
							<svg
								className="w-4 h-4"
								fill="none"
								stroke="currentColor"
								viewBox="0 0 24 24"
							>
								<path
									strokeLinecap="round"
									strokeLinejoin="round"
									strokeWidth={2}
									d="M6 18L18 6M6 6l12 12"
								/>
							</svg>
						</button>
					)}
				</div>
			</div>

			{/* Results */}
			{isLoading ? (
				<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
					{["a", "b", "c", "d", "e", "f"].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>
						</div>
					))}
				</div>
			) : items && items.length > 0 ? (
				<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
					{items.map((item) => (
						<GlobalItemCard key={item.id} {...item} />
					))}
				</div>
			) : (
				<div className="text-center py-16">
					<svg
						className="w-12 h-12 text-gray-300 mx-auto 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">
						{debouncedQuery
							? "No items found matching your search"
							: "No items in the global catalog yet"}
					</p>
				</div>
			)}
		</div>
	);
}