<template>
  <div class="pp-page">
    <el-tabs v-model="activeTab" type="border-card" class="pp-tabs admin-tabs" @tab-change="onTabChange">
      <el-tab-pane label="项目属性 (Scene.conf)" name="project">
        <FieldMemberEditor
          v-if="activeTab === 'project'"
          ref="projectEditor"
          target-label="项目属性"
          description="对应 SimpleLite 桌面端主菜单「项目属性…」。编辑字段后点「保存」即可一次完成内存生效 + 写回项目 JSON 文件（含全部场景/车辆/路径/属性）。"
          :loader="loadProject"
          :on-set="setProjectField"
          :on-save="saveProject"
        />
      </el-tab-pane>

      <el-tab-pane label="核心配置 (simple.json)" name="app-config">
        <FieldMemberEditor
          v-if="activeTab === 'app-config'"
          ref="appConfigEditor"
          target-label="核心配置"
          description="对应 SimpleLite 桌面端主菜单「核心配置 → 编辑配置…」。修改后点「保存」即可一次完成内存生效 + 写入可执行目录下的 simple.json。"
          :loader="loadAppConfig"
          :on-set="setAppConfigField"
          :on-save="saveAppConfig"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import FieldMemberEditor, { type FieldMemberEditorLoadResult } from '@/components/orchestration/FieldMemberEditor.vue'
import { reflectionApi } from '@/api/reflection'

type TabKey = 'project' | 'app-config'
const activeTab = ref<TabKey>('project')

const projectEditor = ref<InstanceType<typeof FieldMemberEditor> | null>(null)
const appConfigEditor = ref<InstanceType<typeof FieldMemberEditor> | null>(null)

function onTabChange(name: string | number) {
  activeTab.value = name as TabKey
}

async function loadProject(): Promise<FieldMemberEditorLoadResult> {
  const r = await reflectionApi.getProjectFields()
  return {
    fields: r.fields,
    pathInfos: [
      { label: '最近加载/保存的项目 JSON', value: r.lastLoadedPath, emptyHint: '尚未通过 SimpleLite 加载或保存过项目' },
      { label: 'simple.json autoload', value: r.autoloadPath, emptyHint: '未配置' }
    ],
    saveButtonLabel: '保存（写回项目 JSON）'
  }
}
function setProjectField(field: string, value: string) {
  return reflectionApi.setProjectField(field, value)
}
async function saveProject() {
  const r = await reflectionApi.saveProject()
  return { path: r.path }
}

async function loadAppConfig(): Promise<FieldMemberEditorLoadResult> {
  const r = await reflectionApi.getAppConfigFields()
  return {
    fields: r.fields,
    pathInfos: [{ label: '保存目标', value: r.savePath, emptyHint: 'simple.json' }],
    saveButtonLabel: '保存（写入 simple.json）'
  }
}
function setAppConfigField(field: string, value: string) {
  return reflectionApi.setAppConfigField(field, value)
}
async function saveAppConfig() {
  const r = await reflectionApi.saveAppConfig()
  return { path: r.path }
}
</script>

<style scoped>
.pp-page {
  height: calc(100vh - 56px);
  padding: 12px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.pp-tabs {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pp-tabs :deep(.el-tabs__content) {
  flex: 1;
  overflow: hidden;
  padding: 0;
}
.pp-tabs :deep(.el-tab-pane) {
  height: 100%;
}
</style>
