import type { OracleId, ScryfallId } from "@/lib/scryfall-types";
import { usePrintings } from "@/lib/usePrintings";

interface PrintingSelectorProps {
	oracleId: OracleId;
	currentScryfallId: ScryfallId;
	onSelect: (scryfallId: ScryfallId) => void;
	onHover?: (scryfallId: ScryfallId | null) => void;
	disabled?: boolean;
}

export function PrintingSelector({
	oracleId,
	currentScryfallId,
	onSelect,
	onHover,
	disabled = false,
}: PrintingSelectorProps) {
	const { printings, isLoading } = usePrintings(oracleId);

	if (isLoading) {
		return (
			<div>
				<div className="block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-2">
					Printing
				</div>
				<div className="max-h-40 overflow-y-auto border border-gray-300 dark:border-zinc-600 rounded-lg p-2 bg-gray-50 dark:bg-zinc-800/50">
					<div className="flex flex-wrap gap-1.5">
						{Array.from({ length: 4 }).map((_, i) => (
							<div
								// biome-ignore lint/suspicious/noArrayIndexKey: static skeleton
								key={i}
								className="h-7 w-28 bg-gray-300 dark:bg-zinc-700 rounded animate-pulse"
							/>
						))}
					</div>
				</div>
			</div>
		);
	}

	if (printings.length <= 1) return null;

	return (
		<div>
			<div className="block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-2">
				Printing ({printings.length})
			</div>
			{/* biome-ignore lint/a11y/noStaticElementInteractions: hover preview is supplemental, buttons handle interaction */}
			<div
				onMouseLeave={() => onHover?.(currentScryfallId)}
				className="max-h-40 overflow-y-auto border border-gray-300 dark:border-zinc-600 rounded-lg p-2 bg-gray-50 dark:bg-zinc-800/50"
			>
				<div className="flex flex-wrap gap-1.5">
					{printings.map((printing) => {
						const isCurrent = printing.id === currentScryfallId;
						return (
							<button
								key={printing.id}
								type="button"
								disabled={disabled || isCurrent}
								onMouseEnter={() => onHover?.(printing.id)}
								onClick={() => onSelect(printing.id)}
								className={`px-2.5 py-1 text-sm rounded transition-colors whitespace-nowrap ${
									isCurrent
										? "bg-cyan-400 text-gray-900 font-medium"
										: "bg-gray-200 dark:bg-zinc-700 text-gray-900 dark:text-zinc-200 hover:bg-gray-300 dark:hover:bg-zinc-600 disabled:opacity-50 disabled:cursor-not-allowed"
								}`}
							>
								{printing.set_name}
								{printing.collector_number && (
									<span className="ml-1 opacity-70">
										#{printing.collector_number}
									</span>
								)}
							</button>
						);
					})}
				</div>
			</div>
		</div>
	);
}