import { useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { LucideIcon } from "../lib/iconData";

const STATUS_ICONS = {
	researching: "search",
	ordered: "truck",
	arrived: "check",
} as const;

type CandidateStatus = keyof typeof STATUS_ICONS;

interface StatusBadgeProps {
	status: CandidateStatus;
	onStatusChange: (status: CandidateStatus) => void;
}

export function StatusBadge({ status, onStatusChange }: StatusBadgeProps) {
	const { t } = useTranslation("threads");
	const [isOpen, setIsOpen] = useState(false);
	const containerRef = useRef<HTMLDivElement>(null);

	const STATUS_LABELS: Record<CandidateStatus, string> = {
		researching: t("statusBadge.researching"),
		ordered: t("statusBadge.ordered"),
		arrived: t("statusBadge.arrived"),
	};

	useEffect(() => {
		if (!isOpen) return;

		function handleClickOutside(e: MouseEvent) {
			if (
				containerRef.current &&
				!containerRef.current.contains(e.target as Node)
			) {
				setIsOpen(false);
			}
		}

		function handleEscape(e: KeyboardEvent) {
			if (e.key === "Escape") {
				setIsOpen(false);
			}
		}

		document.addEventListener("mousedown", handleClickOutside);
		document.addEventListener("keydown", handleEscape);
		return () => {
			document.removeEventListener("mousedown", handleClickOutside);
			document.removeEventListener("keydown", handleEscape);
		};
	}, [isOpen]);

	return (
		<div ref={containerRef} className="relative">
			<button
				type="button"
				onClick={(e) => {
					e.stopPropagation();
					setIsOpen((prev) => !prev);
				}}
				className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-600 hover:bg-gray-200 transition-colors cursor-pointer"
			>
				<LucideIcon name={STATUS_ICONS[status]} size={14} className="text-gray-500" />
				{STATUS_LABELS[status]}
			</button>

			{isOpen && (
				<div className="absolute right-0 top-full mt-1 z-20 bg-white border border-gray-200 rounded-lg shadow-lg py-1 min-w-[150px]">
					{(Object.keys(STATUS_ICONS) as CandidateStatus[]).map((key) => {
						const isActive = key === status;
						return (
							<button
								key={key}
								type="button"
								onClick={(e) => {
									e.stopPropagation();
									onStatusChange(key);
									setIsOpen(false);
								}}
								className={`w-full flex items-center gap-2 px-3 py-1.5 text-sm text-left hover:bg-gray-50 transition-colors ${
									isActive ? "bg-gray-50 font-medium" : ""
								}`}
							>
								<LucideIcon
									name={STATUS_ICONS[key]}
									size={14}
									className={isActive ? "text-gray-700" : "text-gray-400"}
								/>
								<span className={isActive ? "text-gray-900" : "text-gray-600"}>
									{STATUS_LABELS[key]}
								</span>
								{isActive && (
									<LucideIcon
										name="check"
										size={14}
										className="ml-auto text-gray-500"
									/>
								)}
							</button>
						);
					})}
				</div>
			)}
		</div>
	);
}