<script lang="ts">
	import { goto } from '$app/navigation';
	import { resolve } from '$app/paths';
	import { Button } from '$lib/components/ui/button';
	import PortfolioCarousel from '$lib/components/layout/PortfolioCarousel.svelte';
	import { authStore } from '$lib/stores/auth.svelte';
	import { Skeleton } from '$lib/components/ui/skeleton';

	// Redirect admins to /today (their homepage)
	$effect(() => {
		if (!authStore.isLoading && authStore.currentUser?.role === 'admin') {
			// eslint-disable-next-line svelte/no-navigation-without-resolve
			goto('/today', { replaceState: true });
		}
	});

	const returningGreetings = [
		(name: string) => `Welcome back, ${name}!`,
		(name: string) => `Great to see you again, ${name}!`,
		(name: string) => `Good to have you back, ${name}!`,
		(name: string) => `Hey, you're back, ${name}!`,
		(name: string) => `Lovely to see you again, ${name}!`,
		(name: string) => `We missed you, ${name}!`,
		(name: string) => `${name}, it's so good to see you!`,
		(name: string) => `${name}, welcome back to Crussell Nails!`,
		(name: string) => `Always a pleasure, ${name}!`,
		(name: string) => `${name}, you're a sight for sore eyes!`,
		(name: string) => `So happy you're back, ${name}!`,
		(name: string) => `You're back! Great to see you, ${name}!`,
		(name: string) => `${name}, you've been missed!`,
		(name: string) => `Ready for some pampering, ${name}?`,
		(name: string) => `${name}, lovely to have you back with us!`,
		(name: string) => `Great to have you back, ${name}!`,
		(name: string) => `Back for more, ${name}?`,
		(name: string) => `Ah, ${name}! Right on time!`,
		(name: string) => `Welcome home, ${name}!`,
		(name: string) => `${name}, we've been looking forward to seeing you!`,
		(name: string) => `It's always a good day when ${name} walks in!`,
		(name: string) => `${name}, your favourite nail artist is waiting!`,
		(name: string) => `How wonderful to see you, ${name}!`,
		(name: string) => `${name}, you're as welcome as ever!`,
		(name: string) => `Another visit, ${name}? You spoil us!`,
		(name: string) => `${name}, you always brighten up our day!`,
		(name: string) => `Great timing, ${name} — let's get started!`,
		(name: string) => `${name}, you deserve every bit of this!`,
		(name: string) => `So glad you're here again, ${name}!`,
		(name: string) => `Look who it is — the wonderful ${name}!`
	];

	const unverifiedGreetings = [
		(name: string) => `Welcome, ${name}!`,
		(name: string) => `Hi, ${name}! Great to meet you!`,
		(name: string) => `Hey ${name}, welcome aboard!`,
		(name: string) => `Hello, ${name}! Lovely to have you here!`,
		(name: string) => `Good to meet you, ${name}!`,
		(name: string) => `${name}, welcome to Crussell Nails!`,
		(name: string) => `Hi ${name}, we're so glad you're here!`,
		(name: string) => `Welcome in, ${name}!`,
		(name: string) => `${name}, it's great to have you with us!`,
		(name: string) => `Hello ${name}, glad you found us!`,
		(name: string) => `${name}, welcome — you're going to love it here!`,
		(name: string) => `Nice to meet you, ${name}!`,
		(name: string) => `${name}, welcome to the family!`,
		(name: string) => `Hey ${name}, so happy to have you here!`,
		(name: string) => `${name}, you've come to the right place!`,
		(name: string) => `Welcome, ${name} — we're thrilled to have you!`,
		(name: string) => `${name}, let's get you pampered!`,
		(name: string) => `Great to have you here, ${name}!`,
		(name: string) => `${name}, welcome — something beautiful awaits!`,
		(name: string) => `${name}, your journey to great nails starts here!`,
		(name: string) => `So excited to have you here, ${name}!`,
		(name: string) => `${name}, we can't wait to show you what we do!`,
		(name: string) => `A big welcome to you, ${name}!`,
		(name: string) => `${name}, we're so glad you chose Crussell Nails!`,
		(name: string) => `Hi ${name}, you're in great hands here!`,
		(name: string) => `${name}, this is the beginning of something beautiful!`,
		(name: string) => `Welcome ${name} — you picked the perfect place!`,
		(name: string) => `${name}, we love meeting new faces!`,
		(name: string) => `${name}, we're delighted to have you with us!`,
		(name: string) => `Hello ${name}, great things are ahead!`,
		(name: string) => `${name}, we're already excited to look after you!`,
		(name: string) => `Welcome ${name} — you're going to fit right in!`,
		(name: string) => `So glad you're here, ${name}!`,
		(name: string) => `${name}, you've made an excellent choice today!`,
		(name: string) => `Welcome to the club, ${name}!`
	];

	function getRandomGreeting(name: string, isReturning: boolean): string {
		const greetings = isReturning ? returningGreetings : unverifiedGreetings;
		const randomIndex = Math.floor(Math.random() * greetings.length);
		return greetings[randomIndex](name);
	}
</script>

<svelte:head>
	<link rel="preconnect" href="https://fonts.googleapis.com" />
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
	<link
		href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap"
		rel="stylesheet"
	/>
</svelte:head>

<section class="py-20 text-center">
	{#if authStore.isLoading}
		<!-- Skeleton loading state -->
		<div class="m-2 mb-4">
			<Skeleton class="mx-auto h-10 w-80 max-w-full" />
		</div>
		<div class="mb-8">
			<Skeleton class="mx-auto h-6 w-96 max-w-full" />
		</div>
		<Skeleton class="mx-auto h-12 w-48" />
	{:else}
		<h1 class="m-2 mb-4 font-['Playfair_Display'] text-4xl font-bold">
			{#if !authStore.isAuthenticated}
				Welcome to Crussell Nails
			{:else if authStore.currentUser?.role === 'unverified_email'}
				{getRandomGreeting(authStore.currentUser?.firstName || '', false)}
			{:else}
				{getRandomGreeting(authStore.currentUser?.firstName || '', true)}
			{/if}
		</h1>
		<p class="mb-8 text-lg text-gray-600">
			Professional beauty treatments in a calm and friendly environment.
		</p>

		{#if authStore.currentUser?.role === 'admin'}
			<Button href={resolve('/today')} class="px-6 py-3 text-lg">View your day</Button>
		{:else}
			<Button href={resolve('/book')} class="px-6 py-3 text-lg">Book an Appointment</Button>
		{/if}
	{/if}
</section>

<section class="mx-auto max-w-4xl px-6 py-16">
	<h2 class="mb-8 text-center text-2xl font-semibold">Our Services</h2>
	<div class="grid grid-cols-1 gap-8 md:grid-cols-4">
		<div class="rounded-lg border p-6">
			<h3 class="mb-2 text-lg font-semibold">Hands</h3>
			<p class="text-gray-600">
				Lorem hand ipsum nail dolor art sit paint amet, skin consectetur cuticle adipiscing file
				elit.
			</p>
		</div>
		<div class="rounded-lg border p-6">
			<h3 class="mb-2 text-lg font-semibold">Feet</h3>
			<p class="text-gray-600">
				Lorem foot ipsum nail dolor art sit paint amet, skin consectetur cuticle adipiscing file
				elit.
			</p>
		</div>
		<div class="rounded-lg border p-6">
			<h3 class="mb-2 text-lg font-semibold">Brows</h3>
			<p class="text-gray-600">
				Lorem brow ipsum eye dolor art sit shape amet, tint consectetur colour adipiscing tweaze
				elit.
			</p>
		</div>
		<div class="rounded-lg border p-6">
			<h3 class="mb-2 text-lg font-semibold">Wax</h3>
			<p class="text-gray-600">
				Lorem wax ipsum leg dolor body sit sticky amet, back consectetur sack adipiscing crack elit.
			</p>
		</div>
	</div>
</section>

<PortfolioCarousel />

{#if !authStore.isAuthenticated}
	<section class="bg-gray-50 py-16">
		<div class="mx-auto max-w-3xl px-6 text-center">
			<h2 class="mb-4 text-2xl font-semibold">Why Choose Us?</h2>
			<p class="leading-relaxed text-gray-600">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus
				tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices
				diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci
				nec nonummy molestie,
			</p>
		</div>
	</section>
{/if}

<section class="py-20 text-center">
	<h2 class="mb-4 text-2xl font-semibold">Ready to Treat Yourself?</h2>
	<Button class="px-6 py-3 text-lg" href="prices">View Price List</Button>
</section>
