<script lang="ts">
	import { goto } from '$app/navigation';
	import * as api from '$lib/api';
	import ForgeHero from '$lib/components/ForgeHero.svelte';
	import TriggerKindForm, {
		createTriggerKindFormState,
		isTriggerFormValid,
		buildTriggerInput
	} from '$lib/components/TriggerKindForm.svelte';
	import { t } from '$lib/i18n';

	// All kind-aware form state lives in the shared component. The page
	// just owns submit state + the navigation that follows a successful
	// create. Eliminates the per-kind state slots / buildConfig /
	// canSubmit / template duplication that previously caused regex
	// drift between /triggers/new, /triggers/[id], and TriggerKindForm.
	let formState = $state(createTriggerKindFormState({ kind: 'registry' }));
	let submitting = $state(false);
	let error = $state('');

	const canSubmit = $derived(!submitting && isTriggerFormValid(formState));

	async function submit(e: Event): Promise<void> {
		e.preventDefault();
		if (!canSubmit) return;
		error = '';
		submitting = true;
		try {
			const body = buildTriggerInput(formState);
			const created = await api.createTrigger(body);
			goto(`/triggers/${created.id}`);
		} catch (e) {
			error = e instanceof Error ? e.message : 'Create failed';
		} finally {
			submitting = false;
		}
	}
</script>

<svelte:head>
	<title>{$t('redeployTriggers.titleNew')} · Tinyforge</title>
</svelte:head>

<div class="forge">
	{#snippet lede()}
		{$t('redeployTriggers.ledeNew')}
	{/snippet}

	<ForgeHero
		backHref="/triggers"
		backLabel={$t('redeployTriggers.toolbar.backToList')}
		eyebrowSuffix={$t('redeployTriggers.toolbar.newButton').toUpperCase()}
		title={$t('redeployTriggers.titleNew')}
		size="lg"
		lede_html={lede}
	/>

	<form onsubmit={submit} class="form" novalidate aria-busy={submitting}>
		{#if error}
			<div class="alert" role="alert">
				<span class="alert-tag">ERR</span><span>{error}</span>
			</div>
		{/if}

		<TriggerKindForm bind:state={formState} idPrefix="trig" />

		<div class="actions">
			<a href="/triggers" class="forge-btn-ghost">{$t('redeployTriggers.form.cancel')}</a>
			<button
				type="submit"
				class="forge-btn"
				disabled={!canSubmit}
				aria-busy={submitting}
			>
				{submitting
					? $t('redeployTriggers.form.submitting')
					: $t('redeployTriggers.form.submit')}
			</button>
		</div>
	</form>
</div>

<style>
	.forge {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		max-width: 760px;
		margin: 0 auto;
	}
	.form {
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
		background: var(--surface-card);
		border: 1px solid var(--border-primary);
		border-radius: var(--radius-2xl);
		padding: 1.75rem;
	}
	@media (max-width: 600px) {
		.form {
			padding: 1.1rem;
			gap: 1.25rem;
		}
	}

	.alert {
		display: flex;
		gap: 0.7rem;
		align-items: center;
		padding: 0.7rem 0.9rem;
		background: var(--color-danger-light);
		color: var(--color-danger-dark);
		border: 1px solid var(--color-danger);
		border-left-width: 4px;
		border-radius: var(--radius-lg);
		font-size: 0.875rem;
	}
	.alert-tag {
		font-family: var(--forge-mono);
		font-weight: 700;
		font-size: 0.65rem;
		letter-spacing: 0.16em;
		padding: 0.15rem 0.4rem;
		background: var(--color-danger);
		color: var(--surface-card);
		border-radius: var(--radius-sm);
	}
	:global([data-theme='dark']) .alert {
		background: color-mix(in srgb, var(--color-danger) 14%, transparent);
		color: color-mix(in srgb, var(--color-danger) 60%, var(--text-primary));
	}

	.actions {
		display: flex;
		justify-content: flex-end;
		gap: 0.55rem;
		flex-wrap: wrap;
	}
	@media (max-width: 480px) {
		.actions {
			flex-direction: column-reverse;
			align-items: stretch;
		}
		.actions :global(.forge-btn),
		.actions :global(.forge-btn-ghost) {
			justify-content: center;
		}
	}
</style>
