GearBox/src/client/components/CandidateCard.tsx

import { useFormatters } from "../hooks/useFormatters";
import type { CandidateDelta } from "../hooks/useImpactDeltas";
import { LucideIcon } from "../lib/iconData";
import { useUIStore } from "../stores/uiStore";
import { RankBadge } from "./CandidateListItem";
import { ImpactDeltaBadge } from "./ImpactDeltaBadge";
import { StatusBadge } from "./StatusBadge";

interface CandidateCardProps {
	id: number;
	name: string;
	weightGrams: number | null;
	priceCents: number | null;
	categoryName: string;
	categoryIcon: string;
	imageFilename: string | null;
	productUrl?: string | null;
	threadId: number;
	isActive: boolean;
	status: "researching" | "ordered" | "arrived";
	onStatusChange: (status: "researching" | "ordered" | "arrived") => void;
	pros?: string | null;
	cons?: string | null;
	rank?: number;
	delta?: CandidateDelta;
}

export function CandidateCard({
	id,
	name,
	weightGrams,
	priceCents,
	categoryName,
	categoryIcon,
	imageFilename,
	productUrl,
	threadId,
	isActive,
	status,
	onStatusChange,
	pros,
	cons,
	rank,
	delta,
}: CandidateCardProps) {
	const { weight, price } = useFormatters();
	const openCandidateEditPanel = useUIStore((s) => s.openCandidateEditPanel);
	const openConfirmDeleteCandidate = useUIStore(
		(s) => s.openConfirmDeleteCandidate,
	);
	const openResolveDialog = useUIStore((s) => s.openResolveDialog);
	const openExternalLink = useUIStore((s) => s.openExternalLink);

	return (
		<button
			type="button"
			onClick={() => openCandidateEditPanel(id)}
			className="relative w-full text-left bg-white rounded-xl border border-gray-100 hover:border-gray-200 hover:shadow-sm transition-all overflow-hidden group"
		>
			{/* Hover-reveal action buttons */}
			{isActive && (
				<span
					role="button"
					tabIndex={0}
					onClick={(e) => {
						e.stopPropagation();
						openResolveDialog(threadId, id);
					}}
					onKeyDown={(e) => {
						if (e.key === "Enter" || e.key === " ") {
							e.stopPropagation();
							openResolveDialog(threadId, id);
						}
					}}
					className="absolute top-2 left-2 z-10 px-2 py-0.5 flex items-center gap-1 rounded-full text-xs font-medium bg-amber-100/90 text-amber-700 hover:bg-amber-200 opacity-0 group-hover:opacity-100 transition-all cursor-pointer"
					title="Pick as winner"
				>
					<LucideIcon name="trophy" size={12} />
					Winner
				</span>
			)}
			<span
				role="button"
				tabIndex={0}
				onClick={(e) => {
					e.stopPropagation();
					openConfirmDeleteCandidate(id);
				}}
				onKeyDown={(e) => {
					if (e.key === "Enter" || e.key === " ") {
						e.stopPropagation();
						openConfirmDeleteCandidate(id);
					}
				}}
				className={`absolute top-2 ${productUrl ? "right-10" : "right-2"} z-10 w-6 h-6 flex items-center justify-center rounded-full bg-gray-100/80 text-gray-400 hover:bg-red-100 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-all cursor-pointer`}
				title="Delete candidate"
			>
				<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="M6 18L18 6M6 6l12 12"
					/>
				</svg>
			</span>
			{productUrl && (
				<span
					role="button"
					tabIndex={0}
					onClick={(e) => {
						e.stopPropagation();
						openExternalLink(productUrl);
					}}
					onKeyDown={(e) => {
						if (e.key === "Enter" || e.key === " ") {
							e.stopPropagation();
							openExternalLink(productUrl);
						}
					}}
					className="absolute top-2 right-2 z-10 w-6 h-6 flex items-center justify-center rounded-full bg-gray-100/80 text-gray-400 hover:bg-gray-200 hover:text-gray-600 opacity-0 group-hover:opacity-100 transition-all cursor-pointer"
					title="Open product link"
				>
					<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="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3"
						/>
					</svg>
				</span>
			)}
			<div className="aspect-[4/3] bg-gray-50">
				{imageFilename ? (
					<img
						src={`/uploads/${imageFilename}`}
						alt={name}
						className="w-full h-full object-cover"
					/>
				) : (
					<div className="w-full h-full flex flex-col items-center justify-center">
						<LucideIcon
							name={categoryIcon}
							size={36}
							className="text-gray-400"
						/>
					</div>
				)}
			</div>
			<div className="p-4">
				<h3 className="text-sm font-semibold text-gray-900 mb-2 truncate">
					{name}
				</h3>
				<div className="flex flex-wrap gap-1.5">
					{rank != null && <RankBadge rank={rank} />}
					{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(weightGrams)}
						</span>
					)}
					<ImpactDeltaBadge delta={delta} type="weight" formatFn={weight} />
					{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(priceCents)}
						</span>
					)}
					<ImpactDeltaBadge delta={delta} type="price" formatFn={price} />
					<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-50 text-gray-600">
						<LucideIcon
							name={categoryIcon}
							size={14}
							className="inline-block mr-1 text-gray-500"
						/>{" "}
						{categoryName}
					</span>
					<StatusBadge status={status} onStatusChange={onStatusChange} />
					{(pros || cons) && (
						<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-purple-50 text-purple-700">
							+/- Notes
						</span>
					)}
				</div>
			</div>
		</button>
	);
}