<template>
  <div class="recycle-bin-list-container">
    <!-- 头部标题和清空回收站按钮 -->
    <div class="recycle-bin-header">
      <div class="header-left">
        <h2>{{ $t("KnowledgeBase.recycleBinTitle") }}</h2>
      </div>
      <div class="header-right">
        <el-button
          type="primary"
          @click="confirmEmptyRecycleBin"
          :disabled="loading || totalItems === 0"
          style="background-color: #206ef3; border-color: #206ef3"
        >
          {{ $t("KnowledgeBase.emptyRecycleBin") }}
        </el-button>
      </div>
    </div>

    <!-- 表格 -->
    <div class="recycle-bin-table-wrapper">
      <el-table
        ref="recycleBinTable"
        v-loading="loading"
        :data="recycleBinItems"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        :header-cell-style="{
          backgroundColor: '#232324',
          color: 'var(--color-secondary)',
          fontWeight: '600',
          fontSize: '13px',
          padding: '12px 8px',
        }"
        :row-class-name="rowClassName"
      >
        <el-table-column
          type="selection"
          width="40"
          align="center"
        ></el-table-column>
        <el-table-column
          :label="$t('KnowledgeBase.fileName')"
          prop="itemName"
          min-width="300"
          align="left"
        >
          <template #default="scope">
            <div class="file-name-cell">
              <el-icon
                v-if="scope.row.itemType === 'folder'"
                class="file-icon-folder"
                ><Folder
              /></el-icon>
              <img
                v-else
                :src="getFileIcon(scope.row.itemName)"
                class="file-icon"
                :alt="scope.row.itemName"
              />
              <span class="file-name-text">{{ scope.row.itemName }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          :label="$t('KnowledgeBase.deletedAt')"
          prop="deletedAt"
          width="180"
          align="center"
        >
          <template #default="scope">
            {{ formatDateTime(scope.row.deletedAt) }}
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('KnowledgeBase.fileSize')"
          prop="size"
          width="120"
          align="center"
        >
          <template #default="scope">
            {{ formatFileSize(scope.row.size) }}
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 底部工具栏 -->
    <div class="recycle-bin-footer" v-show="selectedItems.length">
      <div class="selection-info">
        <span>{{
          $t("KnowledgeBase.selectedItems", { count: selectedItems.length })
        }}</span>
      </div>
      <div class="footer-actions">
        <el-button
          type="primary"
          size="default"
          plain
          @click="handleRestore(selectedItems.map((item) => item.id))"
          :disabled="selectedItems.length === 0"
        >
          {{ $t("KnowledgeBase.restore") }}
        </el-button>
        <el-button
          type="danger"
          size="default"
          plain
          @click="handlePermanentDelete(selectedItems.map((item) => item.id))"
          :disabled="selectedItems.length === 0"
        >
          {{ $t("KnowledgeBase.permanentDelete") }}
        </el-button>
        <el-button type="primary" size="default" @click="clearSelection">
          {{ $t("KnowledgeBase.cancelSelection") }}
        </el-button>
      </div>
    </div>

    <!-- 加载更多提示 -->
    <div v-if="loading" class="loading-more">
      <el-icon class="is-loading"><Loading /></el-icon>
      <span>{{ $t("loading") }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useI18n } from "vue-i18n";
import { ElMessage, ElMessageBox, ElTable } from "element-plus";
import { Folder, Loading } from "@element-plus/icons-vue";
import { recycleBinApi } from "@/api/recycleBin";
import { getFileTree } from "@/api/files"; // 改为使用 getFileTree

interface RecycleBinItem {
  id: string | number;
  itemName: string;
  itemType: "folder" | "file";
  deletedAt: string;
  size: number;
  parentId?: string | number;
  originalPath?: string;
  [key: string]: any;
}

interface AllFilesMap {
  [key: string]: {
    id: string | number;
    name: string;
    parentId?: string | number;
  };
}

const { t, locale } = useI18n();
const loading = ref(false);
const recycleBinItems = ref<RecycleBinItem[]>([]);
const selectedItems = ref<RecycleBinItem[]>([]);
const totalItems = ref(0);
const recycleBinTable = ref<InstanceType<typeof ElTable>>();

const emit = defineEmits<{
  (e: "recycle-bin-emptied"): void;
  (e: "items-restored"): void;
  (e: "items-deleted"): void;
}>();

// 获取文件图标
const getFileIcon = (fileName: string): string => {
  const ext = fileName.split(".").pop()?.toLowerCase();
  const iconMap: Record<string, string> = {
    doc: "/word_icon.svg",
    docx: "/word_icon.svg",
    xls: "/excel_icon.svg",
    xlsx: "/excel_icon.svg",
    ppt: "/PPT_icon.svg",
    pptx: "/PPT_icon.svg",
    pdf: "/pdf_icon.svg",
    md: "/md_icon.svg",
    txt: "/TXT_icon.svg",
    // 图片文件使用专门的图标
    jpg: "/jpg_icon.svg",
    jpeg: "/jpg_icon.svg",
    png: "/png_icon.svg",
    gif: "/gif_icon.svg",
    // 其他图片格式
    webp: "/jpg_icon.svg", // 使用 jpg 图标作为默认图片图标
    svg: "/jpg_icon.svg",
    bmp: "/jpg_icon.svg",
    ico: "/jpg_icon.svg",
    tiff: "/jpg_icon.svg",
    tif: "/jpg_icon.svg",
    // 音频文件
    mp3: "/mp3.svg",
    wav: "/mp3.svg",
    ogg: "/mp3.svg",
    m4a: "/mp3.svg",
    aac: "/mp3.svg",
    flac: "/mp3.svg",
    wma: "/mp3.svg",
    // 视频文件
    mp4: "/mp4.svg",
    avi: "/mp4.svg",
    mkv: "/mp4.svg",
    mov: "/mp4.svg",
    wmv: "/mp4.svg",
    flv: "/mp4.svg",
    webm: "/mp4.svg",
    m4v: "/mp4.svg",
  };
  return iconMap[ext || ""] || "/wenjian.svg";
};

// 格式化文件大小
const formatFileSize = (size: number): string => {
  if (!size) return "0 B";
  const units = ["B", "KB", "MB", "GB", "TB"];
  let index = 0;
  let fileSize = size;
  while (fileSize >= 1024 && index < units.length - 1) {
    fileSize /= 1024;
    index++;
  }
  return `${fileSize.toFixed(2)} ${units[index]}`;
};

// 格式化日期时间
const formatDateTime = (dateTime: string): string => {
  if (!dateTime) return "";
  try {
    const now = new Date();
    const date = new Date(dateTime);

    // 检查日期是否有效
    if (isNaN(date.getTime())) {
      return "";
    }

    // 判断是否是今天、昨天、前天
    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
    const yesterday = new Date(today);
    yesterday.setDate(yesterday.getDate() - 1);
    const dayBeforeYesterday = new Date(today);
    dayBeforeYesterday.setDate(dayBeforeYesterday.getDate() - 2);

    const dateOnly = new Date(
      date.getFullYear(),
      date.getMonth(),
      date.getDate(),
    );

    // 格式化时间部分
    const hours = date.getHours().toString().padStart(2, "0");
    const minutes = date.getMinutes().toString().padStart(2, "0");
    const seconds = date.getSeconds().toString().padStart(2, "0");
    const timeStr = `${hours}:${minutes}:${seconds}`;

    // 格式化日期部分
    if (dateOnly.getTime() === today.getTime()) {
      return locale.value === "zh-CN" ? `今天 ${timeStr}` : `Today ${timeStr}`;
    } else if (dateOnly.getTime() === yesterday.getTime()) {
      return locale.value === "zh-CN"
        ? `昨天 ${timeStr}`
        : `Yesterday ${timeStr}`;
    } else if (dateOnly.getTime() === dayBeforeYesterday.getTime()) {
      return locale.value === "zh-CN"
        ? `前天 ${timeStr}`
        : `Day before yesterday ${timeStr}`;
    } else {
      // 其他日期使用完整格式 YY-MM-DD HH:MM:SS
      const year = date.getFullYear().toString().substring(2); // 取年份后两位
      const month = (date.getMonth() + 1).toString().padStart(2, "0");
      const day = date.getDate().toString().padStart(2, "0");
      return `${year}-${month}-${day} ${timeStr}`;
    }
  } catch (error) {
    console.error("日期格式化失败:", error, dateTime);
    return "";
  }
};

// 表格行类名
const rowClassName = () => {
  return "row-hover";
};

// 获取回收站列表
const fetchRecycleBinList = async () => {
  loading.value = true;
  try {
    // 1. 并发获取回收站列表和全量文件夹树（用于路径解析）
    const [trashResponse, allFilesResponse] = await Promise.all([
      recycleBinApi.getList({
        page: 1,
        pageSize: 1000,
        sortBy: "deletedAt",
        sortOrder: "desc",
      }),
      // 使用 tree 接口获取全量结构，不再受 search 关键词限制
      getFileTree({ containFiles: false }).catch((err) => {
        console.warn("全量文件夹树获取失败，路径解析将退化:", err);
        return { data: [] };
      }),
    ]);

    if (trashResponse.code === 200) {
      // 2. 建立全量文件夹映射 Map
      const fileMap: AllFilesMap = {};
      
      // 递归打平树结构
      const flatten = (nodes: any[]) => {
        if (!Array.isArray(nodes)) return;
        nodes.forEach((node) => {
          if (node && node.id !== undefined) {
            fileMap[String(node.id)] = {
              id: node.id,
              name: node.name || node.folderName || "",
              parentId: node.parentId,
            };
            if (node.children) flatten(node.children);
          }
        });
      };

      // 提取树数据，处理 axios 响应结构
      const treeBody = (allFilesResponse as any).data;
      const treeData = treeBody && treeBody.data ? treeBody.data : treeBody;
      flatten(Array.isArray(treeData) ? treeData : [treeData]);

      // 3. 路径解析函数：递归查找父目录
      const resolvePath = (parentId?: string | number): string => {
        if (!parentId || parentId === -1 || parentId === "0" || parentId === 0) {
          return "/我的文档";
        }
        
        const pathParts: string[] = [];
        let currentPid: string | number | undefined = parentId;
        let depth = 0;

        while (currentPid && depth < 10) {
          const parent = fileMap[String(currentPid)];
          if (parent) {
            pathParts.unshift(parent.name);
            currentPid = parent.parentId;
            // 如果 parentId 是 -1 或 0，说明已经到达逻辑根目录
            if (!currentPid || currentPid === -1 || currentPid === "0" || currentPid === 0) break;
          } else {
            pathParts.unshift("..."); 
            break;
          }
          depth++;
        }
        
        return "/我的文档/" + pathParts.join("/");
      };

      // 4. 处理回收站项目并解析路径
      const items = (trashResponse.data.items || []).map((item: any) => {
        // 如果后端没返回 originalPath，且不是 "/"，则通过父节点计算
        if (!item.originalPath || item.originalPath === "/") {
          item.originalPath = resolvePath(item.parentId);
        }
        return item;
      });

      // 按删除时间降序排序
      items.sort((a: RecycleBinItem, b: RecycleBinItem) => {
        const dateA = new Date(a.deletedAt || 0).getTime();
        const dateB = new Date(b.deletedAt || 0).getTime();
        return dateB - dateA;
      });

      recycleBinItems.value = items;
      totalItems.value = trashResponse.data.total;
    } else {
      ElMessage.error(
        trashResponse.message || t("KnowledgeBase.loadRecycleBinFail"),
      );
    }
  } catch (error) {
    console.error("获取回收站列表失败:", error);
    ElMessage.error(t("KnowledgeBase.loadRecycleBinFail"));
  } finally {
    loading.value = false;
  }
};

// 处理选择变化
const handleSelectionChange = (selection: RecycleBinItem[]) => {
  selectedItems.value = selection;
};

// 清除选择
const clearSelection = () => {
  recycleBinTable.value?.clearSelection();
  selectedItems.value = [];
};

// 确认清空回收站
const confirmEmptyRecycleBin = () => {
  ElMessageBox.confirm(
    t("KnowledgeBase.confirmEmptyRecycleBin"),
    t("common.warning"),
    {
      confirmButtonText: t("common.confirm"),
      cancelButtonText: t("common.cancel"),
      type: "warning",
    },
  )
    .then(() => {
      emptyRecycleBin();
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: t("KnowledgeBase.operationCanceled"),
      });
    });
};

// 清空回收站
const emptyRecycleBin = async () => {
  loading.value = true;
  try {
    const response = await recycleBinApi.clearAll();
    if (response.code === 200) {
      ElMessage.success(t("KnowledgeBase.emptyRecycleBinSuccess"));
      fetchRecycleBinList();
      emit("recycle-bin-emptied");
    } else {
      ElMessage.error(
        response.message || t("KnowledgeBase.emptyRecycleBinFail"),
      );
    }
  } catch (error) {
    console.error("清空回收站失败:", error);
    ElMessage.error(t("KnowledgeBase.emptyRecycleBinFail"));
  } finally {
    loading.value = false;
  }
};

// 处理还原
const handleRestore = (ids: (string | number)[]) => {
  if (!ids || ids.length === 0) return;

  const message =
    ids.length === 1
      ? t("KnowledgeBase.confirmRestore", { count: 1 })
      : t("KnowledgeBase.confirmRestore", { count: ids.length });

  ElMessageBox.confirm(message, t("common.confirm"), {
    confirmButtonText: t("common.confirm"),
    cancelButtonText: t("common.cancel"),
    type: "info",
  })
    .then(() => {
      restoreItems(ids);
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: t("KnowledgeBase.operationCanceled"),
      });
    });
};

// 还原项目
const restoreItems = async (ids: (string | number)[]) => {
  if (!ids || ids.length === 0) return;
  loading.value = true;
  try {
    // 1. 获取当前选中项的详细信息（增加类型转换以确保匹配成功）
    const itemsToRestore = recycleBinItems.value.filter((item) =>
      ids.map(id => String(id)).includes(String(item.id))
    );

    // 2. 调用 API 执行还原
    const response = await recycleBinApi.restoreItems({
      ids,
      conflictStrategy: "rename",
    });

    if (response.code === 200) {
      // 3. 成功后的提示逻辑
      if (ids.length === 1 && itemsToRestore.length > 0) {
        const path = itemsToRestore[0].originalPath || "/";

        ElMessage.success(
          `${t("KnowledgeBase.restoreSuccess")}，已恢复至：${path}`,
        );
      } else if (ids.length > 1) {
        // 多项还原时，根据路径数量给出不同提示
        const uniquePaths = Array.from(
          new Set(itemsToRestore.map((item) => item.originalPath || "/")),
        );

        if (uniquePaths.length === 1) {
          ElMessage.success(
            `${t("KnowledgeBase.restoreSuccess")}，已全部恢复至：${uniquePaths[0]}`,
          );
        } else {
          // 跨位置：显示详细列表
          const maxDisplay = 5;
          const details = itemsToRestore
            .slice(0, maxDisplay)
            .map(
              (item) =>
                `<div style="font-size: 12px; margin-top: 4px; opacity: 0.9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 350px;">• ${item.itemName} → ${item.originalPath || "/"}</div>`,
            )
            .join("");

          const moreCount = itemsToRestore.length - maxDisplay;
          const footer =
            moreCount > 0
              ? `<div style="font-size: 12px; margin-top: 4px; font-style: italic; opacity: 0.8;">... 以及另外 ${moreCount} 个项目</div>`
              : "";

          ElMessage({
            type: "success",
            dangerouslyUseHTMLString: true,
            message: `
              <div style="text-align: left;">
                <div style="font-weight: bold; margin-bottom: 4px;">${t("KnowledgeBase.restoreSuccess")}</div>
                ${details}
                ${footer}
              </div>
            `,
            duration: 5000, // 增加显示时间，方便查看
          });
        }
      } else {
        ElMessage.success(t("KnowledgeBase.restoreSuccess"));
      }

      // 4. 刷新列表并同步状态
      fetchRecycleBinList();
      emit("items-restored");
      clearSelection();
    } else {
      ElMessage.error(response.message || t("KnowledgeBase.restoreFail"));
    }
  } catch (error) {
    console.error("还原操作异常:", error);
    ElMessage.error(t("KnowledgeBase.restoreFail"));
  } finally {
    loading.value = false;
  }
};

// 处理永久删除
const handlePermanentDelete = (ids: (string | number)[]) => {
  if (!ids || ids.length === 0) return;

  const message =
    ids.length === 1
      ? t("KnowledgeBase.confirmPermanentDelete", { count: 1 })
      : t("KnowledgeBase.confirmPermanentDelete", {
          count: ids.length,
        });

  ElMessageBox.confirm(message, t("common.warning"), {
    confirmButtonText: t("common.confirm"),
    cancelButtonText: t("common.cancel"),
    type: "warning",
  })
    .then(() => {
      permanentDeleteItems(ids);
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: t("KnowledgeBase.operationCanceled"),
      });
    });
};

// 永久删除项目
const permanentDeleteItems = async (ids: (string | number)[]) => {
  loading.value = true;
  try {
    const response = await recycleBinApi.deleteItems(ids);

    if (response.code === 200) {
      ElMessage.success(t("KnowledgeBase.permanentDeleteSuccess"));
      // 刷新列表
      fetchRecycleBinList();
      // 清除选择
      clearSelection();
      // 通知父组件删除了项目
      emit("items-deleted");
    } else {
      ElMessage.error(
        response.message || t("KnowledgeBase.permanentDeleteFail"),
      );
    }
  } catch (error) {
    console.error("永久删除失败:", error);
    ElMessage.error(t("KnowledgeBase.permanentDeleteFail"));
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  fetchRecycleBinList();
});
</script>

<style scoped lang="scss">
.recycle-bin-list-container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-text);
  position: relative;
  overflow: hidden;
}

.recycle-bin-header {
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--color-title);
  }
}

.recycle-bin-table-wrapper {
  flex: 1;
  padding: 0;
  overflow: auto;
  background-color: var(--color-bg);

  /* 自定义滚动条样式 */
  &::-webkit-scrollbar {
    width: 3px;
  }

  &::-webkit-scrollbar-thumb {
    background: var(--color-bg);
    border-radius: 1.5px;
    min-height: 150px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb:hover {
    background: var(--color-bg);
  }
}

/* 表格样式 */
.recycle-bin-table-wrapper :deep(.el-table) {
  background: var(--color-bg) !important;
  border: none !important;
  color: var(--color-text);
}

.recycle-bin-table-wrapper :deep(.el-table th) {
  background: var(--color-bg) !important;
  color: var(--color-text) !important;
  border-bottom: 1px solid var(--color-border) !important;
  font-weight: 600;
  font-size: 13px;
  padding: 12px 8px;
}

.recycle-bin-table-wrapper :deep(.el-table__body tr) {
  background: var(--color-bg) !important;
  transition: background-color 0.2s ease;

  &:hover {
    background: var(--color-hover) !important;

    td {
      background: var(--color-hover) !important;
    }
  }
}

.recycle-bin-table-wrapper :deep(.el-table td) {
  background: var(--color-bg) !important;
  color: var(--color-text) !important;
  border-bottom: 1px solid var(--color-border) !important;
  padding: 12px 8px;
}

/* 调整选择框列和文件名列之间的间距 */
.recycle-bin-table-wrapper :deep(.el-table__selection .cell) {
  padding-right: 0 !important;
}

.recycle-bin-table-wrapper :deep(.el-table__body-wrapper td:nth-child(3)) {
  padding-left: 8px !important;
}

.recycle-bin-table-wrapper :deep(.el-table__body tr td) {
  border-bottom: 1px solid var(--color-border) !important;
}

.recycle-bin-table-wrapper :deep(.el-table__body tr:hover td) {
  border-bottom: 1px solid var(--color-hover) !important;
}

.recycle-bin-table-wrapper :deep(.el-table::before) {
  display: none;
}

/* 确保选择框正确显示，移除文本截断 */
.recycle-bin-table-wrapper :deep(.el-table__selection) {
  width: 40px !important;
  min-width: 40px !important;
}

.recycle-bin-table-wrapper :deep(.el-table__selection .cell) {
  padding: 0 !important;
  text-align: center !important;
  overflow: visible !important;
}

.recycle-bin-table-wrapper :deep(.el-table__selection .el-checkbox) {
  margin: 0 !important;
}

/* 覆盖 Element UI 复选框样式 - 方形 */
.recycle-bin-table-wrapper
  :deep(.el-table__selection .el-checkbox__input .el-checkbox__inner) {
  border-radius: 4px !important;
  width: 16px !important;
  height: 16px !important;
}

.recycle-bin-table-wrapper
  :deep(
    .el-table__selection .el-checkbox__input.is-checked .el-checkbox__inner
  ) {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

.recycle-bin-table-wrapper
  :deep(
    .el-table__selection
      .el-checkbox__input.is-checked
      .el-checkbox__inner::after
  ) {
  border-color: #fff !important;
  width: 4px !important;
  height: 8px !important;
  left: 5px !important;
  top: 2px !important;
}

/* 行样式 */
:deep(.row-hover:hover > td) {
  background: var(--color-hover) !important;
}

/* 表格行选中状态 */
.recycle-bin-table-wrapper :deep(.el-table__row.current-row) {
  background: #343746 !important;

  > td {
    background: #343746 !important;
  }
}

.recycle-bin-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-top: 1px solid var(--color-border);
  background: var(--color-card);
}

.selection-info {
  font-weight: bold;
}

.footer-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.file-name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.file-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}

.file-icon-folder {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  font-size: 20px;
}

.file-name-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 确保文件名列的表头和内容左对齐 */
.recycle-bin-table-wrapper :deep(.el-table__header-wrapper th:nth-child(3)) {
  text-align: left !important;
}

.loading-more {
  text-align: center;
  margin-top: 10px;
  padding: 10px;
}
</style>