<template>
  <el-card class="box-card">
    <div class="header-bar">
      <h2>文件管理</h2>
      <!-- <el-button type="primary" @click="showProgramDialog = true">
        <el-icon><Plus /></el-icon>
        添加程序
      </el-button> -->
    </div>

    <div v-if="loading" class="loading-state">
      <div class="loading-spinner"></div>
      <p>正在加载程序数据...</p>
    </div>

    <!-- 错误状态 -->
    <div v-else-if="error" class="error-state">
      <el-alert title="加载失败" :message="error" type="error" show-icon />
      <el-button type="primary" @click="fetchPrograms">重试</el-button>
    </div>

    <div v-else class="files-module fancy-bg">
      <!-- 顶部功能卡片区域 -->
      <div class="function-cards">
        <el-row :gutter="24">
          <el-col :xs="24" :sm="12" :lg="8">
            <el-card
              class="function-card card-gradient"
              shadow="hover"
              @click="$router.push('/files/list')"
            >
              <div class="card-content">
                <div class="card-icon">
                  <i class="fa-solid fa-folder-open"></i>
                </div>
                <div class="card-info">
                  <span class="card-title">文件列表</span>
                  <span class="card-desc">查看和管理所有文件</span>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="8">
            <el-card
              class="function-card card-gradient"
              shadow="hover"
              @click="$router.push('/files/upload')"
            >
              <div class="card-content">
                <div class="card-icon upload">
                  <i class="fa-solid fa-cloud-arrow-up"></i>
                </div>
                <div class="card-info">
                  <span class="card-title">批量上传</span>
                  <span class="card-desc">批量上传文件至系统</span>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="8">
            <el-card
              class="function-card card-gradient"
              shadow="hover"
              @click="$router.push('/files/categories')"
            >
              <div class="card-content">
                <div class="card-icon tags">
                  <i class="fa-solid fa-layer-group"></i>
                </div>
                <div class="card-info">
                  <span class="card-title">分类管理</span>
                  <span class="card-desc">管理分类/标签</span>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 搜索和筛选 -->
      <div class="search-filter stylish-panel">
        <el-input
          v-model="searchKeyword"
          placeholder="搜索文件名、原始文件名或分类"
          clearable
          @input="handleSearch"
          size="large"
          class="input-search"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>

        <el-select
          v-model="filterCategory"
          placeholder="全部分类"
          clearable
          @change="handleFilter"
          size="large"
          class="select-category"
        >
          <el-option
            v-for="category in categories"
            :key="category"
            :label="category"
            :value="category"
          />
        </el-select>

        <el-switch
          v-model="showMyFiles"
          class="switch-mine"
          active-text="仅看我的文件"
          inactive-text="全部文件"
          @change="handleFilter"
        />
      </div>

      <!-- 文件数据列表 -->
      <div class="file-list stylish-panel">
        <el-table
          :data="filteredFiles"
          v-loading="loading"
          highlight-current-row
          border
          :default-sort="{ prop: 'upload_time', order: 'descending' }"
        >
          <el-table-column prop="id" label="ID" width="80" align="center" />
          <el-table-column prop="file_name" label="文件名" min-width="200">
            <template #default="{ row }">
              <div class="file-name">
                <el-icon class="icon-doc"><Document /></el-icon>
                <span>{{ row.file_name }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="original_name"
            label="原始文件名"
            min-width="180"
          />
          <el-table-column prop="category" label="分类" width="100">
            <template #default="{ row }">
              <el-tag effect="dark" type="success">{{ row.category }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="file_size" label="大小" width="100">
            <template #default="{ row }">
              <el-tag effect="plain">{{
                formatFileSize(row.file_size)
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="file_type" label="类型" width="90" />
          <el-table-column prop="upload_by" label="上传人" width="120" />
          <el-table-column
            prop="upload_time"
            label="上传时间"
            width="170"
            sortable
          >
            <template #default="{ row }">
              <span style="color: #8ea1d6">{{
                formatDate(row.upload_time)
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="170"
            fixed="right"
            align="center"
          >
            <template #default="{ row }">
              <el-tooltip content="查看详情">
                <el-button
                  type="primary"
                  circle
                  plain
                  size="small"
                  @click="viewFile(row)"
                >
                  <el-icon><View /></el-icon>
                </el-button>
              </el-tooltip>
              <el-tooltip content="删除">
                <el-button
                  circle
                  type="danger"
                  plain
                  size="small"
                  @click="deleteFile(row)"
                >
                  <el-icon><Delete /></el-icon>
                </el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页区域 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="totalFiles"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>

      <!-- 上传文件对话框 -->
      <el-dialog
        v-model="showUploadDialog"
        title="上传文件"
        width="500px"
        :before-close="handleUploadClose"
        class="upload-dialog"
      >
        <el-upload
          ref="uploadRef"
          class="upload-demo"
          drag
          :action="uploadUrl"
          :headers="uploadHeaders"
          :data="{ category: uploadForm.category }"
          :on-success="handleUploadSuccess"
          :on-error="handleUploadError"
          :before-upload="beforeUpload"
          :show-file-list="false"
          multiple
        >
          <el-icon
            class="el-icon--upload"
            style="font-size: 44px; color: #36b2fa"
            ><upload-filled
          /></el-icon>
          <div class="el-upload__text">
            将文件拖到此处，或<em style="color: #409eff">点击上传</em>
          </div>
          <template #tip>
            <div class="el-upload__tip">
              支持单个或批量上传，单文件大小不超过
              <span style="color: #f56c6c; font-weight: 600">10MB</span>
            </div>
          </template>
        </el-upload>
        <div class="upload-form upform-padding">
          <el-form :model="uploadForm" label-width="80px">
            <el-form-item label="分类">
              <el-select
                v-model="uploadForm.category"
                placeholder="请选择分类"
                style="width: 100%"
              >
                <el-option label="文档" value="文档" />
                <el-option label="图片" value="图片" />
                <el-option label="视频" value="视频" />
                <el-option label="音频" value="音频" />
                <el-option label="其他" value="其他" />
              </el-select>
            </el-form-item>
            <el-form-item label="是否公开">
              <el-switch
                v-model="uploadForm.isPublic"
                active-color="#409EFF"
                inactive-color="#bfbfbf"
              />
            </el-form-item>
          </el-form>
        </div>

        <template #footer>
          <span class="dialog-footer">
            <el-button @click="showUploadDialog = false">取 消</el-button>
            <el-button type="primary" @click="submitUpload">上传</el-button>
          </span>
        </template>
      </el-dialog>

      <!-- 文件详情对话框 -->
      <el-dialog
        v-model="showFileDetail"
        :title="currentFile ? currentFile.original_name : '文件详情'"
        width="650px"
        class="file-detail-dialog"
      >
        <div v-if="currentFile" class="file-detail">
          <el-descriptions :column="2" border size="large">
            <el-descriptions-item label="文件ID">
              <el-tag>{{ currentFile.id }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="文件名">
              <span class="detail-primary">{{ currentFile.file_name }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="原始文件名">{{
              currentFile.original_name
            }}</el-descriptions-item>
            <el-descriptions-item label="文件大小">
              <el-tag type="info">{{
                formatFileSize(currentFile.file_size)
              }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="文件类型">{{
              currentFile.file_type
            }}</el-descriptions-item>
            <el-descriptions-item label="文件扩展名">{{
              currentFile.file_ext
            }}</el-descriptions-item>
            <el-descriptions-item label="分类">
              <el-tag type="success" effect="plain">{{
                currentFile.category
              }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="上传人">
              <el-tag>{{ currentFile.upload_by }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="上传时间">{{
              formatDate(currentFile.upload_time)
            }}</el-descriptions-item>
            <el-descriptions-item label="状态">
              <el-tag
                :type="currentFile.status === 1 ? 'success' : 'danger'"
                effect="dark"
              >
                {{ currentFile.status === 1 ? "正常" : "已删除" }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="是否公开">
              <el-tag
                :type="currentFile.is_public === 1 ? 'success' : 'info'"
                effect="plain"
              >
                {{ currentFile.is_public === 1 ? "公开" : "私有" }}
              </el-tag>
            </el-descriptions-item>
          </el-descriptions>

          <div class="detail-btns">
            <el-button type="primary" @click="downloadFile(currentFile)">
              <el-icon><Download /></el-icon> 下载文件
            </el-button>
            <el-button @click="copyFileUrl(currentFile)">
              <el-icon><Link /></el-icon> 复制链接
            </el-button>
          </div>
        </div>

        <template #footer>
          <span class="dialog-footer">
            <el-button @click="showFileDetail = false">关闭</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import {
  Download,
  Delete,
  Search,
  Document,
  View,
  Link,
  UploadFilled,
} from "@element-plus/icons-vue";

const router = useRouter();

const recentFiles = ref([
  {
    id: 1,
    name: "项目报告.pdf",
    size: 2456789,
    type: "PDF",
    uploadTime: "2024-01-15 10:30:25",
  },
  {
    id: 2,
    name: "数据统计.xlsx",
    size: 123456,
    type: "Excel",
    uploadTime: "2024-01-14 14:20:10",
  },
  {
    id: 3,
    name: "产品图片.jpg",
    size: 345678,
    type: "Image",
    uploadTime: "2024-01-13 09:15:45",
  },
]);

const getFileIcon = (type: string) => {
  const iconMap: Record<string, string> = {
    PDF: "fa-solid fa-file-pdf",
    Excel: "fa-solid fa-file-excel",
    Word: "fa-solid fa-file-word",
    Image: "fa-solid fa-file-image",
    Video: "fa-solid fa-file-video",
    Audio: "fa-solid fa-file-audio",
    Archive: "fa-solid fa-file-archive",
  };
  return iconMap[type] || "fa-solid fa-file";
};

const formatFileSize = (bytes: number) => {
  if (bytes === 0) return "0 B";
  const k = 1024;
  const sizes = ["B", "KB", "MB", "GB"];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
};

// mock 下列数据和函数，由于原代码没提供全部上下文
const categories = ref(["文档", "图片", "视频", "音频", "其他"]);
const filteredFiles = ref([]);
const loading = ref(false);
const searchKeyword = ref("");
const filterCategory = ref("");
const showMyFiles = ref(false);
const pageSize = ref(10);
const currentPage = ref(1);
const totalFiles = ref(0);
const showUploadDialog = ref(false);

// 上传配置
const uploadUrl = computed(() => {
  const baseUrl = import.meta.env.VITE_API_BASE_URL ;
  return `${baseUrl}/api/files`;
});

const uploadHeaders = computed(() => {
  const token = localStorage.getItem('token');
  return {
    'Authorization': `Bearer ${token}`
  };
});

const uploadForm = ref({
  category: "",
  isPublic: false,
});
const showFileDetail = ref(false);
const currentFile = ref<any>(null);

const handleSearch = () => {};
const handleFilter = () => {};
const handleSizeChange = () => {};
const handleCurrentChange = () => {};
const handleUploadClose = () => {
  showUploadDialog.value = false;
  uploadForm.value.category = "";
  uploadForm.value.isPublic = false;
};

const handleUploadSuccess = (response: any, file: any) => {
  ElMessage.success('文件上传成功！');
  // 关闭对话框
  showUploadDialog.value = false;
  // 可以刷新文件列表
  // loadFiles();
};

const handleUploadError = (error: Error, file: any) => {
  ElMessage.error('文件上传失败：' + error.message);
};

const beforeUpload = (file: File) => {
  const maxSize = 10 * 1024 * 1024; // 10MB
  if (file.size > maxSize) {
    ElMessage.error('文件大小不能超过 10MB！');
    return false;
  }
  return true;
};

const submitUpload = () => {
  // Element Plus 的 el-upload 组件会自动处理上传
  ElMessage.info('开始上传文件...');
};
const viewFile = (row: any) => {};
const formatDate = (val: string | number) => val;
const copyFileUrl = (file: any) => {};

const downloadFile = (file: any) => {
  // 这里实现下载逻辑
  console.log("下载文件:", file.name || file.file_name);
};

const deleteFile = (file: any) => {
  // 这里实现删除逻辑
  console.log("删除文件:", file.name || file.file_name);
};

onMounted(() => {
  console.log("文件管理模块已加载");
});
</script>

<style scoped>
.fancy-bg {
  padding: 28px 14px 24px 14px;
}
.stylish-panel {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 14px 0 #e2eafe77;
  margin-bottom: 28px;
  padding: 28px 18px 24px 18px;
}
.function-cards {
  margin-bottom: 32px;
}
.function-card {
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 24px 0 #bedcff11 !important;
  background: #fff;
  cursor: pointer;
  transition:
    transform 0.15s cubic-bezier(0.17, 0.67, 0.83, 0.67),
    box-shadow 0.18s;
}
.function-card:hover {
  transform: translateY(-4px) scale(1.032);
  box-shadow: 0 18px 48px 0 #6bbaf522 !important;
}
.card-gradient {
  background: linear-gradient(120deg, #ecf4ff 94%, #eff8ff 100%) !important;
}
.card-content {
  display: flex;
  align-items: center;
  padding: 26px 16px;
  min-height: 95px;
}
.card-icon {
  font-size: 34px;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3178ea;
  background: linear-gradient(133deg, #d9eaff 82%, #f2f6fd 100%);
  border-radius: 12px;
  margin-right: 18px;
  transition: color 0.25s;
}
.card-icon.upload {
  color: #13c2c2;
  background: linear-gradient(145deg, #c5faea 58%, #d6f3ff 98%);
}
.card-icon.tags {
  color: #a048ff;
  background: linear-gradient(143deg, #e8dafe 88%, #f3e2fd 100%);
}
.card-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.card-title {
  font-size: 19px;
  font-weight: 700;
  color: #2c3547;
  letter-spacing: 1.5px;
  margin-bottom: 3px;
}
.card-desc {
  font-size: 13px;
  color: #6c7ea5;
  font-weight: 400;
}
.rc-title-bar {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.recent-icon {
  font-size: 20px;
  color: #409eff;
  margin-right: 8px;
}
.recent-title {
  font-size: 17px;
  font-weight: 600;
  color: #293a46;
}
.recent-table {
  border-radius: 6px !important;
}
.input-search {
  width: 300px !important;
  margin-right: 18px !important;
  box-shadow: 0 2px 6px 0 #dae7fd24;
}
.select-category {
  width: 170px !important;
  margin-right: 18px;
}
.switch-mine {
  margin-left: 8px;
}
.file-list {
  margin-bottom: 28px;
  background: #fff;
}
.file-name {
  display: flex;
  align-items: center;
}
.icon-doc {
  margin-right: 8px;
  color: #2090ff;
}
.pagination {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
  background: none;
}
.upload-dialog .el-dialog__body {
  padding-top: 20px;
}
.upform-padding {
  margin-top: 20px;
  border-top: 1px solid #eee;
  padding-top: 20px;
}
.file-detail-dialog .el-dialog__body {
  padding-top: 18px;
  background: #fafcff;
}
.file-detail {
  max-height: 380px;
  overflow-y: auto;
}
.detail-primary {
  color: #416cf7;
  font-weight: 600;
}
.detail-btns {
  margin-top: 28px;
  display: flex;
  justify-content: center;
  gap: 22px;
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
@media (max-width: 900px) {
  .stylish-panel,
  .file-list,
  .function-cards {
    padding: 10px !important;
  }
  .fancy-bg {
    padding: 10px !important;
  }
}
</style>
