corrosion-admin-panel/frontend/src/views/admin/NotificationsView.vue

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useApi } from '@/composables/useApi'
import { useToastStore } from '@/stores/toast'
import type { NotificationConfig } from '@/types'
import { Bell, Save, Loader2 } from 'lucide-vue-next'

const api = useApi()
const toast = useToastStore()

const config = ref<NotificationConfig>({
  discord_webhook_url: null,
  discord_enabled: false,
  pushbullet_api_key: null,
  pushbullet_enabled: false,
  email_alerts_enabled: false,
  notify_wipe_start: true,
  notify_wipe_complete: true,
  notify_wipe_failed: true,
  notify_server_crash: true,
  notify_server_offline: true,
  notify_store_purchase: false,
})

const saving = ref(false)
const isLoading = ref(false)

const eventToggles = [
  { key: 'notify_wipe_start' as const, label: 'Wipe Started', desc: 'When a wipe begins' },
  { key: 'notify_wipe_complete' as const, label: 'Wipe Complete', desc: 'When a wipe finishes successfully' },
  { key: 'notify_wipe_failed' as const, label: 'Wipe Failed', desc: 'When a wipe fails or rolls back' },
  { key: 'notify_server_crash' as const, label: 'Server Crash', desc: 'When the server process crashes' },
  { key: 'notify_server_offline' as const, label: 'Server Offline', desc: 'When the server goes unreachable' },
  { key: 'notify_store_purchase' as const, label: 'Store Purchase', desc: 'When a player buys from the store' },
]

async function fetchConfig() {
  isLoading.value = true
  try {
    const data = await api.get<{ config: NotificationConfig }>('/notifications/config')
    config.value = data.config
  } catch {
    toast.error('Failed to load notification settings')
  } finally {
    isLoading.value = false
  }
}

async function saveConfig() {
  saving.value = true
  try {
    await api.put('/notifications/config', config.value)
    toast.success('Notification settings saved')
  } catch {
    toast.error('Failed to save notification settings')
  } finally {
    saving.value = false
  }
}

onMounted(() => {
  fetchConfig()
})
</script>

<template>
  <div class="p-6 space-y-6">
    <!-- Header -->
    <div class="flex items-center justify-between">
      <div class="flex items-center gap-3">
        <Bell class="w-5 h-5 text-oxide-500" />
        <h1 class="text-2xl font-bold text-neutral-100">Notifications</h1>
      </div>
      <button
        @click="saveConfig"
        :disabled="saving"
        class="flex items-center gap-2 px-4 py-2 bg-oxide-600 hover:bg-oxide-700 disabled:opacity-50 text-white text-sm font-medium rounded-lg transition-colors"
      >
        <Loader2 v-if="saving" class="w-4 h-4 animate-spin" />
        <Save v-else class="w-4 h-4" />
        {{ saving ? 'Saving...' : 'Save Changes' }}
      </button>
    </div>

    <!-- Discord -->
    <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
      <div class="flex items-center justify-between mb-4">
        <div>
          <h2 class="text-sm font-medium text-neutral-200">Discord Webhook</h2>
          <p class="text-xs text-neutral-500 mt-0.5">Send notifications to a Discord channel</p>
        </div>
        <button
          @click="config.discord_enabled = !config.discord_enabled"
          class="w-9 h-5 rounded-full transition-colors"
          :class="config.discord_enabled ? 'bg-oxide-500' : 'bg-neutral-700'"
        >
          <div
            class="w-4 h-4 bg-white rounded-full shadow transition-transform mt-0.5"
            :class="config.discord_enabled ? 'translate-x-4.5' : 'translate-x-0.5'"
          />
        </button>
      </div>
      <input
        v-model="config.discord_webhook_url"
        type="url"
        placeholder="https://discord.com/api/webhooks/..."
        :disabled="!config.discord_enabled"
        class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors disabled:opacity-40"
      />
    </div>

    <!-- Pushbullet -->
    <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
      <div class="flex items-center justify-between mb-4">
        <div>
          <h2 class="text-sm font-medium text-neutral-200">Pushbullet</h2>
          <p class="text-xs text-neutral-500 mt-0.5">Push notifications to your devices</p>
        </div>
        <button
          @click="config.pushbullet_enabled = !config.pushbullet_enabled"
          class="w-9 h-5 rounded-full transition-colors"
          :class="config.pushbullet_enabled ? 'bg-oxide-500' : 'bg-neutral-700'"
        >
          <div
            class="w-4 h-4 bg-white rounded-full shadow transition-transform mt-0.5"
            :class="config.pushbullet_enabled ? 'translate-x-4.5' : 'translate-x-0.5'"
          />
        </button>
      </div>
      <input
        v-model="config.pushbullet_api_key"
        type="text"
        placeholder="Pushbullet API key"
        :disabled="!config.pushbullet_enabled"
        class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors disabled:opacity-40"
      />
    </div>

    <!-- Email -->
    <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
      <div class="flex items-center justify-between">
        <div>
          <h2 class="text-sm font-medium text-neutral-200">Email Alerts</h2>
          <p class="text-xs text-neutral-500 mt-0.5">Send critical alerts to your registered email</p>
        </div>
        <button
          @click="config.email_alerts_enabled = !config.email_alerts_enabled"
          class="w-9 h-5 rounded-full transition-colors"
          :class="config.email_alerts_enabled ? 'bg-oxide-500' : 'bg-neutral-700'"
        >
          <div
            class="w-4 h-4 bg-white rounded-full shadow transition-transform mt-0.5"
            :class="config.email_alerts_enabled ? 'translate-x-4.5' : 'translate-x-0.5'"
          />
        </button>
      </div>
    </div>

    <!-- Event Toggles -->
    <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
      <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider mb-4">Event Triggers</h2>
      <div class="space-y-4">
        <div
          v-for="toggle in eventToggles"
          :key="toggle.key"
          class="flex items-center justify-between"
        >
          <div>
            <p class="text-sm text-neutral-200">{{ toggle.label }}</p>
            <p class="text-xs text-neutral-500">{{ toggle.desc }}</p>
          </div>
          <button
            @click="config[toggle.key] = !config[toggle.key]"
            class="w-9 h-5 rounded-full transition-colors"
            :class="config[toggle.key] ? 'bg-oxide-500' : 'bg-neutral-700'"
          >
            <div
              class="w-4 h-4 bg-white rounded-full shadow transition-transform mt-0.5"
              :class="config[toggle.key] ? 'translate-x-4.5' : 'translate-x-0.5'"
            />
          </button>
        </div>
      </div>
    </div>
  </div>
</template>