<script setup lang="ts">
import { ElMessage, ElMessageBox } from "element-plus";
import { computed, onBeforeUnmount, onMounted, reactive, ref } from "vue";

import { api } from "../services/api";
import type { AgentBatchItem, AgentBatchJob, AgentBatchJobDetail } from "../types/api";
import AdminPagination from "./AdminPagination.vue";
import { formatDateTime } from "../utils/dateTime";

const props = defineProps<{
  config: Record<string, unknown>;
  modelName: string;
  knowledgeSummary: string;
}>();

const fileInput = ref<HTMLInputElement | null>(null);
const selectedFile = ref<File | null>(null);
const taskName = ref("");
const executionMode = ref<"sequential" | "concurrent">("sequential");
const concurrencyLimit = ref(5);
const creating = ref(false);
const loading = ref(false);
const exportingId = ref<number | null>(null);
const jobs = ref<AgentBatchJob[]>([]);
const pager = reactive({ page: 1, pageSize: 10, total: 0 });
const detailOpen = ref(false);
const detailLoading = ref(false);
const selectedJob = ref<AgentBatchJobDetail | null>(null);
const detailPager = reactive({ page: 1, pageSize: 20, total: 0 });
let pollTimer: number | null = null;

const hasRunningJob = computed(() => jobs.value.some((job) => ["pending", "running"].includes(job.status)));

onMounted(() => void loadJobs());
onBeforeUnmount(stopPolling);

async function loadJobs(page = pager.page, pageSize = pager.pageSize, quiet = false) {
  if (!quiet) loading.value = true;
  try {
    const result = await api.agentBatchJobs({ page, pageSize });
    jobs.value = result.items;
    Object.assign(pager, { page: result.page, pageSize: result.pageSize, total: result.total });
    schedulePolling();
    if (selectedJob.value && detailOpen.value) await loadDetail(selectedJob.value.id, detailPager.page, detailPager.pageSize, true);
  } catch (error) {
    if (!quiet) ElMessage.error(errorMessage(error, "批量测试任务加载失败"));
  } finally {
    if (!quiet) loading.value = false;
  }
}

function schedulePolling() {
  stopPolling();
  if (!hasRunningJob.value) return;
  pollTimer = window.setTimeout(() => void loadJobs(pager.page, pager.pageSize, true), 2500);
}

function stopPolling() {
  if (pollTimer !== null) window.clearTimeout(pollTimer);
  pollTimer = null;
}

function selectFile(event: Event) {
  const input = event.target as HTMLInputElement;
  selectedFile.value = input.files?.[0] || null;
  if (selectedFile.value && !taskName.value.trim()) taskName.value = selectedFile.value.name.replace(/\.xlsx$/i, "");
}

function clearFile() {
  selectedFile.value = null;
  if (fileInput.value) fileInput.value.value = "";
}

async function downloadTemplate() {
  try {
    await api.downloadAgentBatchTemplate();
  } catch (error) {
    ElMessage.error(errorMessage(error, "模板下载失败"));
  }
}

async function createJob() {
  if (!selectedFile.value) return ElMessage.warning("请先选择填写好的 Excel 文件");
  if (!String(props.config.modelId || "")) return ElMessage.warning("请先在调试配置中选择模型");
  creating.value = true;
  try {
    const created = await api.createAgentBatch(selectedFile.value, {
      ...props.config,
      name: taskName.value.trim(),
      executionMode: executionMode.value,
      concurrencyLimit: executionMode.value === "sequential" ? 1 : concurrencyLimit.value,
    });
    ElMessage.success(`已创建批量测试任务，共 ${created.totalCount} 个问题`);
    clearFile();
    taskName.value = "";
    await loadJobs(1, pager.pageSize);
    await openDetail(created);
  } catch (error) {
    ElMessage.error(errorMessage(error, "批量测试任务创建失败"));
  } finally {
    creating.value = false;
  }
}

async function openDetail(job: AgentBatchJob) {
  detailOpen.value = true;
  detailPager.page = 1;
  await loadDetail(job.id, 1, detailPager.pageSize);
}

async function loadDetail(jobId: number, page = detailPager.page, pageSize = detailPager.pageSize, quiet = false) {
  if (!quiet) detailLoading.value = true;
  try {
    const result = await api.agentBatchJob(jobId, { page, pageSize });
    selectedJob.value = result;
    Object.assign(detailPager, { page: result.items.page, pageSize: result.items.pageSize, total: result.items.total });
  } catch (error) {
    if (!quiet) ElMessage.error(errorMessage(error, "任务详情加载失败"));
  } finally {
    if (!quiet) detailLoading.value = false;
  }
}

async function exportJob(job: AgentBatchJob) {
  exportingId.value = job.id;
  try {
    await api.exportAgentBatch(job.id);
    ElMessage.success("测试结果已导出");
  } catch (error) {
    ElMessage.error(errorMessage(error, "结果导出失败"));
  } finally {
    exportingId.value = null;
  }
}

async function cancelJob(job: AgentBatchJob) {
  try {
    await ElMessageBox.confirm("取消后尚未开始的问题不会继续生成，已完成结果仍可导出。", "取消批量测试", {
      type: "warning", confirmButtonText: "确认取消", cancelButtonText: "继续执行",
    });
  } catch {
    return;
  }
  try {
    await api.cancelAgentBatch(job.id);
    ElMessage.success("批量测试已取消");
    await loadJobs(pager.page, pager.pageSize);
  } catch (error) {
    ElMessage.error(errorMessage(error, "取消失败"));
  }
}

function statusLabel(status: string) {
  return ({ pending: "等待执行", running: "生成中", completed: "已完成", completed_with_errors: "部分失败", cancelled: "已取消", success: "成功", failed: "失败" } as Record<string, string>)[status] || status;
}

function statusType(status: string) {
  if (["completed", "success"].includes(status)) return "success";
  if (["completed_with_errors", "failed"].includes(status)) return "danger";
  if (status === "running") return "primary";
  if (status === "cancelled") return "info";
  return "warning";
}

function executionLabel(job: AgentBatchJob) {
  return job.executionMode === "concurrent" ? `并发 · ${job.concurrencyLimit} 路` : "逐条串行";
}

function itemDuration(item: AgentBatchItem) {
  return item.durationMs == null ? "—" : `${(item.durationMs / 1000).toFixed(1)} 秒`;
}

function errorMessage(error: unknown, fallback: string) {
  return error instanceof Error ? error.message : fallback;
}
</script>

<template>
  <div class="agent-batch-panel">
    <div class="agent-section-intro">
      <div><h3>Excel 批量测试</h3><p>普通管理员仅看到自己的任务，超级管理员可统一审计；创建时会固化当前提示词、模型、知识库和生成参数。</p></div>
      <el-button @click="downloadTemplate">下载导入模板</el-button>
    </div>

    <section class="agent-batch-create-card">
      <div class="agent-batch-config-summary">
        <span><small>模型</small><strong>{{ modelName }}</strong></span>
        <span><small>知识库</small><strong>{{ knowledgeSummary }}</strong></span>
        <span><small>单次上限</small><strong>200 个问题</strong></span>
      </div>
      <div class="agent-batch-mode-setting">
        <div class="agent-batch-mode-copy"><strong>执行方式</strong><span>串行适合日常回归；并发适合压测吞吐与稳定性，并发数会被系统安全上限约束。</span></div>
        <el-radio-group v-model="executionMode" class="agent-batch-mode-options">
          <el-radio-button value="sequential">逐条串行</el-radio-button>
          <el-radio-button value="concurrent">并发测试</el-radio-button>
        </el-radio-group>
        <label v-if="executionMode === 'concurrent'" class="agent-batch-concurrency"><span>并发数</span><el-input-number v-model="concurrencyLimit" :min="2" :max="10" controls-position="right" /></label>
      </div>
      <div class="agent-batch-upload-row">
        <label class="agent-batch-name"><span>任务名称</span><input v-model="taskName" maxlength="160" placeholder="例如：8月主提示词回归测试" /></label>
        <label class="agent-batch-file" :class="{ selected: selectedFile }">
          <input ref="fileInput" type="file" accept=".xlsx" @change="selectFile" />
          <span>{{ selectedFile?.name || "选择填写好的 Excel 文件" }}</span>
          <small>{{ selectedFile ? `${(selectedFile.size / 1024).toFixed(1)} KB` : "仅支持 .xlsx，最大 5MB" }}</small>
        </label>
        <el-button v-if="selectedFile" @click="clearFile">移除</el-button>
        <el-button type="primary" :loading="creating" :disabled="!selectedFile" @click="createJob">开始批量测试</el-button>
      </div>
    </section>

    <div class="agent-batch-list-head"><div><h4>测试记录</h4><p>任务在后台执行，离开页面不会中断。</p></div><el-button :loading="loading" @click="loadJobs()">刷新</el-button></div>
    <el-table v-loading="loading" :data="jobs" stripe>
      <el-table-column label="任务" min-width="190"><template #default="{ row }"><strong>{{ row.name }}</strong><small class="agent-batch-cell-note">#{{ row.id }} · {{ formatDateTime(row.createdAt, "—") }}</small></template></el-table-column>
      <el-table-column label="配置快照" min-width="180"><template #default="{ row }"><span>{{ row.modelName }}</span><small class="agent-batch-cell-note">{{ row.knowledgeNames.join('、') }}</small></template></el-table-column>
      <el-table-column label="进度" min-width="190"><template #default="{ row }"><el-progress :percentage="row.progress" :status="row.status === 'completed' ? 'success' : undefined" /><small class="agent-batch-cell-note">{{ row.processedCount }}/{{ row.totalCount }} · 成功 {{ row.successCount }} · 失败 {{ row.failedCount }}</small></template></el-table-column>
      <el-table-column label="执行方式" width="118"><template #default="{ row }"><el-tag type="info">{{ executionLabel(row) }}</el-tag></template></el-table-column>
      <el-table-column label="状态" width="108"><template #default="{ row }"><el-tag :type="statusType(row.status)">{{ statusLabel(row.status) }}</el-tag></template></el-table-column>
      <el-table-column label="操作" width="190" fixed="right"><template #default="{ row }"><el-button link type="primary" @click="openDetail(row)">查看</el-button><el-button link type="primary" :loading="exportingId === row.id" @click="exportJob(row)">导出</el-button><el-button v-if="['pending','running'].includes(row.status)" link type="danger" @click="cancelJob(row)">取消</el-button></template></el-table-column>
    </el-table>
    <AdminPagination :page="pager.page" :page-size="pager.pageSize" :total="pager.total" @change="loadJobs" />
  </div>

  <el-dialog v-model="detailOpen" width="min(1100px, 94vw)" title="批量测试详情" destroy-on-close>
    <div v-loading="detailLoading" class="agent-batch-detail">
      <template v-if="selectedJob">
        <div class="agent-batch-detail-head">
          <div><strong>{{ selectedJob.name }}</strong><span>{{ selectedJob.modelName }} · {{ selectedJob.knowledgeNames.join('、') }} · {{ executionLabel(selectedJob) }}</span></div>
          <el-tag :type="statusType(selectedJob.status)">{{ statusLabel(selectedJob.status) }}</el-tag>
        </div>
        <el-table :data="selectedJob.items.items" stripe max-height="520">
          <el-table-column prop="externalNo" label="序号" width="76" />
          <el-table-column prop="question" label="问题" min-width="230" show-overflow-tooltip />
          <el-table-column label="答案" min-width="360"><template #default="{ row }"><div class="agent-batch-answer">{{ row.answer || row.errorMessage || statusLabel(row.status) }}</div></template></el-table-column>
          <el-table-column label="状态" width="90"><template #default="{ row }"><el-tag size="small" :type="statusType(row.status)">{{ statusLabel(row.status) }}</el-tag></template></el-table-column>
          <el-table-column label="耗时" width="92"><template #default="{ row }">{{ itemDuration(row) }}</template></el-table-column>
        </el-table>
        <AdminPagination :page="detailPager.page" :page-size="detailPager.pageSize" :total="detailPager.total" @change="(page, pageSize) => loadDetail(selectedJob!.id, page, pageSize)" />
      </template>
    </div>
    <template #footer><el-button @click="detailOpen = false">关闭</el-button><el-button v-if="selectedJob" type="primary" :loading="exportingId === selectedJob.id" @click="exportJob(selectedJob)">导出 Excel</el-button></template>
  </el-dialog>
</template>
