<script setup lang="ts">
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import {
  NAvatar,
  NButton,
  NCard,
  NDivider,
  NEmpty,
  NFlex,
  NInput,
  NLayout,
  NLayoutContent,
  NLayoutSider,
  NMenu,
  NSelect,
  NStatistic,
  NText,
  NA,
  useMessage,
} from 'naive-ui';
import type { MenuOption } from 'naive-ui';

const route = useRoute();
const router = useRouter();
const message = useMessage();

const datasetName = ref((route.query.name as string) || '知识库');
const activeMenu = ref('documents');
const searchKeyword = ref('');
const currentSort = ref('created_at');
const sortDesc = ref(true);
const statusFilter = ref('all');

const menuOptions: MenuOption[] = [
  { key: 'documents', label: '文档' },
  { key: 'pipeline', label: '流水线' },
  { key: 'recall', label: '召回测试' },
  { key: 'settings', label: '设置' },
];

const sortOptions = [
  { label: '上传时间', value: 'created_at' },
  { label: '文件名', value: 'name' },
  { label: '文件大小', value: 'size' },
];

const statusOptions = [
  { label: '全部', value: 'all' },
  { label: '已启用', value: 'enabled' },
  { label: '已禁用', value: 'disabled' },
];

function handleAddFile() {
  const id = route.params.id as string;
  router.push({
    name: 'DocumentsCreate',
    params: { id },
    query: { name: datasetName.value },
  });
}

function handleMetadata() {
  message.info('元数据');
}

function goBack() {
  router.push('/datasets');
}
</script>

<template>
  <NLayout has-sider style="height: 100%">
    <!-- 左侧边栏 -->
    <NLayoutSider
      :width="200"
      bordered
      content-style="display:flex; flex-direction:column; height:100%;"
    >
      <!-- 知识库名称 -->
      <NFlex
        align="center"
        :wrap="false"
        style="padding: 14px 12px 10px; cursor: pointer"
        @click="goBack"
      >
        <NAvatar size="small" round src="https://api.dicebear.com/7.x/bottts/svg?seed=godboy" />
        <NText
          strong
          style="flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap"
        >
          {{ datasetName }}
        </NText>
        <NText depth="3">···</NText>
      </NFlex>

      <NDivider style="margin: 0" />

      <!-- 导航菜单 -->
      <NMenu v-model:value="activeMenu" :options="menuOptions" style="flex: 1" />

      <NDivider style="margin: 0" />

      <!-- 底部统计 -->
      <NFlex style="padding: 14px 16px" :gap="20">
        <NStatistic label="文档" :value="0" />
        <NStatistic label="个关联应用" :value="0" />
      </NFlex>
    </NLayoutSider>

    <!-- 主内容区 -->
    <NLayoutContent content-style="padding: 24px 32px; display:flex; flex-direction:column;">
      <!-- 标题 -->
      <NText tag="h2" style="font-size: 18px; font-weight: 600; margin: 0 0 6px">文档</NText>
      <NText depth="3" style="font-size: 12px; margin-bottom: 20px">
        知识库的所有文件都在这里显示，整个知识库都可以链接到 Dify 引用或通过 Chat 插件进行索引。
        <NA href="#">了解更多 ↗</NA>
      </NText>

      <!-- 工具栏 -->
      <NFlex align="center" justify="space-between" style="margin-bottom: 20px">
        <NFlex align="center" :gap="8">
          <NSelect
            v-model:value="statusFilter"
            :options="statusOptions"
            size="small"
            style="width: 100px"
          />
          <NInput
            v-model:value="searchKeyword"
            placeholder="搜索"
            size="small"
            clearable
            style="width: 200px"
          />

          <NFlex align="center" :gap="6">
            <NText depth="3" style="font-size: 13px">排序:</NText>
            <NSelect
              v-model:value="currentSort"
              :options="sortOptions"
              size="small"
              style="width: 110px"
            />
            <NButton size="small" text @click="sortDesc = !sortDesc">
              {{ sortDesc ? '↓' : '↑' }}
            </NButton>
          </NFlex>
        </NFlex>
        <NFlex align="center" :gap="8">
          <NButton size="small" secondary @click="handleMetadata">🗂 元数据</NButton>
          <NButton type="primary" size="small" @click="handleAddFile">+ 添加文件</NButton>
        </NFlex>
      </NFlex>

      <!-- 空状态 -->
      <NFlex justify="center" align="center" style="flex: 1">
        <NCard :bordered="true" style="max-width: 480px; text-align: center">
          <NEmpty description="还没有文档">
            <template #extra>
              <NText depth="3" style="font-size: 13px; display: block; margin-bottom: 16px">
                您可以上传文件，从网站同步，或者从网络应用程序（如概念、GitHub 等）同步。
              </NText>
              <NButton size="small" secondary @click="handleAddFile">+ 添加文件</NButton>
            </template>
          </NEmpty>
        </NCard>
      </NFlex>
    </NLayoutContent>
  </NLayout>
</template>
