<script lang="ts">
	// Card-grid selector for the workload Source kind, replacing a bare
	// <select>. Mirrors the trigger-mode card pattern already used in the
	// wizard (role=radio buttons, mono tag + name + optional hint) so the
	// two pickers read as one design language. Kinds come from the backend
	// plugin registry; descriptions are optional (passed in when i18n keys
	// exist) so this component never hardcodes copy.
	interface Props {
		kinds: string[];
		value: string;
		onchange: () => void;
		descriptions?: Record<string, string>;
		ariaLabel?: string;
	}

	let { kinds, value = $bindable(), onchange, descriptions = {}, ariaLabel }: Props = $props();

	function select(kind: string): void {
		if (kind === value) return;
		value = kind;
		onchange();
	}

	// Radiogroup keyboard semantics: arrows move selection (and focus) to
	// the adjacent card, wrapping at the ends.
	function onKeydown(e: KeyboardEvent, index: number): void {
		const k = e.key;
		if (k !== 'ArrowRight' && k !== 'ArrowDown' && k !== 'ArrowLeft' && k !== 'ArrowUp') return;
		e.preventDefault();
		const dir = k === 'ArrowRight' || k === 'ArrowDown' ? 1 : -1;
		const next = (index + dir + kinds.length) % kinds.length;
		select(kinds[next]);
		const grid = (e.currentTarget as HTMLElement).closest('.kind-grid');
		grid?.querySelectorAll<HTMLButtonElement>('button')[next]?.focus();
	}
</script>

<div class="kind-grid" role="radiogroup" aria-label={ariaLabel}>
	{#each kinds as kind, i (kind)}
		<button
			type="button"
			role="radio"
			aria-checked={value === kind}
			tabindex={value === kind ? 0 : -1}
			class="kind-card"
			class:active={value === kind}
			onclick={() => select(kind)}
			onkeydown={(e) => onKeydown(e, i)}
		>
			<span class="kind-tag mono">{kind.toUpperCase()}</span>
			<span class="kind-name">{kind}</span>
			{#if descriptions[kind]}
				<span class="kind-hint">{descriptions[kind]}</span>
			{/if}
		</button>
	{/each}
</div>

<style>
	.kind-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
		gap: var(--space-3);
	}

	.kind-card {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-1);
		padding: var(--space-4);
		background: var(--surface-card);
		border: 1px solid var(--border-primary);
		border-radius: var(--radius-lg);
		cursor: pointer;
		text-align: left;
		transition:
			border-color var(--transition-fast),
			background var(--transition-fast),
			box-shadow var(--transition-fast),
			transform var(--transition-fast);
	}

	.kind-card:hover {
		border-color: var(--border-input);
		transform: translateY(-1px);
	}

	.kind-card.active {
		border-color: var(--forge-ember);
		background: color-mix(in srgb, var(--forge-ember) 6%, var(--surface-card));
		box-shadow: 0 0 0 3px color-mix(in srgb, var(--forge-ember) 16%, transparent);
	}

	.kind-tag {
		font-size: 0.625rem;
		letter-spacing: 0.08em;
		font-weight: var(--weight-semibold);
		color: var(--text-tertiary);
		padding: 2px var(--space-2);
		border: 1px solid var(--border-primary);
		border-radius: var(--radius-sm);
	}

	.kind-card.active .kind-tag {
		color: var(--forge-ember-deep);
		border-color: color-mix(in srgb, var(--forge-ember) 40%, transparent);
	}

	.kind-name {
		font-size: var(--text-base);
		font-weight: var(--weight-semibold);
		color: var(--text-primary);
		text-transform: capitalize;
	}

	.kind-hint {
		font-size: var(--text-xs);
		color: var(--text-tertiary);
		line-height: var(--leading-normal);
	}
</style>
