GearBox/src/client/components/CandidateCard.tsx

import { useNavigate } from "@tanstack/react-router";
import { useTranslation } from "react-i18next";
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 { GearImage, imageContainerBg } from "./GearImage";
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;
	imageUrl?: string | null;
	productUrl?: string | null;
	dominantColor?: string | null;
	cropZoom?: number | null;
	cropX?: number | null;
	cropY?: number | 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: _imageFilename,
	imageUrl,
	productUrl,
	dominantColor,
	cropZoom,
	cropX,
	cropY,
	threadId,
	isActive,
	status,
	onStatusChange,
	pros,
	cons,
	rank,
	delta,
}: CandidateCardProps) {
	const { t } = useTranslation("threads");
	const { weight, price } = useFormatters();
	const navigate = useNavigate();
	const openConfirmDeleteCandidate = useUIStore(
		(s) => s.openConfirmDeleteCandidate,
	);
	const openResolveDialog = useUIStore((s) => s.openResolveDialog);
	const openExternalLink = useUIStore((s) => s.openExternalLink);

	return (
		<button
			type="button"
			onClick={() =>
				navigate({
					to: "/threads/$threadId/candidates/$candidateId",
					params: { threadId: String(threadId), candidateId: String(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={t("candidateCard.pickAsWinner")}
				>
					<LucideIcon name="trophy" size={12} />
					{t("candidateCard.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={t("candidateCard.deleteCandidate")}
			>
				<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={t("candidateCard.openProductLink")}
				>
					<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] overflow-hidden"
				style={{
					backgroundColor: imageUrl
						? imageContainerBg(dominantColor)
						: undefined,
				}}
			>
				{imageUrl ? (
					<GearImage
						src={imageUrl}
						alt={name}
						dominantColor={dominantColor}
						cropZoom={cropZoom}
						cropX={cropX}
						cropY={cropY}
					/>
				) : (
					<div className="w-full h-full bg-gray-50 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">
							{t("candidateCard.prosCons")}
						</span>
					)}
				</div>
			</div>
		</button>
	);
}