<template>
  <!-- ═══ 高级设置(AI 自动执行范围 / 日志级别)═══ -->
  <section class="panel">
    <div class="panel-header">
      <h2>{{ $t('settings.sectionAdvanced') }}</h2>
    </div>
    <div class="general-settings">
      <!-- F-#97:三档 low/medium/all。low=仅低风险自动(等价旧 autoExecute=false);
           medium=含中风险自动;all=全自动无审批(完全 AI 接管,选时二次确认) -->
      <SettingRow ref="rowAutoExecute" :label="$t('settings.labelAutoExecute')" :desc="$t('settings.descAutoExecute')">
        <select v-model="settings.autoExecuteMode" class="setting-select" @change="onAutoModeChange">
          <option value="low">{{ $t('settings.autoModeLow') }}</option>
          <option value="medium">{{ $t('settings.autoModeMedium') }}</option>
          <option value="all">{{ $t('settings.autoModeAll') }}</option>
        </select>
      </SettingRow>
      <SettingRow ref="rowLogLevel" :label="$t('settings.labelLogLevel')" :desc="$t('settings.descLogLevel')">
        <select v-model="settings.logLevel" class="setting-select" @change="markSaved">
          <option value="error">Error</option>
          <option value="warn">Warning</option>
          <option value="info">Info</option>
          <option value="debug">Debug</option>
        </select>
      </SettingRow>
    </div>

    <!-- all 二次确认弹层(独立,不与 Settings 壳层共用:壳层按钮写死「删除」不适合「确认接管」) -->
    <Transition name="confirm">
      <div v-if="confirmState.visible" class="confirm-mask" @click.self="answerConfirm(false)">
        <div class="confirm-box">
          <div class="confirm-msg">{{ confirmState.msg }}</div>
          <div class="confirm-actions">
            <button class="btn btn-ghost btn-sm" @click="answerConfirm(false)">{{ $t('common.cancel') }}</button>
            <button class="btn btn-danger btn-sm" @click="answerConfirm(true)">{{ confirmState.dangerLabel || $t('common.confirm') }}</button>
          </div>
        </div>
      </div>
    </Transition>
  </section>
</template>

<script setup lang="ts">
import { reactive, watch, useTemplateRef } from 'vue'
import { useI18n } from 'vue-i18n'
import { useConfirm } from '@/composables/useConfirm'
import { useAppSettingsStore } from '@/stores/appSettings'
import SettingRow from './SettingRow.vue'

// ============================================================
// 高级域 — AI 自动执行范围(三档) / 日志级别
// F-#97(2026-06-22):原 autoExecute boolean checkbox → autoExecuteMode select 三档
// (low/medium/all),KV 持久化 df-ai-auto-execute-mode,默认 low。
// low 必须等价旧行为(autoExecute=false 仅 Low 风险自动):后端 audit/mod.rs 按 mode
// 判定 Med/High 是否走自动分支,low 时 Med/High 仍进审批块,行为与旧完全一致。
// all(完全接管)选时二次确认:防误选致无审批全自动执行高危操作。
// ============================================================
const { t } = useI18n()
const appSettings = useAppSettingsStore()
// useConfirm 真实 API:返回 { confirmState, confirmDialog(msg, dangerLabel), answerConfirm(ok) }
// confirmDialog 返回 Promise<boolean>(true=确认,false=取消),无 title/content/confirmText/cancelText
// 字段。此处用 msg 拼标题+内容,dangerLabel 作确认按钮文案,自渲染独立弹层(上方模板)。
const { confirmState, confirmDialog, answerConfirm } = useConfirm()

// 三档合法值 + 脏值白名单兜底:KV 被外部改库为非法值(空串/非三档)时回退 low,
// 防 <select v-model> 无匹配 option 致控件空白(后端 audit 脏值 fail-safe 降级审批,前端需对齐可视)。
const VALID_MODES = ['low', 'medium', 'all'] as const
type AutoMode = (typeof VALID_MODES)[number]
function clampMode(raw: string): AutoMode {
  return (VALID_MODES as readonly string[]).includes(raw) ? (raw as AutoMode) : 'low'
}

const settings = reactive({
  // 三档 low/medium/all,默认 low(=旧 autoExecute=false 现状),KV 持久化 df-ai-auto-execute-mode。
  // clampMode 兜底脏值。
  autoExecuteMode: clampMode(appSettings.get<string>('df-ai-auto-execute-mode', 'low')),
  logLevel: 'info',
})

const rowAutoExecute = useTemplateRef<InstanceType<typeof SettingRow>>('rowAutoExecute')
const rowLogLevel = useTemplateRef<InstanceType<typeof SettingRow>>('rowLogLevel')

// 上一次确认生效的档位:all 二次确认取消时恢复此值(非写死 low),避免 medium 用户误选 all
// 取消后被强制降级 low。初始化 = 当前有效值;每次确认成功(含非 all 切换)更新。
let lastConfirmedMode: AutoMode = settings.autoExecuteMode

// all(完全接管)二次确认:防误选致无审批全自动执行高危操作(删文件/执行任意命令)
// 选 all → 弹确认 → 确认落 KV + markSaved + 更新 lastConfirmedMode;取消恢复 lastConfirmedMode(不落 KV)。
// 非 all 切换:直接落 KV + 更新 lastConfirmedMode(watch 兜底同值无副作用)。
async function onAutoModeChange() {
  if (settings.autoExecuteMode === 'all') {
    const msg = t('settings.autoModeAllConfirmTitle') + '\n\n' + t('settings.autoModeAllConfirmContent')
    const ok = await confirmDialog(msg, t('common.confirm'))
    if (!ok) {
      settings.autoExecuteMode = lastConfirmedMode // 取消恢复原档位(非写死 low)
      return
    }
  }
  appSettings.set('df-ai-auto-execute-mode', settings.autoExecuteMode)
  lastConfirmedMode = settings.autoExecuteMode
  rowAutoExecute.value?.markSaved()
}

// watch 兜底:非 all 切换直接落 KV + 更新 lastConfirmedMode(all 走 onAutoModeChange 确认后落,
// 避免 watch 抢先持久化未确认的 all 值)。onAutoModeChange 已落 KV 时此 watch 重复 set 同值无副作用。
watch(
  () => settings.autoExecuteMode,
  (v) => {
    if (v !== 'all') {
      appSettings.set('df-ai-auto-execute-mode', v)
      lastConfirmedMode = v
    }
  },
)

// logLevel 行即时反馈(无参:logLevel 仅 session 内 reactive 无持久化,markSaved 只显「已保存」反馈)
function markSaved() {
  rowLogLevel.value?.markSaved()
}
</script>

<style scoped>
/* 阶段5 UX 重构:复用 settings.css 全局 .panel/.panel-header/.general-settings/
   .setting-select + SettingRow(封装 .setting-row/.setting-info/.setting-label/
   .setting-desc/.setting-control)。本 Section 无特有 scoped 样式。

   F-#97 all 二次确认弹层:复用 Settings.vue 壳层 confirm 弹层同款样式(mask/box/msg/
   actions/transition),此处独立持有 useConfirm 状态(不与壳层共用,壳层按钮写死「删除」)。 */
.confirm-mask {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.confirm-box {
  background: var(--df-bg-card);
  border: 0.5px solid var(--df-border);
  border-radius: var(--df-radius-lg);
  padding: 20px;
  min-width: 280px;
  max-width: 420px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.confirm-msg { font-size: 13px; color: var(--df-text); line-height: 1.5; margin-bottom: 16px; white-space: pre-line; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }
.btn-danger { background: var(--df-danger); color: #fff; }
.btn-danger:hover { filter: brightness(1.1); }
.confirm-enter-active, .confirm-leave-active { transition: opacity 0.15s; }
.confirm-enter-from, .confirm-leave-to { opacity: 0; }
</style>
