<template>
  <AdminLayout title="知识管理" subtitle="知识管理">
    <!-- 3个div在同一个位置, 后2个通过zindex遮盖前一个 -->
    <div class="knowledge-management-container">

      <!-- 层级1: 知识库列表 -->
      <div class="knowledge-list-container" v-loading="loading">
        <div class="list-header">
          <h3 class="list-title">知识库列表</h3>
          <el-button type="primary" @click="handleCreate">
            + 新建知识库
          </el-button>
        </div>
        
        <div class="knowledge-list-content">
          <div class="knowledge-grid">
          <KnowledgeCard class="knowledge-card"
            v-for="knowledge in knowledgeCards" 
            :key="knowledge.id" 
            :knowledge="knowledge"
            @click="handleKnowledgeClick"
            @edit="handleEdit"
            @delete="handleDelete"
          />
        </div>
        </div>


        <el-empty v-if="!loading && knowledgeCards.length === 0" description="暂无知识库" />
        
        <el-pagination
          v-if="total >= 0"
          :current-page="pageParam.pageNumber"
          :page-size="pageParam.pageSize"
          :total="total"
          :page-sizes="[9, 18, 36]"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="handlePageChange"
          @size-change="handleSizeChange"
        />
      </div>

      <!-- 层级2: 知识库详情（覆盖在列表上方） -->
      <transition name="slide-left">
        <KnowledgeInfo 
          v-if="selectedKnowledge"
          :knowledge="selectedKnowledge"
          @close="handleCloseInfo"
          @refresh="loadKnowledges"
          @edit="handleEditFromInfo"
        />
      </transition>
    </div>

    <!-- 新增/编辑对话框 -->
    <el-dialog
      v-model="basicDialogVisible"
      :title="basicType === 'add' ? '新建知识库' : '编辑知识库'"
      width="800px"
      :close-on-click-modal="false"
      destroy-on-close
    >
      <KnowledgeBasic
        :type="basicType"
        :knowledge="editKnowledge"
        @success="handleBasicSuccess"
        @cancel="basicDialogVisible = false"
      />
    </el-dialog>
  </AdminLayout>
</template>

<script setup lang="ts">
import { AdminLayout } from '@/views/admin';
import { KnowledgeCard, KnowledgeInfo, KnowledgeBasic } from './components';
import { ref, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import type { AiKnowledge } from '@/types/ai';
import type { PageParam } from '@/types';
import { knowledgeApi } from '@/apis/ai';

defineOptions({
  name: 'KnowledgeManagementView'
});

const knowledgeCards = ref<AiKnowledge[]>([]);
const selectedKnowledge = ref<AiKnowledge | null>(null);
const editKnowledge = ref<AiKnowledge | null>(null);
const basicDialogVisible = ref(false);
const basicType = ref<'view' | 'add' | 'edit'>('view');

const loading = ref(false);
const total = ref(0);
const pageParam = ref<PageParam>({
  pageNumber: 1,
  pageSize: 12
});

// 加载知识库列表
onMounted(() => {
  loadKnowledges();
});

async function loadKnowledges() {
  try {
    loading.value = true;
    const result = await knowledgeApi.pageKnowledges({}, pageParam.value);
    if (result.success) {
      knowledgeCards.value = result.dataList || [];
      total.value = result.pageParam?.totalElements || 0;
    }
  } catch (error: any) {
    console.error('加载知识库失败:', error);
    ElMessage.error('加载知识库失败');
  } finally {
    loading.value = false;
  }
}

// 选中知识库
function handleKnowledgeClick(knowledge: AiKnowledge) {
  selectedKnowledge.value = knowledge;
}

// 关闭知识库详情
function handleCloseInfo() {
  selectedKnowledge.value = null;
}

// 新建知识库
function handleCreate() {
  basicType.value = 'add';
  editKnowledge.value = null;
  basicDialogVisible.value = true;
}

// 编辑知识库（从卡片）
function handleEdit(knowledge: AiKnowledge) {
  basicType.value = 'edit';
  editKnowledge.value = knowledge;
  basicDialogVisible.value = true;
}

// 编辑知识库（从详情页）
function handleEditFromInfo(knowledge: AiKnowledge) {
  basicType.value = 'edit';
  editKnowledge.value = knowledge;
  basicDialogVisible.value = true;
  selectedKnowledge.value = null; // 关闭详情页
}

// 基本信息操作成功
function handleBasicSuccess(knowledge: AiKnowledge) {
  basicDialogVisible.value = false;
  loadKnowledges();
  
  if (basicType.value === 'add') {
    ElMessage.success('知识库创建成功');
  } else {
    ElMessage.success('知识库更新成功');
    // 如果当前选中的知识库就是被编辑的，更新它
    if (selectedKnowledge.value?.id === knowledge.id) {
      selectedKnowledge.value = knowledge;
    }
  }
}

// 删除知识库
async function handleDelete(knowledge: AiKnowledge) {
  try {
    await ElMessageBox.confirm(
      `确定要删除知识库"${knowledge.title}"吗？此操作不可恢复。`,
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    );

    if (knowledge.id) {
      const result = await knowledgeApi.deleteKnowledge(knowledge.id);
      if (result.success) {
        ElMessage.success('删除成功');
        loadKnowledges();
      } else {
        ElMessage.error(result.message || '删除失败');
      }
    }
  } catch (error: any) {
    if (error !== 'cancel') {
      console.error('删除知识库失败:', error);
      ElMessage.error('删除失败');
    }
  }
}

// 分页改变
function handlePageChange(page: number) {
  pageParam.value.pageNumber = page;
  loadKnowledges();
}

function handleSizeChange(size: number) {
  pageParam.value.pageSize = size;
  pageParam.value.pageNumber = 1;
  loadKnowledges();
}

</script>

<style scoped lang="scss">
.knowledge-management-container {
  position: relative;
  // padding: 24px;
  background: #F5F5F7;
  height: calc(100vh - 40px - 44px - 24px - 110px);
}

.knowledge-list-container {
  background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 14px;
    padding: 24px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  width: 100%;

  .list-title {
    font-size: 18px;
    font-weight: 500;
    color: #101828;
    margin: 0;
    letter-spacing: -0.02em;
  }

  :deep(.el-button) {
    border-radius: 8px;
    font-weight: 500;
    letter-spacing: -0.01em;

    &.el-button--primary {
      background: #E7000B;
      border-color: #E7000B;

      &:hover {
        background: #C90009;
      }
    }
  }
}

.knowledge-list-content{
  width: 100%;
  overflow-y: auto;
  height: 100%;
  
  // 自定义滚动条样式
  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 3px;
  }

  &::-webkit-scrollbar-thumb {
    background: #D1D5DB;
    border-radius: 3px;
    
    &:hover {
      background: #9CA3AF;
    }
  }
}
.knowledge-grid {
  display: flex;
  width: 100%;

  gap: 20px;
  margin-top: 12px;

  .knowledge-card {
    width: 33%;
  }
}

:deep(.el-pagination) {
  display: flex;
  justify-content: flex-end;
  padding-top: 24px;
  border-top: 1px solid #F3F3F5;
  margin-top: auto; // 推到容器底部
  width: 100%;

  .el-pager li {
    &.is-active {
      background: #E7000B;
      color: #FFFFFF;
    }
  }

  .btn-prev,
  .btn-next {
    &:hover:not(.disabled) {
      color: #E7000B;
    }
  }
}

:deep(.el-empty) {
  padding: 60px 0;
}

:deep(.el-dialog) {
  border-radius: 12px;

  .el-dialog__header {
    border-bottom: 1px solid #F3F3F5;
    padding: 20px 24px;
  }

  .el-dialog__body {
    padding: 0;
  }
}

// 过渡动画
.slide-left-enter-active,
.slide-left-leave-active {
  transition: transform 0.3s ease-in-out, opacity 0.3s;
}

.slide-left-enter-from {
  transform: translateX(100%);
  opacity: 0;
}

.slide-left-leave-to {
  transform: translateX(100%);
  opacity: 0;
}

.slide-left-enter-to,
.slide-left-leave-from {
  transform: translateX(0);
  opacity: 1;
}
</style>