<script lang="ts">
	import { enhance } from '$app/forms';
	import { resolve } from '$app/paths';
	import type { ActionData, PageData } from './$types';
	import * as m from '$lib/paraglide/messages.js';
	import PageHeader from '$lib/components/PageHeader.svelte';
	import { Button } from '$lib/components/ui/button';
	import { Input } from '$lib/components/ui/input';
	import { Label } from '$lib/components/ui/label';
	import FormSectionCard from '$lib/components/forms/FormSectionCard.svelte';
	import SimpleSelect from '$lib/components/forms/SimpleSelect.svelte';

	let { data, form }: { data: PageData; form: ActionData } = $props();
	let partOfDay = $state('am');

	const partOfDayOptions = [
		{ value: 'am', label: m.common_am() },
		{ value: 'pm', label: m.common_pm() }
	];
</script>

<svelte:head><title>{m["routines_newTitle"]()} — innercontext</title></svelte:head>

<div class="editorial-page space-y-4">
	<PageHeader
		title={m["routines_newTitle"]()}
		kicker={m["nav_appSubtitle"]()}
		backHref={resolve('/routines')}
		backLabel={m["routines_backToList"]()}
	/>

	{#if form?.error}
		<div class="editorial-alert editorial-alert--error">{form.error}</div>
	{/if}

	<FormSectionCard title={m["routines_detailsTitle"]()} className="reveal-2">
			<form method="POST" use:enhance class="space-y-5">
				<div class="space-y-2">
					<Label for="routine_date">{m.routines_date()}</Label>
					<Input id="routine_date" name="routine_date" type="date" value={data.today} required />
				</div>

				<SimpleSelect
					id="part_of_day"
					name="part_of_day"
					label={m["routines_amOrPm"]()}
					options={partOfDayOptions}
					bind:value={partOfDay}
				/>

				<div class="space-y-2">
					<Label for="notes">{m.routines_notes()}</Label>
					<Input id="notes" name="notes" placeholder={m["routines_notesPlaceholder"]()} />
				</div>

				<div class="flex gap-3 pt-2">
					<Button type="submit">{m["routines_createRoutine"]()}</Button>
					<Button variant="outline" href={resolve('/routines')}>{m.common_cancel()}</Button>
				</div>
			</form>
	</FormSectionCard>
</div>
