<template>
  <!-- ═══ 高级设置(AI 自动执行 / 日志级别)═══ -->
  <section class="panel">
    <div class="panel-header">
      <h2>{{ $t('settings.sectionAdvanced') }}</h2>
    </div>
    <div class="general-settings">
      <SettingRow ref="rowAutoExecute" :label="$t('settings.labelAutoExecute')" :desc="$t('settings.descAutoExecute')">
        <label class="toggle">
          <input type="checkbox" v-model="settings.autoExecute" @change="markSaved('autoExecute')" />
          <span class="toggle-slider"></span>
        </label>
      </SettingRow>
      <SettingRow ref="rowLogLevel" :label="$t('settings.labelLogLevel')" :desc="$t('settings.descLogLevel')">
        <select v-model="settings.logLevel" class="setting-select" @change="markSaved('logLevel')">
          <option value="error">Error</option>
          <option value="warn">Warning</option>
          <option value="info">Info</option>
          <option value="debug">Debug</option>
        </select>
      </SettingRow>
    </div>
  </section>
</template>

<script setup lang="ts">
import { reactive, useTemplateRef } from 'vue'
import SettingRow from './SettingRow.vue'

// ============================================================
// 高级域 — AI 自动执行开关 / 日志级别
// 拆自 GeneralPanel,忠实迁移原逻辑:原 GeneralPanel 这两项为 session 内 reactive
// (无 appSettings 持久化/watch),此处保持一致(无 watch/IPC),避免阶段2 引入行为变更。
// 阶段5:SettingRow 封装行布局,控件变更后调 markSaved 显"已保存"
// 后续若需持久化,单独建改进项。
// ============================================================
const settings = reactive({
  autoExecute: false,
  logLevel: 'info',
})

const rowAutoExecute = useTemplateRef<InstanceType<typeof SettingRow>>('rowAutoExecute')
const rowLogLevel = useTemplateRef<InstanceType<typeof SettingRow>>('rowLogLevel')
function markSaved(key: 'autoExecute' | 'logLevel') {
  const map = { autoExecute: rowAutoExecute.value, logLevel: rowLogLevel.value }
  map[key]?.markSaved()
}
</script>

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