<!-- [DEF:NotificationSettingsPage:Component] -->
<script>
  /**
   * @TIER: STANDARD
   * @PURPOSE: Manage global notification provider configurations (SMTP, Telegram, Slack).
   * @LAYER: UI
   */
  import { onMount } from "svelte";
  import { t } from "$lib/i18n";
  import { api } from "$lib/api.js";
  import { addToast } from "$lib/toasts";

  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) {
      console.error("Failed to load notification settings", 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 (err) {
      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-slate-900">
      {$t.settings?.notifications_title || "Notification Providers"}
    </h2>
    <p class="text-sm text-slate-600">
      {$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-slate-100"></div>
  {:else}
    <div class="grid gap-6">
      <!-- SMTP -->
      <section class="rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
        <h3 class="mb-4 font-semibold text-slate-900">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-slate-700">Host</span>
            <input type="text" class="w-full rounded-lg border border-slate-300 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-slate-700">Port</span>
            <input type="number" class="w-full rounded-lg border border-slate-300 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-slate-700">Username</span>
            <input type="text" class="w-full rounded-lg border border-slate-300 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-slate-700">Password</span>
            <input type="password" class="w-full rounded-lg border border-slate-300 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-slate-700">From Email</span>
            <input type="email" class="w-full rounded-lg border border-slate-300 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-slate-300" bind:checked={config.smtp.use_tls} />
            <span class="text-sm text-slate-700">Use TLS</span>
          </label>
        </div>
      </section>

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

      <!-- Slack -->
      <section class="rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
        <h3 class="mb-4 font-semibold text-slate-900">Slack</h3>
        <label class="block space-y-1">
          <span class="text-sm font-medium text-slate-700">Webhook URL</span>
          <input type="text" class="w-full rounded-lg border border-slate-300 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
        type="button"
        class="rounded-lg bg-primary px-6 py-2 text-sm font-medium text-white transition-colors hover:bg-primary-hover disabled:opacity-50"
        disabled={isSaving}
        onclick={handleSave}
      >
        {isSaving ? "Saving..." : "Save Notification Settings"}
      </button>
    </div>
  {/if}
</div>

<!-- [/DEF:NotificationSettingsPage:Component] -->