GearBox/src/client/routes/global-items/$globalItemId.tsx

import { createFileRoute, Link } from "@tanstack/react-router";
import { useFormatters } from "../../hooks/useFormatters";
import { useGlobalItem } from "../../hooks/useGlobalItems";

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

function GlobalItemDetail() {
	const { globalItemId } = Route.useParams();
	const { data: item, isLoading, error } = useGlobalItem(Number(globalItemId));
	const { weight, price } = useFormatters();

	if (isLoading) {
		return (
			<div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
				<div className="animate-pulse space-y-6">
					<div className="h-4 bg-gray-100 rounded w-24" />
					<div className="aspect-[16/9] bg-gray-100 rounded-xl" />
					<div className="space-y-3">
						<div className="h-3 bg-gray-100 rounded w-20" />
						<div className="h-6 bg-gray-100 rounded w-48" />
						<div className="h-4 bg-gray-100 rounded w-full" />
					</div>
				</div>
			</div>
		);
	}

	if (error || !item) {
		return (
			<div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
				<Link
					to="/global-items"
					className="text-sm text-gray-400 hover:text-gray-600 transition-colors"
				>
					&larr; Back to catalog
				</Link>
				<div className="text-center py-16">
					<p className="text-sm text-gray-500">Global item not found</p>
				</div>
			</div>
		);
	}

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

			{/* Image */}
			<div className="aspect-[16/9] bg-gray-50 rounded-xl overflow-hidden mb-6">
				{item.imageUrl ? (
					<img
						src={item.imageUrl}
						alt={`${item.brand} ${item.model}`}
						className="w-full h-full object-cover"
					/>
				) : (
					<div className="w-full h-full flex flex-col items-center justify-center">
						<svg
							className="w-16 h-16 text-gray-300"
							fill="none"
							stroke="currentColor"
							viewBox="0 0 24 24"
							strokeWidth={1.5}
						>
							<path d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
						</svg>
					</div>
				)}
			</div>

			{/* Header */}
			<div className="mb-6">
				<p className="text-xs font-medium text-gray-400 uppercase tracking-wide mb-1">
					{item.brand}
				</p>
				<h1 className="text-2xl font-bold text-gray-900 mb-3">{item.model}</h1>

				{/* Owner count badge */}
				<div className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-amber-50 text-amber-600 rounded-full text-xs font-medium">
					<svg
						className="w-3.5 h-3.5"
						fill="none"
						stroke="currentColor"
						viewBox="0 0 24 24"
					>
						<path
							strokeLinecap="round"
							strokeLinejoin="round"
							strokeWidth={2}
							d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"
						/>
					</svg>
					{item.ownerCount === 0
						? "Be the first to add this"
						: item.ownerCount === 1
							? "1 user owns this"
							: `${item.ownerCount} users own this`}
				</div>
			</div>

			{/* Specs */}
			<div className="flex flex-wrap gap-2 mb-6">
				{item.weightGrams != null && (
					<span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-50 text-blue-500">
						{weight(item.weightGrams)}
					</span>
				)}
				{item.priceCents != null && (
					<span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-50 text-green-500">
						{price(item.priceCents)}
					</span>
				)}
				{item.category && (
					<span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-50 text-gray-600">
						{item.category}
					</span>
				)}
			</div>

			{/* Add to Collection */}
			<div className="mb-6">
				<button
					type="button"
					onClick={() => console.log("Add to collection — wired in Phase 22")}
					className="bg-gray-700 text-white rounded-lg px-5 py-2.5 text-sm font-medium hover:bg-gray-800 transition-colors"
				>
					Add to Collection
				</button>
			</div>

			{/* Description */}
			{item.description && (
				<div className="prose prose-sm prose-gray max-w-none">
					<p className="text-gray-600 leading-relaxed">{item.description}</p>
				</div>
			)}
		</div>
	);
}