<script lang="ts">
	import { browser } from "$app/environment";

	let localTime = $state("");
	let utcTime = $state("");
	let countdown = $state("00:00:00");
	let todayDate = $state("");
	let nextDate = $state("");

	let interval: NodeJS.Timeout | undefined;

	$effect(() => {
		if (!browser) return;

		function update() {
			const now = new Date();

			localTime = now.toLocaleString();
			utcTime = now.toISOString().slice(0, -5); // without ms
			todayDate = now.toLocaleDateString("en-US");

			const nextMidnight = new Date(
				now.getFullYear(),
				now.getMonth(),
				now.getDate() + 1,
				0,
				0,
				0,
				0,
			);
			nextDate = nextMidnight.toLocaleDateString("en-US");

			const diff = nextMidnight.getTime() - now.getTime();
			const hours = Math.floor(diff / (1000 * 60 * 60));
			const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
			const seconds = Math.floor((diff % (1000 * 60)) / 1000);

			countdown = `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
		}

		update();
		interval = setInterval(update, 1000);

		return () => {
			if (interval) clearInterval(interval);
		};
	});
</script>

<svelte:head>
	<title>Bibdle Dev Debug</title>
</svelte:head>

<div class="min-h-dvh bg-linear-to-br from-blue-50 to-indigo-100 py-8">
	<div
		class="pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)] max-w-md sm:max-w-lg md:max-w-2xl lg:max-w-4xl mx-auto px-2 sm:px-4"
	>
		<h1
			class="text-3xl md:text-4xl font-bold text-center text-gray-800 p-8 sm:p-12 drop-shadow-lg"
		>
			Bibdle <span class="font-normal text-blue-600">Dev Debug</span>
		</h1>

		<div
			class="bg-white rounded-2xl shadow-xl p-8 sm:p-12 mb-8 sm:mb-12 max-w-full sm:max-w-2xl md:max-w-3xl mx-auto space-y-8"
		>
			<div class="text-center">
				<h2 class="text-xl font-bold mb-4">Browser Local Time</h2>
				<p class="text-2xl font-mono bg-gray-100 p-4 rounded-xl">
					{localTime}
				</p>
			</div>

			<div class="text-center">
				<h2 class="text-xl font-bold mb-4">UTC Time</h2>
				<p class="text-2xl font-mono bg-gray-100 p-4 rounded-xl">
					{utcTime}
				</p>
			</div>

			<div class="text-center">
				<h2 class="text-xl font-bold mb-4">Today (Browser Local)</h2>
				<p class="text-xl font-mono bg-gray-100 p-4 rounded-xl">
					{todayDate}
				</p>
			</div>

			<div>
				<h2
					class="text-2xl md:text-3xl font-bold text-center mb-8 drop-shadow-lg"
				>
					Countdown to Next Bible Verse (Midnight, local browser time)
				</h2>
				<div
					class="bg-linear-to-r from-indigo-500 to-purple-600 text-black p-8 sm:p-12 rounded-2xl shadow-2xl text-center"
				>
					<p
						class="text-5xl md:text-6xl font-black mb-4 tracking-wider"
					>
						{countdown}
					</p>
					<p class="text-lg opacity-90">Next date: {nextDate}</p>
				</div>
			</div>
		</div>
	</div>
</div>
