"use client";

import { Plus, X } from "lucide-react";
import { useState } from "react";
import { giveBadge, removeBadge } from "@/actions/users";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { useServerAction } from "@/hooks/use-server-action";

interface BadgeInfo {
	id: number;
	badgeCode: string;
}

interface UserBadgesSectionProps {
	userId: number;
	badges: BadgeInfo[];
}

export function UserBadgesSection({ userId, badges }: UserBadgesSectionProps) {
	const { isPending, run } = useServerAction();
	const [newBadge, setNewBadge] = useState("");

	function handleAddBadge() {
		if (!newBadge.trim()) return;
		run(() => giveBadge({ userId, badgeCode: newBadge.trim() }), {
			successMessage: `Badge "${newBadge.trim()}" added.`,
			onSuccess: () => setNewBadge(""),
		});
	}

	function handleRemoveBadge(badgeCode: string) {
		run(() => removeBadge({ userId, badgeCode }), {
			successMessage: `Badge "${badgeCode}" removed.`,
		});
	}

	return (
		<Card>
			<CardHeader>
				<CardTitle>Badges ({badges.length})</CardTitle>
			</CardHeader>
			<CardContent className="space-y-3">
				<div className="flex gap-2">
					<Input
						value={newBadge}
						onChange={(e) => setNewBadge(e.target.value)}
						placeholder="Badge code..."
						onKeyDown={(e) => e.key === "Enter" && handleAddBadge()}
					/>
					<Button size="icon" onClick={handleAddBadge} disabled={isPending}>
						<Plus className="h-4 w-4" />
					</Button>
				</div>

				<div className="flex flex-wrap gap-2">
					{badges.map((badge) => (
						<div
							key={badge.id}
							className="group flex items-center gap-1.5 rounded-md border bg-card px-2 py-1 text-sm hover:border-destructive/50 transition-colors"
						>
							<img
								src={
									process.env.NEXT_PUBLIC_BADGE_URL
										? `${process.env.NEXT_PUBLIC_BADGE_URL}/${badge.badgeCode}.gif`
										: `/swf/c_images/album1584/${badge.badgeCode}.gif`
								}
								alt={badge.badgeCode}
								className="h-5 w-5"
								onError={(e) => {
									(e.target as HTMLImageElement).style.display = "none";
								}}
							/>
							<span>{badge.badgeCode}</span>
							<button
								type="button"
								onClick={() => handleRemoveBadge(badge.badgeCode)}
								disabled={isPending}
								className="ml-0.5 rounded-full p-0.5 opacity-0 group-hover:opacity-100 hover:bg-destructive/10 text-destructive transition-opacity disabled:opacity-50"
								title={`Remove ${badge.badgeCode}`}
							>
								<X className="h-3 w-3" />
							</button>
						</div>
					))}
					{badges.length === 0 && (
						<p className="text-sm text-muted-foreground">No badges</p>
					)}
				</div>
			</CardContent>
		</Card>
	);
}