<template>
  <div class="recently-visited-container">
    <div class="recent-header">
      <div class="title-wrapper">
        <img src="/lishijilu.svg" alt="Logo" class="icon-svg" />
        <h3 class="recent-title">{{ $t("workspace.recentlyVisited") }}</h3>
      </div>
    </div>
    <div class="recent-content">
      <div v-if="recentDocuments.length === 0" class="empty-state">
        <img src="/wenjian.svg" class="empty-icon" alt="empty" />
        <p class="empty-text">暂无最近访问的文档</p>
      </div>
      <div v-else class="document-table">
        <table class="recent-table">
          <tbody>
            <tr
              v-for="doc in recentDocuments"
              :key="doc.fileId"
              class="document-row"
              @click="handleDocumentClick(doc)"
              @dblclick="handleDocumentClick(doc)"
              title="单击或双击打开文件"
            >
              <td class="file-name-cell">
                <div class="file-info">
                  <img
                    :src="getFileIcon(doc.extension)"
                    class="file-icon"
                    :alt="doc.extension || 'file'"
                  />
                  <span class="file-name">{{ doc.displayName }}</span>
                </div>
              </td>
              <td class="last-visited-cell">
                {{ formatDate(doc.lastAccessedAt) }}
              </td>
              <td class="action-cell">
                <img
                  src="/shanchu1.svg"
                  class="delete-icon"
                  @click.stop="deleteHistoryItem(doc.fileId)"
                  title="删除此记录"
                  alt="delete"
                />
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { useI18n } from "vue-i18n";

const router = useRouter();
const { t: _t } = useI18n();

interface RecentDocument {
  fileId: string;
  displayName: string;
  extension: string;
  lastAccessedAt: string;
  folderId?: string;
  folderPath?: string;
}

const recentDocuments = ref<RecentDocument[]>([]);

const loadRecentDocuments = async () => {
  try {
    // TODO: 替换为真实的 API 调用
    // const response = await fileHistoryApi.getList({
    //   page: 1,
    //   size: 10,
    //   sortBy: "last_accessed_at",
    //   sortOrder: "DESC",
    // });

    // 暂时使用空数组，等待后端 API 接入
    recentDocuments.value = [];

    // 如果需要，可以使用模拟数据进行测试：
    // recentDocuments.value = [
    //   {
    //     fileId: "1",
    //     displayName: "示例文档.md",
    //     extension: "md",
    //     lastAccessedAt: new Date().toISOString(),
    //   },
    // ];
  } catch (error) {
    console.error("加载最近文档失败:", error);
    recentDocuments.value = [];
  }
};

const deleteHistoryItem = async (fileId: string) => {
  try {
    // TODO: 替换为真实的 API 调用
    // const response = await fileHistoryApi.deleteHistory(fileId);

    // 从列表中移除该项
    recentDocuments.value = recentDocuments.value.filter(
      (doc) => doc.fileId !== fileId,
    );
    ElMessage.success("已删除该访问记录");
  } catch (error) {
    console.error("删除历史记录失败:", error);
    ElMessage.error("删除历史记录失败");
  }
};

const getFileIcon = (type: string): string => {
  const iconMap: Record<string, string> = {
    pdf: "/pdf_icon.svg",
    doc: "/word_icon.svg",
    docx: "/word_icon.svg",
    xls: "/excel_icon.svg",
    xlsx: "/excel_icon.svg",
    ppt: "/PPT_icon.svg",
    pptx: "/PPT_icon.svg",
    txt: "/TXT_icon.svg",
    md: "/md_icon.svg",
    jpg: "/jpg_icon.svg",
    jpeg: "/jpg_icon.svg",
    png: "/png_icon.svg",
    gif: "/gif_icon.svg",
  };
  return iconMap[type] || "/TXT_icon.svg";
};

const formatDate = (dateString: string): string => {
  try {
    const date = new Date(dateString);
    const now = new Date();
    const diffTime = Math.abs(now.getTime() - date.getTime());
    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));

    // 格式化时间，显示时分秒
    const timeStr = date.toLocaleTimeString("zh-CN", {
      hour: "2-digit",
      minute: "2-digit",
      second: "2-digit",
      hour12: false,
    });

    if (diffDays === 1) {
      return `今天 ${timeStr}`;
    } else if (diffDays === 2) {
      return `昨天 ${timeStr}`;
    } else if (diffDays <= 7) {
      return `${diffDays - 1}天前 ${timeStr}`;
    } else {
      return `${date.toLocaleDateString()} ${timeStr}`;
    }
  } catch (error) {
    return dateString;
  }
};

const handleDocumentClick = (document: RecentDocument) => {
  // 跳转到工作台编辑文件
  router.push({
    name: "Workspace",
    query: {
      fileId: document.fileId,
      fileName: document.displayName,
      extension: document.extension,
      folderId: document.folderId,
      folderPath: document.folderPath,
    },
  });
};

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

<style scoped>
.recently-visited-container {
  width: 100%;
  max-width: 800px;
}

.recent-header {
  margin-bottom: 16px;
}

.title-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
.icon-svg {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
}

.history-icon {
  font-size: 18px;
  color: var(--color-text, #eee);
}

.recent-title {
  font-size: 12px;
  color: var(--color-text-secondary, #999);
  margin: 0;
}

.recent-content {
  background: var(--color-card, #232323);
  border-radius: 12px;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px;
  color: var(--color-text-secondary, #999);
}

.empty-icon {
  width: 30px;
  height: 30px;
  object-fit: contain;
  flex-shrink: 0;
  margin-bottom: 16px;
  object-fit: contain;
}

.empty-text {
  font-size: 14px;
  margin: 0;
  text-align: center;
}

.document-table {
  width: 100%;
  max-height: 300px; /* 设置最大高度 */
  overflow-y: auto; /* 添加垂直滚动条 */
}

.recent-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

.recent-table td {
  padding: 6px 16px 10px 16px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  text-align: center;
}

/* 最后一行的td不显示底部边框 */
.recent-table tr:last-child td {
  border-bottom: 0 solid var(--color-border);
}

.document-row {
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.document-row:hover {
  background: var(--color-hover, #37373d);
  transform: translateX(4px);
}

.document-row:active {
  transform: translateX(2px);
  background: var(--color-hover-bar);
}

.file-name-cell {
  text-align: left !important;
}

.file-info {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.file-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
  vertical-align: middle;
}

.file-name {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text, #eee);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.last-visited-cell {
  font-size: 13px;
  color: var(--color-text-secondary, #999);
  text-align: center !important;
  vertical-align: middle;
}

.action-cell {
  width: 40px;
  text-align: center !important;
  vertical-align: middle;
  padding: 0 5px;
}

.delete-icon {
  width: 18px;
  height: 18px;
  cursor: pointer;
  opacity: 0;
  transition:
    opacity 0.2s,
    filter 0.2s,
    transform 0.2s;
  padding: 5px;
  object-fit: contain;
  vertical-align: middle;
  display: inline-block;
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%)
    hue-rotate(93deg) brightness(50%) contrast(107%);
}

.document-row:hover .delete-icon {
  opacity: 1;
}

.delete-icon:hover {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%)
    hue-rotate(93deg) brightness(90%) contrast(107%);
  transform: scale(1.1);
}

/* 自定义滚动条样式 */
.document-table::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.document-table::-webkit-scrollbar-track {
  background: transparent;
}

.document-table::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 2px;
}

.document-table::-webkit-scrollbar-thumb:hover {
  background: var(--color-secondary);
}

/* 水平滚动条默认隐藏 */
.document-table::-webkit-scrollbar:horizontal {
  height: 0;
}

/* hover 时也保持水平滚动条隐藏 */
.document-table:hover::-webkit-scrollbar:horizontal {
  height: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .recently-visited-container {
    max-width: 100%;
  }

  .recent-content {
    padding: 12px;
  }

  .recent-table th,
  .recent-table td {
    padding: 10px 12px;
  }

  .file-icon {
    width: 14px;
    height: 14px;
  }

  .file-name {
    font-size: 13px;
  }

  .last-visited-cell {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .recent-content {
    padding: 10px;
  }

  .recent-table th,
  .recent-table td {
    padding: 8px 10px;
  }

  .file-icon {
    width: 12px;
    height: 12px;
  }

  .file-name {
    font-size: 12px;
  }

  .last-visited-cell {
    font-size: 11px;
  }
}
</style>