<script lang="ts">
import { m } from '$lib/paraglide/messages.js';
import { radioGroupNav } from '$lib/shared/actions/radioGroupNav';

type GeschichteType = 'STORY' | 'JOURNEY';

const TYPES: GeschichteType[] = ['STORY', 'JOURNEY'];

interface Props {
	onweiter: (type: GeschichteType) => void;
}

let { onweiter }: Props = $props();

let selected = $state<GeschichteType | null>(null);
let announcement = $state('');

// Roving-tabindex holder: falls back to the first card so keyboard nav can start
// even when nothing is selected (all cards at tabindex=-1 would be a keyboard dead-spot).
const rovingFocusType = $derived(selected ?? TYPES[0]);

function select(type: GeschichteType) {
	selected = type;
	announcement = '';
}

function handleWeiter() {
	if (!selected) {
		announcement = m.journey_selector_aria_live_hint();
		return;
	}
	onweiter(selected);
}

const titles: Record<GeschichteType, () => string> = {
	STORY: m.journey_selector_story_title,
	JOURNEY: m.journey_selector_journey_title
};

const descs: Record<GeschichteType, () => string> = {
	STORY: m.journey_selector_story_desc,
	JOURNEY: m.journey_selector_journey_desc
};
</script>

<div>
	<p id="type-selector-label" class="mb-4 font-sans text-base font-medium text-ink">
		{m.journey_selector_question()}
	</p>

	<div
		role="radiogroup"
		aria-labelledby="type-selector-label"
		class="grid grid-cols-1 gap-4 sm:grid-cols-2"
		use:radioGroupNav={(v) => {
			if (TYPES.includes(v as GeschichteType)) select(v as GeschichteType);
		}}
	>
		{#each TYPES as type (type)}
			<button
				type="button"
				role="radio"
				value={type}
				aria-checked={selected === type}
				tabindex={type === rovingFocusType ? 0 : -1}
				onclick={() => select(type)}
				class="min-h-[64px] cursor-pointer rounded border px-4 py-3 text-left transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring {selected === type
					? 'border-primary bg-primary text-primary-fg'
					: 'border-line bg-surface text-ink hover:border-primary/50'}"
			>
				<span class="block font-sans text-sm font-bold">{titles[type]()}</span>
				<span class="mt-1 block font-sans text-xs text-current opacity-70">{descs[type]()}</span>
			</button>
		{/each}
	</div>

	<div aria-live="polite" aria-atomic="true" class="sr-only">{announcement}</div>

	{#if !selected}
		<p id="type-hint" class="mt-3 font-sans text-xs text-ink-3" aria-hidden="true">
			{m.journey_selector_aria_live_hint()}
		</p>
	{/if}

	<button
		type="button"
		aria-disabled={selected == null ? 'true' : 'false'}
		aria-describedby={selected == null ? 'type-hint' : undefined}
		tabindex="0"
		onclick={handleWeiter}
		class="mt-6 inline-flex h-11 items-center rounded px-6 font-sans text-sm font-medium transition-opacity focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring {selected == null
			? 'cursor-not-allowed bg-primary text-primary-fg opacity-50'
			: 'bg-primary text-primary-fg hover:opacity-90'}"
	>
		{m.journey_selector_next_btn()}
	</button>
</div>
