<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { NButton, NDropdown, NIcon, NInput, NSpace, NTag, useMessage, useModal } from 'naive-ui';
import { useVbenModal } from '@vben/common-ui';

import FormModal from './form.vue';

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

interface Dataset {
  id: number;
  name: string;
  author: string;
  editedAgo: string;
  tags: string[];
  docCount: number;
  hitCount: number;
  updatedAgo: string;
  likes?: number;
  isPipeline?: boolean;
}
const searchKeyword = ref('');

const datasets = ref<Dataset[]>([
  {
    id: 1,
    name: '111',
    author: 'godboy',
    editedAgo: '17 小时前',
    tags: [],
    docCount: 0,
    hitCount: 0,
    updatedAgo: '17 小时前',
  },
  {
    id: 2,
    name: '2',
    author: 'godboy',
    editedAgo: '19 小时前',
    tags: ['适用', '经济', '倒排索引'],
    docCount: 1,
    hitCount: 0,
    updatedAgo: '19 小时前',
  },
  {
    id: 3,
    name: '1',
    author: 'godboy',
    editedAgo: '19 小时前',
    tags: [],
    docCount: 0,
    hitCount: 0,
    updatedAgo: '19 小时前',
  },
  {
    id: 4,
    name: 'Untitled 1',
    author: 'godboy',
    editedAgo: '1 天前',
    tags: [],
    docCount: 0,
    hitCount: 0,
    updatedAgo: '1 天前',
    likes: 111,
    isPipeline: true,
  },
]);

const tagOptions = [
  { label: '全部标签', key: 'all' },
  { label: '适用', key: '适用' },
  { label: '经济', key: '经济' },
  { label: '倒排索引', key: '倒排索引' },
];
const [DataModal, modalApi] = useVbenModal({
  title: '创建知识库',
  // 连接抽离的组件
  connectedComponent: FormModal,

});
function handleCreateDataset() {
  modalApi.open();
  // router.push({ name: 'Documents', params: { id: 'new' }, query: { name: '新知识库' } });
}

function handleCreateByPipeline() {
  message.info('通过知识流水线创建');
}

function handleConnectExternal() {
  message.info('连接外部知识库');
}

function handleDatasetClick(dataset: Dataset) {
  router.push({ name: 'Documents', params: { id: dataset.id }, query: { name: dataset.name } });
}
</script>

<template>
  <div class="datasets-page">
    <DataModal />
    <!-- 顶部工具栏 -->
    <div class="toolbar">
      <div class="toolbar-left">
        <NDropdown :options="tagOptions" trigger="click">
          <NButton size="small" secondary> 全部标签 </NButton>
        </NDropdown>
        <NInput
          v-model:value="searchKeyword"
          placeholder="搜索"
          size="small"
          clearable
          style="width: 200px"
        >
          <template #prefix>
            <span class="icon-[mdi--ab-testing]"></span>
          </template>
        </NInput>
      </div>
      <div class="toolbar-right">
        <NButton type="success" secondary size="small">
          <template #icon><span class="dot" /></template>
          服务 API
        </NButton>
        <NButton size="small" secondary>
          <template #icon><span class="icon-[mdi--ab-testing]"></span></template>
          外部知识库 API
        </NButton>
      </div>
    </div>

    <!-- 卡片网格 -->
    <div class="cards-grid">
      <!-- 创建知识库卡片 -->
      <div class="card create-card">
        <div class="create-btn" @click="handleCreateDataset">
          <span class="icon-[mdi--plus]"></span>
          <span>创建知识库</span>
        </div>
        <div class="divider" />
        <div class="create-option" @click="handleCreateByPipeline">
          <span class="icon-[mdi--pipeline]"></span>
          <span>通过知识流水线创建知识库</span>
        </div>
        <div class="create-option" @click="handleConnectExternal">
          <span class="icon-[mdi--external-link]"></span>
          <span>连接外部知识库</span>
        </div>
      </div>

      <!-- 知识库列表卡片 -->
      <div
        v-for="dataset in datasets"
        :key="dataset.id"
        class="card dataset-card"
        @click="handleDatasetClick(dataset)"
      >
        <!-- 流水线标签 -->
        <div v-if="dataset.isPipeline" class="pipeline-badge">流水线</div>

        <!-- 卡片头部 -->
        <div class="card-header">
          <div class="dataset-avatar">
            <img src="https://api.dicebear.com/7.x/bottts/svg?seed=godboy" alt="avatar" />
          </div>
          <div class="dataset-info">
            <div class="dataset-name">{{ dataset.name }}</div>
            <div class="dataset-meta">{{ dataset.author }} · 编辑于 {{ dataset.editedAgo }}</div>
            <NSpace v-if="dataset.tags.length" size="small" class="tags">
              <NTag v-for="tag in dataset.tags" :key="tag" size="small" round>{{ tag }}</NTag>
            </NSpace>
          </div>
        </div>

        <!-- 点赞 -->
        <div v-if="dataset.likes" class="likes">
          <NIcon size="14"><HeartIcon /></NIcon>
          <span>{{ dataset.likes }}</span>
        </div>

        <!-- 卡片底部 -->
        <div class="card-footer">
          <div class="stat">
            <NIcon size="13"><DocIcon /></NIcon>
            <span>{{ dataset.docCount }}</span>
          </div>
          <div class="stat">
            <NIcon size="13"><HeartIcon /></NIcon>
            <span>{{ dataset.hitCount }}</span>
          </div>
          <div class="separator">/</div>
          <div class="updated">
            <NIcon size="13"><TimeIcon /></NIcon>
            更新于 {{ dataset.updatedAgo }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.datasets-page {
  padding: 20px;
  min-height: 100vh;
  color: #e2e8f0;
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 12px;

  .toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #18a058;
  }
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.card {
  border-radius: 12px;
  border: 1px solid #2a2a4a;
  padding: 20px;
  cursor: pointer;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
  position: relative;

  &:hover {
    border-color: #4a90d9;
    box-shadow: 0 4px 16px rgba(74, 144, 217, 0.15);
  }
}

.create-card {
  cursor: default;

  .create-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 500;
    color: #e2e8f0;
    cursor: pointer;
    padding: 4px 0;

    &:hover {
      color: #4a90d9;
    }
  }

  .divider {
    height: 1px;
    background: #2a2a4a;
    margin: 16px 0;
  }

  .create-option {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #94a3b8;
    padding: 6px 0;
    cursor: pointer;

    &:hover {
      color: #4a90d9;
    }
  }
}

.dataset-card {
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .pipeline-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 11px;
    color: #94a3b8;
    background: #0f3460;
    border: 1px solid #2a2a4a;
    border-radius: 4px;
    padding: 2px 6px;
  }

  .card-header {
    display: flex;
    gap: 12px;
    align-items: flex-start;
  }

  .dataset-avatar {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: #0f3460;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .dataset-info {
    flex: 1;
    min-width: 0;
  }

  .dataset-name {
    font-size: 14px;
    font-weight: 600;
    color: #e2e8f0;
    margin-bottom: 4px;
  }

  .dataset-meta {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 6px;
  }

  .tags {
    flex-wrap: wrap;
  }

  .likes {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #94a3b8;
    margin-top: 8px;
  }

  .card-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    font-size: 12px;
    color: #64748b;
    border-top: 1px solid #2a2a4a;
    padding-top: 12px;

    .stat {
      display: flex;
      align-items: center;
      gap: 3px;
    }

    .separator {
      color: #2a2a4a;
    }

    .updated {
      display: flex;
      align-items: center;
      gap: 3px;
      margin-left: auto;
    }
  }
}

.mr-1 {
  margin-right: 4px;
}
</style>
