<script lang="ts">
	import { resolve } from '$app/paths';
	import type { PageData } from './$types';
	import { t } from '$lib/i18n';

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

	function formatDuration(minutes: number): string {
		if (minutes < 60) {
			return `${Math.round(minutes)} min`;
		}

		const hours = Math.floor(minutes / 60);
		const remainingMinutes = Math.round(minutes % 60);
		return `${hours}h ${remainingMinutes}m`;
	}

</script>

<div class="min-h-screen bg-gray-50">
	<div class="max-w-7xl mx-auto px-4 py-8">
		<div class="flex items-center justify-between mb-8">
			<h1 class="text-3xl font-bold text-gray-900">{$t.admin.adminDashboard}</h1>
			<a
				href={resolve('/admin/sessions/new')}
				class="bg-indigo-600 text-white px-4 py-2 rounded-lg font-semibold hover:bg-indigo-700 transition-colors"
			>
				{$t.admin.createSession}
			</a>
		</div>
		<!-- Stats Overview -->
		<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
			<div class="bg-white rounded-xl shadow-md p-6">
				<div class="flex items-center justify-between">
					<div>
						<p class="text-sm font-medium text-gray-600">{$t.admin.totalGames}</p>
						<p class="text-3xl font-bold text-gray-900 mt-2">{data.stats?.totalGames || 0}</p>
					</div>
					<div class="bg-indigo-100 rounded-full p-3">
						<svg class="w-8 h-8 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
						</svg>
					</div>
				</div>
			</div>

			<div class="bg-white rounded-xl shadow-md p-6">
				<div class="flex items-center justify-between">
					<div>
						<p class="text-sm font-medium text-gray-600">{$t.admin.activeSessions}</p>
						<p class="text-3xl font-bold text-gray-900 mt-2">{data.stats?.activeSessions || 0}</p>
					</div>
					<div class="bg-green-100 rounded-full p-3">
						<svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
						</svg>
					</div>
				</div>
			</div>

			<div class="bg-white rounded-xl shadow-md p-6">
				<div class="flex items-center justify-between">
					<div>
						<p class="text-sm font-medium text-gray-600">{$t.admin.totalPlayers}</p>
						<p class="text-3xl font-bold text-gray-900 mt-2">{data.stats?.totalPlayers || 0}</p>
					</div>
					<div class="bg-blue-100 rounded-full p-3">
						<svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
						</svg>
					</div>
				</div>
			</div>
		</div>

		<!-- Current & Incoming Sessions -->
		<div class="mb-8 bg-white rounded-xl shadow-md overflow-hidden">
			<div class="px-6 py-4 border-b border-gray-200">
				<h2 class="text-xl font-bold text-gray-900">{$t.admin.currentAndIncomingSessions}</h2>
			</div>

			{#if data.currentAndIncomingSessions && data.currentAndIncomingSessions.length > 0}
				<div class="overflow-x-auto">
					<table class="min-w-full divide-y divide-gray-200">
						<thead class="bg-gray-50">
							<tr>
								<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
									{$t.admin.code}
								</th>
								<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
									{$t.admin.game}
								</th>
								<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
									{$t.admin.status}
								</th>
								<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
									{$t.admin.players}
								</th>
								<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
									Progression
								</th>
								<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
									{$t.admin.expires}
								</th>
							</tr>
						</thead>
						<tbody class="bg-white divide-y divide-gray-200">
							{#each data.currentAndIncomingSessions as session (session.id)}
								<tr class="hover:bg-gray-50">
									<td class="px-6 py-4 whitespace-nowrap">
										<span class="font-mono text-sm font-medium text-gray-900">{session.code}</span>
									</td>
									<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
										{session.gameName}
									</td>
									<td class="px-6 py-4 whitespace-nowrap">
										<span class={`px-2 py-1 text-xs font-semibold rounded-full ${
											session.startedAt && !session.completedAt
												? 'bg-green-100 text-green-800'
												: 'bg-blue-100 text-blue-800'
										}`}>
											{session.startedAt && !session.completedAt ? $t.admin.current : $t.admin.incoming}
										</span>
									</td>
									<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
										{session.playerCount || 0}
									</td>
									<td class="px-6 py-4 whitespace-nowrap">
										{#if session.progression}
											<div class="max-w-xs">
												<div class="flex items-center justify-between mb-1">
													<span class="text-xs font-medium text-gray-700">
														Step {session.progression.currentStep} of {session.progression.totalSteps}
													</span>
													<span class="text-xs text-gray-500">
														{Math.round((session.progression.completedSteps / session.progression.totalSteps) * 100)}%
													</span>
												</div>
												<div class="w-full h-2 bg-gray-200 rounded-full overflow-hidden">
													<div 
														class="h-full bg-indigo-500 transition-all duration-300"
														style="width: {(session.progression.completedSteps / session.progression.totalSteps) * 100}%"
													></div>
												</div>
											</div>
										{:else}
											<span class="text-xs text-gray-400">No progress</span>
										{/if}
									</td>
									<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
										{new Date(session.expiresAt).toLocaleString()}
									</td>
								</tr>
							{/each}
						</tbody>
					</table>
				</div>
			{:else}
				<div class="px-6 py-12 text-center text-gray-500">
					{$t.admin.noCurrentOrIncomingSessions}
				</div>
			{/if}
		</div>

		<!-- Mean Resolution Time Graph -->
		<div class="bg-white rounded-xl shadow-md overflow-hidden">
			<div class="px-6 py-4 border-b border-gray-200">
				<h2 class="text-xl font-bold text-gray-900">{$t.admin.meanResolutionTime}</h2>
			</div>

			{#if data.resolutionMetrics && data.resolutionMetrics.length > 0}
				<div class="p-6 space-y-4">
					{#each data.resolutionMetrics as metric (metric.gameId)}
						<div class="space-y-2">
							<div class="flex items-center justify-between gap-3">
								<div class="text-sm font-medium text-gray-900 truncate">{metric.gameTitle}</div>
								<div class="text-sm text-gray-600 whitespace-nowrap">
									{formatDuration(metric.meanResolutionMinutes)}
									<span class="text-gray-400">({metric.completedSessions})</span>
								</div>
							</div>
							<div class="h-3 w-full rounded-full bg-gray-100">
								<div
									class="h-3 rounded-full bg-indigo-500"
									style={`width: ${Math.max(
										6,
										(metric.meanResolutionMinutes / (data.maxMeanResolutionMinutes || 1)) * 100
									)}%`}
								></div>
							</div>
						</div>
					{/each}
				</div>
			{:else}
				<div class="px-6 py-12 text-center">
					<p class="text-gray-500">{$t.admin.noResolutionData}</p>
				</div>
			{/if}
		</div>
	</div>
</div>
