archy/neode-ui/src/views/Settings.vue

<template>
  <div>
    <div class="mb-8 flex flex-col md:flex-row md:items-center md:justify-between gap-4">
      <div>
        <h1 class="text-3xl font-bold text-white mb-2 drop-shadow-[0_2px_8px_rgba(0,0,0,0.6)]">Settings</h1>
        <p class="text-white/80">Configure your Archipelago experience</p>
      </div>
      <!-- Controller indicator - Mobile only (desktop shows in sidebar) -->
      <div class="md:hidden">
        <ControllerIndicator />
      </div>
    </div>

    <!-- Account Section -->
    <div class="path-option-card cursor-default px-6 py-6 mb-6">
      <h2 class="text-xl font-semibold text-white/96 mb-6">Account</h2>
      
      <!-- Info Grid -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
        <!-- Server Name Card -->
        <div class="bg-black/20 rounded-xl px-5 py-4 border border-white/10">
          <div class="flex items-center gap-3 mb-2">
            <svg class="w-5 h-5 text-white/70" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
            </svg>
            <p class="text-xs font-semibold text-white/60 uppercase tracking-wide">Server Name</p>
          </div>
          <p class="text-lg font-semibold text-white/95">{{ serverName }}</p>
        </div>

        <!-- Version Card -->
        <div class="bg-black/20 rounded-xl px-5 py-4 border border-white/10">
          <div class="flex items-center gap-3 mb-2">
            <svg class="w-5 h-5 text-white/70" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
            </svg>
            <p class="text-xs font-semibold text-white/60 uppercase tracking-wide">Version</p>
          </div>
          <p class="text-lg font-semibold text-white/95">{{ version }}</p>
        </div>

        <!-- Session Card -->
        <div class="bg-black/20 rounded-xl px-5 py-4 border border-white/10 md:col-span-2">
          <div class="flex items-center gap-3 mb-2">
            <svg class="w-5 h-5 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path 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" />
            </svg>
            <p class="text-xs font-semibold text-white/60 uppercase tracking-wide">Session Status</p>
          </div>
          <p class="text-base font-medium text-white/90">Currently logged in</p>
        </div>

        <!-- Identity Card: DID + Tor Address (onion below DID, with copy) -->
        <div v-if="userDid || serverTorAddress" class="bg-black/20 rounded-xl px-5 py-4 border border-white/10 md:col-span-2 space-y-4">
          <!-- DID -->
          <div v-if="userDid">
            <div class="flex items-center gap-3 mb-2">
              <svg class="w-5 h-5 text-amber-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
              </svg>
              <p class="text-xs font-semibold text-white/60 uppercase tracking-wide">Your DID</p>
            </div>
            <p class="text-sm font-mono text-white/90 break-all" :title="userDid">{{ userDid }}</p>
            <p class="text-xs text-white/50 mt-1">Decentralized identifier for passwordless auth</p>
          </div>

          <!-- Tor / Onion Address (below DID, with copy button) -->
          <div v-if="serverTorAddress" :class="userDid ? 'pt-4 border-t border-white/10' : ''">
            <div class="flex items-center justify-between gap-2 mb-2">
              <div class="flex items-center gap-3 min-w-0">
                <svg class="w-5 h-5 text-amber-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
                </svg>
                <p class="text-xs font-semibold text-white/60 uppercase tracking-wide">Node .onion Address</p>
              </div>
              <button
                @click="copyOnionAddress"
                class="shrink-0 px-3 py-1.5 rounded-lg glass-button glass-button-sm text-xs font-medium text-white/90 hover:text-white transition-colors flex items-center gap-1.5"
              >
                <svg v-if="!copiedOnion" 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="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                </svg>
                <span v-else class="text-green-400 text-xs">Copied</span>
                <span v-if="!copiedOnion">Copy</span>
              </button>
            </div>
            <p class="text-sm font-mono text-amber-400/90 break-all" :title="serverTorAddress">{{ serverTorAddress }}</p>
            <p class="text-xs text-white/50 mt-1">Onion address for node interface and peer discovery over Tor</p>
          </div>
        </div>
      </div>

      <!-- Change Password -->
      <div data-controller-container tabindex="0" class="mb-6">
        <button
          @click="showChangePasswordModal = true"
          class="w-full flex items-center justify-center gap-2 mb-4 px-4 py-2 rounded-lg border border-orange-500/50 text-orange-400 font-medium hover:bg-orange-500/10 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="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
          </svg>
          <span>Change Password</span>
        </button>
      </div>

      <!-- Change Password Modal -->
      <Teleport to="body">
        <div
          v-if="showChangePasswordModal"
          class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm"
          @click.self="closeChangePasswordModal()"
        >
          <div ref="changePasswordModalRef" class="glass-card p-6 max-w-md w-full">
            <h3 class="text-lg font-semibold text-white mb-4">Change Password</h3>
            <p class="text-white/70 text-sm mb-4">Updates both web login and SSH access. Use a strong password (12+ chars, upper, lower, digit, special).</p>
            <form @submit.prevent="handleChangePassword" class="space-y-4">
              <div>
                <label class="block text-sm font-medium text-white/80 mb-2">Current Password</label>
                <input
                  v-model="changePasswordForm.currentPassword"
                  type="password"
                  required
                  autocomplete="current-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"
                  placeholder="Enter current password"
                />
              </div>
              <div>
                <label class="block text-sm font-medium text-white/80 mb-2">New Password</label>
                <input
                  v-model="changePasswordForm.newPassword"
                  type="password"
                  required
                  autocomplete="new-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"
                  placeholder="12+ chars, upper, lower, digit, special"
                />
              </div>
              <div>
                <label class="block text-sm font-medium text-white/80 mb-2">Confirm New Password</label>
                <input
                  v-model="changePasswordForm.confirmPassword"
                  type="password"
                  required
                  autocomplete="new-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"
                  placeholder="Re-enter new password"
                />
              </div>
              <label class="flex items-center gap-2 text-sm text-white/80">
                <input v-model="changePasswordForm.alsoChangeSsh" type="checkbox" class="rounded border-white/30" />
                Also update SSH password (recommended)
              </label>
              <p v-if="changePasswordError" class="text-sm text-red-400">{{ changePasswordError }}</p>
              <p v-if="changePasswordSuccess" class="text-sm text-green-400">{{ changePasswordSuccess }}</p>
              <div class="flex gap-3 pt-2">
                <button
                  type="submit"
                  :disabled="changingPassword"
                  class="flex-1 px-4 py-2 rounded-lg bg-orange-500 text-white font-medium hover:bg-orange-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                >
                  {{ changingPassword ? 'Updating...' : 'Update Password' }}
                </button>
                <button
                  type="button"
                  @click="closeChangePasswordModal"
                  class="px-4 py-2 rounded-lg bg-white/10 text-white font-medium hover:bg-white/20 transition-colors"
                >
                  Cancel
                </button>
              </div>
            </form>
          </div>
        </div>
      </Teleport>

      <!-- Two-Factor Authentication -->
      <div class="mb-6">
        <div class="flex items-center justify-between mb-3">
          <div class="flex items-center gap-3">
            <svg class="w-5 h-5 text-white/70" 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>
              <p class="text-sm font-medium text-white/90">Two-Factor Authentication</p>
              <p class="text-xs text-white/50">Protect your account with an authenticator app</p>
            </div>
          </div>
          <span
            class="text-xs font-semibold px-2 py-1 rounded-full"
            :class="totpEnabled ? 'bg-green-500/20 text-green-400' : 'bg-white/10 text-white/50'"
          >
            {{ totpEnabled ? 'Enabled' : 'Disabled' }}
          </span>
        </div>
        <button
          v-if="!totpEnabled"
          @click="showTotpSetupModal = true"
          class="w-full flex items-center justify-center gap-2 px-4 py-2 rounded-lg border border-orange-500/50 text-orange-400 font-medium hover:bg-orange-500/10 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="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
          </svg>
          <span>Enable 2FA</span>
        </button>
        <button
          v-else
          @click="showTotpDisableModal = true"
          class="w-full flex items-center justify-center gap-2 px-4 py-2 rounded-lg border border-red-500/50 text-red-400 font-medium hover:bg-red-500/10 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="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z" />
          </svg>
          <span>Disable 2FA</span>
        </button>
      </div>

      <!-- TOTP Setup Modal -->
      <Teleport to="body">
        <div
          v-if="showTotpSetupModal"
          class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm"
          @click.self="closeTotpSetup"
        >
          <div class="glass-card p-6 max-w-md w-full">
            <!-- Step 1: Enter password -->
            <template v-if="totpSetupStep === 1">
              <h3 class="text-lg font-semibold text-white mb-2">Enable Two-Factor Authentication</h3>
              <p class="text-white/60 text-sm mb-4">Enter your password to begin setup.</p>
              <form @submit.prevent="beginTotpSetup" class="space-y-4">
                <input
                  v-model="totpSetupPassword"
                  type="password"
                  required
                  autocomplete="current-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"
                  placeholder="Enter your password"
                />
                <p v-if="totpSetupError" class="text-sm text-red-400">{{ totpSetupError }}</p>
                <div class="flex gap-3">
                  <button
                    type="submit"
                    :disabled="totpSetupLoading"
                    class="flex-1 px-4 py-2 rounded-lg bg-orange-500 text-white font-medium hover:bg-orange-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                  >
                    {{ totpSetupLoading ? 'Loading...' : 'Continue' }}
                  </button>
                  <button type="button" @click="closeTotpSetup" class="px-4 py-2 rounded-lg bg-white/10 text-white font-medium hover:bg-white/20 transition-colors">Cancel</button>
                </div>
              </form>
            </template>

            <!-- Step 2: Scan QR + verify code -->
            <template v-else-if="totpSetupStep === 2">
              <h3 class="text-lg font-semibold text-white mb-2">Scan QR Code</h3>
              <p class="text-white/60 text-sm mb-4">Scan this QR code with your authenticator app (Google Authenticator, Authy, etc.), then enter the 6-digit code.</p>
              <div class="flex justify-center mb-4 bg-white rounded-xl p-4 mx-auto w-fit" v-html="totpQrSvg" />
              <div class="bg-black/30 rounded-lg px-3 py-2 mb-4">
                <p class="text-xs text-white/50 mb-1">Manual entry key:</p>
                <p class="text-sm font-mono text-orange-400 break-all select-all">{{ totpSecretBase32 }}</p>
              </div>
              <form @submit.prevent="confirmTotpSetup" class="space-y-4">
                <input
                  v-model="totpSetupCode"
                  type="text"
                  inputmode="numeric"
                  pattern="[0-9]{6}"
                  maxlength="6"
                  required
                  autocomplete="one-time-code"
                  class="w-full px-3 py-3 rounded-lg bg-white/10 text-white text-center text-2xl tracking-[0.5em] border border-white/20 focus:border-orange-500 focus:ring-1 focus:ring-orange-500 font-mono"
                  placeholder="000000"
                />
                <p v-if="totpSetupError" class="text-sm text-red-400">{{ totpSetupError }}</p>
                <div class="flex gap-3">
                  <button
                    type="submit"
                    :disabled="totpSetupLoading || totpSetupCode.length !== 6"
                    class="flex-1 px-4 py-2 rounded-lg bg-orange-500 text-white font-medium hover:bg-orange-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                  >
                    {{ totpSetupLoading ? 'Verifying...' : 'Verify & Enable' }}
                  </button>
                  <button type="button" @click="closeTotpSetup" class="px-4 py-2 rounded-lg bg-white/10 text-white font-medium hover:bg-white/20 transition-colors">Cancel</button>
                </div>
              </form>
            </template>

            <!-- Step 3: Show backup codes -->
            <template v-else-if="totpSetupStep === 3">
              <h3 class="text-lg font-semibold text-white mb-2">Save Your Backup Codes</h3>
              <p class="text-white/60 text-sm mb-4">Store these codes safely. Each can be used once if you lose access to your authenticator app.</p>
              <div class="bg-black/30 rounded-xl p-4 mb-4">
                <div class="grid grid-cols-2 gap-2">
                  <div
                    v-for="(code, i) in totpBackupCodes"
                    :key="i"
                    class="text-sm font-mono text-white/90 bg-white/5 rounded px-3 py-2 text-center"
                  >
                    {{ code }}
                  </div>
                </div>
              </div>
              <button
                @click="copyBackupCodes"
                class="w-full mb-3 flex items-center justify-center gap-2 px-4 py-2 rounded-lg border border-white/20 text-white/80 font-medium hover:bg-white/5 transition-colors"
              >
                <svg v-if="!backupCodesCopied" 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="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                </svg>
                <span>{{ backupCodesCopied ? 'Copied!' : 'Copy All Codes' }}</span>
              </button>
              <button
                @click="closeTotpSetup"
                class="w-full px-4 py-2 rounded-lg bg-orange-500 text-white font-medium hover:bg-orange-600 transition-colors"
              >
                Done
              </button>
            </template>
          </div>
        </div>
      </Teleport>

      <!-- TOTP Disable Modal -->
      <Teleport to="body">
        <div
          v-if="showTotpDisableModal"
          class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm"
          @click.self="closeTotpDisable"
        >
          <div class="glass-card p-6 max-w-md w-full">
            <h3 class="text-lg font-semibold text-white mb-2">Disable Two-Factor Authentication</h3>
            <p class="text-white/60 text-sm mb-4">Enter your password and a current TOTP code to disable 2FA.</p>
            <form @submit.prevent="disableTotp" class="space-y-4">
              <div>
                <label class="block text-sm font-medium text-white/80 mb-2">Password</label>
                <input
                  v-model="totpDisablePassword"
                  type="password"
                  required
                  autocomplete="current-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"
                  placeholder="Enter your password"
                />
              </div>
              <div>
                <label class="block text-sm font-medium text-white/80 mb-2">Authenticator Code</label>
                <input
                  v-model="totpDisableCode"
                  type="text"
                  inputmode="numeric"
                  pattern="[0-9]{6}"
                  maxlength="6"
                  required
                  autocomplete="one-time-code"
                  class="w-full px-3 py-3 rounded-lg bg-white/10 text-white text-center text-2xl tracking-[0.5em] border border-white/20 focus:border-orange-500 focus:ring-1 focus:ring-orange-500 font-mono"
                  placeholder="000000"
                />
              </div>
              <p v-if="totpDisableError" class="text-sm text-red-400">{{ totpDisableError }}</p>
              <div class="flex gap-3">
                <button
                  type="submit"
                  :disabled="totpDisableLoading"
                  class="flex-1 px-4 py-2 rounded-lg bg-red-500 text-white font-medium hover:bg-red-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                >
                  {{ totpDisableLoading ? 'Disabling...' : 'Disable 2FA' }}
                </button>
                <button type="button" @click="closeTotpDisable" class="px-4 py-2 rounded-lg bg-white/10 text-white font-medium hover:bg-white/20 transition-colors">Cancel</button>
              </div>
            </form>
          </div>
        </div>
      </Teleport>

      <!-- Logout Button -->
      <button
        @click="handleLogout"
        class="w-full path-action-button path-action-button--continue flex items-center justify-center gap-2"
      >
        <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="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
        </svg>
        <span>Logout</span>
      </button>
    </div>

    <!-- Interface Mode Section -->
    <div class="path-option-card cursor-default px-6 py-6 mb-6">
      <h2 class="text-xl font-semibold text-white/96 mb-2">Interface Mode</h2>
      <p class="text-sm text-white/60 mb-6">Choose how you want to interact with your node.</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>

    <!-- Claude Authentication Section -->
    <div class="path-option-card cursor-default px-6 py-6 mb-6">
      <h2 class="text-xl font-semibold text-white/96 mb-2">Claude Authentication</h2>
      <p class="text-sm text-white/60 mb-6">Connect your Claude Max account to enable AI chat features.</p>

      <!-- Status -->
      <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">Connection Status</p>
        </div>
        <p class="text-base font-medium" :class="claudeConnected ? 'text-green-400' : 'text-white/50'">
          {{ claudeConnected ? 'Connected' : 'Not connected' }}
        </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'
          : 'border-orange-500/50 text-orange-400 font-medium hover:bg-orange-500/10'"
      >
        <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 ? 'Re-authenticate' : 'Login with Claude' }}</span>
      </button>
    </div>

    <!-- Claude Login Modal (iframe) -->
    <Teleport to="body">
      <div
        v-if="showClaudeLoginModal"
        class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm"
        @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">Claude Authentication</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="path-option-card cursor-default px-6 py-6 mb-6">
      <div class="mb-2">
        <h2 class="text-xl font-semibold text-white/96">AI Data Access</h2>
      </div>
      <p class="text-sm text-white/60 mb-6">Control what data the AI assistant can see. All categories are off by default.</p>

      <!-- Enable All toggle -->
      <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'">Enable All</p>
          <p class="text-xs text-white/50 mt-0.5">Grant access to all data categories at once</p>
        </div>
        <div
          class="w-10 h-6 rounded-full shrink-0 transition-colors relative"
          :class="aiPermissions.allEnabled ? 'bg-orange-500' : 'bg-white/15'"
        >
          <div
            class="absolute top-1 w-4 h-4 rounded-full bg-white shadow transition-transform"
            :class="aiPermissions.allEnabled ? 'translate-x-5' : 'translate-x-1'"
          />
        </div>
      </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>
              <div
                class="w-10 h-6 rounded-full shrink-0 transition-colors relative"
                :class="aiPermissions.isEnabled(cat.id) ? 'bg-orange-500' : 'bg-white/15'"
              >
                <div
                  class="absolute top-1 w-4 h-4 rounded-full bg-white shadow transition-transform"
                  :class="aiPermissions.isEnabled(cat.id) ? 'translate-x-5' : 'translate-x-1'"
                />
              </div>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useAppStore } from '../stores/app'
import { useUIModeStore } from '@/stores/uiMode'
import { useAIPermissionsStore, AI_PERMISSION_CATEGORIES } from '@/stores/aiPermissions'
import ControllerIndicator from '@/components/ControllerIndicator.vue'
import { rpcClient } from '@/api/rpc-client'
import { useModalKeyboard } from '@/composables/useModalKeyboard'
import type { UIMode } from '@/types/api'

const router = useRouter()
const store = useAppStore()
const uiMode = useUIModeStore()
const aiPermissions = useAIPermissionsStore()
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
})

const interfaceModes: { id: UIMode; label: string; description: string; iconPaths: string[] }[] = [
  {
    id: 'easy',
    label: 'Easy',
    description: 'Goal-based interface. Choose what you want to do, and the system handles the rest.',
    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: 'Pro',
    description: 'Full control over all services. Configure everything manually with all technical details.',
    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: 'Chat',
    description: 'Conversational AI interface. Manage your node through natural language. Coming soon.',
    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'],
  },
]

const serverName = computed(() => store.serverName)
const version = computed(() => store.serverInfo?.version || '0.0.0')
const serverTorAddressFromStore = computed(() => store.serverInfo?.['tor-address'] || null)
const torAddressFromRpc = ref<string | null>(null)
const serverTorAddress = computed(() => serverTorAddressFromStore.value || torAddressFromRpc.value)
const userDid = computed(() => {
  try {
    return localStorage.getItem('neode_did') || null
  } catch {
    return null
  }
})

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() {
  // Listen for success message from login iframe
  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)
  }
}

// --- 2FA State ---
const totpEnabled = ref(false)
const showTotpSetupModal = ref(false)
const showTotpDisableModal = ref(false)
const totpSetupStep = ref(1)
const totpSetupPassword = ref('')
const totpSetupCode = ref('')
const totpSetupError = ref('')
const totpSetupLoading = ref(false)
const totpQrSvg = ref('')
const totpSecretBase32 = ref('')
const totpPendingToken = ref('')
const totpBackupCodes = ref<string[]>([])
const backupCodesCopied = ref(false)
const totpDisablePassword = ref('')
const totpDisableCode = ref('')
const totpDisableError = ref('')
const totpDisableLoading = ref(false)

async function loadTotpStatus() {
  try {
    const res = await rpcClient.totpStatus()
    totpEnabled.value = res.enabled
  } catch {
    // Ignore - may not be available
  }
}

async function beginTotpSetup() {
  totpSetupError.value = ''
  totpSetupLoading.value = true
  try {
    const res = await rpcClient.totpSetupBegin(totpSetupPassword.value)
    totpQrSvg.value = res.qr_svg
    totpSecretBase32.value = res.secret_base32
    totpPendingToken.value = res.pending_token
    totpSetupStep.value = 2
  } catch (e) {
    totpSetupError.value = e instanceof Error ? e.message : 'Setup failed'
  } finally {
    totpSetupLoading.value = false
  }
}

async function confirmTotpSetup() {
  totpSetupError.value = ''
  totpSetupLoading.value = true
  try {
    const res = await rpcClient.totpSetupConfirm({
      code: totpSetupCode.value,
      password: totpSetupPassword.value,
      pendingToken: totpPendingToken.value,
    })
    totpBackupCodes.value = res.backup_codes
    totpEnabled.value = true
    totpSetupStep.value = 3
  } catch (e) {
    totpSetupError.value = e instanceof Error ? e.message : 'Verification failed'
  } finally {
    totpSetupLoading.value = false
  }
}

function closeTotpSetup() {
  showTotpSetupModal.value = false
  totpSetupStep.value = 1
  totpSetupPassword.value = ''
  totpSetupCode.value = ''
  totpSetupError.value = ''
  totpQrSvg.value = ''
  totpSecretBase32.value = ''
  totpPendingToken.value = ''
  totpBackupCodes.value = []
  backupCodesCopied.value = false
}

async function disableTotp() {
  totpDisableError.value = ''
  totpDisableLoading.value = true
  try {
    await rpcClient.totpDisable(totpDisablePassword.value, totpDisableCode.value)
    totpEnabled.value = false
    closeTotpDisable()
  } catch (e) {
    totpDisableError.value = e instanceof Error ? e.message : 'Failed to disable 2FA'
  } finally {
    totpDisableLoading.value = false
  }
}

function closeTotpDisable() {
  showTotpDisableModal.value = false
  totpDisablePassword.value = ''
  totpDisableCode.value = ''
  totpDisableError.value = ''
}

async function copyBackupCodes() {
  const text = totpBackupCodes.value.join('\n')
  try {
    await navigator.clipboard.writeText(text)
  } catch {
    const ta = document.createElement('textarea')
    ta.value = text
    ta.style.position = 'fixed'
    ta.style.opacity = '0'
    document.body.appendChild(ta)
    ta.select()
    document.execCommand('copy')
    document.body.removeChild(ta)
  }
  backupCodesCopied.value = true
  setTimeout(() => { backupCodesCopied.value = false }, 2000)
}

const copiedOnion = ref(false)
const showChangePasswordModal = ref(false)
const changePasswordModalRef = ref<HTMLElement | null>(null)
const changePasswordRestoreFocusRef = ref<HTMLElement | null>(null)
useModalKeyboard(changePasswordModalRef, showChangePasswordModal, closeChangePasswordModal, { restoreFocusRef: changePasswordRestoreFocusRef })
const changingPassword = ref(false)
const changePasswordError = ref('')
const changePasswordSuccess = ref('')
const changePasswordForm = ref({
  currentPassword: '',
  newPassword: '',
  confirmPassword: '',
  alsoChangeSsh: true,
})

function validatePasswordStrength(pw: string): string | null {
  if (pw.length < 12) return 'Password must be at least 12 characters'
  if (!/[A-Z]/.test(pw)) return 'Password must contain at least one uppercase letter'
  if (!/[a-z]/.test(pw)) return 'Password must contain at least one lowercase letter'
  if (!/\d/.test(pw)) return 'Password must contain at least one digit'
  if (!/[^A-Za-z0-9]/.test(pw)) return 'Password must contain at least one special character (!@#$%^&* etc.)'
  return null
}

async function handleChangePassword() {
  changePasswordError.value = ''
  changePasswordSuccess.value = ''
  const { currentPassword, newPassword, confirmPassword, alsoChangeSsh } = changePasswordForm.value
  if (!currentPassword || !newPassword || !confirmPassword) {
    changePasswordError.value = 'All fields are required'
    return
  }
  if (newPassword !== confirmPassword) {
    changePasswordError.value = 'New passwords do not match'
    return
  }
  const strengthError = validatePasswordStrength(newPassword)
  if (strengthError) {
    changePasswordError.value = strengthError
    return
  }
  changingPassword.value = true
  try {
    await rpcClient.changePassword({
      currentPassword,
      newPassword,
      alsoChangeSsh,
    })
    changePasswordSuccess.value = 'Password updated successfully. Use the new password for login and SSH.'
    changePasswordForm.value = { currentPassword: '', newPassword: '', confirmPassword: '', alsoChangeSsh: true }
    setTimeout(() => {
      closeChangePasswordModal()
    }, 2000)
  } catch (e) {
    changePasswordError.value = e instanceof Error ? e.message : 'Failed to change password'
  } finally {
    changingPassword.value = false
  }
}

let copiedTimer: ReturnType<typeof setTimeout> | null = null

async function copyOnionAddress() {
  const addr = serverTorAddress.value
  if (!addr) return
  try {
    await navigator.clipboard.writeText(addr)
  } catch {
    const ta = document.createElement('textarea')
    ta.value = addr
    ta.style.position = 'fixed'
    ta.style.opacity = '0'
    document.body.appendChild(ta)
    ta.select()
    document.execCommand('copy')
    document.body.removeChild(ta)
  }
  copiedOnion.value = true
  if (copiedTimer) clearTimeout(copiedTimer)
  copiedTimer = setTimeout(() => { copiedOnion.value = false }, 2000)
}

function closeChangePasswordModal() {
  changePasswordRestoreFocusRef.value?.focus?.()
  showChangePasswordModal.value = false
  changePasswordError.value = ''
  changePasswordSuccess.value = ''
  changePasswordForm.value = { currentPassword: '', newPassword: '', confirmPassword: '', alsoChangeSsh: true }
}

onMounted(async () => {
  checkClaudeStatus()
  loadTotpStatus()
  if (!serverTorAddressFromStore.value) {
    try {
      const res = await rpcClient.getTorAddress()
      torAddressFromRpc.value = res.tor_address ?? null
    } catch {
      // Ignore - tor address may not be available yet
    }
  }
})

async function handleLogout() {
  try { await store.logout() } catch { /* proceed */ }
  router.push('/login').catch(() => { window.location.href = '/login' })
}
</script>