<script lang="ts">
	import { Trophy, Target, Flame, AlertCircle } from 'lucide-svelte';
	import Card from '$lib/components/ui/Card.svelte';
	import Badge from '$lib/components/ui/Badge.svelte';
	import DataTable from '$lib/components/data-display/DataTable.svelte';
	import BarChart from '$lib/components/charts/BarChart.svelte';
	import type { PageData } from './$types';

	let { data }: { data: PageData } = $props();
	const { match } = data;

	// Check if we have player data to display
	const hasPlayerData = match.players && match.players.length > 0;

	// Get unique team IDs dynamically
	const uniqueTeamIds = match.players ? [...new Set(match.players.map((p) => p.team_id))] : [];
	const firstTeamId = uniqueTeamIds[0] ?? 2;
	const secondTeamId = uniqueTeamIds[1] ?? 3;

	// Calculate additional stats for players
	const playersWithStats = hasPlayerData
		? (match.players || []).map((player) => {
				const kd =
					player.deaths > 0 ? (player.kills / player.deaths).toFixed(2) : player.kills.toFixed(2);
				const hsPercent =
					player.kills > 0 ? ((player.headshot / player.kills) * 100).toFixed(1) : '0.0';
				const adr = player.dmg_enemy
					? (player.dmg_enemy / (match.max_rounds || 24)).toFixed(1)
					: '0.0';

				return {
					...player,
					kd: parseFloat(kd),
					hsPercent: parseFloat(hsPercent),
					adr: parseFloat(adr),
					totalMultiKills:
						(player.mk_2 || 0) + (player.mk_3 || 0) + (player.mk_4 || 0) + (player.mk_5 || 0)
				};
			})
		: [];

	// Sort by kills descending
	const sortedPlayers = hasPlayerData ? playersWithStats.sort((a, b) => b.kills - a.kills) : [];

	// Player color mapping for scoreboard indicators
	const playerColors: Record<string, string> = {
		green: '#22c55e',
		yellow: '#eab308',
		purple: '#a855f7',
		blue: '#3b82f6',
		orange: '#f97316',
		grey: '#6b7280'
	};

	// Prepare data table columns
	const detailsColumns = [
		{
			key: 'avatar' as keyof (typeof playersWithStats)[0],
			label: '',
			sortable: false,
			align: 'center' as const,
			render: (value: string | number | boolean | undefined, row: (typeof playersWithStats)[0]) => {
				const avatarUrl = row.avatar || '';
				return `<img src="${avatarUrl}" alt="${row.name}" class="h-10 w-10 rounded-full border-2 border-base-300" />`;
			}
		},
		{
			key: 'name' as keyof (typeof playersWithStats)[0],
			label: 'Player',
			sortable: true,
			render: (value: string | number | boolean | undefined, row: (typeof playersWithStats)[0]) => {
				const strValue = value !== undefined ? String(value) : '';
				const teamClass = row.team_id === firstTeamId ? 'text-terrorist' : 'text-ct';
				// Color indicator dot
				const colorHex = row.color ? playerColors[row.color] : undefined;
				const colorDot = colorHex
					? `<span class="inline-block h-3 w-3 rounded-full mr-2" style="background-color: ${colorHex}"></span>`
					: '';
				return `<a href="/player/${row.id}" class="flex items-center font-medium hover:underline ${teamClass}">${colorDot}${strValue}</a>`;
			}
		},
		{
			key: 'score' as keyof (typeof playersWithStats)[0],
			label: 'Score',
			sortable: true,
			align: 'center' as const,
			class: 'font-mono font-semibold'
		},
		{
			key: 'kills' as keyof (typeof playersWithStats)[0],
			label: 'K',
			sortable: true,
			align: 'center' as const,
			class: 'font-mono font-semibold'
		},
		{
			key: 'deaths' as keyof (typeof playersWithStats)[0],
			label: 'D',
			sortable: true,
			align: 'center' as const,
			class: 'font-mono'
		},
		{
			key: 'assists' as keyof (typeof playersWithStats)[0],
			label: 'A',
			sortable: true,
			align: 'center' as const,
			class: 'font-mono'
		},
		{
			key: 'kd' as keyof (typeof playersWithStats)[0],
			label: 'K/D',
			sortable: true,
			align: 'center' as const,
			class: 'font-mono',
			format: (v: string | number | undefined, _row: (typeof playersWithStats)[0]) =>
				v !== undefined ? (v as number).toFixed(2) : '0.00'
		},
		{
			key: 'adr' as keyof (typeof playersWithStats)[0],
			label: 'ADR',
			sortable: true,
			align: 'center' as const,
			class: 'font-mono',
			format: (v: string | number | undefined, _row: (typeof playersWithStats)[0]) =>
				v !== undefined ? (v as number).toFixed(1) : '0.0'
		},
		{
			key: 'hsPercent' as keyof (typeof playersWithStats)[0],
			label: 'HS%',
			sortable: true,
			align: 'center' as const,
			class: 'font-mono',
			format: (v: string | number | undefined, _row: (typeof playersWithStats)[0]) =>
				v !== undefined ? (v as number).toFixed(1) : '0.0'
		},
		{
			key: 'kast' as keyof (typeof playersWithStats)[0],
			label: 'KAST%',
			sortable: true,
			align: 'center' as const,
			class: 'font-mono',
			format: (v: string | number | undefined, _row: (typeof playersWithStats)[0]) =>
				v !== undefined ? (v as number).toFixed(1) : '-'
		},
		{
			key: 'mvp' as keyof (typeof playersWithStats)[0],
			label: 'MVP',
			sortable: true,
			align: 'center' as const,
			class: 'font-mono'
		},
		{
			key: 'mk_5' as keyof (typeof playersWithStats)[0],
			label: 'Aces',
			sortable: true,
			align: 'center' as const,
			render: (
				value: string | number | boolean | undefined,
				_row: (typeof playersWithStats)[0]
			) => {
				const numValue = value !== undefined ? (value as number) : 0;
				if (numValue > 0) return `<span class="badge badge-warning badge-sm">${numValue}</span>`;
				return '<span class="text-base-content/40">-</span>';
			}
		},
		{
			key: 'vac' as keyof (typeof playersWithStats)[0],
			label: 'Status',
			sortable: true,
			align: 'center' as const,
			render: (
				_value: string | number | boolean | undefined,
				row: (typeof playersWithStats)[0]
			) => {
				const badges = [];
				if (row.vac) {
					badges.push('<span class="badge badge-error badge-sm" title="VAC Banned">VAC</span>');
				}
				if (row.game_ban) {
					badges.push('<span class="badge badge-error badge-sm" title="Game Banned">BAN</span>');
				}
				if (badges.length > 0) {
					return `<div class="flex gap-1 justify-center">${badges.join('')}</div>`;
				}
				return '<span class="text-base-content/40">-</span>';
			}
		}
	];

	// Multi-kill chart data
	const multiKillData = {
		labels: sortedPlayers.map((p) => p.name),
		datasets: [
			{
				label: '2K',
				data: sortedPlayers.map((p) => p.mk_2 || 0),
				backgroundColor: 'rgba(34, 197, 94, 0.8)'
			},
			{
				label: '3K',
				data: sortedPlayers.map((p) => p.mk_3 || 0),
				backgroundColor: 'rgba(59, 130, 246, 0.8)'
			},
			{
				label: '4K',
				data: sortedPlayers.map((p) => p.mk_4 || 0),
				backgroundColor: 'rgba(249, 115, 22, 0.8)'
			},
			{
				label: '5K (Ace)',
				data: sortedPlayers.map((p) => p.mk_5 || 0),
				backgroundColor: 'rgba(239, 68, 68, 0.8)'
			}
		]
	};

	// Calculate team totals
	const teamAPlayers = hasPlayerData
		? playersWithStats.filter((p) => p.team_id === firstTeamId)
		: [];
	const teamBPlayers = hasPlayerData
		? playersWithStats.filter((p) => p.team_id === secondTeamId)
		: [];

	const teamAStats =
		hasPlayerData && teamAPlayers.length > 0
			? {
					totalDamage: teamAPlayers.reduce((sum, p) => sum + (p.dmg_enemy || 0), 0),
					totalUtilityDamage: teamAPlayers.reduce(
						(sum, p) => sum + (p.ud_he || 0) + (p.ud_flames || 0),
						0
					),
					totalFlashAssists: teamAPlayers.reduce((sum, p) => sum + (p.flash_assists || 0), 0),
					avgKAST:
						teamAPlayers.length > 0
							? (
									teamAPlayers.reduce((sum, p) => sum + (p.kast || 0), 0) / teamAPlayers.length
								).toFixed(1)
							: '0.0'
				}
			: { totalDamage: 0, totalUtilityDamage: 0, totalFlashAssists: 0, avgKAST: '0.0' };

	const teamBStats =
		hasPlayerData && teamBPlayers.length > 0
			? {
					totalDamage: teamBPlayers.reduce((sum, p) => sum + (p.dmg_enemy || 0), 0),
					totalUtilityDamage: teamBPlayers.reduce(
						(sum, p) => sum + (p.ud_he || 0) + (p.ud_flames || 0),
						0
					),
					totalFlashAssists: teamBPlayers.reduce((sum, p) => sum + (p.flash_assists || 0), 0),
					avgKAST:
						teamBPlayers.length > 0
							? (
									teamBPlayers.reduce((sum, p) => sum + (p.kast || 0), 0) / teamBPlayers.length
								).toFixed(1)
							: '0.0'
				}
			: { totalDamage: 0, totalUtilityDamage: 0, totalFlashAssists: 0, avgKAST: '0.0' };
</script>

<svelte:head>
	<title>Match Details - CS2.WTF</title>
</svelte:head>

{#if !hasPlayerData}
	<Card padding="lg">
		<div class="text-center">
			<AlertCircle class="mx-auto mb-4 h-16 w-16 text-warning" />
			<h2 class="mb-2 text-2xl font-bold text-base-content">No Player Data Available</h2>
			<p class="mb-4 text-base-content/60">
				Detailed player statistics are not available for this match.
			</p>
			<Badge variant="warning" size="lg">Player data unavailable</Badge>
		</div>
	</Card>
{:else}
	<div class="space-y-6">
		<!-- Team Performance Summary -->
		<div class="grid gap-6 md:grid-cols-2">
			<!-- Terrorists Stats -->
			<Card padding="lg">
				<h3 class="mb-4 text-xl font-bold text-terrorist">Terrorists Performance</h3>
				<div class="grid grid-cols-2 gap-4 text-sm">
					<div>
						<div class="text-base-content/60">Total Damage</div>
						<div class="text-2xl font-bold">{teamAStats.totalDamage.toLocaleString()}</div>
					</div>
					<div>
						<div class="text-base-content/60">Utility Damage</div>
						<div class="text-2xl font-bold">{teamAStats.totalUtilityDamage.toLocaleString()}</div>
					</div>
					<div>
						<div class="text-base-content/60">Flash Assists</div>
						<div class="text-2xl font-bold">{teamAStats.totalFlashAssists}</div>
					</div>
					<div>
						<div class="text-base-content/60">Avg KAST</div>
						<div class="text-2xl font-bold">{teamAStats.avgKAST}%</div>
					</div>
				</div>
			</Card>

			<!-- Counter-Terrorists Stats -->
			<Card padding="lg">
				<h3 class="mb-4 text-xl font-bold text-ct">Counter-Terrorists Performance</h3>
				<div class="grid grid-cols-2 gap-4 text-sm">
					<div>
						<div class="text-base-content/60">Total Damage</div>
						<div class="text-2xl font-bold">{teamBStats.totalDamage.toLocaleString()}</div>
					</div>
					<div>
						<div class="text-base-content/60">Utility Damage</div>
						<div class="text-2xl font-bold">{teamBStats.totalUtilityDamage.toLocaleString()}</div>
					</div>
					<div>
						<div class="text-base-content/60">Flash Assists</div>
						<div class="text-2xl font-bold">{teamBStats.totalFlashAssists}</div>
					</div>
					<div>
						<div class="text-base-content/60">Avg KAST</div>
						<div class="text-2xl font-bold">{teamBStats.avgKAST}%</div>
					</div>
				</div>
			</Card>
		</div>

		<!-- Multi-Kills Chart -->
		<Card padding="lg">
			<div class="mb-4">
				<h2 class="text-2xl font-bold text-base-content">Multi-Kill Distribution</h2>
				<p class="text-sm text-base-content/60">
					Double kills (2K), triple kills (3K), quad kills (4K), and aces (5K) per player
				</p>
			</div>
			<BarChart data={multiKillData} height={300} />
		</Card>

		<!-- Detailed Player Statistics Table -->
		<Card padding="none">
			<div class="p-6">
				<h2 class="text-2xl font-bold text-base-content">Detailed Player Statistics</h2>
				<p class="mt-1 text-sm text-base-content/60">
					Complete performance breakdown for all players
				</p>
			</div>

			<DataTable data={sortedPlayers} columns={detailsColumns} striped hoverable />
		</Card>

		<!-- Top Performers -->
		<div class="grid gap-6 md:grid-cols-3">
			{#if sortedPlayers.length > 0 && sortedPlayers[0]}
				<!-- Most Kills -->
				<Card padding="lg">
					<div class="mb-3 flex items-center gap-2">
						<Trophy class="h-5 w-5 text-warning" />
						<h3 class="font-semibold text-base-content">Most Kills</h3>
					</div>
					<div class="text-2xl font-bold text-base-content">{sortedPlayers[0].name}</div>
					<div class="mt-1 font-mono text-3xl font-bold text-primary">
						{sortedPlayers[0].kills}
					</div>
					<div class="mt-2 text-xs text-base-content/60">
						{sortedPlayers[0].deaths} deaths, {sortedPlayers[0].kd.toFixed(2)} K/D
					</div>
				</Card>

				<!-- Best K/D -->
				{@const bestKD = [...sortedPlayers].sort((a, b) => b.kd - a.kd)[0]}
				{#if bestKD}
					<Card padding="lg">
						<div class="mb-3 flex items-center gap-2">
							<Target class="h-5 w-5 text-success" />
							<h3 class="font-semibold text-base-content">Best K/D Ratio</h3>
						</div>
						<div class="text-2xl font-bold text-base-content">{bestKD.name}</div>
						<div class="mt-1 font-mono text-3xl font-bold text-success">{bestKD.kd.toFixed(2)}</div>
						<div class="mt-2 text-xs text-base-content/60">
							{bestKD.kills}K / {bestKD.deaths}D
						</div>
					</Card>
				{/if}

				<!-- Most Utility Damage -->
				{@const bestUtility = [...sortedPlayers].sort(
					(a, b) => (b.ud_he || 0) + (b.ud_flames || 0) - ((a.ud_he || 0) + (a.ud_flames || 0))
				)[0]}
				{#if bestUtility}
					<Card padding="lg">
						<div class="mb-3 flex items-center gap-2">
							<Flame class="h-5 w-5 text-error" />
							<h3 class="font-semibold text-base-content">Most Utility Damage</h3>
						</div>
						<div class="text-2xl font-bold text-base-content">{bestUtility.name}</div>
						<div class="mt-1 font-mono text-3xl font-bold text-error">
							{((bestUtility.ud_he || 0) + (bestUtility.ud_flames || 0)).toLocaleString()}
						</div>
						<div class="mt-2 text-xs text-base-content/60">
							HE: {bestUtility.ud_he || 0} | Fire: {bestUtility.ud_flames || 0}
						</div>
					</Card>
				{/if}
			{/if}
		</div>
	</div>
{/if}
