<script lang="ts">
	import { goto } from '$app/navigation';
	import { authStore } from '$lib/stores/auth.svelte';
	import { browser } from '$app/environment';
	import { Skeleton } from '$lib/components/ui/skeleton';

	// Component imports
	import ImageUpload from '$lib/components/admin/ImageUpload.svelte';
	import UsersCard from '$lib/components/admin/UsersCard.svelte';
	import BookingsCard from '$lib/components/admin/BookingsCard.svelte';
	import HolidayHours from '$lib/components/admin/HolidayHours.svelte';
	import WeeklySchedule from '$lib/components/admin/WeeklySchedule.svelte';
	import ServicesManagement from '$lib/components/admin/ServicesManagement.svelte';
	import DiscountsManagement from '$lib/components/admin/DiscountsManagement.svelte';
	import UserModal from '$lib/components/admin/UserModal.svelte';
	import BookingModal from '$lib/components/admin/BookingModal.svelte';

	// =============== Auth & Permissions ===============
	let pageState = $state<'loading' | 'authorized' | 'unauthorized'>('loading');

	// Check permissions immediately and on auth changes
	$effect(() => {
		if (!browser) return;

		if (authStore.isLoading) {
			pageState = 'loading';
			return;
		}

		if (!authStore.isAuthenticated) {
			pageState = 'unauthorized';
			goto('/login', { replaceState: true });
			return;
		}

		if (authStore.currentUser?.role !== 'admin') {
			pageState = 'unauthorized';
			goto('/', { replaceState: true });
			return;
		}

		pageState = 'authorized';
	});

	// =============== Modal State ===============
	let showUserModal = $state(false);
	let showBookingModal = $state(false);
	let selectedUserId = $state<string | null>(null);
	let selectedBookingId = $state<string | null>(null);

	function openUserModal(userId: string) {
		selectedUserId = userId;
		showUserModal = true;
	}

	function openBookingModal(bookingId: string) {
		selectedBookingId = bookingId;
		showBookingModal = true;
	}
</script>

{#if pageState === 'loading'}
	<!-- Full page skeleton loading -->
	<div class="mx-auto max-w-6xl space-y-6 p-6">
		<!-- Header Skeleton -->
		<div class="mb-8 flex items-center justify-center text-center">
			<div class="space-y-2">
				<Skeleton class="h-8 w-64" />
				<Skeleton class="h-4 w-96" />
			</div>
		</div>

		<!-- Image Upload Card Skeleton -->
		<div class="rounded-lg border p-6">
			<div class="mb-4 space-y-2">
				<Skeleton class="h-6 w-32" />
				<Skeleton class="h-4 w-48" />
			</div>
			<Skeleton class="h-32 w-full" />
			<div class="mt-4 flex justify-end">
				<Skeleton class="h-10 w-40" />
			</div>
		</div>

		<!-- Users & Bookings Grid Skeleton -->
		<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
			<!-- Users Card Skeleton -->
			<div class="rounded-lg border p-6">
				<div class="mb-4 space-y-2">
					<Skeleton class="h-6 w-20" />
					<Skeleton class="h-4 w-40" />
				</div>
				<div class="flex gap-2">
					<Skeleton class="h-10 flex-1" />
					<Skeleton class="h-10 w-20" />
				</div>
				<div class="mt-4 space-y-2">
					{#each Array(3) as _, i (i)}
						<Skeleton class="h-16 w-full" />
					{/each}
				</div>
			</div>

			<!-- Bookings Card Skeleton -->
			<div class="rounded-lg border p-6">
				<div class="mb-4 space-y-2">
					<Skeleton class="h-6 w-24" />
					<Skeleton class="h-4 w-40" />
				</div>
				<div class="flex gap-2">
					<Skeleton class="h-10 flex-1" />
					<Skeleton class="h-10 w-20" />
				</div>
				<div class="mt-4 space-y-2">
					{#each Array(3) as _, i (i)}
						<Skeleton class="h-16 w-full" />
					{/each}
				</div>
			</div>
		</div>

		<!-- Holiday Hours Card Skeleton -->
		<div class="rounded-lg border p-6">
			<div class="mb-4 space-y-2">
				<Skeleton class="h-6 w-32" />
				<Skeleton class="h-4 w-64" />
			</div>
			<div class="flex justify-between">
				<Skeleton class="h-10 w-32" />
			</div>
			<div class="mt-4 grid grid-cols-1 gap-4 md:grid-cols-2">
				{#each Array(2) as _, i (i)}
					<Skeleton class="h-32 w-full" />
				{/each}
			</div>
		</div>

		<!-- Working Hours Card Skeleton -->
		<div class="rounded-lg border p-6">
			<div class="mb-4 space-y-2">
				<Skeleton class="h-6 w-32" />
				<Skeleton class="h-4 w-64" />
			</div>
			<div class="flex justify-between">
				<Skeleton class="h-6 w-40" />
				<Skeleton class="h-10 w-24" />
			</div>
			<div class="mt-4 w-full overflow-x-auto">
				<table class="w-full table-auto">
					<thead>
						<tr class="text-left text-xs text-gray-500">
							<th class="py-2"><Skeleton class="h-4 w-12" /></th>
							<th class="py-2"><Skeleton class="h-4 w-16" /></th>
							<th class="py-2"><Skeleton class="h-4 w-16" /></th>
							<th class="py-2"><Skeleton class="h-4 w-16" /></th>
						</tr>
					</thead>
					<tbody>
						{#each Array(7) as _, i (i)}
							<tr class="border-t">
								<td class="py-2"><Skeleton class="h-4 w-20" /></td>
								<td class="py-2"><Skeleton class="h-4 w-12" /></td>
								<td class="py-2"><Skeleton class="h-4 w-12" /></td>
								<td class="py-2"><Skeleton class="h-4 w-12" /></td>
							</tr>
						{/each}
					</tbody>
				</table>
			</div>
		</div>

		<!-- Services Management Card Skeleton -->
		<div class="rounded-lg border p-6">
			<div class="mb-4 space-y-2">
				<Skeleton class="h-6 w-40" />
				<Skeleton class="h-4 w-80" />
			</div>
			<div class="flex justify-between">
				<Skeleton class="h-10 w-32" />
			</div>
			<div class="mt-4 hidden w-full overflow-x-auto md:block">
				<table class="w-full table-auto border-collapse text-sm">
					<thead>
						<tr class="border-b text-left text-xs text-gray-500">
							<th class="py-3"><Skeleton class="h-4 w-20" /></th>
							<th class="py-3"><Skeleton class="h-4 w-32" /></th>
							<th class="py-3"><Skeleton class="h-4 w-16" /></th>
							<th class="py-3"><Skeleton class="h-4 w-20" /></th>
							<th class="py-3"><Skeleton class="h-4 w-16" /></th>
							<th class="py-3"><Skeleton class="h-4 w-24" /></th>
						</tr>
					</thead>
					<tbody>
						{#each Array(3) as _, i (i)}
							<tr class="border-b">
								<td class="py-3"><Skeleton class="h-4 w-32" /></td>
								<td class="py-3"><Skeleton class="h-4 w-48" /></td>
								<td class="py-3"><Skeleton class="h-4 w-16" /></td>
								<td class="py-3"><Skeleton class="h-4 w-20" /></td>
								<td class="py-3"><Skeleton class="h-4 w-16" /></td>
								<td class="py-3">
									<div class="flex justify-center gap-2">
										<Skeleton class="h-8 w-16" />
										<Skeleton class="h-8 w-16" />
									</div>
								</td>
							</tr>
						{/each}
					</tbody>
				</table>
			</div>
		</div>

		<!-- Discounts Management Card Skeleton -->
		<div class="rounded-lg border p-6">
			<div class="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
				<div class="space-y-2">
					<Skeleton class="h-6 w-40" />
					<Skeleton class="h-4 w-64" />
				</div>
				<Skeleton class="h-10 w-32" />
			</div>
			<div class="mt-4 hidden w-full overflow-x-auto md:block">
				<table class="w-full table-auto border-collapse text-sm">
					<thead>
						<tr class="border-b text-left text-xs text-gray-500">
							<th class="py-3"><Skeleton class="h-4 w-24" /></th>
							<th class="py-3"><Skeleton class="h-4 w-20" /></th>
							<th class="py-3"><Skeleton class="h-4 w-16" /></th>
							<th class="py-3"><Skeleton class="h-4 w-16" /></th>
							<th class="py-3"><Skeleton class="h-4 w-16" /></th>
							<th class="py-3"><Skeleton class="h-4 w-40" /></th>
						</tr>
					</thead>
					<tbody>
						{#each Array(2) as _, i (i)}
							<tr class="border-b">
								<td class="py-3"><Skeleton class="h-4 w-32" /></td>
								<td class="py-3"><Skeleton class="h-4 w-24" /></td>
								<td class="py-3"><Skeleton class="h-4 w-12" /></td>
								<td class="py-3"><Skeleton class="h-4 w-16" /></td>
								<td class="py-3"><Skeleton class="h-4 w-12" /></td>
								<td class="py-3">
									<div class="flex justify-end gap-2">
										<Skeleton class="h-8 w-16" />
										<Skeleton class="h-8 w-16" />
									</div>
								</td>
							</tr>
						{/each}
					</tbody>
				</table>
			</div>
		</div>
	</div>
{:else if pageState === 'authorized'}
	<div class="mx-auto max-w-6xl space-y-6 p-6">
		<div class="mb-4 flex items-center justify-center text-center">
			<div>
				<h1 class="text-3xl font-bold">Admin Dashboard</h1>
				<p class="text-gray-600">Manage portfolio images, working hours & user bookings</p>
			</div>
		</div>

		<ImageUpload />
		<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
			<UsersCard {openUserModal} />
			<BookingsCard {openBookingModal} />
		</div>
		<HolidayHours />
		<WeeklySchedule />
		<ServicesManagement />
		<DiscountsManagement />
	</div>

	<!-- Modals -->
	{#if showUserModal && selectedUserId}
		<UserModal bind:open={showUserModal} userId={selectedUserId} {openBookingModal} />
	{/if}

	{#if showBookingModal && selectedBookingId}
		<BookingModal bind:open={showBookingModal} bookingId={selectedBookingId} />
	{/if}
{/if}
