<script setup lang="ts">
import { ref, shallowRef, defineAsyncComponent } from 'vue';
import { NFlex, NLayout, NLayoutContent, NLayoutSider, NText } from 'naive-ui';
import { Page } from '@vben/common-ui';

const ApiExtension = defineAsyncComponent(() => import('./panels/ApiExtension.vue'));
const ModelProviders = defineAsyncComponent(() => import('./panels/ModelProviders.vue'));
const Members = defineAsyncComponent(() => import('./panels/Members.vue'));
const DataSources = defineAsyncComponent(() => import('./panels/DataSources.vue'));
const Language = defineAsyncComponent(() => import('./panels/Language.vue'));

type PanelKey = 'model-providers' | 'members' | 'data-sources' | 'api-extension' | 'language';

const activePanel = ref<PanelKey>('model-providers');

const panelMap: Record<PanelKey, ReturnType<typeof defineAsyncComponent>> = {
  'model-providers': ModelProviders,
  members: Members,
  'data-sources': DataSources,
  'api-extension': ApiExtension,
  language: Language,
};

const workspaceItems: { key: PanelKey; label: string; icon: string }[] = [
  { key: 'model-providers', label: '模型供应商', icon: '🤖' },
  { key: 'members', label: '成员', icon: '👥' },
  { key: 'data-sources', label: '数据来源', icon: '🗃️' },
  { key: 'api-extension', label: 'API 扩展', icon: '🔌' },
];

const generalItems: { key: PanelKey; label: string; icon: string }[] = [
  { key: 'language', label: '语言', icon: '🌐' },
];
</script>

<template>
  <Page auto-content-height>
    <NLayout has-sider style="height: 100%">
      <NLayoutSider
        :width="220"
        :native-scrollbar="false"
        content-style="padding: 24px 12px;"
        bordered
      >
        <NText strong tag="div" style="font-size: 18px; padding: 0 12px; margin-bottom: 20px">
          设置
        </NText>

        <!-- 工作空间 -->
        <NText
          depth="3"
          tag="div"
          style="
            font-size: 11px;
            padding: 0 12px;
            margin-bottom: 6px;
            text-transform: uppercase;
            letter-spacing: 0.06em;
          "
        >
          工作空间
        </NText>
        <NFlex vertical :gap="2" style="margin-bottom: 16px">
          <NFlex
            v-for="item in workspaceItems"
            :key="item.key"
            align="center"
            :gap="10"
            style="
              padding: 8px 12px;
              border-radius: 8px;
              cursor: pointer;
              transition: background 0.15s;
            "
            :style="activePanel === item.key ? 'background: var(--n-color-embedded);' : ''"
            @click="activePanel = item.key"
          >
            <span style="font-size: 15px; line-height: 1">{{ item.icon }}</span>
            <NText :style="activePanel === item.key ? 'font-weight: 500;' : ''">
              {{ item.label }}
            </NText>
          </NFlex>
        </NFlex>

        <!-- 通用 -->
        <NText
          depth="3"
          tag="div"
          style="
            font-size: 11px;
            padding: 0 12px;
            margin-bottom: 6px;
            text-transform: uppercase;
            letter-spacing: 0.06em;
          "
        >
          通用
        </NText>
        <NFlex vertical :gap="2">
          <NFlex
            v-for="item in generalItems"
            :key="item.key"
            align="center"
            :gap="10"
            style="
              padding: 8px 12px;
              border-radius: 8px;
              cursor: pointer;
              transition: background 0.15s;
            "
            :style="activePanel === item.key ? 'background: var(--n-color-embedded);' : ''"
            @click="activePanel = item.key"
          >
            <span style="font-size: 15px; line-height: 1">{{ item.icon }}</span>
            <NText :style="activePanel === item.key ? 'font-weight: 500;' : ''">
              {{ item.label }}
            </NText>
          </NFlex>
        </NFlex>
      </NLayoutSider>

      <NLayoutContent :native-scrollbar="false" content-style="padding: 32px 40px;">
        <component :is="panelMap[activePanel]" />
      </NLayoutContent>
    </NLayout>
  </Page>
</template>
