<script setup lang="ts">
import { onMounted } from 'vue'

import ConfigCenterPanel from '@/components/settings/ConfigCenterPanel.vue'
import { useWorkbenchControllerContext } from '@/composables/useWorkbenchController'

const controller = useWorkbenchControllerContext()

onMounted(() => {
  void controller.loadConfigIfNeeded()
})
</script>

<template>
  <section class="settings-page">
    <div class="settings-header archive-shell-block">
      <div class="settings-header__copy">
        <p class="archive-kicker">Environment Control</p>
        <h2 class="archive-page-title">System Settings</h2>
        <p class="archive-copy">
          数据库、模型服务、搜索链路和网络配置都在这里被分组维护。目标不是堆更多字段，而是让环境参数的上下文更清楚、更像一张可阅读的系统图。
        </p>
      </div>

      <div class="settings-header__actions">
        <button class="archive-button--ghost" type="button" @click="controller.refreshConfig">刷新配置</button>
        <button class="archive-button" type="button" :disabled="controller.config.saving.value" @click="controller.saveConfig">
          {{ controller.config.saving.value ? '保存中' : '保存配置' }}
        </button>
      </div>
    </div>

    <ConfigCenterPanel
      :groups="controller.config.groups.value"
      :loading="controller.config.loading.value"
      :saving="controller.config.saving.value"
      @update-field="(key, value) => { controller.config.values.value[key] = value }"
      @refresh="controller.refreshConfig"
      @save="controller.saveConfig"
    />
  </section>
</template>

<style scoped>
.settings-page,
.settings-header {
  display: grid;
  gap: 18px;
}

.settings-page {
  max-width: 1560px;
  margin: 0 auto;
}

.settings-header {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
  padding: 30px;
  border-radius: 30px;
  background:
    radial-gradient(circle at top left, rgba(22, 52, 45, 0.12), transparent 24%),
    linear-gradient(135deg, rgba(255, 251, 246, 0.94), rgba(243, 236, 226, 0.92));
}

.settings-header__copy {
  display: grid;
  gap: 14px;
}

.settings-header__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

@media (max-width: 900px) {
  .settings-header {
    grid-template-columns: 1fr;
    padding: 22px;
  }

  .settings-header__actions {
    justify-content: flex-start;
  }
}
</style>