<script lang="ts">
	export let data;

	import { resolve } from '$app/paths';
	import { language, t } from '$lib/i18n';
	import type { CharacterWithRelations } from '$lib/server/daily-character';

	$: yesterdayCharacter = data.yesterdayCharacter;
	$: isFrench = $language === 'fr';

	function parseEpithets(value: unknown): string[] {
		if (Array.isArray(value)) {
			return value.filter((entry): entry is string => typeof entry === 'string' && entry.length > 0);
		}

		if (typeof value === 'string') {
			try {
				const parsed = JSON.parse(value);
				if (Array.isArray(parsed)) {
					return parsed.filter((entry): entry is string => typeof entry === 'string' && entry.length > 0);
				}
			} catch {
				if (value.length > 0) {
					return [value];
				}
			}
		}

		return [];
	}

	function getDisplayName(character: CharacterWithRelations | null): string {
		if (isFrench && typeof character?.frName === 'string' && character.frName.length > 0) {
			return character.frName;
		}

		return character?.name || '';
	}

	function getDisplayEpithets(character: CharacterWithRelations | null): string[] {
		const frenchEpithets = parseEpithets(character?.frEpithets);
		if (isFrench && frenchEpithets.length > 0) {
			return frenchEpithets;
		}

		return parseEpithets(character?.epithets);
	}

	function getWikiUrl(character: CharacterWithRelations | null): string {
		if (isFrench && typeof character?.frUrl === 'string' && character.frUrl.length > 0) {
			return character.frUrl;
		}

		return character?.url || '';
	}

</script>

<svelte:head>
	<title>OnePieceDle</title>
</svelte:head>

<main
	class="relative min-h-[calc(100vh-5rem)] bg-slate-950 text-slate-100"
>
	<div class="absolute inset-0 bg-linear-to-br from-slate-950/85 via-slate-900/60 to-slate-950/80"></div>
	<div class="absolute inset-0 mix-blend-screen opacity-20 bg-[radial-gradient(circle_at_top,rgba(255,215,84,0.35),transparent_55%)]"></div>

	<div class="relative mx-auto flex w-full max-w-6xl flex-col items-center justify-center px-6 py-10">
		<div class="flex w-full flex-col items-center gap-8">
			<div class="text-center mb-12">
				<h1 class="text-4xl font-black uppercase tracking-[0.3em] text-amber-50 sm:text-6xl">
					OnePieceDle
				</h1>
				<p class="mt-4 max-w-2xl text-base text-slate-200 sm:text-lg">
					{$t.game.home.heroDescription}
				</p>
			</div>
			<div class="grid w-full gap-4 sm:grid-cols-2">
				<div class="rounded-2xl border border-white/10 bg-white/5 p-6 shadow-[0_24px_60px_rgba(0,0,0,0.45)] backdrop-blur">
					<h2 class="text-sm font-semibold uppercase tracking-[0.2em] text-amber-100">{$t.game.home.dailyTitle}</h2>
					<p class="mt-3 text-lg font-semibold text-white">{$t.game.home.dailySubtitle}</p>
					<p class="mt-2 text-sm text-slate-200">{$t.game.home.dailyDescription}</p>
					<a
						href={resolve("/daily/character")}
						class="mt-5 inline-flex w-full items-center justify-center rounded-full bg-amber-300 px-5 py-3 text-sm font-semibold text-slate-900 transition hover:bg-amber-200"
					>
						{$t.game.home.dailyCta}
					</a>
				</div>
				<div class="rounded-2xl border border-white/10 bg-white/5 p-6 shadow-[0_24px_60px_rgba(0,0,0,0.45)] backdrop-blur">
				<h2 class="text-sm font-semibold uppercase tracking-[0.2em] text-amber-100">{$t.game.home.infiniteTitle}</h2>
				<p class="mt-3 text-lg font-semibold text-white">{$t.game.home.infiniteSubtitle}</p>
				<p class="mt-2 text-sm text-slate-200">{$t.game.home.infiniteDescription}</p>
				<a
					href={resolve("/infinite/character")}
					class="mt-5 inline-flex w-full items-center justify-center rounded-full border border-amber-200/40 bg-transparent px-5 py-3 text-sm font-semibold text-amber-100 transition hover:border-amber-200 hover:text-amber-50"
				>
					{$t.game.home.infiniteCta}
				</a>
				</div>
			</div>
			<div class="w-full rounded-3xl border border-white/10 bg-white/5 p-6 shadow-[0_24px_60px_rgba(0,0,0,0.45)] backdrop-blur sm:p-8">
			{#if yesterdayCharacter}
				<div class="flex flex-col items-center gap-5 text-center sm:flex-row sm:text-left">
					{#if yesterdayCharacter.pictureUrl}
						<img
							src={yesterdayCharacter.pictureUrl}
							alt={getDisplayName(yesterdayCharacter)}
							class="h-20 w-20 rounded-full border border-amber-200/40 object-cover"
						/>
					{:else}
						<div class="flex h-20 w-20 items-center justify-center rounded-full border border-amber-200/40 bg-slate-900/70 text-xs uppercase tracking-[0.25em] text-amber-100">
							{$t.game.home.photoFallback}
						</div>
					{/if}
					<div class="flex-1">
						<p class="text-xs font-semibold uppercase tracking-[0.28em] text-amber-100">{$t.game.home.yesterdayCharacter}</p>
						<p class="mt-2 text-lg font-semibold text-white">{getDisplayName(yesterdayCharacter)}</p>
						{#if getDisplayEpithets(yesterdayCharacter).length > 0}
							<p class="mt-1 text-sm text-slate-400">
								{getDisplayEpithets(yesterdayCharacter).join(', ')}
							</p>
						{/if}
					</div>
					{#if isFrench}
						<a
							href="https://onepiece.fandom.com/fr/wiki/{getWikiUrl(yesterdayCharacter)}"
							target="_blank"
							rel="noopener noreferrer"
							class="w-full rounded-full border border-amber-200/40 bg-transparent px-5 py-3 text-sm font-semibold text-amber-100 transition hover:border-amber-200 hover:text-amber-50 sm:w-auto"
						>
							{$t.game.home.openPage}
						</a>
					{:else}
						<a
							href="https://onepiece.fandom.com/wiki/{getWikiUrl(yesterdayCharacter)}"
							target="_blank"
							rel="noopener noreferrer"
							class="w-full rounded-full border border-amber-200/40 bg-transparent px-5 py-3 text-sm font-semibold text-amber-100 transition hover:border-amber-200 hover:text-amber-50 sm:w-auto"
						>
							{$t.game.home.openPage}
						</a>
					{/if}
				</div>
			{:else}
				<div class="flex flex-col items-center gap-5 text-center sm:flex-row sm:text-left">
					<div class="flex h-20 w-20 items-center justify-center rounded-full border border-amber-200/40 bg-slate-900/70 text-xs uppercase tracking-[0.25em] text-amber-100">
						{$t.game.home.photoFallback}
					</div>
					<div class="flex-1">
						<p class="text-xs font-semibold uppercase tracking-[0.28em] text-amber-100">{$t.game.home.yesterdayCharacter}</p>
						<p class="mt-2 text-lg font-semibold text-white">{$t.game.home.noCharacter}</p>
						<p class="mt-1 text-sm text-slate-200">{$t.game.home.noYesterdayCharacter}</p>
					</div>
				</div>
			{/if}
			</div>
		</div>
	</div>
</main>
