<script lang="ts" context="module">
	export const prerender = false;
</script>

<script lang="ts">
	import { onMount } from 'svelte';

	import Countdown from '$lib/components/Countdown.svelte';
	import { auth } from '$lib/stores';

	onMount(() => {
		$auth.refresh();
	});
</script>

<svelte:head><title>Dashboard | CodeQuest</title></svelte:head>

<div class="relative flex min-h-[calc(100vh-164px)] pb-8">
	<main class="container mx-auto pt-4">
		<div class="p-4 text-white bg-indigo-300 rounded-md shadow-md">
			<div class="flex items-center justify-center">
				<span class="text-3xl font-semibold tracking-wider uppercase">
					{#if !$auth.info}
						&nbsp;
					{:else if $auth.info?.active}
						<Countdown end={$auth.info.endTime} />
					{:else if new Date($auth.info.endTime) < new Date()}
						Contest Over
					{:else}
						Starting Soon
					{/if}
				</span>
			</div>
		</div>
		<div class="grid grid-cols-1 gap-6 mt-4 md:grid-cols-2">
			<div
				class="flex justify-between w-full h-32 bg-white rounded-md shadow-md p-6 pb-2 border border-indigo-400"
			>
				<div class="flex flex-col">
					<span class="text-xs text-indigo-400 uppercase">Welcome</span>
					<span class="text-xl text-indigo-500 font-bold">
						{$auth.info?.currentUser.name || ''}
					</span>
				</div>
				<div class="flex flex-col items-end justify-end">
					<span class="text-xs text-purple-400 uppercase">Points</span>
					<span class="text-purple-700">
						{$auth.info?.points || 0}
					</span>
				</div>
			</div>
			<a class="box h-32 border-sky-600 hover:bg-sky-50" href="/dashboard/leaderboard">
				<span class="txt text-sky-600">
					<!-- prettier-ignore -->
					<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M22,7H16.333V4a1,1,0,0,0-1-1H8.667a1,1,0,0,0-1,1v7H2a1,1,0,0,0-1,1v8a1,1,0,0,0,1,1H22a1,1,0,0,0,1-1V8A1,1,0,0,0,22,7ZM7.667,19H3V13H7.667ZM14.333,8V19H9.667V5h4.666ZM21,19H16.333V9H21Z"/>
          </svg>

					Leaderboard
				</span>
			</a>
			<div class="box h-32 border-green-600 hover:bg-green-50">
				<span class="txt text-green-700">
					<!-- prettier-ignore -->
					<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
          </svg>
					Personal Stats
				</span>
			</div>
			<a class="box h-32 border-red-700 hover:bg-red-50" href="/about">
				<span class="txt text-red-700">
					<!-- prettier-ignore -->
					<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" />
          </svg>
					About
				</span>
			</a>
		</div>
		<a class="grid grid-cols-1 gap-6 my-4 mt-4" href="/dashboard/questions">
			<div class="box h-56 border-2 border-indigo-700 hover:bg-indigo-50">
				<span class="txt txt-lg text-4xl text-indigo-700">
					<!-- prettier-ignore -->
					<svg viewBox="0 0 24 24" class="h-9 w-9 mt-1"  fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <g><path d="M20,8V3a1,1,0,0,0-1-1H13a1,1,0,0,0-1,1V4A2,2,0,0,1,8,4V3A1,1,0,0,0,7,2H1A1,1,0,0,0,0,3V21a1,1,0,0,0,1,1H7a1,1,0,0,0,1-1V20a2,2,0,0,1,4,0v1a1,1,0,0,0,1,1h6a1,1,0,0,0,1-1V16a4,4,0,0,0,0-8Zm0,6H19a1,1,0,0,0-1,1v5H14a4,4,0,0,0-8,0H2V4H6a4,4,0,0,0,8,0h4V9a1,1,0,0,0,1,1h1a2,2,0,0,1,0,4Z"/></g>
          </svg>
					Puzzles
				</span>
			</div>
		</a>
	</main>
</div>

<style lang="postcss">
	.box {
		@apply flex items-center justify-center w-full rounded-md shadow-md border;
		@apply transition;
	}

	.txt {
		@apply inline-flex items-center gap-2;
		@apply text-xl font-bold tracking-wider uppercase;
	}

	.txt-lg {
		@apply text-4xl;
	}
</style>
