
<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 Section Removed -->
              <!-- 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>
        </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>
            </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>
        </div>
      </div> <!-- End Settings Sections Grid -->
    </div> <!-- End Inner container -->
<!-- Version Display -->
      <div class="mt-8 pb-4 flex justify-center"> <!-- Added flex container for centering -->
        <div class="inline-flex items-center bg-muted text-muted-foreground text-xs px-4 py-1 rounded-full shadow space-x-2"> <!-- Elliptical badge styles with flex for alignment -->
          <span class="font-medium">Version: {{ appVersion }}</span> <!-- 使用动态版本号 -->
          <span class="opacity-50">|</span> <!-- Separator with opacity -->
          <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> <!-- Separator -->
          <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 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 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
// Removed Passkey import: import { startRegistration } from '@simplewebauthn/browser';

const authStore = useAuthStore();
const settingsStore = useSettingsStore();
const appearanceStore = useAppearanceStore(); // 实例化外观 store
const { t } = useI18n();
const appVersion = ref(pkg.version); // 获取版本号
 
 // --- 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
} = storeToRefs(settingsStore);

// Removed Passkey state import from authStore


// --- 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

// --- 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);
// 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);
// Removed Passkey Deletion State


// 提供一些常用的时区供选择
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

}, { 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


// --- 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;
    }
};

// --- 外观设置 ---
const openStyleCustomizer = () => {
    appearanceStore.toggleStyleCustomizer(true);
};

// --- Passkey state & methods Removed ---

// --- Formatting function (kept in case other parts need it, can be removed if unused) ---
const formatDate = (timestamp: number | undefined) => {
    if (!timestamp) return t('statusMonitor.notAvailable');
    try {
        return new Date(timestamp * 1000).toLocaleString();
    } 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, ensuring keys are present even if empty
        const dto: UpdateCaptchaSettingsDto = {
            enabled: captchaForm.enabled,
            provider: captchaForm.provider,
            hcaptchaSiteKey: captchaForm.hcaptchaSiteKey || '',
            hcaptchaSecretKey: captchaForm.hcaptchaSecretKey || '', // Send secret key
            recaptchaSiteKey: captchaForm.recaptchaSiteKey || '',
            recaptchaSecretKey: captchaForm.recaptchaSecretKey || '', // Send secret key
        };
        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;
    }
};


// --- Lifecycle Hooks ---
onMounted(async () => {
  await checkTwoFactorStatus(); // Check 2FA status
  await fetchIpBlacklist(); // Fetch current blacklist entries
  await settingsStore.loadCaptchaSettings(); // <-- Load CAPTCHA settings
  // Removed fetchPasskeys call: 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>

