
<template>
  <div class="p-4 bg-background text-foreground min-h-screen"> <!-- Outer container -->
    <div class="max-w-7xl mx-auto"> <!-- Inner container for max-width -->
      <h1 class="text-2xl font-semibold text-foreground mb-6 pb-3 border-b border-border"> <!-- Main Title -->
        {{ $t('settings.title') }}
      </h1>

      <!-- Error state (Show first if error exists) -->
      <div v-if="settingsError" class="p-4 mb-4 border-l-4 border-error bg-error/10 text-error rounded">
        {{ settingsError }}
      </div>

      <!-- Settings Sections Grid (Render grid structure always if no error) -->
      <div v-else class="grid grid-cols-1 lg:grid-cols-2 gap-6"> <!-- Changed to 2 columns on large screens -->
        <!-- Removed global loading state, content will show/hide based on individual loading states -->

          <!-- Column 1: Security -->
          <div class="space-y-6"> <!-- Removed col-span -->
          <!-- Security Sections: Only show if settings data is loaded -->
          <div v-if="settings" class="bg-background border border-border rounded-lg shadow-sm overflow-hidden">
            <h2 class="text-lg font-semibold text-foreground px-6 py-4 border-b border-border bg-header/50">{{ $t('settings.category.security') }}</h2>
            <div class="p-6 space-y-6">
              <!-- Change Password -->
              <div class="settings-section-content">
                <h3 class="text-base font-semibold text-foreground mb-3">{{ $t('settings.changePassword.title') }}</h3>
                <form @submit.prevent="handleChangePassword" class="space-y-4">
                  <div>
                    <label for="currentPassword" class="block text-sm font-medium text-text-secondary mb-1">{{ $t('settings.changePassword.currentPassword') }}</label>
                    <input type="password" id="currentPassword" v-model="currentPassword" required
                           class="w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                  </div>
                  <div>
                    <label for="newPassword" class="block text-sm font-medium text-text-secondary mb-1">{{ $t('settings.changePassword.newPassword') }}</label>
                    <input type="password" id="newPassword" v-model="newPassword" required
                           class="w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                  </div>
                  <div>
                    <label for="confirmPassword" class="block text-sm font-medium text-text-secondary mb-1">{{ $t('settings.changePassword.confirmPassword') }}</label>
                    <input type="password" id="confirmPassword" v-model="confirmPassword" required
                           class="w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                  </div>
                  <div class="flex items-center justify-between">
                    <button type="submit" :disabled="changePasswordLoading"
                            class="px-4 py-2 bg-button text-button-text rounded-md shadow-sm hover:bg-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary disabled:opacity-50 disabled:cursor-not-allowed transition duration-150 ease-in-out text-sm font-medium">
                      {{ changePasswordLoading ? $t('common.loading') : $t('settings.changePassword.submit') }}
                    </button>
                    <p v-if="changePasswordMessage" :class="['text-sm', changePasswordSuccess ? 'text-success' : 'text-error']">{{ changePasswordMessage }}</p>
                  </div>
                </form>
              </div>
              <hr class="border-border/50">
              <!-- Passkey Management -->
              <div class="settings-section-content">
                <h3 class="text-base font-semibold text-foreground mb-3">{{ $t('settings.passkey.title') }}</h3>
                <p class="text-sm text-text-secondary mb-4">{{ $t('settings.passkey.description') }}</p>
                <button @click="handleRegisterNewPasskey" :disabled="passkeyLoading"
                        class="px-4 py-2 bg-button text-button-text rounded-md shadow-sm hover:bg-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary disabled:opacity-50 disabled:cursor-not-allowed transition duration-150 ease-in-out text-sm font-medium">
                  {{ passkeyLoading ? $t('common.loading') : $t('settings.passkey.registerNewButton') }}
                </button>
                <p v-if="passkeyMessage" :class="['mt-3 text-sm', passkeySuccess ? 'text-success' : 'text-error']">{{ passkeyMessage }}</p>

                <!-- Display list of registered passkeys -->
                <div class="mt-6">
                  <h4 class="text-base font-semibold text-foreground mb-3">{{ $t('settings.passkey.registeredKeysTitle') }}</h4>
                  <div v-if="authStore.passkeysLoading" class="p-4 text-center text-text-secondary italic">
                    {{ $t('common.loading') }}
                  </div>
                  <div v-else-if="authStore.passkeys && authStore.passkeys.length > 0">
                    <ul class="space-y-3">
                      <li v-for="key in authStore.passkeys" :key="key.credentialID" class="flex flex-col sm:flex-row justify-between items-start sm:items-center p-3 border border-border rounded-md bg-header/20 hover:bg-header/40 transition-colors duration-150">
                        <div class="flex-grow mb-2 sm:mb-0">
                          <div class="flex items-center">
                            <span v-if="!editingPasskeyId || editingPasskeyId !== key.credentialID" class="block font-medium text-foreground text-sm">
                              {{ key.name || $t('settings.passkey.unnamedKey') }}
                              <span class="text-xs text-text-tertiary ml-1">(ID: ...{{ typeof key.credentialID === 'string' && key.credentialID ? key.credentialID.slice(-8) : 'N/A' }})</span>
                            </span>
                            <div v-else class="flex items-center flex-grow">
                              <input type="text" v-model="editingPasskeyName" @keyup.enter="savePasskeyName(key.credentialID)" @keyup.esc="cancelEditPasskeyName" class="w-48 px-2 py-1 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary text-sm" :placeholder="$t('settings.passkey.enterNamePlaceholder', '输入 Passkey 名称')" />
                              <button @click="savePasskeyName(key.credentialID)" :disabled="passkeyEditLoadingStates[key.credentialID]" class="ml-2 px-2 py-1 bg-success text-success-text rounded-md text-xs font-medium hover:bg-success/80 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-success disabled:opacity-50 disabled:cursor-not-allowed transition duration-150 ease-in-out">
                                {{ passkeyEditLoadingStates[key.credentialID] ? $t('common.saving') : $t('common.save') }}
                              </button>
                              <button @click="cancelEditPasskeyName" :disabled="passkeyEditLoadingStates[key.credentialID]" class="ml-1 px-2 py-1 bg-transparent text-text-secondary border border-border rounded-md text-xs font-medium hover:bg-border hover:text-foreground focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary disabled:opacity-50 disabled:cursor-not-allowed transition duration-150 ease-in-out">
                                {{ $t('common.cancel') }}
                              </button>
                            </div>
                            <button v-if="!editingPasskeyId || editingPasskeyId !== key.credentialID" @click="startEditPasskeyName(key.credentialID, key.name || '')" class="ml-2 p-1 text-text-secondary hover:text-foreground focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition duration-150 ease-in-out" :title="$t('settings.passkey.editNameTooltip', '编辑名称')">
                              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16" class="bi bi-pencil-square">
                                <path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/>
                                <path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"/>
                              </svg>
                            </button>
                          </div>
                          <div class="text-xs text-text-secondary mt-1 space-x-2">
                            <span>{{ $t('settings.passkey.createdDate') }}: {{ formatDate(key.creationDate) }}</span>
                            <span v-if="key.lastUsedDate">{{ $t('settings.passkey.lastUsedDate') }}: {{ formatDate(key.lastUsedDate) }}</span>
                            <span v-if="key.transports && key.transports.length > 0" class="capitalize">({{ key.transports.join(', ') }})</span>
                          </div>
                        </div>
                        <button @click="handleDeletePasskey(key.credentialID)"
                                :disabled="passkeyDeleteLoadingStates[key.credentialID] || (editingPasskeyId === key.credentialID)"
                                class="px-3 py-1.5 bg-error text-error-text rounded-md text-xs font-medium hover:bg-error/80 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-error disabled:opacity-50 disabled:cursor-not-allowed transition duration-150 ease-in-out self-start sm:self-center">
                          {{ passkeyDeleteLoadingStates[key.credentialID] ? $t('common.loading') : $t('common.delete') }}
                        </button>
                      </li>
                    </ul>
                  </div>
                  <p v-else class="text-sm text-text-secondary italic">{{ $t('settings.passkey.noKeysRegistered') }}</p>
                  <p v-if="passkeyDeleteError" class="mt-3 text-sm text-error">{{ passkeyDeleteError }}</p>
                </div>
              </div>
              <hr class="border-border/50">
              <!-- 2FA -->
              <div class="settings-section-content">
                 <h3 class="text-base font-semibold text-foreground mb-3">{{ $t('settings.twoFactor.title') }}</h3>
                 <div v-if="twoFactorEnabled">
                   <p class="p-3 mb-3 border-l-4 border-success bg-success/10 text-success text-sm rounded">{{ $t('settings.twoFactor.status.enabled') }}</p>
                   <form @submit.prevent="handleDisable2FA" class="space-y-4">
                     <div>
                       <label for="disablePassword" class="block text-sm font-medium text-text-secondary mb-1">{{ $t('settings.twoFactor.disable.passwordPrompt') }}</label>
                       <input type="password" id="disablePassword" v-model="disablePassword" required
                              class="w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                     </div>
                     <div class="flex items-center justify-between">
                        <button type="submit" :disabled="twoFactorLoading"
                                class="px-4 py-2 bg-error text-error-text rounded-md shadow-sm hover:bg-error/80 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-error disabled:opacity-50 disabled:cursor-not-allowed transition duration-150 ease-in-out text-sm font-medium">
                          {{ twoFactorLoading ? $t('common.loading') : $t('settings.twoFactor.disable.button') }}
                        </button>
                     </div>
                   </form>
                 </div>
                 <div v-else>
                   <p class="text-sm text-text-secondary mb-4">{{ $t('settings.twoFactor.status.disabled') }}</p>
                   <button v-if="!isSettingUp2FA" @click="handleSetup2FA" :disabled="twoFactorLoading"
                           class="px-4 py-2 bg-success text-success-text rounded-md shadow-sm hover:bg-success/80 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-success disabled:opacity-50 disabled:cursor-not-allowed transition duration-150 ease-in-out text-sm font-medium">
                     {{ twoFactorLoading ? $t('common.loading') : $t('settings.twoFactor.enable.button') }}
                   </button>
                   <div v-if="isSettingUp2FA && setupData" class="mt-4 space-y-4 p-4 border border-border rounded-md bg-header/30">
                     <p class="text-sm text-text-secondary">{{ $t('settings.twoFactor.setup.scanQrCode') }}</p>
                     <img :src="setupData.qrCodeUrl" alt="QR Code" class="block mx-auto max-w-[180px] border border-border p-1 bg-white rounded">
                     <p class="text-sm text-text-secondary">{{ $t('settings.twoFactor.setup.orEnterSecret') }} <code class="bg-header/50 p-1 px-2 border border-border/50 rounded font-mono text-sm">{{ setupData.secret }}</code></p>
                     <form @submit.prevent="handleVerifyAndActivate2FA" class="space-y-4">
                       <div>
                         <label for="verificationCode" class="block text-sm font-medium text-text-secondary mb-1">{{ $t('settings.twoFactor.setup.enterCode') }}</label>
                         <input type="text" id="verificationCode" v-model="verificationCode" required pattern="\d{6}" title="请输入 6 位数字验证码"
                                class="w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                       </div>
                       <div class="flex items-center space-x-3">
                         <button type="submit" :disabled="twoFactorLoading"
                                 class="px-4 py-2 bg-success text-success-text rounded-md shadow-sm hover:bg-success/80 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-success disabled:opacity-50 disabled:cursor-not-allowed transition duration-150 ease-in-out text-sm font-medium">
                           {{ twoFactorLoading ? $t('common.loading') : $t('settings.twoFactor.setup.verifyButton') }}
                         </button>
                         <button type="button" @click="cancelSetup" :disabled="twoFactorLoading"
                                 class="px-4 py-2 bg-transparent text-text-secondary border border-border rounded-md shadow-sm hover:bg-border hover:text-foreground focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary disabled:opacity-50 disabled:cursor-not-allowed transition duration-150 ease-in-out text-sm font-medium">
                           {{ $t('common.cancel') }}
                         </button>
                       </div>
                     </form>
                   </div>
                 </div>
                 <p v-if="twoFactorMessage" :class="['mt-3 text-sm', twoFactorSuccess ? 'text-success' : 'text-error']">{{ twoFactorMessage }}</p>
              </div>
              <hr class="border-border/50"> <!-- Separator -->
              <!-- CAPTCHA Settings -->
              <div class="settings-section-content">
                 <h3 class="text-base font-semibold text-foreground mb-3">{{ $t('settings.captcha.title') }}</h3>
                 <p class="text-sm text-text-secondary mb-4">{{ $t('settings.captcha.description') }}</p>
                 <div v-if="!captchaSettings" class="p-4 text-center text-text-secondary italic">
                    {{ $t('common.loading') }}
                 </div>
                 <form v-else @submit.prevent="handleUpdateCaptchaSettings" class="space-y-4">
                    <!-- Enable Switch -->
                    <div class="flex items-center">
                        <input type="checkbox" id="captchaEnabled" v-model="captchaForm.enabled"
                               class="h-4 w-4 rounded border-border text-primary focus:ring-primary mr-2 cursor-pointer">
                        <label for="captchaEnabled" class="text-sm text-foreground cursor-pointer select-none">{{ $t('settings.captcha.enableLabel') }}</label>
                    </div>

                    <!-- Provider Select (Only show if enabled) -->
                    <div v-if="captchaForm.enabled">
                      <label for="captchaProvider" class="block text-sm font-medium text-text-secondary mb-1">{{ $t('settings.captcha.providerLabel') }}</label>
                      <select id="captchaProvider" v-model="captchaForm.provider"
                              class="w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary appearance-none bg-no-repeat bg-right pr-8"
                              style="background-image: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 16 16\'%3e%3cpath fill=\'none\' stroke=\'%236c757d\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-width=\'2\' d=\'M2 5l6 6 6-6\'/%3e%3c/svg%3e'); background-position: right 0.75rem center; background-size: 16px 12px;">
                        <option value="none">{{ $t('settings.captcha.providerNone') }}</option>
                        <option value="hcaptcha">hCaptcha</option>
                        <option value="recaptcha">Google reCAPTCHA v2</option>
                      </select>
                    </div>

                    <!-- hCaptcha Settings (Only show if enabled and provider is hcaptcha) -->
                    <div v-if="captchaForm.enabled && captchaForm.provider === 'hcaptcha'" class="space-y-4 pl-4 border-l-2 border-border/50 ml-1 pt-2">
                       <p class="text-xs text-text-secondary">{{ $t('settings.captcha.hcaptchaHint') }} <a href="https://www.hcaptcha.com/" target="_blank" rel="noopener noreferrer" class="text-primary hover:underline">hCaptcha.com</a></p>
                       <div>
                         <label for="hcaptchaSiteKey" class="block text-sm font-medium text-text-secondary mb-1">{{ $t('settings.captcha.siteKeyLabel') }}</label>
                         <input type="text" id="hcaptchaSiteKey" v-model="captchaForm.hcaptchaSiteKey"
                                class="w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                       </div>
                       <div>
                         <label for="hcaptchaSecretKey" class="block text-sm font-medium text-text-secondary mb-1">{{ $t('settings.captcha.secretKeyLabel') }}</label>
                         <input type="password" id="hcaptchaSecretKey" v-model="captchaForm.hcaptchaSecretKey" placeholder="••••••••••••" autocomplete="new-password"
                                class="w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                         <small class="block mt-1 text-xs text-text-secondary">{{ $t('settings.captcha.secretKeyHint') }}</small>
                       </div>
                    </div>

                    <!-- reCAPTCHA Settings (Only show if enabled and provider is recaptcha) -->
                    <div v-if="captchaForm.enabled && captchaForm.provider === 'recaptcha'" class="space-y-4 pl-4 border-l-2 border-border/50 ml-1 pt-2">
                       <p class="text-xs text-text-secondary">{{ $t('settings.captcha.recaptchaHint') }} <a href="https://www.google.com/recaptcha/" target="_blank" rel="noopener noreferrer" class="text-primary hover:underline">Google reCAPTCHA</a></p>
                       <div>
                         <label for="recaptchaSiteKey" class="block text-sm font-medium text-text-secondary mb-1">{{ $t('settings.captcha.siteKeyLabel') }}</label>
                         <input type="text" id="recaptchaSiteKey" v-model="captchaForm.recaptchaSiteKey"
                                class="w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                       </div>
                       <div>
                         <label for="recaptchaSecretKey" class="block text-sm font-medium text-text-secondary mb-1">{{ $t('settings.captcha.secretKeyLabel') }}</label>
                         <input type="password" id="recaptchaSecretKey" v-model="captchaForm.recaptchaSecretKey" placeholder="••••••••••••" autocomplete="new-password"
                                class="w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                         <small class="block mt-1 text-xs text-text-secondary">{{ $t('settings.captcha.secretKeyHint') }}</small>
                       </div>
                    </div>

                    <!-- Save Button & Message -->
                    <div class="flex items-center justify-between pt-2">
                       <button type="submit"
                                class="px-4 py-2 bg-button text-button-text rounded-md shadow-sm hover:bg-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition duration-150 ease-in-out text-sm font-medium">
                         {{ $t('settings.captcha.saveButton') }}
                       </button>
                       <p v-if="captchaMessage" :class="['text-sm', captchaSuccess ? 'text-success' : 'text-error']">{{ captchaMessage }}</p>
                    </div>
                 </form>
              </div>
            </div>
          </div>

          <!-- IP Whitelist Section: Only show if settings data is loaded -->
          <div v-if="settings" class="bg-background border border-border rounded-lg shadow-sm overflow-hidden">
            <h2 class="text-lg font-semibold text-foreground px-6 py-4 border-b border-border bg-header/50">{{ $t('settings.ipWhitelist.title') }}</h2>
            <div class="p-6 space-y-6">
               <p class="text-sm text-text-secondary mb-4">{{ $t('settings.ipWhitelist.description') }}</p>
               <form @submit.prevent="handleUpdateIpWhitelist" class="space-y-4">
                 <div>
                   <label for="ipWhitelist" class="block text-sm font-medium text-text-secondary mb-1">{{ $t('settings.ipWhitelist.label') }}</label>
                   <textarea id="ipWhitelist" v-model="ipWhitelistInput" rows="4"
                             class="w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary font-mono text-sm"></textarea>
                   <small class="block mt-1 text-xs text-text-secondary">{{ $t('settings.ipWhitelist.hint') }}</small>
                 </div>
                 <div class="flex items-center justify-between">
                    <button type="submit" :disabled="ipWhitelistLoading"
                            class="px-4 py-2 bg-button text-button-text rounded-md shadow-sm hover:bg-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary disabled:opacity-50 disabled:cursor-not-allowed transition duration-150 ease-in-out text-sm font-medium">
                      {{ ipWhitelistLoading ? $t('common.loading') : $t('settings.ipWhitelist.saveButton') }}
                    </button>
                    <p v-if="ipWhitelistMessage" :class="['text-sm', ipWhitelistSuccess ? 'text-success' : 'text-error']">{{ ipWhitelistMessage }}</p>
                 </div>
               </form>
            </div>
          </div>

          <!-- IP Blacklist Section: Only show if settings data is loaded (as config depends on it) -->
           <div v-if="settings" class="bg-background border border-border rounded-lg shadow-sm overflow-hidden">
             <div class="flex items-center justify-between px-6 py-4 border-b border-border bg-header/50">
               <h2 class="text-lg font-semibold text-foreground">{{ $t('settings.ipBlacklist.title') }}</h2>
               <!-- IP Blacklist Enable/Disable Switch -->
               <button
                 type="button"
                 @click="handleUpdateIpBlacklistEnabled"
                 :class="[
                   'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary',
                   ipBlacklistEnabled ? 'bg-primary' : 'bg-gray-300 dark:bg-gray-600'
                 ]"
                 role="switch"
                 :aria-checked="ipBlacklistEnabled"
               >
                 <span
                   aria-hidden="true"
                   :class="[
                     'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200',
                     ipBlacklistEnabled ? 'translate-x-5' : 'translate-x-0'
                   ]"
                 ></span>
               </button>
             </div>
             <div class="p-6 space-y-6">
                 <!-- Description moved below -->

                 <!-- Existing Blacklist Content (Conditional Rendering) -->
                <div v-if="ipBlacklistEnabled" class="space-y-6 pt-4">
                  <p class="text-sm text-text-secondary">{{ $t('settings.ipBlacklist.description') }}</p>
                  <!-- Blacklist config form -->
                  <form @submit.prevent="handleUpdateBlacklistSettings" class="flex flex-wrap items-end gap-4">
                     <div class="flex-grow min-w-[150px]">
                       <label for="maxLoginAttempts" class="block text-sm font-medium text-text-secondary mb-1">{{ $t('settings.ipBlacklist.maxAttemptsLabel') }}</label>
                     <input type="number" id="maxLoginAttempts" v-model="blacklistSettingsForm.maxLoginAttempts" min="1" required
                            class="w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                   </div>
                   <div class="flex-grow min-w-[150px]">
                     <label for="loginBanDuration" class="block text-sm font-medium text-text-secondary mb-1">{{ $t('settings.ipBlacklist.banDurationLabel') }}</label>
                     <input type="number" id="loginBanDuration" v-model="blacklistSettingsForm.loginBanDuration" min="1" required
                            class="w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                   </div>
                   <div class="flex-shrink-0">
                      <button type="submit"
                              class="px-4 py-2 bg-button text-button-text rounded-md shadow-sm hover:bg-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition duration-150 ease-in-out text-sm font-medium">
                        {{ $t('settings.ipBlacklist.saveConfigButton') }}
                      </button>
                   </div>
                     <p v-if="blacklistSettingsMessage" :class="['w-full mt-2 text-sm', blacklistSettingsSuccess ? 'text-success' : 'text-error']">{{ blacklistSettingsMessage }}</p>
                  </form>
                  <hr class="border-border/50">
                  <!-- Blacklist table -->
                  <h3 class="text-base font-semibold text-foreground">{{ $t('settings.ipBlacklist.currentBannedTitle') }}</h3>
                <!-- Error state -->
                <div v-if="ipBlacklist.error" class="p-3 border-l-4 border-error bg-error/10 text-error text-sm rounded">{{ ipBlacklist.error }}</div>
                <!-- Loading state (Only show if loading AND no entries are displayed yet) -->
                <div v-else-if="ipBlacklist.loading && ipBlacklist.entries.length === 0" class="p-4 text-center text-text-secondary italic">{{ $t('settings.ipBlacklist.loadingList') }}</div>
                <!-- Empty state (Show only if not loading, no error, and entries empty) -->
                <p v-else-if="!ipBlacklist.loading && !ipBlacklist.error && ipBlacklist.entries.length === 0" class="p-4 text-center text-text-secondary italic">{{ $t('settings.ipBlacklist.noBannedIps') }}</p>
                <!-- Table (Show if not loading, no error, and has entries) -->
                <div v-else-if="!ipBlacklist.loading && !ipBlacklist.error && ipBlacklist.entries.length > 0" class="overflow-x-auto border border-border rounded-lg shadow-sm bg-background">
                  <table class="min-w-full divide-y divide-border text-sm">
                     <thead class="bg-header">
                       <tr>
                         <th scope="col" class="px-4 py-2 text-left font-medium text-text-secondary tracking-wider whitespace-nowrap">{{ $t('settings.ipBlacklist.table.ipAddress') }}</th>
                         <th scope="col" class="px-4 py-2 text-left font-medium text-text-secondary tracking-wider whitespace-nowrap">{{ $t('settings.ipBlacklist.table.attempts') }}</th>
                         <th scope="col" class="px-4 py-2 text-left font-medium text-text-secondary tracking-wider whitespace-nowrap">{{ $t('settings.ipBlacklist.table.lastAttempt') }}</th>
                         <th scope="col" class="px-4 py-2 text-left font-medium text-text-secondary tracking-wider whitespace-nowrap">{{ $t('settings.ipBlacklist.table.bannedUntil') }}</th>
                         <th scope="col" class="px-4 py-2 text-left font-medium text-text-secondary tracking-wider whitespace-nowrap">{{ $t('settings.ipBlacklist.table.actions') }}</th>
                       </tr>
                     </thead>
                     <tbody class="divide-y divide-border">
                       <tr v-for="entry in ipBlacklist.entries" :key="entry.ip" class="hover:bg-header/50">
                         <td class="px-4 py-2 whitespace-nowrap">{{ entry.ip }}</td>
                         <td class="px-4 py-2 whitespace-nowrap">{{ entry.attempts }}</td>
                         <td class="px-4 py-2 whitespace-nowrap">{{ new Date(entry.last_attempt_at * 1000).toLocaleString() }}</td>
                         <td class="px-4 py-2 whitespace-nowrap">{{ entry.blocked_until ? new Date(entry.blocked_until * 1000).toLocaleString() : $t('statusMonitor.notAvailable') }}</td>
                         <td class="px-4 py-2 whitespace-nowrap">
                           <button
                             @click="handleDeleteIp(entry.ip)"
                             :disabled="blacklistDeleteLoading && blacklistToDeleteIp === entry.ip"
                             class="px-2 py-1 bg-error text-error-text rounded text-xs font-medium hover:bg-error/80 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-error disabled:opacity-50 disabled:cursor-not-allowed transition duration-150 ease-in-out"
                           >
                             {{ (blacklistDeleteLoading && blacklistToDeleteIp === entry.ip) ? $t('settings.ipBlacklist.table.deleting') : $t('settings.ipBlacklist.table.removeButton') }}
                           </button>
                         </td>
                       </tr>
                     </tbody>
                  </table>
                </div>
                <!-- Delete Error (Show regardless of loading state if present) -->
                  <p v-if="blacklistDeleteError" class="mt-3 text-sm text-error">{{ blacklistDeleteError }}</p>
                </div> <!-- End v-if="ipBlacklistEnabled" -->
                <!-- Message when disabled -->
                <div v-else class="p-4 text-center text-text-secondary italic border border-dashed border-border/50 rounded-md">
                   {{ $t('settings.ipBlacklist.disabledMessage', 'IP 黑名单功能当前已禁用。') }}
                </div>
             </div>
           </div>

           <!-- About Section -->
           <div class="bg-background border border-border rounded-lg shadow-sm overflow-hidden">
             <h2 class="text-lg font-semibold text-foreground px-6 py-4 border-b border-border bg-header/50">{{ $t('settings.category.about') }}</h2>
             <div class="p-6 space-y-4"> <!-- Reduced space-y for tighter layout -->
                <div class="flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-text-secondary"> <!-- Flex container for info items, allow wrap -->
                   <span class="font-medium">{{ $t('settings.about.version') }}: {{ appVersion }}</span>
                   <!-- Version Check Status -->
                   <span v-if="isCheckingVersion" class="inline-block text-xs ml-2 px-2 py-0.5 rounded-full bg-blue-500 text-white italic">
                     {{ $t('settings.about.checkingUpdate') }}
                   </span>
                   <span v-else-if="versionCheckError" class="inline-block text-xs ml-2 px-2 py-0.5 rounded-full bg-error text-white" :title="versionCheckError">
                     {{ $t('settings.about.error.checkFailedShort') }}
                   </span>
                   <span v-else-if="!isUpdateAvailable && latestVersion" class="inline-block text-xs ml-2 px-2 py-0.5 rounded-full bg-success text-white">
                     {{ $t('settings.about.latestVersion') }}
                   </span>
                   <a v-else-if="isUpdateAvailable && latestVersion"
                      :href="`https://github.com/Heavrnl/nexus-terminal/releases/tag/${latestVersion}`"
                      target="_blank" rel="noopener noreferrer"
                      class="inline-flex items-center text-xs ml-2 px-2 py-0.5 rounded-full bg-warning text-white hover:bg-warning/80">
                     <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-1 h-3 w-3"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/></svg>
                     {{ $t('settings.about.updateAvailable', { version: latestVersion }) }}
                   </a>
                   <span class="opacity-50">|</span>
                   <a href="https://github.com/Heavrnl/nexus-terminal" target="_blank" rel="noopener noreferrer" class="text-primary hover:underline inline-flex items-center">
                     <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="mr-1" viewBox="0 0 16 16"> <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/> </svg>
                     Heavrnl/nexus-terminal
                   </a>
                   <span class="opacity-50">|</span>
                   <a href="https://ko-fi.com/0heavrnl" target="_blank" rel="noopener noreferrer" title="Support me on Ko-fi" class="text-primary hover:underline inline-flex items-center">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="14" height="14" class="mr-1"> <path d="M20.33 6.08c-.28-.4-.7-.68-1.18-.82-.48-.14-.98-.14-1.47-.02-.48.12-.9.38-1.22.75-.32.37-.5.83-.5 1.32 0 .48.18.93.5 1.3.32.37.75.63 1.22.75.48.12.98.12 1.47 0 .48-.12.9-.38 1.18-.75.28-.37.45-.82.45-1.3 0-.48-.17-.95-.45-1.32zm-2.75 1.5c-.14.17-.33.25-.53.25s-.38-.08-.53-.25c-.14-.17-.22-.38-.22-.6s.08-.43.22-.6c.14-.17.33-.25.53-.25s.38.08.53.25c.14.17.22.38.22.6s-.08.43-.22.6zM18 10H6c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-6c0-1.1-.9-2-2-2zm-6 8c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/> </svg>
                     Ko-fi
                   </a>
                </div>
             </div>
           </div> <!-- End About Section -->
         </div>
 
         <!-- Column 2: Appearance, Workspace, System -->
        <div class="space-y-6"> <!-- Removed col-span -->

          <!-- Workspace Section: Only show if settings data is loaded -->
          <div v-if="settings" class="bg-background border border-border rounded-lg shadow-sm overflow-hidden">
            <h2 class="text-lg font-semibold text-foreground px-6 py-4 border-b border-border bg-header/50">{{ $t('settings.workspace.title') }}</h2>
            <div class="p-6 space-y-6">
              <!-- Popup Editor -->
              <div class="settings-section-content">
                 <h3 class="text-base font-semibold text-foreground mb-3">{{ $t('settings.popupEditor.title') }}</h3>
                 <form @submit.prevent="handleUpdatePopupEditorSetting" class="space-y-4">
                     <div class="flex items-center">
                         <input type="checkbox" id="showPopupEditor" v-model="popupEditorEnabled"
                                class="h-4 w-4 rounded border-border text-primary focus:ring-primary mr-2 cursor-pointer">
                         <label for="showPopupEditor" class="text-sm text-foreground cursor-pointer select-none">{{ $t('settings.popupEditor.enableLabel') }}</label>
                     </div>
                     <div class="flex items-center justify-between">
                        <button type="submit"
                                class="px-4 py-2 bg-button text-button-text rounded-md shadow-sm hover:bg-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition duration-150 ease-in-out text-sm font-medium">
                          {{ $t('settings.popupEditor.saveButton') }}
                        </button>
                        <p v-if="popupEditorMessage" :class="['text-sm', popupEditorSuccess ? 'text-success' : 'text-error']">{{ popupEditorMessage }}</p>
                     </div>
                 </form>
              </div>
              <hr class="border-border/50">
              <!-- Share Tabs -->
              <div class="settings-section-content">
                 <h3 class="text-base font-semibold text-foreground mb-3">{{ $t('settings.shareEditorTabs.title') }}</h3>
                 <form @submit.prevent="handleUpdateShareTabsSetting" class="space-y-4">
                     <div class="flex items-center">
                         <input type="checkbox" id="shareEditorTabs" v-model="shareTabsEnabled"
                                class="h-4 w-4 rounded border-border text-primary focus:ring-primary mr-2 cursor-pointer">
                         <label for="shareEditorTabs" class="text-sm text-foreground cursor-pointer select-none">{{ $t('settings.shareEditorTabs.enableLabel') }}</label>
                     </div>
                     <p class="text-xs text-text-secondary mt-1">{{ $t('settings.shareEditorTabs.description') }}</p>
                     <div class="flex items-center justify-between">
                        <button type="submit"
                                class="px-4 py-2 bg-button text-button-text rounded-md shadow-sm hover:bg-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition duration-150 ease-in-out text-sm font-medium">
                          {{ $t('settings.shareEditorTabs.saveButton') }}
                        </button>
                        <p v-if="shareTabsMessage" :class="['text-sm', shareTabsSuccess ? 'text-success' : 'text-error']">{{ shareTabsMessage }}</p>
                     </div>
                 </form>
              </div>
              <hr class="border-border/50">
              <!-- Auto Copy -->
              <div class="settings-section-content">
                 <h3 class="text-base font-semibold text-foreground mb-3">{{ $t('settings.autoCopyOnSelect.title') }}</h3>
                 <form @submit.prevent="handleUpdateAutoCopySetting" class="space-y-4">
                     <div class="flex items-center">
                         <input type="checkbox" id="autoCopyOnSelect" v-model="autoCopyEnabled"
                                class="h-4 w-4 rounded border-border text-primary focus:ring-primary mr-2 cursor-pointer">
                         <label for="autoCopyOnSelect" class="text-sm text-foreground cursor-pointer select-none">{{ $t('settings.autoCopyOnSelect.enableLabel') }}</label>
                     </div>
                     <div class="flex items-center justify-between">
                        <button type="submit"
                                class="px-4 py-2 bg-button text-button-text rounded-md shadow-sm hover:bg-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition duration-150 ease-in-out text-sm font-medium">
                          {{ $t('settings.autoCopyOnSelect.saveButton') }}
                        </button>
                        <p v-if="autoCopyMessage" :class="['text-sm', autoCopySuccess ? 'text-success' : 'text-error']">{{ autoCopyMessage }}</p>
                     </div>
                 </form>
              </div>
              <hr class="border-border/50">
              <!-- Persistent Sidebar -->
              <div class="settings-section-content">
                 <h3 class="text-base font-semibold text-foreground mb-3">{{ $t('settings.workspace.sidebarPersistentTitle') }}</h3>
                 <form @submit.prevent="handleUpdateWorkspaceSidebarSetting" class="space-y-4">
                     <div class="flex items-center">
                         <input type="checkbox" id="workspaceSidebarPersistent" v-model="workspaceSidebarPersistentEnabled"
                                class="h-4 w-4 rounded border-border text-primary focus:ring-primary mr-2 cursor-pointer">
                         <label for="workspaceSidebarPersistent" class="text-sm text-foreground cursor-pointer select-none">{{ $t('settings.workspace.sidebarPersistentLabel') }}</label>
                     </div>
                     <p class="text-xs text-text-secondary mt-1">{{ $t('settings.workspace.sidebarPersistentDescription') }}</p>
                     <div class="flex items-center justify-between">
                        <button type="submit"
                                class="px-4 py-2 bg-button text-button-text rounded-md shadow-sm hover:bg-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition duration-150 ease-in-out text-sm font-medium">
                          {{ $t('common.save') }}
                        </button>
                        <p v-if="workspaceSidebarPersistentMessage" :class="['text-sm', workspaceSidebarPersistentSuccess ? 'text-success' : 'text-error']">{{ workspaceSidebarPersistentMessage }}</p>
                     </div>
                 </form>
              </div>
              <hr class="border-border/50"> <!-- NEW: Separator -->
              <!-- Command Input Sync Target -->
              <div class="settings-section-content">
                 <h3 class="text-base font-semibold text-foreground mb-3">{{ $t('settings.commandInputSync.title', '命令输入同步') }}</h3>
                 <form @submit.prevent="handleUpdateCommandInputSyncTarget" class="space-y-4">
                   <div>
                     <label for="commandInputSyncTargetSelect" class="block text-sm font-medium text-text-secondary mb-1">{{ $t('settings.commandInputSync.selectLabel', '同步目标') }}</label>
                     <select id="commandInputSyncTargetSelect" v-model="commandInputSyncTargetLocal"
                             class="w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary appearance-none bg-no-repeat bg-right pr-8"
                             style="background-image: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 16 16\'%3e%3cpath fill=\'none\' stroke=\'%236c757d\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-width=\'2\' d=\'M2 5l6 6 6-6\'/%3e%3c/svg%3e'); background-position: right 0.75rem center; background-size: 16px 12px;">
                       <option value="none">{{ $t('settings.commandInputSync.targetNone', '无') }}</option>
                       <option value="quickCommands">{{ $t('settings.commandInputSync.targetQuickCommands', '快捷指令') }}</option>
                       <option value="commandHistory">{{ $t('settings.commandInputSync.targetCommandHistory', '历史命令') }}</option>
                     </select>
                     <p class="text-xs text-text-secondary mt-1">{{ $t('settings.commandInputSync.description', '将命令输入框的内容实时同步到所选面板的搜索框。') }}</p>
                   </div>
                   <div class="flex items-center justify-between">
                      <button type="submit"
                              class="px-4 py-2 bg-button text-button-text rounded-md shadow-sm hover:bg-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition duration-150 ease-in-out text-sm font-medium">
                        {{ $t('common.save') }}
                      </button>
                      <p v-if="commandInputSyncMessage" :class="['text-sm', commandInputSyncSuccess ? 'text-success' : 'text-error']">{{ commandInputSyncMessage }}</p>
                   </div>
                 </form>
              </div>
              <hr class="border-border/50"> <!-- NEW: Separator -->
              <!-- Show Connection Tags -->
              <div class="settings-section-content">
                 <h3 class="text-base font-semibold text-foreground mb-3">{{ $t('settings.workspace.showConnectionTagsTitle', '显示连接标签') }}</h3>
                 <form @submit.prevent="handleUpdateShowConnectionTags" class="space-y-4">
                     <div class="flex items-center">
                         <input type="checkbox" id="showConnectionTags" v-model="showConnectionTagsLocal"
                                class="h-4 w-4 rounded border-border text-primary focus:ring-primary mr-2 cursor-pointer">
                         <label for="showConnectionTags" class="text-sm text-foreground cursor-pointer select-none">{{ $t('settings.workspace.showConnectionTagsLabel', '在连接列表中显示标签') }}</label>
                     </div>
                     <p class="text-xs text-text-secondary mt-1">{{ $t('settings.workspace.showConnectionTagsDescription', '关闭后将隐藏连接列表中的标签，并从搜索中排除标签。') }}</p>
                     <div class="flex items-center justify-between pt-2">
                        <button type="submit"
                                class="px-4 py-2 bg-button text-button-text rounded-md shadow-sm hover:bg-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition duration-150 ease-in-out text-sm font-medium">
                          {{ $t('common.save') }}
                        </button>
                        <p v-if="showConnectionTagsMessage" :class="['text-sm', showConnectionTagsSuccess ? 'text-success' : 'text-error']">{{ showConnectionTagsMessage }}</p>
                     </div>
                 </form>
              </div>
              <hr class="border-border/50"> <!-- NEW: Separator -->
              <!-- Show Quick Command Tags -->
              <div class="settings-section-content">
                 <h3 class="text-base font-semibold text-foreground mb-3">{{ $t('settings.workspace.showQuickCommandTagsTitle', '显示快捷指令标签') }}</h3>
                 <form @submit.prevent="handleUpdateShowQuickCommandTags" class="space-y-4">
                     <div class="flex items-center">
                         <input type="checkbox" id="showQuickCommandTags" v-model="showQuickCommandTagsLocal"
                                class="h-4 w-4 rounded border-border text-primary focus:ring-primary mr-2 cursor-pointer">
                         <label for="showQuickCommandTags" class="text-sm text-foreground cursor-pointer select-none">{{ $t('settings.workspace.showQuickCommandTagsLabel', '在快捷指令列表中显示标签') }}</label>
                     </div>
                     <p class="text-xs text-text-secondary mt-1">{{ $t('settings.workspace.showQuickCommandTagsDescription', '关闭后将隐藏快捷指令列表中的标签，并从搜索中排除标签。') }}</p>
                     <div class="flex items-center justify-between pt-2">
                        <button type="submit"
                                class="px-4 py-2 bg-button text-button-text rounded-md shadow-sm hover:bg-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition duration-150 ease-in-out text-sm font-medium">
                          {{ $t('common.save') }}
                        </button>
                        <p v-if="showQuickCommandTagsMessage" :class="['text-sm', showQuickCommandTagsSuccess ? 'text-success' : 'text-error']">{{ showQuickCommandTagsMessage }}</p>
                     </div>
                 </form>
              </div>
              <hr class="border-border/50"> <!-- NEW: Separator -->
              <!-- Terminal Scrollback Limit -->
              <div class="settings-section-content">
                 <h3 class="text-base font-semibold text-foreground mb-3">{{ t('settings.terminalScrollback.title', '终端回滚行数') }}</h3>
                 <form @submit.prevent="handleUpdateTerminalScrollbackLimit" class="space-y-4">
                   <div>
                     <label for="terminalScrollbackLimitInput" class="block text-sm font-medium text-text-secondary mb-1">{{ t('settings.terminalScrollback.limitLabel', '最大行数') }}</label>
                     <input type="number" id="terminalScrollbackLimitInput" v-model.number="terminalScrollbackLimitLocal" min="0" step="1" placeholder="5000"
                            class="w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                     <small class="block mt-1 text-xs text-text-secondary">{{ t('settings.terminalScrollback.limitHint', '设置终端保留的最大输出行数。0 或留空表示无限制 (使用默认值 5000)。此设置将在下次打开终端时生效。') }}</small>
                   </div>
                   <div class="flex items-center justify-between">
                      <button type="submit"
                              class="px-4 py-2 bg-button text-button-text rounded-md shadow-sm hover:bg-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition duration-150 ease-in-out text-sm font-medium">
                        {{ t('settings.terminalScrollback.saveButton', '保存') }}
                      </button>
                      <p v-if="terminalScrollbackLimitMessage" :class="['text-sm', terminalScrollbackLimitSuccess ? 'text-success' : 'text-error']">{{ terminalScrollbackLimitMessage }}</p>
                   </div>
                 </form>
              </div>
              <hr class="border-border/50"> <!-- NEW: Separator -->
             <!-- File Manager Delete Confirmation -->
             <div class="settings-section-content">
                <h3 class="text-base font-semibold text-foreground mb-3">{{ $t('settings.workspace.fileManagerDeleteConfirmTitle', '文件管理器删除确认') }}</h3>
                <form @submit.prevent="handleUpdateFileManagerDeleteConfirmation" class="space-y-4">
                    <div class="flex items-center">
                        <input type="checkbox" id="fileManagerShowDeleteConfirmation" v-model="fileManagerShowDeleteConfirmationLocal"
                               class="h-4 w-4 rounded border-border text-primary focus:ring-primary mr-2 cursor-pointer">
                        <label for="fileManagerShowDeleteConfirmation" class="text-sm text-foreground cursor-pointer select-none">{{ $t('settings.workspace.fileManagerShowDeleteConfirmationLabel', '删除文件或文件夹时显示确认提示框') }}</label>
                    </div>
                    <div class="flex items-center justify-between pt-2">
                       <button type="submit"
                               class="px-4 py-2 bg-button text-button-text rounded-md shadow-sm hover:bg-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition duration-150 ease-in-out text-sm font-medium">
                         {{ $t('common.save') }}
                       </button>
                       <p v-if="fileManagerShowDeleteConfirmationMessage" :class="['text-sm', fileManagerShowDeleteConfirmationSuccess ? 'text-success' : 'text-error']">{{ fileManagerShowDeleteConfirmationMessage }}</p>
                    </div>
                </form>
             </div>
            </div>
          </div>

          <!-- System Section: Only show if settings data is loaded -->
          <div v-if="settings" class="bg-background border border-border rounded-lg shadow-sm overflow-hidden">
            <h2 class="text-lg font-semibold text-foreground px-6 py-4 border-b border-border bg-header/50">{{ $t('settings.category.system') }}</h2>
            <div class="p-6 space-y-6">
              <!-- Language -->
              <div class="settings-section-content">
                 <h3 class="text-base font-semibold text-foreground mb-3">{{ $t('settings.language.title') }}</h3>
                 <form @submit.prevent="handleUpdateLanguage" class="space-y-4">
                   <div>
                     <label for="languageSelect" class="block text-sm font-medium text-text-secondary mb-1">{{ $t('settings.language.selectLabel') }}</label>
                     <select id="languageSelect" v-model="selectedLanguage"
                             class="w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary appearance-none bg-no-repeat bg-right pr-8"
                             style="background-image: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 16 16\'%3e%3cpath fill=\'none\' stroke=\'%236c757d\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-width=\'2\' d=\'M2 5l6 6 6-6\'/%3e%3c/svg%3e'); background-position: right 0.75rem center; background-size: 16px 12px;">
                       <option v-for="locale in availableLocales" :key="locale" :value="locale">
                         {{ languageNames[locale] || locale }} <!-- Display mapped name or locale code -->
                       </option>
                     </select>
                   </div>
                   <div class="flex items-center justify-between">
                      <button type="submit"
                              class="px-4 py-2 bg-button text-button-text rounded-md shadow-sm hover:bg-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition duration-150 ease-in-out text-sm font-medium">
                        {{ $t('settings.language.saveButton') }}
                      </button>
                      <p v-if="languageMessage" :class="['text-sm', languageSuccess ? 'text-success' : 'text-error']">{{ languageMessage }}</p>
                   </div>
                 </form>
              </div>
              <hr class="border-border/50"> <!-- Separator -->
              <!-- Timezone Setting -->
              <div class="settings-section-content">
                 <h3 class="text-base font-semibold text-foreground mb-3">{{ $t('settings.timezone.title') }}</h3>
                 <form @submit.prevent="handleUpdateTimezone" class="space-y-4">
                   <div>
                     <label for="timezoneSelect" class="block text-sm font-medium text-text-secondary mb-1">{{ $t('settings.timezone.selectLabel') }}</label>
                     <select id="timezoneSelect" v-model="selectedTimezone"
                             class="w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary appearance-none bg-no-repeat bg-right pr-8"
                             style="background-image: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 16 16\'%3e%3cpath fill=\'none\' stroke=\'%236c757d\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-width=\'2\' d=\'M2 5l6 6 6-6\'/%3e%3c/svg%3e'); background-position: right 0.75rem center; background-size: 16px 12px;">
                       <option v-for="tz in commonTimezones" :key="tz" :value="tz">
                         {{ tz }}
                       </option>
                     </select>
                      <small class="block mt-1 text-xs text-text-secondary">{{ $t('settings.timezone.description') }}</small>
                   </div>
                   <div class="flex items-center justify-between">
                      <button type="submit"
                              class="px-4 py-2 bg-button text-button-text rounded-md shadow-sm hover:bg-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition duration-150 ease-in-out text-sm font-medium">
                        {{ $t('common.save') }}
                      </button>
                      <p v-if="timezoneMessage" :class="['text-sm', timezoneSuccess ? 'text-success' : 'text-error']">{{ timezoneMessage }}</p>
                   </div>
                 </form>
              </div>
              <hr class="border-border/50"> <!-- Separator -->
              <!-- Status Monitor -->
              <div class="settings-section-content">
                 <h3 class="text-base font-semibold text-foreground mb-3">{{ t('settings.statusMonitor.title') }}</h3>
                 <form @submit.prevent="handleUpdateStatusMonitorInterval" class="space-y-4">
                   <div>
                     <label for="statusMonitorInterval" class="block text-sm font-medium text-text-secondary mb-1">{{ t('settings.statusMonitor.refreshIntervalLabel') }}</label>
                     <input type="number" id="statusMonitorInterval" v-model.number="statusMonitorIntervalLocal" min="1" step="1" required
                            class="w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                     <small class="block mt-1 text-xs text-text-secondary">{{ t('settings.statusMonitor.refreshIntervalHint') }}</small>
                   </div>
                   <div class="flex items-center justify-between">
                      <button type="submit"
                              class="px-4 py-2 bg-button text-button-text rounded-md shadow-sm hover:bg-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition duration-150 ease-in-out text-sm font-medium">
                        {{ t('settings.statusMonitor.saveButton') }}
                      </button>
                      <p v-if="statusMonitorMessage" :class="['text-sm', statusMonitorSuccess ? 'text-success' : 'text-error']">{{ statusMonitorMessage }}</p>
                   </div>
                 </form>
              </div>
              <hr class="border-border/50"> <!-- Separator -->
              <!-- Docker -->
              <div class="settings-section-content">
                 <h3 class="text-base font-semibold text-foreground mb-3">{{ t('settings.docker.title') }}</h3>
                 <form @submit.prevent="handleUpdateDockerSettings" class="space-y-4">
                   <div>
                     <label for="dockerInterval" class="block text-sm font-medium text-text-secondary mb-1">{{ t('settings.docker.refreshIntervalLabel') }}</label>
                     <input type="number" id="dockerInterval" v-model.number="dockerInterval" min="1" step="1" required
                            class="w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                      <small class="block mt-1 text-xs text-text-secondary">{{ t('settings.docker.refreshIntervalHint') }}</small>
                   </div>
                   <div class="flex items-center">
                     <input type="checkbox" id="dockerExpandDefault" v-model="dockerExpandDefault"
                            class="h-4 w-4 rounded border-border text-primary focus:ring-primary mr-2 cursor-pointer">
                     <label for="dockerExpandDefault" class="text-sm text-foreground cursor-pointer select-none">{{ t('settings.docker.defaultExpandLabel') }}</label>
                   </div>
                   <div class="flex items-center justify-between">
                      <button type="submit"
                              class="px-4 py-2 bg-button text-button-text rounded-md shadow-sm hover:bg-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition duration-150 ease-in-out text-sm font-medium">
                        {{ t('settings.docker.saveButton') }}
                      </button>
                      <p v-if="dockerSettingsMessage" :class="['text-sm', dockerSettingsSuccess ? 'text-success' : 'text-error']">{{ dockerSettingsMessage }}</p>
                   </div>
                 </form>
              </div>
            </div>
          </div>
<!-- Appearance Section: Only show if settings data is loaded -->
          <div v-if="settings" class="bg-background border border-border rounded-lg shadow-sm overflow-hidden">
            <h2 class="text-lg font-semibold text-foreground px-6 py-4 border-b border-border bg-header/50">{{ $t('settings.category.appearance') }}</h2>
            <div class="p-6 space-y-6">
              <!-- Style Customizer -->
              <div class="settings-section-content">
                 <h3 class="text-base font-semibold text-foreground mb-3">{{ $t('settings.appearance.title') }}</h3>
                 <p class="text-sm text-text-secondary mb-4">{{ $t('settings.appearance.description') }}</p>
                 <button @click="openStyleCustomizer"
                         class="px-4 py-2 bg-button text-button-text rounded-md shadow-sm hover:bg-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary disabled:opacity-50 disabled:cursor-not-allowed transition duration-150 ease-in-out text-sm font-medium">
                   {{ t('settings.appearance.customizeButton') }}
                 </button>
              </div>
            </div>
          </div> <!-- End Appearance Section -->

        </div>
      </div> <!-- End Settings Sections Grid -->
    </div> <!-- End Inner container -->
  </div> <!-- End Outer container -->
</template>

<script setup lang="ts">
// Define necessary types locally if not shared
type CaptchaProvider = 'hcaptcha' | 'recaptcha' | 'none';
interface UpdateCaptchaSettingsDto {
    enabled?: boolean;
    provider?: CaptchaProvider;
    hcaptchaSiteKey?: string;
    hcaptchaSecretKey?: string;
    recaptchaSiteKey?: string;
    recaptchaSecretKey?: string;
}
import { ref, onMounted, computed, reactive, watch } from 'vue';
import axios from 'axios'; // 导入 axios 用于 API 请求
import pkg from '../../package.json'; // 导入 package.json
import { useAuthStore } from '../stores/auth.store';
import { useSettingsStore } from '../stores/settings.store';
import { useAppearanceStore } from '../stores/appearance.store'; // 导入外观 store
import { useI18n } from 'vue-i18n';
import { storeToRefs } from 'pinia';
// setLocale is handled by the store now
import { availableLocales } from '../i18n'; // 导入可用语言列表
import apiClient from '../utils/apiClient'; // 使用统一的 apiClient
import { isAxiosError } from 'axios'; // 单独导入 isAxiosError
import { startRegistration } from '@simplewebauthn/browser';

const authStore = useAuthStore();
const settingsStore = useSettingsStore();
const appearanceStore = useAppearanceStore(); // 实例化外观 store
const { t } = useI18n();
const appVersion = ref(pkg.version); // 获取版本号

// --- Version Check State ---
const latestVersion = ref<string | null>(null);
const isCheckingVersion = ref(false);
const versionCheckError = ref<string | null>(null);
const isUpdateAvailable = computed(() => {
  // 简单的字符串比较，假设 tag 格式为 vX.Y.Z
  return latestVersion.value && latestVersion.value !== `v${appVersion.value}`;
});

// --- Reactive state from store ---
// 使用 storeToRefs 获取响应式 getter，包括 language
const {
    settings,
    isLoading: settingsLoading,
    error: settingsError,
    showPopupFileEditorBoolean,
    shareFileEditorTabsBoolean,
    autoCopyOnSelectBoolean,
    dockerDefaultExpandBoolean,
    statusMonitorIntervalSecondsNumber,
    language: storeLanguage,
    workspaceSidebarPersistentBoolean,
    captchaSettings, // <-- Import CAPTCHA settings state
    commandInputSyncTarget, // NEW: Import command input sync target getter
    ipBlacklistEnabledBoolean, // <-- Import IP Blacklist enabled getter
    showConnectionTagsBoolean, // NEW: Import connection tag visibility getter
    showQuickCommandTagsBoolean, // NEW: Import quick command tag visibility getter
    terminalScrollbackLimitNumber, // NEW: Import terminal scrollback limit getter
    fileManagerShowDeleteConfirmationBoolean, // NEW: Import file manager delete confirmation getter
} = storeToRefs(settingsStore);

const { passkeys, passkeysLoading } = storeToRefs(authStore); // Import passkey state


// --- Local state for forms ---
const ipWhitelistInput = ref('');
// 使用 store 的 language getter 初始化 selectedLanguage
const selectedLanguage = ref<string>(storeLanguage.value); // 改为 string 类型以支持动态语言
// 可选：创建一个语言名称映射
const languageNames: Record<string, string> = {
  'en-US': 'English', // 更新为 en-US
  'zh-CN': '中文',
  'ja-JP': '日本語', // 更新为 ja-JP (如果您的文件名是 ja-JP.json)
  // Add more languages here as needed
};
const blacklistSettingsForm = reactive({ // Renamed to avoid conflict with store state name
    maxLoginAttempts: '5', // 初始值将在 watcher 中被 store 值覆盖
    loginBanDuration: '300', // 初始值将在 watcher 中被 store 值覆盖
});
const popupEditorEnabled = ref(true); // 本地状态，用于 v-model
const workspaceSidebarPersistentEnabled = ref(false); // 新增：侧边栏固定设置的本地状态
const commandInputSyncTargetLocal = ref<'none' | 'quickCommands' | 'commandHistory'>('none'); // NEW: Local state for command input sync target
const ipBlacklistEnabled = ref(true); // <-- Local state for IP Blacklist switch
const showConnectionTagsLocal = ref(true); // NEW: Local state for connection tags switch
const showQuickCommandTagsLocal = ref(true); // NEW: Local state for quick command tags switch
const terminalScrollbackLimitLocal = ref<number | null>(null); // NEW: Local state for terminal scrollback limit input (allow null for empty input)
const fileManagerShowDeleteConfirmationLocal = ref(true); // NEW: Local state for file manager delete confirmation
 
 // --- Local UI feedback state ---
const ipWhitelistLoading = ref(false);
const ipWhitelistMessage = ref('');
const ipWhitelistSuccess = ref(false);
const languageLoading = ref(false);
const languageMessage = ref('');
const languageSuccess = ref(false);
const blacklistSettingsLoading = ref(false);
const blacklistSettingsMessage = ref('');
const blacklistSettingsSuccess = ref(false);
// Removed ipBlacklistEnabledLoading, ipBlacklistEnabledMessage, ipBlacklistEnabledSuccess refs


const popupEditorLoading = ref(false);
const popupEditorMessage = ref('');
const popupEditorSuccess = ref(false);
const shareTabsEnabled = ref(true); // 本地状态，用于共享标签页 v-model
const shareTabsLoading = ref(false);
const shareTabsMessage = ref('');
const shareTabsSuccess = ref(false);
const autoCopyEnabled = ref(false); // 本地状态，用于选中即复制 v-model
const autoCopyLoading = ref(false);
const autoCopyMessage = ref('');
const autoCopySuccess = ref(false);
const dockerInterval = ref(2); // 本地状态，用于 Docker 刷新间隔 v-model
const dockerExpandDefault = ref(false); // 本地状态，用于 Docker 默认展开 v-model
const dockerSettingsLoading = ref(false);
const dockerSettingsMessage = ref('');
const dockerSettingsSuccess = ref(false);
const statusMonitorIntervalLocal = ref(3); // 本地状态，用于状态监控间隔 v-model
const statusMonitorLoading = ref(false);
const statusMonitorMessage = ref('');
const statusMonitorSuccess = ref(false);
const workspaceSidebarPersistentLoading = ref(false); // 新增
const workspaceSidebarPersistentMessage = ref(''); // 新增
const workspaceSidebarPersistentSuccess = ref(false); // 新增
const commandInputSyncLoading = ref(false); // NEW
const commandInputSyncMessage = ref(''); // NEW
const commandInputSyncSuccess = ref(false); // NEW
const selectedTimezone = ref('UTC'); // 本地状态，用于时区 v-model
const timezoneLoading = ref(false);
const timezoneMessage = ref('');
const timezoneSuccess = ref(false);
const showConnectionTagsLoading = ref(false); // NEW
const showConnectionTagsMessage = ref(''); // NEW
const showConnectionTagsSuccess = ref(false); // NEW
const showQuickCommandTagsLoading = ref(false); // NEW
const showQuickCommandTagsMessage = ref(''); // NEW
const showQuickCommandTagsSuccess = ref(false); // NEW
const terminalScrollbackLimitLoading = ref(false); // NEW
const terminalScrollbackLimitMessage = ref(''); // NEW
const terminalScrollbackLimitSuccess = ref(false); // NEW
const fileManagerShowDeleteConfirmationLoading = ref(false); // NEW
const fileManagerShowDeleteConfirmationMessage = ref(''); // NEW
const fileManagerShowDeleteConfirmationSuccess = ref(false); // NEW
// CAPTCHA Form State
const captchaForm = reactive<UpdateCaptchaSettingsDto>({ // Use reactive for the form object
    enabled: false,
    provider: 'none',
    hcaptchaSiteKey: '',
    hcaptchaSecretKey: '',
    recaptchaSiteKey: '',
    recaptchaSecretKey: '',
});
const captchaLoading = ref(false);
const captchaMessage = ref('');
const captchaSuccess = ref(false);

// --- Passkey State ---
const passkeyLoading = ref(false); // For registering new passkey
const passkeyMessage = ref(''); // General messages for passkey operations (register, delete, edit name)
const passkeySuccess = ref(false); // Success status for general passkey operations
const passkeyDeleteLoadingStates = reactive<Record<string, boolean>>({});
const passkeyDeleteError = ref<string | null>(null); // Specific error for delete operation

// State for editing passkey name
const editingPasskeyId = ref<string | null>(null);
const editingPasskeyName = ref('');
const passkeyEditLoadingStates = reactive<Record<string, boolean>>({});
// passkeyMessage and passkeySuccess can be reused for edit name feedback.
// const passkeyEditError = ref<string | null>(null); // Or use a specific error ref if needed

// 提供一些常用的时区供选择
const commonTimezones = ref([
  'UTC',
  'Etc/GMT+12', 'Pacific/Midway', 'Pacific/Honolulu', 'America/Anchorage',
  'America/Los_Angeles', 'America/Denver', 'America/Chicago', 'America/New_York',
  'America/Caracas', 'America/Halifax', 'America/Sao_Paulo', 'Atlantic/Azores',
  'Europe/London', 'Europe/Paris', 'Europe/Berlin', 'Europe/Moscow',
  'Asia/Dubai', 'Asia/Karachi', 'Asia/Dhaka', 'Asia/Bangkok',
  'Asia/Shanghai', 'Asia/Tokyo', 'Australia/Sydney', 'Pacific/Auckland',
  'Etc/GMT-14'
]);

// --- Watcher to sync local form state with store state ---
watch(settings, (newSettings, oldSettings) => {
  // Initialize only if settings were previously null or undefined
  const isInitialLoad = !oldSettings;

  ipWhitelistInput.value = newSettings.ipWhitelist || '';
  // selectedLanguage.value = newSettings.language || 'en'; // <-- 移除这一行，selectedLanguage 现在由 v-model 更新
  blacklistSettingsForm.maxLoginAttempts = newSettings.maxLoginAttempts || '5';
  blacklistSettingsForm.loginBanDuration = newSettings.loginBanDuration || '300';

  // 始终将本地布尔状态与 store 的布尔 getter 同步 (除了 language)
  popupEditorEnabled.value = showPopupFileEditorBoolean.value;
  shareTabsEnabled.value = shareFileEditorTabsBoolean.value;
  autoCopyEnabled.value = autoCopyOnSelectBoolean.value; // 同步选中即复制状态
  dockerInterval.value = parseInt(newSettings.dockerStatusIntervalSeconds || '2', 10); // 同步 Docker 间隔
  dockerExpandDefault.value = dockerDefaultExpandBoolean.value; // 同步 Docker 默认展开状态
  statusMonitorIntervalLocal.value = statusMonitorIntervalSecondsNumber.value; // 同步状态监控间隔
  workspaceSidebarPersistentEnabled.value = workspaceSidebarPersistentBoolean.value; // 新增：同步侧边栏固定设置
  commandInputSyncTargetLocal.value = commandInputSyncTarget.value; // NEW: Sync command input sync target
  selectedTimezone.value = newSettings.timezone || 'UTC'; // 同步时区设置
  ipBlacklistEnabled.value = ipBlacklistEnabledBoolean.value; // <-- Sync IP Blacklist enabled state
  showConnectionTagsLocal.value = showConnectionTagsBoolean.value; // NEW: Sync connection tags state
  showQuickCommandTagsLocal.value = showQuickCommandTagsBoolean.value; // NEW: Sync quick command tags state
  // NEW: Directly sync terminal scrollback limit from store getter to local state
  terminalScrollbackLimitLocal.value = terminalScrollbackLimitNumber.value;
  // NEW: Sync file manager delete confirmation
  fileManagerShowDeleteConfirmationLocal.value = fileManagerShowDeleteConfirmationBoolean.value;
 
}, { deep: true, immediate: true }); // immediate: true to run on initial load

// Watcher for CAPTCHA settings
watch(captchaSettings, (newCaptchaSettings) => {
    if (newCaptchaSettings) {
        captchaForm.enabled = newCaptchaSettings.enabled;
        captchaForm.provider = newCaptchaSettings.provider;
        captchaForm.hcaptchaSiteKey = newCaptchaSettings.hcaptchaSiteKey || '';
        captchaForm.hcaptchaSecretKey = newCaptchaSettings.hcaptchaSecretKey || ''; // Keep secret keys local
        captchaForm.recaptchaSiteKey = newCaptchaSettings.recaptchaSiteKey || '';
        captchaForm.recaptchaSecretKey = newCaptchaSettings.recaptchaSecretKey || ''; // Keep secret keys local
    } else {
        // Reset form if settings are null (e.g., on error)
        captchaForm.enabled = false;
        captchaForm.provider = 'none';
        captchaForm.hcaptchaSiteKey = '';
        captchaForm.hcaptchaSecretKey = '';
        captchaForm.recaptchaSiteKey = '';
        captchaForm.recaptchaSecretKey = '';
    }
}, { immediate: true }); // immediate: true to run on initial load


// Watcher specifically for terminalScrollbackLimitNumber is redundant if the main settings watcher handles it.
// Let's remove the specific watcher for simplicity, the main one should suffice.

// --- Popup Editor setting method ---
const handleUpdatePopupEditorSetting = async () => {
    popupEditorLoading.value = true;
    popupEditorMessage.value = '';
    popupEditorSuccess.value = false;
    try {
        // 将布尔值转换为字符串 'true' 或 'false' 来存储
        const valueToSave = popupEditorEnabled.value ? 'true' : 'false';
        await settingsStore.updateSetting('showPopupFileEditor', valueToSave);
        popupEditorMessage.value = t('settings.popupEditor.success.saved'); // 需要添加翻译
        popupEditorSuccess.value = true;
    } catch (error: any) {
        console.error('更新弹窗编辑器设置失败:', error);
        popupEditorMessage.value = error.message || t('settings.popupEditor.error.saveFailed'); // 需要添加翻译
        popupEditorSuccess.value = false;
        // 保存失败时，不需要手动恢复，v-model 应该保持用户最后的操作状态
        // popupEditorEnabled.value = showPopupFileEditorBoolean.value; // <-- 移除恢复逻辑
    } finally {
        popupEditorLoading.value = false;
    }
};

// --- Share Editor Tabs setting method ---
const handleUpdateShareTabsSetting = async () => {
    shareTabsLoading.value = true;
    shareTabsMessage.value = '';
    shareTabsSuccess.value = false;
    try {
        const valueToSave = shareTabsEnabled.value ? 'true' : 'false';
        await settingsStore.updateSetting('shareFileEditorTabs', valueToSave);
        shareTabsMessage.value = t('settings.shareEditorTabs.success.saved'); // 需要添加翻译
        shareTabsSuccess.value = true;
    } catch (error: any) {
        console.error('更新共享编辑器标签页设置失败:', error);
        shareTabsMessage.value = error.message || t('settings.shareEditorTabs.error.saveFailed'); // 需要添加翻译
        shareTabsSuccess.value = false;
        // 保存失败时，不需要手动恢复
        // shareTabsEnabled.value = shareFileEditorTabsBoolean.value; // <-- 移除恢复逻辑
    } finally {
        shareTabsLoading.value = false;
    }
};

// --- Auto Copy on Select setting method ---
const handleUpdateAutoCopySetting = async () => {
    autoCopyLoading.value = true;
    autoCopyMessage.value = '';
    autoCopySuccess.value = false;
    try {
        const valueToSave = autoCopyEnabled.value ? 'true' : 'false';
        await settingsStore.updateSetting('autoCopyOnSelect', valueToSave);
        autoCopyMessage.value = t('settings.autoCopyOnSelect.success.saved'); // 需要添加翻译
        autoCopySuccess.value = true;
    } catch (error: any) {
        console.error('更新自动复制设置失败:', error);
        autoCopyMessage.value = error.message || t('settings.autoCopyOnSelect.error.saveFailed'); // 需要添加翻译
        autoCopySuccess.value = false;
    } finally {
        autoCopyLoading.value = false;
    }
};

// --- Docker settings method ---
const handleUpdateDockerSettings = async () => {
    dockerSettingsLoading.value = true;
    dockerSettingsMessage.value = '';
    dockerSettingsSuccess.value = false;
    try {
        const intervalValue = dockerInterval.value;
        if (isNaN(intervalValue) || intervalValue < 1) {
            throw new Error(t('settings.docker.error.invalidInterval')); // 需要添加翻译
        }
        await settingsStore.updateMultipleSettings({
            dockerStatusIntervalSeconds: String(intervalValue), // 保存为字符串
            dockerDefaultExpand: dockerExpandDefault.value ? 'true' : 'false' // 保存为字符串 'true'/'false'
        });
        dockerSettingsMessage.value = t('settings.docker.success.saved'); // 需要添加翻译
        dockerSettingsSuccess.value = true;
    } catch (error: any) {
        console.error('更新 Docker 设置失败:', error);
        dockerSettingsMessage.value = error.message || t('settings.docker.error.saveFailed'); // 需要添加翻译
        dockerSettingsSuccess.value = false;
    } finally {
        dockerSettingsLoading.value = false;
    }
};

// --- Status Monitor interval setting method ---
const handleUpdateStatusMonitorInterval = async () => {
    statusMonitorLoading.value = true;
    statusMonitorMessage.value = '';
    statusMonitorSuccess.value = false;
    try {
        const intervalValue = statusMonitorIntervalLocal.value;
        if (isNaN(intervalValue) || intervalValue < 1 || !Number.isInteger(intervalValue)) {
            throw new Error(t('settings.statusMonitor.error.invalidInterval')); // 需要添加翻译
        }
        await settingsStore.updateSetting('statusMonitorIntervalSeconds', String(intervalValue)); // 保存为字符串
        statusMonitorMessage.value = t('settings.statusMonitor.success.saved'); // 需要添加翻译
        statusMonitorSuccess.value = true;
    } catch (error: any) {
        console.error('更新状态监控间隔失败:', error);
        statusMonitorMessage.value = error.message || t('settings.statusMonitor.error.saveFailed'); // 需要添加翻译
        statusMonitorSuccess.value = false;
    } finally {
        statusMonitorLoading.value = false;
    }
};

// --- Workspace Sidebar Persistent setting method ---
const handleUpdateWorkspaceSidebarSetting = async () => {
    workspaceSidebarPersistentLoading.value = true;
    workspaceSidebarPersistentMessage.value = '';
    workspaceSidebarPersistentSuccess.value = false;
    try {
        const valueToSave = workspaceSidebarPersistentEnabled.value ? 'true' : 'false';
        await settingsStore.updateSetting('workspaceSidebarPersistent', valueToSave);
        workspaceSidebarPersistentMessage.value = t('settings.workspace.success.sidebarPersistentSaved'); // 需要添加翻译
        workspaceSidebarPersistentSuccess.value = true;
    } catch (error: any) {
        console.error('更新侧边栏固定设置失败:', error);
        workspaceSidebarPersistentMessage.value = error.message || t('settings.workspace.error.sidebarPersistentSaveFailed'); // 需要添加翻译
        workspaceSidebarPersistentSuccess.value = false;
    } finally {
        workspaceSidebarPersistentLoading.value = false;
    }
};

// --- Command Input Sync Target setting method ---
const handleUpdateCommandInputSyncTarget = async () => {
    commandInputSyncLoading.value = true;
    commandInputSyncMessage.value = '';
    commandInputSyncSuccess.value = false;
    try {
        await settingsStore.updateSetting('commandInputSyncTarget', commandInputSyncTargetLocal.value);
        commandInputSyncMessage.value = t('settings.commandInputSync.success.saved', '同步目标已保存'); // 需要添加翻译
        commandInputSyncSuccess.value = true;
    } catch (error: any) {
        console.error('更新命令输入同步目标失败:', error);
        commandInputSyncMessage.value = error.message || t('settings.commandInputSync.error.saveFailed', '保存同步目标失败'); // 需要添加翻译
        commandInputSyncSuccess.value = false;
    } finally {
        commandInputSyncLoading.value = false;
    }
};

// --- Timezone setting method ---
const handleUpdateTimezone = async () => {
    timezoneLoading.value = true;
    timezoneMessage.value = '';
    timezoneSuccess.value = false;
    try {
        await settingsStore.updateSetting('timezone', selectedTimezone.value);
        timezoneMessage.value = t('settings.timezone.success.saved');
        timezoneSuccess.value = true;
    } catch (error: any) {
        console.error('更新时区设置失败:', error);
        timezoneMessage.value = error.message || t('settings.timezone.error.saveFailed');
        timezoneSuccess.value = false;
    } finally {
        timezoneLoading.value = false;
    }
};

// --- Show Connection Tags setting method ---
const handleUpdateShowConnectionTags = async () => {
    showConnectionTagsLoading.value = true;
    showConnectionTagsMessage.value = '';
    showConnectionTagsSuccess.value = false;
    try {
        await settingsStore.updateSetting('showConnectionTags', showConnectionTagsLocal.value);
        showConnectionTagsMessage.value = t('settings.workspace.success.showConnectionTagsSaved', '连接标签显示设置已保存'); // 需要添加翻译
        showConnectionTagsSuccess.value = true;
    } catch (error: any) {
        console.error('更新显示连接标签设置失败:', error);
        showConnectionTagsMessage.value = error.message || t('settings.workspace.error.showConnectionTagsSaveFailed', '保存连接标签显示设置失败'); // 需要添加翻译
        showConnectionTagsSuccess.value = false;
        // No need to revert local state on failure with explicit save button
    } finally {
        showConnectionTagsLoading.value = false;
        // Keep message visible until next save attempt
    }
};

// --- Show Quick Command Tags setting method ---
const handleUpdateShowQuickCommandTags = async () => {
    showQuickCommandTagsLoading.value = true;
    showQuickCommandTagsMessage.value = '';
    showQuickCommandTagsSuccess.value = false;
    try {
        await settingsStore.updateSetting('showQuickCommandTags', showQuickCommandTagsLocal.value);
        showQuickCommandTagsMessage.value = t('settings.workspace.success.showQuickCommandTagsSaved', '快捷指令标签显示设置已保存'); // 需要添加翻译
        showQuickCommandTagsSuccess.value = true;
    } catch (error: any) {
        console.error('更新显示快捷指令标签设置失败:', error);
        showQuickCommandTagsMessage.value = error.message || t('settings.workspace.error.showQuickCommandTagsSaveFailed', '保存快捷指令标签显示设置失败'); // 需要添加翻译
        showQuickCommandTagsSuccess.value = false;
        // No need to revert local state on failure with explicit save button
    } finally {
        showQuickCommandTagsLoading.value = false;
        // Keep message visible until next save attempt
    }
};

// --- Terminal Scrollback Limit setting method ---
const handleUpdateTerminalScrollbackLimit = async () => {
    terminalScrollbackLimitLoading.value = true;
    terminalScrollbackLimitMessage.value = '';
    terminalScrollbackLimitSuccess.value = false;
    try {
        const limitValue = terminalScrollbackLimitLocal.value;

        // Validate: must be a non-negative integer or null/undefined (treat null/undefined as default 5000)
        if (limitValue !== null && limitValue !== undefined && (isNaN(limitValue) || !Number.isInteger(limitValue) || limitValue < 0)) {
            throw new Error(t('settings.terminalScrollback.error.invalidInput', '请输入一个有效的非负整数。'));
        }

        // If input is empty (null/undefined), save the default value '5000'. Otherwise, save the entered number as string.
        const valueToSave = (limitValue === null || limitValue === undefined) ? '5000' : String(limitValue);

        await settingsStore.updateSetting('terminalScrollbackLimit', valueToSave);
        terminalScrollbackLimitMessage.value = t('settings.terminalScrollback.success.saved', '终端回滚行数设置已保存。');
        terminalScrollbackLimitSuccess.value = true;
    } catch (error: any) {
        console.error('更新终端回滚行数设置失败:', error);
        terminalScrollbackLimitMessage.value = error.message || t('settings.terminalScrollback.error.saveFailed', '保存终端回滚行数设置失败。');
        terminalScrollbackLimitSuccess.value = false;
    } finally {
        terminalScrollbackLimitLoading.value = false;
    }
  };
   
  // --- File Manager Delete Confirmation setting method ---
  const handleUpdateFileManagerDeleteConfirmation = async () => {
      fileManagerShowDeleteConfirmationLoading.value = true;
      fileManagerShowDeleteConfirmationMessage.value = '';
      fileManagerShowDeleteConfirmationSuccess.value = false;
      try {
          const valueToSave = fileManagerShowDeleteConfirmationLocal.value ? 'true' : 'false';
          await settingsStore.updateSetting('fileManagerShowDeleteConfirmation', valueToSave);
          fileManagerShowDeleteConfirmationMessage.value = t('settings.workspace.fileManagerDeleteConfirmSuccess', '文件管理器删除确认设置已保存。'); // 需要添加翻译
          fileManagerShowDeleteConfirmationSuccess.value = true;
      } catch (error: any) {
          console.error('更新文件管理器删除确认设置失败:', error);
          fileManagerShowDeleteConfirmationMessage.value = error.message || t('settings.workspace.fileManagerDeleteConfirmError', '保存文件管理器删除确认设置失败。'); // 需要添加翻译
          fileManagerShowDeleteConfirmationSuccess.value = false;
      } finally {
          fileManagerShowDeleteConfirmationLoading.value = false;
      }
  };
   
   // --- 外观设置 ---
const openStyleCustomizer = () => {
    appearanceStore.toggleStyleCustomizer(true);
};

// --- Passkey Methods ---
const handleRegisterNewPasskey = async () => {
  passkeyLoading.value = true;
  passkeyMessage.value = '';
  passkeySuccess.value = false;

  const username = authStore.user?.username;
  if (!username) {
    passkeyMessage.value = t('settings.passkey.error.userNotLoggedIn');
    passkeyLoading.value = false;
    return;
  }

  try {
    // 1. Get registration options from the server
    const registrationOptions = await authStore.getPasskeyRegistrationOptions(username);

    // 2. Start WebAuthn registration ceremony
    const registrationResult = await startRegistration(registrationOptions);

    // 3. Send registration result to the server
    await authStore.registerPasskey(username, registrationResult);

    passkeyMessage.value = t('settings.passkey.success.registered');
    passkeySuccess.value = true;
    await authStore.fetchPasskeys(); // Refresh passkey list
  } catch (error: any) {
    console.error('Passkey 注册失败:', error);
    // Check if the error is from startRegistration (e.g., user cancellation)
    if (error.name === 'InvalidStateError' || error.message.includes('cancelled')) {
        passkeyMessage.value = t('settings.passkey.error.registrationCancelled');
    } else {
        passkeyMessage.value = error.response?.data?.message || error.message || t('settings.passkey.error.registrationFailed');
    }
    passkeySuccess.value = false;
  } finally {
    passkeyLoading.value = false;
  }
};

const startEditPasskeyName = (credentialID: string, currentName: string) => {
  editingPasskeyId.value = credentialID;
  editingPasskeyName.value = currentName;
  passkeyMessage.value = ''; // Clear previous messages
  passkeySuccess.value = false;
};

const cancelEditPasskeyName = () => {
  editingPasskeyId.value = null;
  editingPasskeyName.value = '';
};

const savePasskeyName = async (credentialID: string) => {
  if (!editingPasskeyName.value.trim()) {
    passkeyMessage.value = t('settings.passkey.error.nameRequired', 'Passkey 名称不能为空。');
    passkeySuccess.value = false;
    return;
  }
  passkeyEditLoadingStates[credentialID] = true;
  passkeyMessage.value = '';
  passkeySuccess.value = false;
  try {
    // Предполагается, что в authStore есть метод updatePasskeyName
    await authStore.updatePasskeyName(credentialID, editingPasskeyName.value.trim());
    passkeyMessage.value = t('settings.passkey.success.nameUpdated');
    passkeySuccess.value = true;
    await authStore.fetchPasskeys(); // Обновить список для отображения нового имени
    cancelEditPasskeyName(); // Сбросить состояние редактирования
  } catch (error: any) {
    console.error(`更新 Passkey ${credentialID} 名称失败:`, error);
    passkeyMessage.value = error.message || t('settings.passkey.error.nameUpdateFailed', '更新 Passkey 名称失败。');
    passkeySuccess.value = false;
  } finally {
    passkeyEditLoadingStates[credentialID] = false;
  }
};
 
const handleDeletePasskey = async (credentialID: string) => {
  if (editingPasskeyId.value === credentialID) {
    cancelEditPasskeyName(); // Cancel editing if the key being edited is deleted
  }
  if (!credentialID || typeof credentialID !== 'string') {
    console.error('Attempted to delete a passkey with an invalid or undefined credentialID:', credentialID);
    passkeyDeleteError.value = t('settings.passkey.error.deleteFailedInvalidId', '删除失败：无效的凭证 ID。'); // Add translation
    return;
  }
  if (!confirm(t('settings.passkey.confirmDelete'))) return;
 
  passkeyDeleteLoadingStates[credentialID] = true;
  passkeyDeleteError.value = null;
  passkeyMessage.value = ''; // Clear previous general passkey messages
  try {
    await authStore.deletePasskey(credentialID);
    passkeyMessage.value = t('settings.passkey.success.deleted');
    passkeySuccess.value = true; // Use general success for feedback
    // authStore.fetchPasskeys() will be called by deletePasskey if successful
  } catch (error: any) {
    console.error(`删除 Passkey ${credentialID} 失败:`, error);
    passkeyDeleteError.value = error.message || t('settings.passkey.error.deleteFailedGeneral');
    passkeySuccess.value = false;
  } finally {
    passkeyDeleteLoadingStates[credentialID] = false;
  }
};

// --- Formatting function (kept in case other parts need it, can be removed if unused) ---
const formatDate = (dateInput: string | number | Date | undefined): string => {
    if (!dateInput) return t('statusMonitor.notAvailable');
    try {
        // If dateInput is a number, assume it's a Unix timestamp in seconds
        if (typeof dateInput === 'number') {
            const dateFromSeconds = new Date(dateInput * 1000);
            if (!isNaN(dateFromSeconds.getTime())) {
                return dateFromSeconds.toLocaleString();
            }
            // If conversion from seconds still results in an invalid date, return N/A
            return t('statusMonitor.notAvailable');
        }

        // If dateInput is a string or Date object, try to parse it directly
        const date = new Date(dateInput);
        if (!isNaN(date.getTime())) {
            return date.toLocaleString();
        }

        // If all parsing fails
        return t('statusMonitor.notAvailable');
    } catch (e) {
        console.error("Error formatting date:", e);
        return t('statusMonitor.notAvailable');
    }
};


// --- Change Password state & methods --- (Keep as is)
const currentPassword = ref('');
const newPassword = ref('');
const confirmPassword = ref('');
const changePasswordLoading = ref(false);
const changePasswordMessage = ref('');
const changePasswordSuccess = ref(false);
const handleChangePassword = async () => {
  changePasswordMessage.value = '';
  changePasswordSuccess.value = false;
  if (newPassword.value !== confirmPassword.value) {
    changePasswordMessage.value = t('settings.changePassword.error.passwordsDoNotMatch');
    return;
  }
  changePasswordLoading.value = true;
  try {
    await authStore.changePassword(currentPassword.value, newPassword.value);
    changePasswordMessage.value = t('settings.changePassword.success');
    changePasswordSuccess.value = true;
    currentPassword.value = '';
    newPassword.value = '';
    confirmPassword.value = '';
  } catch (error: any) {
    console.error('修改密码失败:', error);
    changePasswordMessage.value = error.message || t('settings.changePassword.error.generic');
    changePasswordSuccess.value = false;
  } finally {
    changePasswordLoading.value = false;
  }
};

// --- 2FA state & methods --- (Keep as is)
const twoFactorEnabled = ref(false);
const twoFactorLoading = ref(false);
const twoFactorMessage = ref('');
const twoFactorSuccess = ref(false);
const setupData = ref<{ secret: string; qrCodeUrl: string } | null>(null);
const verificationCode = ref('');
const disablePassword = ref('');
const isSettingUp2FA = computed(() => setupData.value !== null);
const checkTwoFactorStatus = async () => {
  await authStore.checkAuthStatus();
  twoFactorEnabled.value = authStore.user?.isTwoFactorEnabled ?? false;
};
const handleSetup2FA = async () => {
  twoFactorMessage.value = ''; twoFactorSuccess.value = false; twoFactorLoading.value = true;
  setupData.value = null; verificationCode.value = '';
  try {
    const response = await apiClient.post<{ secret: string; qrCodeUrl: string }>('/auth/2fa/setup'); // 使用 apiClient
    setupData.value = response.data;
  } catch (error: any) {
    console.error('开始设置 2FA 失败:', error);
    twoFactorMessage.value = error.response?.data?.message || t('settings.twoFactor.error.setupFailed');
  } finally { twoFactorLoading.value = false; }
};
const handleVerifyAndActivate2FA = async () => {
  if (!setupData.value || !verificationCode.value) {
    twoFactorMessage.value = t('settings.twoFactor.error.codeRequired'); return;
  }
  twoFactorMessage.value = ''; twoFactorSuccess.value = false; twoFactorLoading.value = true;
  try {
    await apiClient.post('/auth/2fa/verify', { token: verificationCode.value }); // 使用 apiClient
    twoFactorMessage.value = t('settings.twoFactor.success.activated');
    twoFactorSuccess.value = true; twoFactorEnabled.value = true;
    setupData.value = null; verificationCode.value = '';
  } catch (error: any) {
    console.error('验证并激活 2FA 失败:', error);
    twoFactorMessage.value = error.response?.data?.message || t('settings.twoFactor.error.verificationFailed');
  } finally { twoFactorLoading.value = false; }
};
const handleDisable2FA = async () => {
  if (!disablePassword.value) {
    twoFactorMessage.value = t('settings.twoFactor.error.passwordRequiredForDisable'); return;
  }
  twoFactorMessage.value = ''; twoFactorSuccess.value = false; twoFactorLoading.value = true;
  try {
    await apiClient.delete('/auth/2fa', { data: { password: disablePassword.value } }); // 使用 apiClient
    twoFactorMessage.value = t('settings.twoFactor.success.disabled');
    twoFactorSuccess.value = true; twoFactorEnabled.value = false;
    disablePassword.value = '';
  } catch (error: any) {
    console.error('禁用 2FA 失败:', error);
    twoFactorMessage.value = error.response?.data?.message || t('settings.twoFactor.error.disableFailed');
  } finally { twoFactorLoading.value = false; }
};
const cancelSetup = () => {
    setupData.value = null; verificationCode.value = ''; twoFactorMessage.value = '';
};

// --- Language settings method --- (Refactored)
const handleUpdateLanguage = async () => {
    languageLoading.value = true;
    languageMessage.value = '';
    languageSuccess.value = false;
    try {
        await settingsStore.updateSetting('language', selectedLanguage.value);
        languageMessage.value = t('settings.language.success.saved');
        languageSuccess.value = true;
    } catch (error: any) {
        console.error('更新语言设置失败:', error);
        languageMessage.value = error.message || t('settings.language.error.saveFailed');
        languageSuccess.value = false;
    } finally {
        languageLoading.value = false;
    }
};

// --- IP Whitelist method --- (Refactored)
const handleUpdateIpWhitelist = async () => {
    ipWhitelistLoading.value = true;
    ipWhitelistMessage.value = '';
    ipWhitelistSuccess.value = false;
    try {
        await settingsStore.updateSetting('ipWhitelist', ipWhitelistInput.value.trim());
        ipWhitelistMessage.value = t('settings.ipWhitelist.success.saved');
        ipWhitelistSuccess.value = true;
    } catch (error: any) {
        console.error('更新 IP 白名单失败:', error);
        ipWhitelistMessage.value = error.message || t('settings.ipWhitelist.error.saveFailed');
        ipWhitelistSuccess.value = false;
    } finally {
        ipWhitelistLoading.value = false;
    }
};

// --- IP Blacklist state & methods --- (Keep fetch/delete as is, update uses store)
const ipBlacklist = reactive({
    entries: [] as any[],
    total: 0,
    loading: false,
    error: null as string | null,
    currentPage: 1,
    limit: 10,
});
const blacklistToDeleteIp = ref<string | null>(null);
const blacklistDeleteLoading = ref(false);
const blacklistDeleteError = ref<string | null>(null);

const fetchIpBlacklist = async (page = 1) => {
    ipBlacklist.loading = true;
    ipBlacklist.error = null;
    const offset = (page - 1) * ipBlacklist.limit;
    try {
        // Assuming fetchIpBlacklist is still needed from authStore
        const data = await authStore.fetchIpBlacklist(ipBlacklist.limit, offset);
        ipBlacklist.entries = data.entries;
        ipBlacklist.total = data.total;
        ipBlacklist.currentPage = page;
    } catch (error: any) {
        ipBlacklist.error = error.message || t('settings.ipBlacklist.error.fetchFailed');
    } finally {
        ipBlacklist.loading = false;
    }
};

const handleDeleteIp = async (ip: string) => {
    blacklistToDeleteIp.value = ip;
    if (confirm(t('settings.ipBlacklist.confirmRemoveIp', { ip }))) {
        blacklistDeleteLoading.value = true;
        blacklistDeleteError.value = null;
        try {
            // Assuming deleteIpFromBlacklist is still needed from authStore
            await authStore.deleteIpFromBlacklist(ip);
            await fetchIpBlacklist(ipBlacklist.currentPage);
        } catch (error: any) {
            blacklistDeleteError.value = error.message || t('settings.ipBlacklist.error.deleteFailed');
        } finally {
            blacklistDeleteLoading.value = false;
            blacklistToDeleteIp.value = null;
        }
    } else {
        blacklistToDeleteIp.value = null;
    }
};

// Update Blacklist Config method (Refactored)
const handleUpdateBlacklistSettings = async () => {
    blacklistSettingsLoading.value = true;
    blacklistSettingsMessage.value = '';
    blacklistSettingsSuccess.value = false;
    try {
        const maxAttempts = parseInt(blacklistSettingsForm.maxLoginAttempts, 10);
        const banDuration = parseInt(blacklistSettingsForm.loginBanDuration, 10);
        if (isNaN(maxAttempts) || maxAttempts <= 0) {
            throw new Error(t('settings.ipBlacklist.error.invalidMaxAttempts'));
        }
        if (isNaN(banDuration) || banDuration <= 0) {
            throw new Error(t('settings.ipBlacklist.error.invalidBanDuration'));
        }
        await settingsStore.updateMultipleSettings({
            maxLoginAttempts: blacklistSettingsForm.maxLoginAttempts,
            loginBanDuration: blacklistSettingsForm.loginBanDuration,
        });
        blacklistSettingsMessage.value = t('settings.ipBlacklist.success.configUpdated');
        blacklistSettingsSuccess.value = true;
    } catch (error: any) {
        console.error('更新黑名单配置失败:', error);
        blacklistSettingsMessage.value = error.message || t('settings.ipBlacklist.error.updateConfigFailed');
        blacklistSettingsSuccess.value = false;
    } finally {
        blacklistSettingsLoading.value = false;
    }
};

// --- IP Blacklist Enable/Disable Method (Button Style) ---
const handleUpdateIpBlacklistEnabled = async () => {
   // Toggle local state immediately for instant UI feedback
   const originalValue = ipBlacklistEnabled.value;
   ipBlacklistEnabled.value = !ipBlacklistEnabled.value;

   try {
       const valueToSave = ipBlacklistEnabled.value ? 'true' : 'false';
       await settingsStore.updateSetting('ipBlacklistEnabled', valueToSave);
       // Save successful, no message needed for toggle switch
       console.log('IP Blacklist enabled status saved:', valueToSave);
   } catch (error: any) {
       console.error('更新 IP 黑名单启用状态失败:', error);
       // Optionally show error notification to user here
       // Revert button state on failure
       ipBlacklistEnabled.value = originalValue; // Revert to original value
   }
   // No loading/message state management needed
};

// --- CAPTCHA Settings Method ---
const handleUpdateCaptchaSettings = async () => {
    captchaLoading.value = true;
    captchaMessage.value = '';
    captchaSuccess.value = false;
    try {
        // Prepare DTO, only sending secret keys if they have been entered
        const dto: UpdateCaptchaSettingsDto = {
            enabled: captchaForm.enabled,
            provider: captchaForm.provider,
            // Site keys are not sensitive, send them if present
            hcaptchaSiteKey: captchaForm.hcaptchaSiteKey || '',
            recaptchaSiteKey: captchaForm.recaptchaSiteKey || '',
        };

        // Only include secret keys in the DTO if the user entered a value
        if (captchaForm.hcaptchaSecretKey) {
            dto.hcaptchaSecretKey = captchaForm.hcaptchaSecretKey;
        }
        if (captchaForm.recaptchaSecretKey) {
            dto.recaptchaSecretKey = captchaForm.recaptchaSecretKey;
        }

        await settingsStore.updateCaptchaSettings(dto);
        captchaMessage.value = t('settings.captcha.success.saved'); // Need translation
        captchaSuccess.value = true;
        // Clear secret key fields in the form after successful save for security
        captchaForm.hcaptchaSecretKey = '';
        captchaForm.recaptchaSecretKey = '';
    } catch (error: any) {
        console.error('更新 CAPTCHA 设置失败:', error);
        captchaMessage.value = error.message || t('settings.captcha.error.saveFailed'); // Need translation
        captchaSuccess.value = false;
    } finally {
        captchaLoading.value = false;
    }
};


// --- Version Check Function ---
const checkLatestVersion = async () => {
  isCheckingVersion.value = true;
  versionCheckError.value = null;
  latestVersion.value = null;
  try {
    // 使用 GitHub API 获取最新的 release 信息
    // 移除 headers 以避免 CORS 问题
    const response = await axios.get('https://api.github.com/repos/Heavrnl/nexus-terminal/releases/latest');
    if (response.data && response.data.tag_name) {
      latestVersion.value = response.data.tag_name;
    } else {
      throw new Error('Invalid API response format');
    }
  } catch (error: any) {
    console.error('检查最新版本失败:', error);
    if (axios.isAxiosError(error) && error.response?.status === 404) {
      versionCheckError.value = t('settings.about.error.noReleases'); // 没有找到发布版本
    } else if (axios.isAxiosError(error) && error.response?.status === 403) {
       versionCheckError.value = t('settings.about.error.rateLimit'); // API 速率限制
    } else {
      versionCheckError.value = t('settings.about.error.checkFailed'); // 通用检查失败
    }
  } finally {
    isCheckingVersion.value = false;
  }
};

// --- Lifecycle Hooks ---
onMounted(async () => {
  await checkTwoFactorStatus(); // Check 2FA status
  await fetchIpBlacklist(); // Fetch current blacklist entries
  await settingsStore.loadCaptchaSettings(); // <-- Load CAPTCHA settings
  await checkLatestVersion(); // <-- Check for latest version on mount
  if (authStore.isAuthenticated) {
    await authStore.fetchPasskeys();
  }
  // Initial settings (including language, whitelist, blacklist config) are loaded in main.ts via settingsStore.loadInitialSettings()
});

</script>

<style scoped>
/* Remove all scoped styles as they are now handled by Tailwind utility classes */
</style>

