profilarr/src/components/notifications/NotificationServiceForm.svelte

<script lang="ts">
	import { enhance } from '$app/forms';
	import { alertStore } from '$alerts/store';
	import DiscordConfiguration from './DiscordConfiguration.svelte';
	import { siDiscord } from 'simple-icons';

	export let mode: 'create' | 'edit' = 'create';
	export let initialData: {
		name?: string;
		serviceType?: string;
		config?: Record<string, unknown>;
		enabledTypes?: string[];
	} = {};

	let selectedType: 'discord' | 'slack' | 'email' = (initialData.serviceType as 'discord') || 'discord';
	let serviceName = initialData.name || '';

	// Available notification types
	const notificationTypes = [
		{ id: 'job.create_backup.success', label: 'Backup Created (Success)', category: 'Backups' },
		{ id: 'job.create_backup.failed', label: 'Backup Created (Failed)', category: 'Backups' },
		{
			id: 'job.cleanup_backups.success',
			label: 'Backup Cleanup (Success)',
			category: 'Backups'
		},
		{ id: 'job.cleanup_backups.failed', label: 'Backup Cleanup (Failed)', category: 'Backups' },
		{ id: 'job.cleanup_logs.success', label: 'Log Cleanup (Success)', category: 'Logs' },
		{ id: 'job.cleanup_logs.failed', label: 'Log Cleanup (Failed)', category: 'Logs' }
	];

	// Group notification types by category
	const groupedTypes = notificationTypes.reduce(
		(acc, type) => {
			if (!acc[type.category]) {
				acc[type.category] = [];
			}
			acc[type.category].push(type);
			return acc;
		},
		{} as Record<string, typeof notificationTypes>
	);

	// Check if a notification type should be checked by default
	function isTypeEnabled(typeId: string): boolean {
		return initialData.enabledTypes?.includes(typeId) || false;
	}
</script>

<form
	method="POST"
	action="?/{mode}"
	use:enhance={() => {
		return async ({ result, update }) => {
			if (result.type === 'failure' && result.data) {
				alertStore.add(
					'error',
					(result.data as { error?: string }).error || `Failed to ${mode} service`
				);
			} else if (result.type === 'redirect') {
				alertStore.add('success', `Notification service ${mode === 'create' ? 'created' : 'updated'} successfully`);
			}
			await update();
		};
	}}
	class="space-y-6"
>
	<!-- Basic Settings -->
	<div
		class="rounded-lg border border-neutral-200 bg-white p-6 dark:border-neutral-800 dark:bg-neutral-900"
	>
		<h2 class="mb-4 text-lg font-semibold text-neutral-900 dark:text-neutral-50">
			Basic Settings
		</h2>

		<div class="space-y-4">
			<!-- Service Type -->
			<div>
				<label
					for="type"
					class="block text-sm font-medium text-neutral-700 dark:text-neutral-300"
				>
					Service Type
					<span class="text-red-500">*</span>
				</label>
				<div class="relative mt-1">
					<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
						{#if selectedType === 'discord'}
							<svg
								role="img"
								viewBox="0 0 24 24"
								class="h-4 w-4 text-neutral-600 dark:text-neutral-400"
								fill="currentColor"
							>
								<path d={siDiscord.path} />
							</svg>
						{/if}
					</div>
					<select
						id="type"
						name="type"
						bind:value={selectedType}
						required
						disabled={mode === 'edit'}
						class="block w-full rounded-lg border border-neutral-300 bg-white py-2 pl-10 pr-3 text-sm text-neutral-900 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100"
					>
						<option value="discord">Discord</option>
					</select>
				</div>
				{#if mode === 'edit'}
					<p class="mt-1 text-xs text-neutral-500 dark:text-neutral-400">
						Service type cannot be changed after creation
					</p>
				{/if}
			</div>

			<!-- Service Name -->
			<div>
				<label
					for="name"
					class="block text-sm font-medium text-neutral-700 dark:text-neutral-300"
				>
					Service Name
					<span class="text-red-500">*</span>
				</label>
				<input
					type="text"
					id="name"
					name="name"
					bind:value={serviceName}
					required
					placeholder="e.g., Main Discord Server"
					class="mt-1 block w-full rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm text-neutral-900 placeholder-neutral-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder-neutral-500"
				/>
				<p class="mt-1 text-xs text-neutral-500 dark:text-neutral-400">
					A friendly name to identify this notification service
				</p>
			</div>
		</div>
	</div>

	<!-- Service Configuration -->
	{#if selectedType === 'discord'}
		<DiscordConfiguration config={initialData.config} mode={mode} />
	{/if}

	<!-- Notification Types -->
	<div
		class="rounded-lg border border-neutral-200 bg-white p-6 dark:border-neutral-800 dark:bg-neutral-900"
	>
		<h2 class="mb-4 text-lg font-semibold text-neutral-900 dark:text-neutral-50">
			Notification Types
		</h2>
		<p class="mb-4 text-sm text-neutral-600 dark:text-neutral-400">
			Select which types of notifications should be sent to this service
		</p>

		<div class="space-y-4">
			{#each Object.entries(groupedTypes) as [category, types]}
				<div>
					<h3 class="mb-2 text-sm font-semibold text-neutral-700 dark:text-neutral-300">
						{category}
					</h3>
					<div class="space-y-2">
						{#each types as type}
							<div class="flex items-start gap-3">
								<input
									type="checkbox"
									id={type.id}
									name={type.id}
									checked={isTypeEnabled(type.id)}
									class="mt-0.5 h-4 w-4 rounded border-neutral-300 text-blue-600 focus:ring-2 focus:ring-blue-500 dark:border-neutral-700 dark:bg-neutral-800"
								/>
								<label for={type.id} class="text-sm text-neutral-700 dark:text-neutral-300">
									{type.label}
								</label>
							</div>
						{/each}
					</div>
				</div>
			{/each}
		</div>
	</div>

	<!-- Actions -->
	<div class="flex justify-end gap-3">
		<a
			href="/settings/notifications"
			class="rounded-lg border border-neutral-300 bg-white px-4 py-2 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300 dark:hover:bg-neutral-800"
		>
			Cancel
		</a>
		<button
			type="submit"
			class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600"
		>
			{mode === 'create' ? 'Create Service' : 'Update Service'}
		</button>
	</div>
</form>