<script lang="ts">
	import { superForm, type SuperValidated } from 'sveltekit-superforms/client';
	import type { updateSystemSettingsSchema } from '$lib/utils/validators.js';
	import type { z } from 'zod';

	let { form: formData }: { form: SuperValidated<z.infer<typeof updateSystemSettingsSchema>> } = $props();

	const { form, errors, enhance, delayed } = superForm(formData);
</script>

<form method="POST" action="?/update" use:enhance class="space-y-8">
	<!-- Authentication -->
	<section class="rounded-lg border border-border bg-card p-6">
		<h2 class="mb-4 text-lg font-semibold text-card-foreground">Authentication</h2>
		<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
			<div>
				<label for="authMode" class="mb-1 block text-sm font-medium text-foreground">Auth Mode</label>
				<select
					id="authMode"
					name="authMode"
					bind:value={$form.authMode}
					class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground"
				>
					<option value="local">Local</option>
					<option value="oauth">OAuth</option>
					<option value="both">Both</option>
				</select>
				{#if $errors.authMode}<span class="text-xs text-destructive">{$errors.authMode}</span>{/if}
			</div>
			<div class="flex items-center gap-2 pt-6">
				<input
					id="registrationEnabled"
					name="registrationEnabled"
					type="checkbox"
					bind:checked={$form.registrationEnabled}
					class="h-4 w-4 rounded border-input"
				/>
				<label for="registrationEnabled" class="text-sm font-medium text-foreground">
					Allow user registration
				</label>
			</div>
		</div>
	</section>

	<!-- OAuth (stored but non-functional in MVP) -->
	<section class="rounded-lg border border-border bg-card p-6">
		<h2 class="mb-4 text-lg font-semibold text-card-foreground">OAuth Configuration</h2>
		<p class="mb-4 text-xs text-muted-foreground">OAuth settings are stored but not active in this MVP version.</p>
		<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
			<div>
				<label for="oauthClientId" class="mb-1 block text-sm font-medium text-foreground">Client ID</label>
				<input
					id="oauthClientId"
					name="oauthClientId"
					type="text"
					bind:value={$form.oauthClientId}
					class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground"
					placeholder="OAuth client ID"
				/>
			</div>
			<div>
				<label for="oauthClientSecret" class="mb-1 block text-sm font-medium text-foreground">Client Secret</label>
				<input
					id="oauthClientSecret"
					name="oauthClientSecret"
					type="password"
					bind:value={$form.oauthClientSecret}
					class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground"
					placeholder="OAuth client secret"
				/>
			</div>
			<div class="sm:col-span-2">
				<label for="oauthDiscoveryUrl" class="mb-1 block text-sm font-medium text-foreground">Discovery URL</label>
				<input
					id="oauthDiscoveryUrl"
					name="oauthDiscoveryUrl"
					type="url"
					bind:value={$form.oauthDiscoveryUrl}
					class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground"
					placeholder="https://example.com/.well-known/openid-configuration"
				/>
				{#if $errors.oauthDiscoveryUrl}<span class="text-xs text-destructive">{$errors.oauthDiscoveryUrl}</span>{/if}
			</div>
		</div>
	</section>

	<!-- Theme Defaults -->
	<section class="rounded-lg border border-border bg-card p-6">
		<h2 class="mb-4 text-lg font-semibold text-card-foreground">Theme Defaults</h2>
		<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
			<div>
				<label for="defaultTheme" class="mb-1 block text-sm font-medium text-foreground">Default Theme</label>
				<select
					id="defaultTheme"
					name="defaultTheme"
					bind:value={$form.defaultTheme}
					class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground"
				>
					<option value="dark">Dark</option>
					<option value="light">Light</option>
				</select>
			</div>
			<div>
				<label for="defaultPrimaryColor" class="mb-1 block text-sm font-medium text-foreground">Default Primary Color</label>
				<div class="flex items-center gap-2">
					<input
						id="defaultPrimaryColor"
						name="defaultPrimaryColor"
						type="text"
						bind:value={$form.defaultPrimaryColor}
						class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground"
						placeholder="#6366f1"
						pattern="^#[0-9a-fA-F]{6}$"
					/>
					{#if $form.defaultPrimaryColor}
						<div
							class="h-8 w-8 shrink-0 rounded border border-border"
							style:background-color={$form.defaultPrimaryColor}
						></div>
					{/if}
				</div>
				{#if $errors.defaultPrimaryColor}<span class="text-xs text-destructive">{$errors.defaultPrimaryColor}</span>{/if}
			</div>
		</div>
	</section>

	<!-- Healthcheck Defaults -->
	<section class="rounded-lg border border-border bg-card p-6">
		<h2 class="mb-4 text-lg font-semibold text-card-foreground">Healthcheck Defaults</h2>
		<p class="mb-4 text-xs text-muted-foreground">JSON configuration for default healthcheck behavior (interval, timeout, method).</p>
		<div>
			<label for="healthcheckDefaults" class="mb-1 block text-sm font-medium text-foreground">Defaults (JSON)</label>
			<textarea
				id="healthcheckDefaults"
				name="healthcheckDefaults"
				bind:value={$form.healthcheckDefaults}
				rows="4"
				class="w-full rounded-md border border-input bg-background px-3 py-2 font-mono text-sm text-foreground"
				placeholder={'{"interval": 300, "timeout": 5000, "method": "GET"}'}
			></textarea>
			{#if $errors.healthcheckDefaults}<span class="text-xs text-destructive">{$errors.healthcheckDefaults}</span>{/if}
		</div>
	</section>

	{#if $errors._errors}
		<p class="text-sm text-destructive">{$errors._errors}</p>
	{/if}

	<div class="flex items-center gap-3">
		<button
			type="submit"
			class="rounded-md bg-primary px-6 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-ring"
			disabled={$delayed}
		>
			{$delayed ? 'Saving...' : 'Save Settings'}
		</button>
	</div>
</form>
