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

	import * as m from '$lib/paraglide/messages';

	import SupporterIcon from './SupporterIcon.svelte';
	import UnlockDialog from './UnlockDialog.svelte';
	import { SIGNUP_URL, SUPPORTER_PERKS, getSupporterPrice } from './config';
	import { isSupporter, refreshSupporter, supporterState } from './store';

	interface Props {
		/** Short feature name shown in the locked panel headline. */
		feature: string;
		children: import('svelte').Snippet;
	}

	let { feature, children }: Props = $props();

	let unlockOpen = $state(false);
	const price = getSupporterPrice();

	// Re-verify the stored key whenever the gate mounts.
	onMount(refreshSupporter);

	// Show a brief spinner only when we have no cached answer yet and are checking.
	let initialChecking = $derived($supporterState.status === 'checking' && !$isSupporter);
</script>

{#if $isSupporter}
	{@render children()}
{:else if initialChecking}
	<div class="flex items-center justify-center py-24 text-sm text-muted-foreground">
		<svg class="mr-2 h-4 w-4 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
			<path stroke-width="2" d="M21 12a9 9 0 1 1-6.219-8.56" />
		</svg>
		{m.supporter_checking()}
	</div>
{:else}
	<div
		class="mx-auto max-w-xl rounded-2xl border border-border bg-card px-6 py-10 text-center shadow-sm"
	>
		<div
			class="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-primary/10 text-primary"
		>
			<SupporterIcon class="h-7 w-7" />
		</div>

		<!-- the feature name comes from a page subtitle ("météo historique"), which is
	     lowercase mid-sentence and has to be lifted at the start of this one -->
		<h2 class="text-xl font-bold tracking-tight first-letter:uppercase">
			{m.supporter_gate_title({ feature })}
		</h2>
		<p class="mx-auto mt-1.5 max-w-sm text-sm text-muted-foreground">
			{m.supporter_gate_body({ price })}
		</p>

		<ul class="mx-auto mt-5 grid max-w-sm gap-2 text-left">
			{#each SUPPORTER_PERKS() as perk (perk)}
				<li class="flex items-start gap-2.5 text-sm">
					<svg
						class="mt-0.5 h-4 w-4 shrink-0 text-primary"
						fill="none"
						stroke="currentColor"
						viewBox="0 0 24 24"
						stroke-width="2.5"
					>
						<path stroke-linecap="round" stroke-linejoin="round" d="M20 6 9 17l-5-5" />
					</svg>
					<span>{perk}</span>
				</li>
			{/each}
		</ul>

		<div class="mt-7 flex flex-col items-center justify-center gap-3 sm:flex-row">
			<a
				href={SIGNUP_URL}
				target="_blank"
				rel="noopener"
				class="inline-flex h-10 w-full items-center justify-center rounded-lg bg-primary px-5 text-sm font-semibold text-primary-foreground transition-colors hover:bg-primary/90 sm:w-auto"
			>
				{m.supporter_become()}
			</a>
			<button
				type="button"
				class="inline-flex h-10 w-full cursor-pointer items-center justify-center rounded-lg border border-border bg-background px-5 text-sm font-semibold text-foreground transition-colors hover:bg-muted sm:w-auto"
				onclick={() => (unlockOpen = true)}
			>
				{m.supporter_have_key()}
			</button>
		</div>

		{#if $supporterState.status === 'invalid'}
			<p class="mt-4 text-xs text-amber-600 dark:text-amber-400">
				{m.supporter_key_expired()}
			</p>
		{/if}
	</div>
{/if}

<UnlockDialog bind:open={unlockOpen} />
