<template>
  <div class="settings">
    <Transition name="toast">
      <div v-if="toast.visible" class="toast" :class="'toast-' + toast.type">{{ toast.msg }}</div>
    </Transition>
    <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)">{{ $t('common.delete') }}</button>
          </div>
        </div>
      </div>
    </Transition>
    <!-- 页面头部 -->
    <header class="page-header">
      <h1>{{ $t('settings.title') }}</h1>
    </header>

    <div class="settings-grid">
      <!-- ═══ AI 提供商(列表 + 表单)+ F-04c 负载均衡池 ═══ -->
      <ProviderPanel
        ref="providerPanelRef"
        :confirm-dialog="confirmDialog"
        @toast="showToast"
        @providers-changed="onProvidersChanged"
      />

      <!-- ═══ 连接管理(localStorage CRUD)═══ -->
      <ConnectionPanel
        ref="connectionPanelRef"
        :confirm-dialog="confirmDialog"
        @toast="showToast"
      />

      <!-- ═══ 通用设置(主题/语言/并发/Agent 轮次 — 即时调 IPC)═══ -->
      <GeneralPanel />

      <!-- ═══ 知识库配置(后端 IPC,embedding provider 依赖 ProviderPanel 列表)═══ -->
      <KnowledgePanel :ai-providers="aiProviders" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, shallowRef, onMounted, onUnmounted } from 'vue'
import { useConfirm } from '@/composables/useConfirm'
import ProviderPanel from '@/components/settings/ProviderPanel.vue'
import ConnectionPanel from '@/components/settings/ConnectionPanel.vue'
import GeneralPanel from '@/components/settings/GeneralPanel.vue'
import KnowledgePanel from '@/components/settings/KnowledgePanel.vue'
import type { AiProviderConfig } from '@/api/types'

// ============================================================
// Settings 壳 — toast/confirm 共享 UI + 组合 4 子面板
// (纯重构零功能:各功能域 state/methods/CSS 已拆到子组件)
// ============================================================

// 顶部轻量提示（错误/警告/完成），3s 自动消失；零依赖，替代未接入的 Arco Message
const toast = reactive({ visible: false, msg: '', type: 'info' as 'error' | 'warning' | 'info' })
let _toastTimer: ReturnType<typeof setTimeout> | null = null

function showToast(msg: string, type: 'error' | 'warning' | 'info' = 'info') {
  toast.msg = msg
  toast.type = type
  toast.visible = true
  if (_toastTimer) clearTimeout(_toastTimer)
  _toastTimer = setTimeout(() => { toast.visible = false }, 3000)
}

// 确认弹层状态机抽至 composables/useConfirm(原 4 视图重复:Projects/ProjectDetail/Ideas/Settings)
// 模板 confirmState.visible/msg 在 <script setup> 中自动解包 ref,沿用既有内联确认弹层
const { confirmState, confirmDialog, answerConfirm } = useConfirm()

// 子面板 ref(挂载时触发各自 load,卸载时清子面板 timer)
const providerPanelRef = shallowRef<InstanceType<typeof ProviderPanel> | null>(null)
const connectionPanelRef = shallowRef<InstanceType<typeof ConnectionPanel> | null>(null)

// KnowledgePanel embedding provider 下拉依赖 ProviderPanel 的 aiProviders
// ProviderPanel loadProviders 后上抛 providers-changed,此处同步本地副本
const aiProviders = ref<AiProviderConfig[]>([])

function onProvidersChanged() {
  aiProviders.value = providerPanelRef.value?.aiProviders ?? []
}

onMounted(() => {
  providerPanelRef.value?.loadProviders()
  connectionPanelRef.value?.loadConnections()
})

// 组件卸载清 toast timer;各子面板自管自身 debounce timer(各自 onUnmounted)
onUnmounted(() => {
  if (_toastTimer) clearTimeout(_toastTimer)
  providerPanelRef.value?.clearPoolTimer()
})
</script>

<style scoped>
.settings { padding: 16px 20px 20px; }

/* ===== 顶部 Toast 提示 ===== */
.toast {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  padding: 8px 16px;
  border-radius: var(--df-radius-sm);
  font-size: 13px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.toast-error { background: var(--df-danger-bg); color: var(--df-danger); border: 0.5px solid var(--df-danger); }
.toast-warning { background: var(--df-warning-bg); color: var(--df-warning); border: 0.5px solid var(--df-warning); }
.toast-info { background: var(--df-accent-bg); color: var(--df-accent); border: 0.5px solid var(--df-accent); }
.toast-enter-active, .toast-leave-active { transition: opacity 0.2s, transform 0.2s; }
.toast-enter-from, .toast-leave-to { opacity: 0; transform: translate(-50%, -8px); }

/* ===== 确认弹层 ===== */
.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: 360px;
  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; }
.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; }

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--df-gap-page);
}
.page-header h1 { font-size: 24px; font-weight: 500; color: var(--df-text); }

/* ===== 按钮 ===== */
.btn {
  padding: 8px 16px;
  border: none;
  border-radius: var(--df-radius-sm);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-primary { background: var(--df-accent); color: #fff; }
.btn-primary:hover { background: var(--df-accent-hover); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--df-text-secondary); border: 0.5px solid var(--df-border); }
.btn-ghost:hover { background: var(--df-bg-card); color: var(--df-text); }
.btn-sm { padding: 4px 12px; font-size: 12px; }

/* ===== 设置网格 ===== */
.settings-grid {
  display: flex;
  flex-direction: column;
  gap: var(--df-gap-grid);
}

/* 注:.panel / .panel-header / .empty-hint 等子组件内元素的样式
   已随功能域拆到各子组件 scoped(父 scoped 无法穿透命中子组件根 section),
   各子组件自带面板容器 + 按钮基础样式副本,确保零视觉变化。 */
</style>
