<script lang="ts">
	import { User, TrendingUp, Target } from 'lucide-svelte';
	import Badge from '$lib/components/ui/Badge.svelte';
	import type { PlayerMeta } from '$lib/types';

	interface Props {
		player: PlayerMeta;
		showStats?: boolean;
	}

	let { player, showStats = true }: Props = $props();

	const kd = player.deaths > 0 ? (player.kills / player.deaths).toFixed(2) : player.kills.toFixed(2);
	const winRate = player.wins + player.losses > 0
		? ((player.wins / (player.wins + player.losses)) * 100).toFixed(1)
		: '0.0';
</script>

<a
	href={`/player/${player.id}`}
	class="block overflow-hidden rounded-lg border border-base-300 bg-base-100 shadow-md transition-all hover:scale-[1.02] hover:shadow-xl"
>
	<!-- Header -->
	<div class="bg-gradient-to-r from-primary/20 to-secondary/20 p-4">
		<div class="flex items-center gap-3">
			<div class="flex h-12 w-12 items-center justify-center rounded-full bg-base-100">
				<User class="h-6 w-6 text-primary" />
			</div>
			<div class="flex-1 min-w-0">
				<h3 class="truncate text-lg font-bold text-base-content">{player.name}</h3>
				<p class="text-sm text-base-content/60">ID: {player.id}</p>
			</div>
		</div>
	</div>

	{#if showStats}
		<!-- Stats -->
		<div class="grid grid-cols-3 gap-4 p-4">
			<div class="text-center">
				<div class="mb-1 flex items-center justify-center">
					<Target class="mr-1 h-4 w-4 text-primary" />
				</div>
				<div class="text-xl font-bold text-base-content">{kd}</div>
				<div class="text-xs text-base-content/60">K/D</div>
			</div>

			<div class="text-center">
				<div class="mb-1 flex items-center justify-center">
					<TrendingUp class="mr-1 h-4 w-4 text-success" />
				</div>
				<div class="text-xl font-bold text-base-content">{winRate}%</div>
				<div class="text-xs text-base-content/60">Win Rate</div>
			</div>

			<div class="text-center">
				<div class="mb-1 flex items-center justify-center">
					<User class="mr-1 h-4 w-4 text-info" />
				</div>
				<div class="text-xl font-bold text-base-content">{player.wins + player.losses}</div>
				<div class="text-xs text-base-content/60">Matches</div>
			</div>
		</div>

		<!-- Footer -->
		<div class="border-t border-base-300 bg-base-200 px-4 py-3">
			<div class="flex items-center justify-between text-sm">
				<span class="text-base-content/60">Record:</span>
				<div class="flex gap-2">
					<Badge variant="success" size="sm">{player.wins}W</Badge>
					<Badge variant="error" size="sm">{player.losses}L</Badge>
				</div>
			</div>
		</div>
	{/if}
</a>
