<script setup lang="ts">
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { SUPPORTED_LOCALES, setLocale, type SupportedLocale } from '@/i18n'
import { useUIModeStore } from '@/stores/uiMode'
import { useAIPermissionsStore, AI_PERMISSION_CATEGORIES } from '@/stores/aiPermissions'
import ToggleSwitch from '@/components/ToggleSwitch.vue'
import { rpcClient } from '@/api/rpc-client'
import type { UIMode } from '@/types/api'

const router = useRouter()
const { t, locale } = useI18n()
const uiMode = useUIModeStore()
const aiPermissions = useAIPermissionsStore()

// Interface modes
const interfaceModes = computed<{ id: UIMode; label: string; description: string; iconPaths: string[] }[]>(() => [
  {
    id: 'easy',
    label: t('settings.modeEasy'),
    description: t('settings.modeEasyDesc'),
    iconPaths: ['M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'],
  },
  {
    id: 'gamer',
    label: t('settings.modePro'),
    description: t('settings.modeProDesc'),
    iconPaths: ['M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z', 'M15 12a3 3 0 11-6 0 3 3 0 016 0z'],
  },
  {
    id: 'chat',
    label: t('settings.modeChat'),
    description: t('settings.modeChatDesc'),
    iconPaths: ['M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z'],
  },
])

// Language
const supportedLocales = SUPPORTED_LOCALES
const currentLocale = computed(() => locale.value)
async function changeLocale(code: string) {
  await setLocale(code as SupportedLocale)
}

// AI Data Access
const aiCategoryGroups = computed(() => {
  const groups: { label: string; items: typeof AI_PERMISSION_CATEGORIES }[] = []
  for (const cat of AI_PERMISSION_CATEGORIES) {
    const existing = groups.find(g => g.label === cat.group)
    if (existing) {
      existing.items.push(cat)
    } else {
      groups.push({ label: cat.group, items: [cat] })
    }
  }
  return groups
})

// Claude Auth
const claudeConnected = ref(false)
const showClaudeLoginModal = ref(false)

function checkClaudeStatus() {
  fetch('/aiui/api/claude/v1/messages', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ model: 'haiku', messages: [{ role: 'user', content: 'ping' }] }) })
    .then(r => {
      if (!r.ok) { claudeConnected.value = false; return }
      const reader = r.body?.getReader()
      if (!reader) return
      const decoder = new TextDecoder()
      let text = ''
      function read(): Promise<void> {
        return reader!.read().then(({ done, value }) => {
          if (done) {
            claudeConnected.value = !text.includes('Not logged in') && !text.includes('error')
            return
          }
          text += decoder.decode(value, { stream: true })
          return read()
        })
      }
      read()
    })
    .catch(() => { claudeConnected.value = false })
}

function onClaudeIframeLoad() {
  window.addEventListener('message', handleClaudeLoginMessage)
}

function handleClaudeLoginMessage(e: MessageEvent) {
  if (e.data?.type === 'claude-auth-success') {
    claudeConnected.value = true
    showClaudeLoginModal.value = false
    window.removeEventListener('message', handleClaudeLoginMessage)
  }
}

// Telemetry
const telemetryEnabled = ref(false)
const telemetryLoading = ref(false)
async function loadTelemetryStatus() {
  try {
    const res = await rpcClient.call<{ enabled: boolean }>({ method: 'analytics.get-status' })
    telemetryEnabled.value = res.enabled
  } catch { /* ignore */ }
}
async function toggleTelemetry() {
  telemetryLoading.value = true
  try {
    const method = telemetryEnabled.value ? 'analytics.disable' : 'analytics.enable'
    await rpcClient.call({ method })
    telemetryEnabled.value = !telemetryEnabled.value
  } catch { /* ignore */ }
  telemetryLoading.value = false
}

// Webhook Notifications
interface WebhookConfigData {
  enabled: boolean
  url: string
  secret: string
  events: string[]
}
const webhookConfig = ref<WebhookConfigData>({
  enabled: false,
  url: '',
  secret: '',
  events: [],
})
const savingWebhook = ref(false)
const testingWebhook = ref(false)
const webhookStatusMsg = ref('')
const webhookStatusType = ref<'success' | 'error'>('success')

const webhookEventTypes = computed(() => [
  { id: 'container_crash', label: t('settings.containerCrash'), description: t('settings.containerCrashDesc') },
  { id: 'update_available', label: t('settings.updateAvailableEvent'), description: t('settings.updateAvailableDesc') },
  { id: 'disk_warning', label: t('settings.diskSpaceWarning'), description: t('settings.diskWarningDesc') },
  { id: 'backup_complete', label: t('settings.backupComplete'), description: t('settings.backupCompleteDesc') },
])

function showWebhookStatus(msg: string, type: 'success' | 'error') {
  webhookStatusMsg.value = msg
  webhookStatusType.value = type
  setTimeout(() => { webhookStatusMsg.value = '' }, 5000)
}

function toggleWebhookEvent(id: string) {
  const idx = webhookConfig.value.events.indexOf(id)
  if (idx >= 0) {
    webhookConfig.value.events.splice(idx, 1)
  } else {
    webhookConfig.value.events.push(id)
  }
}

function toggleWebhookEnabled() {
  webhookConfig.value.enabled = !webhookConfig.value.enabled
}

async function loadWebhookConfig() {
  try {
    const res = await rpcClient.call<{ enabled: boolean; url: string; events: string[]; has_secret: boolean }>({ method: 'webhook.get-config' })
    webhookConfig.value.enabled = res.enabled
    webhookConfig.value.url = res.url
    webhookConfig.value.events = res.events || []
  } catch {
    // Webhook system may not be available
  }
}

async function saveWebhookConfig() {
  savingWebhook.value = true
  try {
    await rpcClient.call({
      method: 'webhook.configure',
      params: {
        enabled: webhookConfig.value.enabled,
        url: webhookConfig.value.url,
        secret: webhookConfig.value.secret || null,
        events: webhookConfig.value.events,
      },
    })
    showWebhookStatus(t('settings.webhookSaved'), 'success')
  } catch {
    showWebhookStatus(t('settings.webhookSaveFailed'), 'error')
  } finally {
    savingWebhook.value = false
  }
}

async function testWebhook() {
  testingWebhook.value = true
  try {
    const res = await rpcClient.call<{ sent: boolean; url: string }>({ method: 'webhook.test' })
    if (res.sent) {
      showWebhookStatus(t('settings.webhookTestSent'), 'success')
    } else {
      showWebhookStatus(t('settings.webhookTestFailed'), 'error')
    }
  } catch {
    showWebhookStatus(t('settings.webhookSendFailed'), 'error')
  } finally {
    testingWebhook.value = false
  }
}

// Backup & Restore
interface BackupEntry {
  id: string
  created_at: string
  size_bytes: number
  encrypted: boolean
  description: string | null
}
const backupList = ref<BackupEntry[]>([])
const loadingBackups = ref(false)
const showCreateBackupModal = ref(false)
const backupPassphrase = ref('')
const backupDescription = ref('')
const creatingBackup = ref(false)
const showRestoreModal = ref(false)
const restoreBackupId = ref('')
const restorePassphrase = ref('')
const restoringBackup = ref(false)
const verifyingBackupId = ref<string | null>(null)
const deletingBackupId = ref<string | null>(null)
const backupStatusMsg = ref('')
const backupStatusType = ref<'success' | 'error'>('success')

function formatBackupSize(bytes: number): string {
  if (bytes < 1024) return `${bytes} B`
  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
  if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
  return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`
}

function showBackupStatus(msg: string, type: 'success' | 'error') {
  backupStatusMsg.value = msg
  backupStatusType.value = type
  setTimeout(() => { backupStatusMsg.value = '' }, 5000)
}

async function loadBackups() {
  loadingBackups.value = true
  try {
    const res = await rpcClient.call<{ backups: BackupEntry[] }>({ method: 'backup.list' })
    backupList.value = res.backups || []
  } catch {
    backupList.value = []
  } finally {
    loadingBackups.value = false
  }
}

async function createBackup() {
  if (creatingBackup.value || !backupPassphrase.value) return
  creatingBackup.value = true
  try {
    await rpcClient.call({ method: 'backup.create', params: { passphrase: backupPassphrase.value, description: backupDescription.value || undefined } })
    showCreateBackupModal.value = false
    backupPassphrase.value = ''
    backupDescription.value = ''
    showBackupStatus(t('settings.backupCreatedSuccess'), 'success')
    await loadBackups()
  } catch {
    showBackupStatus(t('settings.backupCreateFailed'), 'error')
  } finally {
    creatingBackup.value = false
  }
}

async function verifyBackup(id: string) {
  const passphrase = prompt(t('settings.verifyPassphrasePrompt'))
  if (!passphrase) return
  verifyingBackupId.value = id
  try {
    const res = await rpcClient.call<{ valid: boolean; error: string | null }>({ method: 'backup.verify', params: { id, passphrase } })
    if (res.valid) {
      showBackupStatus(t('settings.backupVerifiedOk'), 'success')
    } else {
      showBackupStatus(t('settings.backupVerifyFailed', { error: res.error || 'Unknown error' }), 'error')
    }
  } catch {
    showBackupStatus(t('settings.backupVerifyRequestFailed'), 'error')
  } finally {
    verifyingBackupId.value = null
  }
}

function confirmRestoreBackup(id: string) {
  restoreBackupId.value = id
  restorePassphrase.value = ''
  showRestoreModal.value = true
}

async function restoreBackup() {
  if (restoringBackup.value || !restorePassphrase.value) return
  restoringBackup.value = true
  try {
    await rpcClient.call({ method: 'backup.restore', params: { id: restoreBackupId.value, passphrase: restorePassphrase.value } })
    showRestoreModal.value = false
    showBackupStatus(t('settings.backupRestored'), 'success')
  } catch {
    showBackupStatus(t('settings.backupRestoreFailed'), 'error')
  } finally {
    restoringBackup.value = false
  }
}

async function deleteBackup(id: string) {
  if (!confirm(t('settings.deleteBackupConfirm'))) return
  deletingBackupId.value = id
  try {
    await rpcClient.call({ method: 'backup.delete', params: { id } })
    showBackupStatus(t('settings.backupDeleted'), 'success')
    await loadBackups()
  } catch {
    showBackupStatus(t('settings.backupDeleteFailed'), 'error')
  } finally {
    deletingBackupId.value = null
  }
}

// USB Drive Backup
interface UsbDriveInfo {
  device: string
  mount_point: string | null
  label: string | null
  size_bytes: number
  removable: boolean
}
const usbCopyingId = ref<string | null>(null)

async function backupToUsb(backupId: string) {
  usbCopyingId.value = backupId
  try {
    const drivesRes = await rpcClient.call<{ drives: UsbDriveInfo[] }>({ method: 'backup.list-drives' })
    const drives = drivesRes.drives || []
    const mounted = drives.filter(d => d.mount_point)
    const target = mounted[0]
    if (!target?.mount_point) {
      showBackupStatus(t('settings.noUsbDrives'), 'error')
      return
    }
    const label = target.label || target.device
    if (!confirm(`Copy backup to USB drive "${label}" at ${target.mount_point}?`)) return
    await rpcClient.call({ method: 'backup.to-usb', params: { id: backupId, mount_point: target.mount_point } })
    showBackupStatus(t('settings.backupCopiedToUsb', { path: target.mount_point }), 'success')
  } catch {
    showBackupStatus(t('settings.backupUsbFailed'), 'error')
  } finally {
    usbCopyingId.value = null
  }
}

// Lightning channel backup
const exportingChannelBackup = ref(false)
const channelBackupData = ref('')
const channelBackupChannels = ref(0)
const channelBackupTime = ref('')
const channelBackupError = ref('')
const channelBackupCopied = ref(false)

async function exportChannelBackup() {
  exportingChannelBackup.value = true
  channelBackupError.value = ''
  try {
    const res = await rpcClient.call<{ backup: string; channel_count: number; timestamp: string }>({
      method: 'lnd.export-channel-backup',
      timeout: 15000,
    })
    channelBackupData.value = res.backup
    channelBackupChannels.value = res.channel_count
    channelBackupTime.value = new Date(res.timestamp).toLocaleString()
  } catch (err: unknown) {
    channelBackupError.value = err instanceof Error ? err.message : 'Failed to export'
  } finally {
    exportingChannelBackup.value = false
  }
}

function copyChannelBackup() {
  if (channelBackupData.value) {
    navigator.clipboard.writeText(channelBackupData.value).catch(() => {})
    channelBackupCopied.value = true
    setTimeout(() => { channelBackupCopied.value = false }, 2000)
  }
}

// Reboot
const showRebootConfirm = ref(false)
const rebooting = ref(false)
const rebootPassword = ref('')
const rebootError = ref('')
async function performReboot() {
  if (!rebootPassword.value) return
  rebooting.value = true
  rebootError.value = ''
  try {
    await rpcClient.call({ method: 'system.reboot', params: { password: rebootPassword.value } })
    showRebootConfirm.value = false
    rebootPassword.value = ''
  } catch (e) {
    rebootError.value = e instanceof Error ? e.message : 'Reboot failed'
    rebooting.value = false
  }
}

// Factory Reset
const showFactoryResetConfirm = ref(false)
const factoryResetLoading = ref(false)
async function performFactoryReset() {
  factoryResetLoading.value = true
  try {
    await rpcClient.call({ method: 'system.factory-reset', params: { confirm: true } })
    localStorage.clear()
    showFactoryResetConfirm.value = false
    router.push('/onboarding/intro')
  } catch {
    localStorage.clear()
    showFactoryResetConfirm.value = false
    router.push('/onboarding/intro')
  }
}

// Load on mount
function init() {
  checkClaudeStatus()
  loadTelemetryStatus()
  loadBackups()
  loadWebhookConfig()
}
init()
</script>

<template>
  <!-- Interface Mode Section -->
  <div class="glass-card px-6 py-6 mb-6">
    <h2 class="text-xl font-semibold text-white/96 mb-2">{{ t('settings.interfaceMode') }}</h2>
    <p class="text-sm text-white/60 mb-6">{{ t('settings.interfaceModeDesc') }}</p>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
      <button
        v-for="m in interfaceModes"
        :key="m.id"
        @click="uiMode.setMode(m.id)"
        class="path-option-card text-left p-5"
        :class="{ 'path-option-card--selected': uiMode.mode === m.id }"
      >
        <div class="flex items-center gap-3 mb-3">
          <svg class="w-6 h-6 text-white/70" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path
              v-for="(path, index) in m.iconPaths"
              :key="index"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              :d="path"
            />
          </svg>
          <h3 class="text-lg font-semibold text-white/96">{{ m.label }}</h3>
        </div>
        <p class="text-sm text-white/60 leading-relaxed">{{ m.description }}</p>
      </button>
    </div>
  </div>

  <!-- Language Section -->
  <div class="glass-card px-6 py-6 mb-6">
    <h2 class="text-xl font-semibold text-white/96 mb-2">Language</h2>
    <p class="text-sm text-white/60 mb-4">Choose your preferred language</p>
    <div class="flex gap-3 flex-wrap">
      <button
        v-for="loc in supportedLocales"
        :key="loc.code"
        @click="changeLocale(loc.code)"
        class="glass-button px-4 py-2 rounded-lg text-sm font-medium transition-all"
        :class="currentLocale === loc.code ? 'ring-2 ring-orange-400/60 bg-white/10' : ''"
      >
        <span class="mr-2">{{ loc.flag }}</span>{{ loc.name }}
      </button>
    </div>
  </div>

  <!-- Claude Authentication Section -->
  <div class="glass-card px-6 py-6 mb-6">
    <h2 class="text-xl font-semibold text-white/96 mb-2">{{ t('settings.claudeAuth') }}</h2>
    <p class="text-sm text-white/60 mb-6">{{ t('settings.claudeAuthDesc') }}</p>
    <div class="bg-black/20 rounded-xl px-5 py-4 border border-white/10 mb-4">
      <div class="flex items-center gap-3 mb-2">
        <svg class="w-5 h-5 shrink-0" :class="claudeConnected ? 'text-green-400' : 'text-white/40'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path v-if="claudeConnected" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
          <path v-else stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636a9 9 0 11-12.728 0M12 9v4m0 4h.01" />
        </svg>
        <p class="text-xs font-semibold text-white/60 uppercase tracking-wide">{{ t('settings.connectionStatus') }}</p>
      </div>
      <p class="text-base font-medium" :class="claudeConnected ? 'text-green-400' : 'text-white/50'">
        {{ claudeConnected ? t('common.connected') : t('settings.notConnected') }}
      </p>
    </div>
    <button
      @click="showClaudeLoginModal = true"
      class="w-full flex items-center justify-center gap-2 px-4 py-3 rounded-lg border transition-colors"
      :class="claudeConnected
        ? 'border-white/20 text-white/70 hover:bg-white/5'
        : 'glass-button-warning font-medium'"
    >
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" />
      </svg>
      <span>{{ claudeConnected ? t('settings.reAuthenticate') : t('settings.loginWithClaude') }}</span>
    </button>
  </div>

  <!-- Claude Login Modal -->
  <Teleport to="body">
    <div
      v-if="showClaudeLoginModal"
      class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/10 backdrop-blur-md"
      @click.self="showClaudeLoginModal = false"
    >
      <div class="glass-card p-0 max-w-lg w-full overflow-hidden" style="height: 480px">
        <div class="flex items-center justify-between px-4 py-3 border-b border-white/10">
          <h3 class="text-sm font-semibold text-white/80">{{ t('settings.claudeAuth') }}</h3>
          <button @click="showClaudeLoginModal = false" class="text-white/50 hover:text-white/80 transition-colors">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>
        <iframe
          src="/claude-login"
          class="w-full border-0"
          style="height: calc(100% - 49px)"
          @load="onClaudeIframeLoad"
        />
      </div>
    </div>
  </Teleport>

  <!-- AI Data Access Section -->
  <div class="glass-card px-6 py-6 mb-6">
    <div class="mb-2">
      <h2 class="text-xl font-semibold text-white/96">{{ t('settings.aiDataAccess') }}</h2>
    </div>
    <p class="text-sm text-white/60 mb-6">{{ t('settings.aiDataAccessDesc') }}</p>
    <button
      @click="aiPermissions.allEnabled ? aiPermissions.disableAll() : aiPermissions.enableAll()"
      class="w-full flex items-center gap-4 p-4 rounded-xl border transition-all text-left mb-6"
      :class="aiPermissions.allEnabled
        ? 'bg-white/10 border-orange-500/40'
        : 'bg-black/20 border-white/10 hover:border-white/20'"
    >
      <svg class="w-5 h-5 shrink-0" :class="aiPermissions.allEnabled ? 'text-orange-400' : 'text-white/40'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
      </svg>
      <div class="flex-1 min-w-0">
        <p class="text-sm font-medium" :class="aiPermissions.allEnabled ? 'text-white/95' : 'text-white/70'">{{ t('common.enableAll') }}</p>
        <p class="text-xs text-white/50 mt-0.5">{{ t('settings.enableAllDesc') }}</p>
      </div>
      <ToggleSwitch :model-value="aiPermissions.allEnabled" @update:model-value="aiPermissions.allEnabled ? aiPermissions.disableAll() : aiPermissions.enableAll()" @click.stop />
    </button>
    <div class="space-y-5">
      <div v-for="group in aiCategoryGroups" :key="group.label">
        <p class="text-xs font-medium text-white/40 uppercase tracking-wider mb-2 px-1">{{ group.label }}</p>
        <div class="space-y-2">
          <button
            v-for="cat in group.items"
            :key="cat.id"
            @click="aiPermissions.toggle(cat.id)"
            class="w-full flex items-center gap-4 p-4 rounded-xl border transition-all text-left"
            :class="aiPermissions.isEnabled(cat.id)
              ? 'bg-white/10 border-orange-500/40'
              : 'bg-black/20 border-white/10 hover:border-white/20'"
          >
            <svg class="w-5 h-5 shrink-0" :class="aiPermissions.isEnabled(cat.id) ? 'text-orange-400' : 'text-white/40'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="cat.icon" />
            </svg>
            <div class="flex-1 min-w-0">
              <p class="text-sm font-medium" :class="aiPermissions.isEnabled(cat.id) ? 'text-white/95' : 'text-white/70'">{{ cat.label }}</p>
              <p class="text-xs text-white/50 mt-0.5">{{ cat.description }}</p>
            </div>
            <ToggleSwitch :model-value="aiPermissions.isEnabled(cat.id)" @update:model-value="aiPermissions.toggle(cat.id)" @click.stop />
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- System Updates Section -->
  <div class="glass-card px-6 py-6 mb-6">
    <div class="flex items-center justify-between">
      <div>
        <h2 class="text-xl font-semibold text-white/96">{{ t('settings.systemUpdates') }}</h2>
        <p class="text-sm text-white/60 mt-1">{{ t('settings.systemUpdatesDesc') }}</p>
      </div>
      <RouterLink to="/dashboard/settings/update" class="glass-button px-4 py-2 rounded-lg text-sm flex items-center gap-2">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
        </svg>
        {{ t('common.manageUpdates') }}
      </RouterLink>
    </div>
  </div>

  <!-- Webhook Notifications Section -->
  <div class="glass-card px-6 py-6 mb-6">
    <div class="flex items-center justify-between mb-4">
      <div>
        <h2 class="text-xl font-semibold text-white/96">{{ t('settings.webhookNotifications') }}</h2>
        <p class="text-sm text-white/60 mt-1">{{ t('settings.webhookNotificationsDesc') }}</p>
      </div>
      <ToggleSwitch :model-value="webhookConfig.enabled" @update:model-value="toggleWebhookEnabled" />
    </div>
    <div class="space-y-4">
      <div>
        <label class="text-xs text-white/50 block mb-1">{{ t('settings.webhookUrlLabel') }}</label>
        <input
          v-model="webhookConfig.url"
          type="url"
          :placeholder="t('settings.webhookUrlPlaceholder')"
          class="w-full bg-black/30 border border-white/10 rounded-lg px-3 py-2 text-sm text-white placeholder-white/30 focus:outline-none focus:border-orange-500/50"
        />
      </div>
      <div>
        <label class="text-xs text-white/50 block mb-1">{{ t('settings.webhookSecretLabel') }}</label>
        <input
          v-model="webhookConfig.secret"
          type="password"
          :placeholder="t('settings.webhookSecretPlaceholderFull')"
          class="w-full bg-black/30 border border-white/10 rounded-lg px-3 py-2 text-sm text-white placeholder-white/30 focus:outline-none focus:border-orange-500/50"
        />
      </div>
      <div>
        <label class="text-xs text-white/50 block mb-2">{{ t('settings.eventsToNotify') }}</label>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
          <button
            v-for="evt in webhookEventTypes"
            :key="evt.id"
            @click="toggleWebhookEvent(evt.id)"
            role="checkbox"
            :aria-checked="webhookConfig.events.includes(evt.id)"
            :aria-label="evt.label"
            class="flex items-center gap-3 p-3 rounded-lg border transition-colors text-left"
            :class="webhookConfig.events.includes(evt.id)
              ? 'bg-orange-500/10 border-orange-500/30'
              : 'bg-white/5 border-white/10 hover:border-white/20'"
          >
            <div
              class="w-5 h-5 rounded border-2 flex items-center justify-center shrink-0 transition-colors"
              :class="webhookConfig.events.includes(evt.id)
                ? 'border-orange-500 bg-orange-500'
                : 'border-white/30'"
            >
              <svg v-if="webhookConfig.events.includes(evt.id)" class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" />
              </svg>
            </div>
            <div class="min-w-0">
              <p class="text-sm text-white/90 font-medium">{{ evt.label }}</p>
              <p class="text-xs text-white/50">{{ evt.description }}</p>
            </div>
          </button>
        </div>
      </div>
      <div class="flex flex-col sm:flex-row gap-2 pt-2">
        <button
          @click="saveWebhookConfig"
          :disabled="savingWebhook"
          class="glass-button glass-button-warning px-4 py-2 rounded-lg text-sm flex items-center justify-center gap-2 disabled:opacity-50"
        >
          {{ savingWebhook ? t('settings.savingWebhook') : t('common.saveConfiguration') }}
        </button>
        <button
          @click="testWebhook"
          :disabled="testingWebhook || !webhookConfig.url"
          class="glass-button px-4 py-2 rounded-lg text-sm flex items-center justify-center gap-2 disabled:opacity-50"
        >
          {{ testingWebhook ? t('common.sending') : t('common.sendTest') }}
        </button>
      </div>
    </div>
    <div v-if="webhookStatusMsg" role="status" aria-live="polite" class="mt-3 text-xs px-3 py-2 rounded-lg" :class="webhookStatusType === 'error' ? 'alert-error' : 'alert-success'">
      {{ webhookStatusMsg }}
    </div>
  </div>

  <!-- Beta Telemetry Section -->
  <div class="glass-card px-6 py-6 mb-6">
    <div class="flex items-center justify-between mb-3">
      <div>
        <h2 class="text-xl font-semibold text-white/96 mb-1">Beta Telemetry</h2>
        <p class="text-sm text-white/60">Help improve Archipelago by sharing anonymous system health data. No wallet data, no keys, no personal info.</p>
      </div>
      <button
        @click="toggleTelemetry"
        :disabled="telemetryLoading"
        class="shrink-0 ml-4 px-4 py-2 rounded-lg text-sm font-medium transition-colors"
        :class="telemetryEnabled ? 'glass-button glass-button-success' : 'glass-button'"
      >
        {{ telemetryLoading ? '...' : telemetryEnabled ? 'Enabled' : 'Enable' }}
      </button>
    </div>
    <div v-if="telemetryEnabled" class="mt-3 text-xs text-white/50 space-y-1">
      <p>Reporting: version, uptime, container states, CPU/RAM, error alerts.</p>
      <p>Not reporting: wallet balances, private keys, DIDs, IP addresses.</p>
    </div>
  </div>

  <!-- Backup & Restore Section -->
  <div class="glass-card px-6 py-6 mb-6">
    <div class="mb-4">
      <h2 class="text-xl font-semibold text-white/96 mb-1">{{ t('settings.backup') }}</h2>
      <p class="text-sm text-white/60 mb-3">{{ t('settings.backupRestoreDesc') }}</p>
      <button @click="showCreateBackupModal = true" class="w-full min-h-[44px] glass-button rounded-lg text-sm font-medium flex items-center justify-center gap-2">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
        </svg>
        {{ t('settings.createBackup') }}
      </button>
    </div>
    <div v-if="loadingBackups" class="text-sm text-white/40 py-4 text-center">{{ t('settings.loadingBackups') }}</div>
    <div v-else-if="backupList.length === 0" class="text-sm text-white/40 py-4 text-center">{{ t('settings.noBackups') }}</div>
    <div v-else class="space-y-2">
      <div v-for="b in backupList" :key="b.id" class="flex flex-col sm:flex-row sm:items-center sm:justify-between p-3 bg-white/5 rounded-lg gap-2">
        <div class="min-w-0">
          <div class="text-sm text-white font-medium">{{ b.description || t('settings.systemBackup') }}</div>
          <div class="text-xs text-white/50">{{ new Date(b.created_at).toLocaleString() }} &middot; {{ formatBackupSize(b.size_bytes) }}</div>
        </div>
        <div class="flex items-center gap-2 shrink-0 flex-wrap">
          <button @click="verifyBackup(b.id)" :disabled="verifyingBackupId === b.id" class="glass-button glass-button-sm px-3 py-1.5 rounded text-xs disabled:opacity-50" :title="t('common.verify')">
            {{ verifyingBackupId === b.id ? '...' : t('common.verify') }}
          </button>
          <button @click="backupToUsb(b.id)" :disabled="usbCopyingId === b.id" class="glass-button glass-button-sm px-3 py-1.5 rounded text-xs text-blue-400 disabled:opacity-50" :title="t('settings.copyToUsb')">
            {{ usbCopyingId === b.id ? '...' : 'USB' }}
          </button>
          <button @click="confirmRestoreBackup(b.id)" class="glass-button glass-button-sm px-3 py-1.5 rounded text-xs text-orange-400" :title="t('common.restore')">
            {{ t('common.restore') }}
          </button>
          <button @click="deleteBackup(b.id)" :disabled="deletingBackupId === b.id" :aria-label="t('settings.deleteBackup')" class="glass-button glass-button-sm px-3 py-1.5 rounded text-xs text-red-400 disabled:opacity-50" :title="t('common.delete')">
            &times;
          </button>
        </div>
      </div>
    </div>
    <div v-if="backupStatusMsg" role="status" aria-live="polite" class="mt-3 text-xs px-3 py-2 rounded-lg" :class="backupStatusType === 'error' ? 'alert-error' : 'alert-success'">
      {{ backupStatusMsg }}
    </div>
  </div>

  <!-- Create Backup Modal -->
  <Teleport to="body">
    <div v-if="showCreateBackupModal" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/10 backdrop-blur-md" @click.self="showCreateBackupModal = false">
      <div class="glass-card p-6 w-full max-w-md" role="dialog" aria-modal="true" aria-labelledby="create-backup-title">
        <h3 id="create-backup-title" class="text-lg font-semibold text-white mb-4">{{ t('settings.createEncryptedBackup') }}</h3>
        <div class="space-y-3">
          <div>
            <label class="text-xs text-white/50 block mb-1">{{ t('settings.encryptionPassphrase') }}</label>
            <input v-model="backupPassphrase" type="password" :placeholder="t('settings.enterPassphrase')" class="w-full bg-black/30 border border-white/10 rounded-lg px-3 py-2 text-sm text-white placeholder-white/30 focus:outline-none focus:border-blue-500/50" />
          </div>
          <div>
            <label class="text-xs text-white/50 block mb-1">{{ t('settings.descriptionOptional') }}</label>
            <input v-model="backupDescription" type="text" :placeholder="t('settings.descriptionPlaceholder')" class="w-full bg-black/30 border border-white/10 rounded-lg px-3 py-2 text-sm text-white placeholder-white/30 focus:outline-none focus:border-blue-500/50" />
          </div>
        </div>
        <div class="flex gap-3 mt-5">
          <button @click="showCreateBackupModal = false" class="glass-button px-4 py-2 rounded-lg text-sm flex-1">{{ t('common.cancel') }}</button>
          <button @click="createBackup" :disabled="creatingBackup || !backupPassphrase" class="glass-button glass-button-warning px-4 py-2 rounded-lg text-sm flex-1 disabled:opacity-50">
            {{ creatingBackup ? t('settings.creatingBackup') : t('settings.createBackup') }}
          </button>
        </div>
      </div>
    </div>
  </Teleport>

  <!-- Restore Backup Modal -->
  <Teleport to="body">
    <div v-if="showRestoreModal" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/10 backdrop-blur-md" @click.self="showRestoreModal = false">
      <div class="glass-card p-6 w-full max-w-md" role="dialog" aria-modal="true" aria-labelledby="restore-backup-title">
        <h3 id="restore-backup-title" class="text-lg font-semibold text-white mb-2">{{ t('settings.restoreBackupTitle') }}</h3>
        <p class="text-sm text-red-400/80 mb-4">{{ t('settings.restoreWarning') }}</p>
        <div>
          <label class="text-xs text-white/50 block mb-1">{{ t('settings.encryptionPassphrase') }}</label>
          <input v-model="restorePassphrase" type="password" :placeholder="t('settings.enterBackupPassphrase')" class="w-full bg-black/30 border border-white/10 rounded-lg px-3 py-2 text-sm text-white placeholder-white/30 focus:outline-none focus:border-blue-500/50" />
        </div>
        <div class="flex gap-3 mt-5">
          <button @click="showRestoreModal = false" class="glass-button px-4 py-2 rounded-lg text-sm flex-1">{{ t('common.cancel') }}</button>
          <button @click="restoreBackup" :disabled="restoringBackup || !restorePassphrase" class="glass-button glass-button-danger px-4 py-2 rounded-lg text-sm flex-1 disabled:opacity-50">
            {{ restoringBackup ? t('common.restoring') : t('common.restore') }}
          </button>
        </div>
      </div>
    </div>
  </Teleport>

  <!-- Lightning Channel Backup -->
  <div class="glass-card px-6 py-6 mb-6">
    <h2 class="text-xl font-semibold text-white/96 mb-1">Lightning Channel Backup</h2>
    <p class="text-sm text-white/60 mb-3">Export your channel state so you can restore channels on a new node. Does not include on-chain wallet seed.</p>
    <div class="flex gap-3">
      <button @click="exportChannelBackup" :disabled="exportingChannelBackup" class="glass-button px-4 py-2 rounded-lg text-sm flex items-center gap-2">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
        </svg>
        {{ exportingChannelBackup ? 'Exporting...' : 'Export Channel Backup' }}
      </button>
    </div>
    <div v-if="channelBackupData" class="mt-3 bg-black/30 rounded-lg p-3">
      <p class="text-xs text-white/40 mb-1">{{ channelBackupChannels }} channel{{ channelBackupChannels !== 1 ? 's' : '' }} backed up at {{ channelBackupTime }}</p>
      <textarea readonly :value="channelBackupData" rows="3" class="w-full bg-black/20 text-xs font-mono text-white/60 rounded p-2 resize-none border border-white/10"></textarea>
      <button @click="copyChannelBackup" class="mt-2 glass-button px-3 py-1.5 rounded text-xs">{{ channelBackupCopied ? 'Copied!' : 'Copy Backup Data' }}</button>
    </div>
    <p v-if="channelBackupError" class="mt-2 text-xs text-red-400">{{ channelBackupError }}</p>
  </div>

  <!-- Network Diagnostics Link -->
  <div class="glass-card px-6 py-6 mb-6">
    <div class="flex items-center justify-between">
      <div>
        <h2 class="text-xl font-semibold text-white/96">{{ t('common.network') }}</h2>
        <p class="text-sm text-white/60 mt-1">{{ t('settings.networkDesc') }}</p>
      </div>
      <button @click="router.push('/dashboard/server')" class="glass-button px-4 py-2 rounded-lg text-sm flex items-center gap-2">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
        </svg>
        {{ t('common.networkDiagnostics') }}
      </button>
    </div>
  </div>

  <!-- Reboot Section -->
  <div class="path-option-card px-6 py-6 mt-6">
    <div class="flex items-center justify-between">
      <div>
        <h2 class="text-xl font-semibold text-white/90 mb-1">Reboot</h2>
        <p class="text-sm text-white/60">Restart the machine. All containers will restart automatically.</p>
      </div>
      <button
        class="glass-button px-6 py-2 text-sm"
        :disabled="rebooting"
        @click="showRebootConfirm = true"
      >
        {{ rebooting ? 'Rebooting...' : 'Reboot' }}
      </button>
    </div>
  </div>

  <!-- Reboot Confirmation Modal -->
  <Teleport to="body">
    <div v-if="showRebootConfirm" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" @click.self="showRebootConfirm = false">
      <div class="glass-card px-8 py-8 max-w-md mx-4">
        <h3 class="text-lg font-semibold text-white/90 mb-3">Reboot Node</h3>
        <p class="text-sm text-white/60 mb-4">Enter your password to confirm reboot. The node will be temporarily unavailable.</p>
        <input
          v-model="rebootPassword"
          type="password"
          class="w-full px-3 py-2 rounded-lg bg-white/10 text-white border border-white/20 focus:border-orange-500 focus:ring-1 focus:ring-orange-500 mb-4"
          placeholder="Password"
          @keydown.enter="performReboot"
        />
        <p v-if="rebootError" class="text-sm text-red-400 mb-3">{{ rebootError }}</p>
        <div class="flex gap-3 justify-end">
          <button class="glass-button" @click="showRebootConfirm = false">Cancel</button>
          <button
            class="glass-button px-6"
            :disabled="rebooting || !rebootPassword"
            @click="performReboot"
          >
            {{ rebooting ? 'Rebooting...' : 'Confirm Reboot' }}
          </button>
        </div>
      </div>
    </div>
  </Teleport>

  <!-- Factory Reset Section -->
  <div class="path-option-card px-6 py-6 mt-6 border-red-500/30">
    <h2 class="text-xl font-semibold text-red-400/90 mb-3">Factory Reset</h2>
    <p class="text-sm text-white/60 mb-4">
      Wipe all user data, identities, and credentials. Container images are preserved. The node will restart and show the onboarding screen.
    </p>
    <button
      class="glass-button glass-button-danger"
      @click="showFactoryResetConfirm = true"
    >
      Factory Reset
    </button>
  </div>

  <!-- Factory Reset Confirmation Modal -->
  <Teleport to="body">
    <div v-if="showFactoryResetConfirm" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
      <div class="glass-card px-8 py-8 max-w-md mx-4">
        <h3 class="text-lg font-semibold text-white/90 mb-3">Are you sure?</h3>
        <p class="text-sm text-white/60 mb-6">
          This will delete all identities, credentials, and settings. This cannot be undone.
        </p>
        <div class="flex gap-3 justify-end">
          <button class="glass-button" @click="showFactoryResetConfirm = false">Cancel</button>
          <button
            class="glass-button glass-button-danger"
            :disabled="factoryResetLoading"
            @click="performFactoryReset"
          >
            {{ factoryResetLoading ? 'Resetting...' : 'Yes, Reset' }}
          </button>
        </div>
      </div>
    </div>
  </Teleport>
</template>
