<!-- #region NotificationsPage [C:3] [TYPE Page] [SEMANTICS sveltekit, notification, smtp, telegram, slack] -->
<!-- @ingroup Routes -->
<!-- @BRIEF Page component: routes/settings/notifications/+page.svelte -->
<!-- @LAYER Page -->
<!--
@UX_STATE: Loading -> Default
@RELATION USES -> [EXT:frontend:App]
-->
<script lang="ts">
  /**
   * @PURPOSE: Manage global notification provider configurations (SMTP, Telegram, Slack).
   * @LAYER UI
   */
  import { onMount } from "svelte";
  import { t } from "$lib/i18n/index.svelte.js";
  import { api } from "$lib/api.js";
  import { addToast } from "$lib/toasts.svelte.js";
  import { Button } from "$lib/ui";
  import { log } from "$lib/cot-logger";

  let isLoading = $state(true);
  let isSaving = $state(false);
  let config = $state({
    smtp: { host: "", port: 587, username: "", password: "", from_email: "", use_tls: true },
    telegram: { bot_token: "" },
    slack: { webhook_url: "" }
  });

  async function loadConfig() {
    isLoading = true;
    try {
      const settings = await api.getConsolidatedSettings();
      if (settings.notifications) {
        config = { ...config, ...settings.notifications };
      }
    } catch (err) {
      log("NotificationsPage", "EXPLORE", "Failed to load notification settings", {}, String(err));
    } finally {
      isLoading = false;
    }
  }

  async function handleSave() {
    isSaving = true;
    try {
      // We use the consolidated update endpoint
      await api.updateConsolidatedSettings({ notifications: config });
      addToast($t.settings?.save_success || "Notification settings saved", "success");
    } catch {
      addToast($t.settings?.save_failed || "Failed to save settings", "error");
    } finally {
      isSaving = false;
    }
  }

  onMount(loadConfig);
</script>

<div class="space-y-6">
  <header>
    <h2 class="text-xl font-bold text-text">
      {$t.settings?.notifications_title || "Notification Providers"}
    </h2>
    <p class="text-sm text-text-muted">
      {$t.settings?.notifications_description || "Configure global delivery channels for alerts and reports."}
    </p>
  </header>

  {#if isLoading}
    <div class="h-32 animate-pulse rounded-xl bg-surface-muted"></div>
  {:else}
    <div class="grid gap-6">
      <!-- SMTP -->
      <section class="rounded-xl border border-border bg-surface-card p-5 shadow-sm">
        <h3 class="mb-4 font-semibold text-text">SMTP (Email)</h3>
        <div class="grid gap-4 md:grid-cols-2">
          <label class="block space-y-1">
            <span class="text-sm font-medium text-text">Host</span>
            <input type="text" class="w-full rounded-lg border border-border-strong px-3 py-2 text-sm" bind:value={config.smtp.host} placeholder="smtp.example.com" />
          </label>
          <label class="block space-y-1">
            <span class="text-sm font-medium text-text">Port</span>
            <input type="number" class="w-full rounded-lg border border-border-strong px-3 py-2 text-sm" bind:value={config.smtp.port} />
          </label>
          <label class="block space-y-1">
            <span class="text-sm font-medium text-text">Username</span>
            <input type="text" class="w-full rounded-lg border border-border-strong px-3 py-2 text-sm" bind:value={config.smtp.username} />
          </label>
          <label class="block space-y-1">
            <span class="text-sm font-medium text-text">Password</span>
            <input type="password" class="w-full rounded-lg border border-border-strong px-3 py-2 text-sm" bind:value={config.smtp.password} placeholder="********" />
          </label>
          <label class="block space-y-1">
            <span class="text-sm font-medium text-text">From Email</span>
            <input type="email" class="w-full rounded-lg border border-border-strong px-3 py-2 text-sm" bind:value={config.smtp.from_email} placeholder="noreply@example.com" />
          </label>
          <label class="flex items-center gap-3 pt-6">
            <input type="checkbox" class="h-4 w-4 rounded border-border-strong" bind:checked={config.smtp.use_tls} />
            <span class="text-sm text-text">Use TLS</span>
          </label>
        </div>
      </section>

      <!-- Telegram -->
      <section class="rounded-xl border border-border bg-surface-card p-5 shadow-sm">
        <h3 class="mb-4 font-semibold text-text">Telegram</h3>
        <label class="block space-y-1">
          <span class="text-sm font-medium text-text">Bot Token</span>
          <input type="password" class="w-full rounded-lg border border-border-strong px-3 py-2 text-sm" bind:value={config.telegram.bot_token} placeholder="123456789:ABCDEF..." />
        </label>
      </section>

      <!-- Slack -->
      <section class="rounded-xl border border-border bg-surface-card p-5 shadow-sm">
        <h3 class="mb-4 font-semibold text-text">Slack</h3>
        <label class="block space-y-1">
          <span class="text-sm font-medium text-text">Webhook URL</span>
          <input type="text" class="w-full rounded-lg border border-border-strong px-3 py-2 text-sm" bind:value={config.slack.webhook_url} placeholder="https://hooks.slack.com/services/..." />
        </label>
      </section>
    </div>

    <div class="flex justify-end pt-4">
      <Button onclick={handleSave} disabled={isSaving} isLoading={isSaving}>
        {isSaving ? "Saving..." : "Save Notification Settings"}
      </Button>
    </div>
  {/if}
</div>

<!-- #endregion NotificationsPage -->