eve-signaler/src/components/SignatureListItem.tsx

import { Badge } from "@/components/ui/badge";
import { Zap, Shield, Coins, HelpCircle, Clock, AlertTriangle, Skull } from "lucide-react";

interface SignatureItem {
	collectionId: string;
	collectionName: string;
	id: string;
	identifier: string;
	signame: string;
	sysid: string;
	system: string;
	type: string;
	updated?: string;
	created?: string;
	dangerous?: boolean;
}

interface SignatureListItemProps {
	signature: SignatureItem;
}

const SignatureListItem = ({ signature }: SignatureListItemProps) => {
	const getTypeIcon = (type: string) => {
		const lowerType = type.toLowerCase();
		if (lowerType.includes("combat")) return <Zap className="h-4 w-4" />;
		if (lowerType.includes("exploration") || lowerType.includes("relic") || lowerType.includes("data"))
			return <Shield className="h-4 w-4" />;
		if (lowerType.includes("ore") || lowerType.includes("gas")) return <Coins className="h-4 w-4" />;
		return <HelpCircle className="h-4 w-4" />;
	};

	const getTypeColor = (type: string, dangerous: boolean = false) => {
		if (dangerous) return "bg-red-900/50 text-red-200 border-red-500";

		const lowerType = type.toLowerCase();
		if (lowerType.includes("combat")) return "bg-red-900/30 text-red-300 border-red-600";
		if (lowerType.includes("exploration") || lowerType.includes("relic") || lowerType.includes("data"))
			return "bg-blue-900/30 text-blue-300 border-blue-600";
		if (lowerType.includes("ore") || lowerType.includes("gas"))
			return "bg-yellow-900/30 text-yellow-300 border-yellow-600";
		if (!type || type === "") return "bg-slate-700 text-slate-300 border-slate-600";
		return "bg-purple-900/30 text-purple-300 border-purple-600";
	};

	const isOld = () => {
		if (!signature.updated) return false;
		const updatedTime = new Date(signature.updated);
		if (isNaN(updatedTime.getTime())) return false; // Handle invalid date
		const now = new Date();
		const diffHours = (now.getTime() - updatedTime.getTime()) / (1000 * 60 * 60);
		return diffHours > 3;
	};

	const formatDate = (dateStr: string | undefined) => {
		if (!dateStr) return "Unknown";
		const date = new Date(dateStr);
		if (isNaN(date.getTime())) return "Invalid date"; // Handle invalid date

		const now = new Date();
		const diffMs = now.getTime() - date.getTime();

		// Handle cases where the time difference is very small or negative
		if (diffMs < 0) return "Just now";

		const diffMinutes = Math.max(0, Math.floor(diffMs / (1000 * 60)));
		const diffHours = Math.max(0, Math.floor(diffMs / (1000 * 60 * 60)));

		if (diffMinutes === 0) {
			return "Just now";
		} else if (diffMinutes < 60) {
			return `${diffMinutes}m ago`;
		} else if (diffHours < 24) {
			return `${diffHours}h ago`;
		} else {
			return date.toLocaleString();
		}
	};

	const oldEntry = isOld();

	return (
		<div
			className={`flex items-center justify-between p-4 border-b border-slate-700 hover:bg-slate-800/40 transition-colors ${
				oldEntry ? "opacity-50" : ""
			}`}
		>
			<div className="flex items-center gap-4 flex-1">
				{/* Type Badge - Most Important */}
				<Badge
					variant="outline"
					className={`${getTypeColor(
						signature.type,
						signature.dangerous
					)} px-3 py-1 text-sm font-semibold flex items-center gap-2 min-w-[120px] justify-center`}
				>
					{signature.dangerous ? <Skull className="h-4 w-4 text-red-400 animate-pulse" /> : getTypeIcon(signature.type)}
					{signature.type || "Unknown Type"}
				</Badge>

				{/* Signature Name and ID */}
				<div className="flex-1 min-w-[200px]">
					<div className="flex items-center gap-2">
						<span className="font-mono text-sm text-slate-400 min-w-[60px]">{signature.id}</span>
						<h3 className="text-white font-medium flex items-center gap-2">
							{signature.signame || "Unnamed Signature"}
							{signature.dangerous && (
								<Badge variant="outline" className="bg-red-900/50 text-red-200 border-red-500 px-2 py-0.5 text-xs">
									DANGEROUS
								</Badge>
							)}
						</h3>
					</div>
					<div className="text-xs text-slate-400 font-mono ml-[60px]">{signature.identifier}</div>
				</div>

				{/* Dates */}
				<div className="flex flex-col gap-1 text-sm text-slate-400 min-w-[200px]">
					{signature.updated && (
						<div className="flex items-center gap-2">
							{oldEntry && <AlertTriangle className="h-4 w-4 text-yellow-500" />}
							<Clock className="h-4 w-4" />
							<span>Updated: {formatDate(signature.updated)}</span>
						</div>
					)}
					{signature.created && (
						<div className="flex items-center gap-2 text-xs text-slate-500">
							<span>Created: {formatDate(signature.created)}</span>
						</div>
					)}
				</div>
			</div>
		</div>
	);
};

export default SignatureListItem;