import { formatCents } from "@/lib/drinkkaart";

interface TransactionRow {
	id: string;
	type: "deduction" | "reversal";
	amountCents: number;
	balanceBefore: number;
	balanceAfter: number;
	note: string | null;
	reversedBy: string | null;
	reverses: string | null;
	createdAt: Date;
}

interface TransactionHistoryProps {
	transactions: TransactionRow[];
}

export function TransactionHistory({ transactions }: TransactionHistoryProps) {
	if (transactions.length === 0) {
		return <p className="text-sm text-white/40">Nog geen transacties.</p>;
	}

	return (
		<ul className="space-y-2">
			{transactions.map((t) => {
				const date = new Date(t.createdAt).toLocaleString("nl-BE", {
					day: "numeric",
					month: "short",
					hour: "2-digit",
					minute: "2-digit",
				});

				const isReversal = t.type === "reversal";
				const isReversed = !!t.reversedBy;

				return (
					<li
						key={t.id}
						className={`flex items-start justify-between rounded-lg border px-4 py-3 ${
							isReversal
								? "border-green-400/20 bg-green-400/5"
								: isReversed
									? "border-white/5 bg-white/3 opacity-60"
									: "border-white/10 bg-white/5"
						}`}
					>
						<div>
							<div className="flex items-center gap-2">
								<span
									className={`font-medium ${isReversal ? "text-green-400" : "text-red-400"}`}
								>
									{isReversal ? "+ " : "− "}
									{formatCents(t.amountCents)}
								</span>
								{isReversal && (
									<span className="rounded-full border border-green-400/30 bg-green-400/10 px-2 py-0.5 text-green-300 text-xs">
										↩ Teruggedraaid
									</span>
								)}
								{isReversed && !isReversal && (
									<span className="rounded-full border border-white/10 bg-white/5 px-2 py-0.5 text-white/40 text-xs">
										Teruggedraaid
									</span>
								)}
							</div>
							{t.note && (
								<p className="mt-0.5 text-white/50 text-xs">{t.note}</p>
							)}
						</div>
						<span className="text-sm text-white/50 tabular-nums">{date}</span>
					</li>
				);
			})}
		</ul>
	);
}