notify-bridge/frontend/src/routes/bots/EmailBotTab.svelte

<script lang="ts">
	import { api, getBlockedBy, type BlockedByDetail , errMsg} from '$lib/api';
	import BlockedByModal from '$lib/components/BlockedByModal.svelte';
	import { t, getLocale } from '$lib/i18n';
	import { emailBotsCache } from '$lib/stores/caches.svelte';
	import PageHeader from '$lib/components/PageHeader.svelte';
	import Card from '$lib/components/Card.svelte';
	import IconPicker from '$lib/components/IconPicker.svelte';
	import MdiIcon from '$lib/components/MdiIcon.svelte';
	import EmptyState from '$lib/components/EmptyState.svelte';
	import ConfirmModal from '$lib/components/ConfirmModal.svelte';
	import IconButton from '$lib/components/IconButton.svelte';
	import { snackSuccess, snackError } from '$lib/stores/snackbar.svelte';
	import Button from '$lib/components/Button.svelte';
	import ErrorBanner from '$lib/components/ErrorBanner.svelte';
	import MetaStrip, { type MetaTile } from '$lib/components/MetaStrip.svelte';
	import type { EmailBot } from '$lib/types';

	let { onreload }: { onreload: () => Promise<void> } = $props();

	let emailBots = $derived(emailBotsCache.items);
	let showEmailForm = $state(false);
	let editingEmail = $state<number | null>(null);
	let emailSubmitting = $state(false);
	let emailTesting = $state<Record<number, boolean>>({});
	let confirmDeleteEmail = $state<{ id: number; onconfirm: () => Promise<void> } | null>(null);
	let error = $state('');

	const defaultEmailForm = () => ({
		name: '', icon: '', email: '', smtp_host: '', smtp_port: 587,
		smtp_username: '', smtp_password: '', smtp_use_tls: true,
	});
	let emailForm = $state(defaultEmailForm());
	let nameManuallyEdited = $state(false);

	const DEFAULT_BOT_NAME = 'Email Bot';
	$effect(() => {
		if (showEmailForm && !nameManuallyEdited && !editingEmail) {
			emailForm.name = DEFAULT_BOT_NAME;
		}
	});

	function emailBotTiles(bot: EmailBot): MetaTile[] {
		const tiles: MetaTile[] = [];
		tiles.push({
			icon: 'mdiEmailOutline',
			label: bot.email,
			tone: 'lavender',
			mono: true,
		});
		tiles.push({
			icon: 'mdiServerNetwork',
			label: `${bot.smtp_host}:${bot.smtp_port}`,
			tone: 'sky',
			mono: true,
		});
		if (bot.smtp_use_tls) {
			tiles.push({
				icon: 'mdiLockOutline',
				label: 'TLS',
				tone: 'mint',
			});
		}
		return tiles;
	}

	function openNewEmail() { emailForm = defaultEmailForm(); nameManuallyEdited = false; editingEmail = null; showEmailForm = true; }
	function editEmailBot(bot: EmailBot) {
		emailForm = {
			name: bot.name, icon: bot.icon || '', email: bot.email,
			smtp_host: bot.smtp_host, smtp_port: bot.smtp_port,
			smtp_username: bot.smtp_username, smtp_password: '',
			smtp_use_tls: bot.smtp_use_tls,
		};
		nameManuallyEdited = true;
		editingEmail = bot.id; showEmailForm = true;
	}

	async function saveEmailBot(e: SubmitEvent) {
		e.preventDefault(); error = ''; emailSubmitting = true;
		try {
			const body = { ...emailForm };
			if (editingEmail) {
				if (!body.smtp_password) delete (body as any).smtp_password;
				await api(`/email-bots/${editingEmail}`, { method: 'PUT', body: JSON.stringify(body) });
				snackSuccess(t('snack.emailBotUpdated'));
			} else {
				await api('/email-bots', { method: 'POST', body: JSON.stringify(body) });
				snackSuccess(t('snack.emailBotCreated'));
			}
			emailForm = defaultEmailForm(); nameManuallyEdited = false; showEmailForm = false; editingEmail = null; await onreload();
		} catch (err: unknown) { const __m = errMsg(err); error = __m; snackError(__m); }
		finally { emailSubmitting = false; }
	}

	let blockedBy = $state<BlockedByDetail | null>(null);
	function removeEmail(id: number) {
		confirmDeleteEmail = {
			id,
			onconfirm: async () => {
				try { await api(`/email-bots/${id}`, { method: 'DELETE' }); await onreload(); snackSuccess(t('snack.emailBotDeleted')); }
				catch (err: unknown) {
					const bb = getBlockedBy(err);
					if (bb) { blockedBy = bb; return; }
					const m = errMsg(err); error = m; snackError(m);
				}
				finally { confirmDeleteEmail = null; }
			}
		};
	}

	async function testEmailBot(botId: number) {
		emailTesting = { ...emailTesting, [botId]: true };
		try {
			const res = await api(`/email-bots/${botId}/test?locale=${getLocale()}`, { method: 'POST' });
			if (res.success) snackSuccess(t('snack.emailBotTestSent'));
			else snackError(res.error || t('emailBot.operationFailed'));
		} catch (err: unknown) { snackError(errMsg(err)); }
		emailTesting = { ...emailTesting, [botId]: false };
	}
</script>

<PageHeader
	title={t('emailBot.title')}
	emphasis={t('emailBot.titleEmphasis')}
	description={t('emailBot.description')}
	crumb={t('crumbs.operatorsBots')}
	count={emailBots.length}
	countLabel={t('emailBot.countLabel')}
>
	<Button size="sm" onclick={() => { showEmailForm ? (showEmailForm = false, editingEmail = null) : openNewEmail(); }}>
		{showEmailForm ? t('common.cancel') : t('emailBot.addBot')}
	</Button>
</PageHeader>

{#if showEmailForm}
	<Card class="mb-6">
		<ErrorBanner message={error} />
		<form onsubmit={saveEmailBot} class="space-y-3">
			<div>
				<label for="ebot-name" class="block text-sm font-medium mb-1">{t('emailBot.name')}</label>
				<div class="flex gap-2">
					<IconPicker value={emailForm.icon} onselect={(v: string) => emailForm.icon = v} />
					<input id="ebot-name" bind:value={emailForm.name} oninput={() => nameManuallyEdited = true} required placeholder={t('emailBot.namePlaceholder')}
						class="flex-1 px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
				</div>
			</div>
			<div>
				<label for="ebot-email" class="block text-sm font-medium mb-1">{t('emailBot.email')}</label>
				<input id="ebot-email" bind:value={emailForm.email} required type="email" placeholder="notify@example.com"
					class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
			</div>
			<div class="grid grid-cols-2 gap-3">
				<div>
					<label for="ebot-host" class="block text-sm font-medium mb-1">{t('emailBot.smtpHost')}</label>
					<input id="ebot-host" bind:value={emailForm.smtp_host} required placeholder="smtp.gmail.com"
						class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
				</div>
				<div>
					<label for="ebot-port" class="block text-sm font-medium mb-1">{t('emailBot.smtpPort')}</label>
					<input id="ebot-port" bind:value={emailForm.smtp_port} type="number" min="1" max="65535"
						class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
				</div>
			</div>
			<div class="grid grid-cols-2 gap-3">
				<div>
					<label for="ebot-user" class="block text-sm font-medium mb-1">{t('emailBot.smtpUsername')}</label>
					<input id="ebot-user" bind:value={emailForm.smtp_username} placeholder={t('emailBot.smtpUsernamePlaceholder')}
						class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
				</div>
				<div>
					<label for="ebot-pass" class="block text-sm font-medium mb-1">{t('emailBot.smtpPassword')}</label>
					<input id="ebot-pass" bind:value={emailForm.smtp_password} type="password" placeholder={editingEmail ? t('emailBot.passwordUnchanged') : ''}
						class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
				</div>
			</div>
			<label class="flex items-center gap-2 text-sm cursor-pointer">
				<input type="checkbox" bind:checked={emailForm.smtp_use_tls} />
				{t('emailBot.useTls')}
			</label>
			<Button type="submit" disabled={emailSubmitting}>
				{emailSubmitting ? t('common.loading') : (editingEmail ? t('common.save') : t('emailBot.addBot'))}
			</Button>
		</form>
	</Card>
{/if}

{#if emailBots.length === 0 && !showEmailForm}
	<Card>
		<EmptyState icon="mdiEmailOutline" message={t('emailBot.noBots')} />
	</Card>
{:else}
	<div class="list-stack stagger-children">
		{#each emailBots as bot}
			<Card hover entityId={bot.id}>
				<div class="list-row">
					<div class="list-row__identity">
						<div class="flex items-center gap-2 min-w-0">
							<span style="color: var(--color-primary);" class="shrink-0"><MdiIcon name={bot.icon || 'mdiEmailOutline'} size={20} /></span>
							<p class="font-medium truncate">{bot.name}</p>
						</div>
						<div class="flex items-center gap-2 mt-1 flex-wrap list-row__secondary">
							<span class="text-xs text-[var(--color-muted-foreground)] font-mono">{bot.email}</span>
							<span class="text-xs px-1.5 py-0.5 rounded bg-[var(--color-muted)] text-[var(--color-muted-foreground)]">{bot.smtp_host}:{bot.smtp_port}</span>
							{#if bot.smtp_use_tls}
								<span class="text-xs px-1.5 py-0.5 rounded bg-[var(--color-success-bg)] text-[var(--color-success-fg)]">TLS</span>
							{/if}
						</div>
					</div>
					<MetaStrip tiles={emailBotTiles(bot)} />
					<div class="list-row__actions">
						<IconButton icon="mdiSend" title={t('emailBot.testConnection')} onclick={() => testEmailBot(bot.id)} disabled={emailTesting[bot.id]} />
						<IconButton icon="mdiPencil" title={t('common.edit')} onclick={() => editEmailBot(bot)} />
						<IconButton icon="mdiDelete" title={t('common.delete')} onclick={() => removeEmail(bot.id)} variant="danger" />
					</div>
				</div>
			</Card>
		{/each}
	</div>
{/if}

<ConfirmModal open={confirmDeleteEmail !== null} message={t('emailBot.confirmDelete')}
	onconfirm={() => confirmDeleteEmail?.onconfirm()} oncancel={() => confirmDeleteEmail = null} />

<BlockedByModal open={!!blockedBy} detail={blockedBy} onclose={() => blockedBy = null} />