/**
 * RAG-cut Demo Frontend
 */

const API_BASE = (() => {
  const meta = document.querySelector('meta[name="api-base"]')?.content?.trim();
  if (meta) return meta.replace(/\/$/, "");
  if (window.location.port && window.location.port !== "8000") {
    return "http://127.0.0.1:8000";
  }
  return "";
})();

function apiUrl(path) {
  return `${API_BASE}${path}`;
}

const $ = (sel) => document.querySelector(sel);
const $$ = (sel) => document.querySelectorAll(sel);

const state = {
  file: null,
  result: null,
  selectedIndex: 0,
  objectUrl: null,
  history: [],
  activeHistoryId: null,
};

const els = {
  dropzone: $("#dropzone"),
  fileInput: $("#fileInput"),
  fileName: $("#fileName"),
  configForm: $("#configForm"),
  submitBtn: $("#submitBtn"),
  splitMode: $("#splitMode"),
  modeHint: $("#modeHint"),
  modeOptionsDefault: $("#modeOptionsDefault"),
  modeOptionsDelimiter: $("#modeOptionsDelimiter"),
  modeOptionsParentChild: $("#modeOptionsParentChild"),
  modeOptionsByRow: $("#modeOptionsByRow"),
  maxChunkSize: $("#maxChunkSize"),
  overlap: $("#overlap"),
  delimiter: $("#delimiter"),
  delimiterMaxSize: $("#delimiterMaxSize"),
  delimiterOverlap: $("#delimiterOverlap"),
  parentDelimiter: $("#parentDelimiter"),
  childDelimiter: $("#childDelimiter"),
  parentMaxSize: $("#parentMaxSize"),
  childMaxSize: $("#childMaxSize"),
  parentChildOverlap: $("#parentChildOverlap"),
  headerRowStart: $("#headerRowStart"),
  headerRowEnd: $("#headerRowEnd"),
  startRow: $("#startRow"),
  rowsPerChunk: $("#rowsPerChunk"),
  autoPolicy: $("#autoPolicy"),
  policyKicker: $("#policyKicker"),
  policyTitle: $("#policyTitle"),
  autoPolicyGrid: $("#autoPolicyGrid"),
  statusBadge: $("#statusBadge"),
  emptyState: $("#emptyState"),
  dualPane: $("#workspacePane"),
  previewPanel: $("#previewPanel"),
  apiPanel: $("#apiPanel"),
  recallPanel: $("#recallPanel"),
  recallForm: $("#recallForm"),
  recallQuery: $("#recallQuery"),
  recallTopK: $("#recallTopK"),
  recallSubmit: $("#recallSubmit"),
  recallHint: $("#recallHint"),
  recallResults: $("#recallResults"),
  statsSection: $("#statsSection"),
  historyList: $("#historyList"),
  historyHint: $("#historyHint"),
  historyRefreshBtn: $("#historyRefreshBtn"),
  originalPreview: $("#originalPreview"),
  chunkList: $("#chunkList"),
  chunkPreview: $("#chunkPreview"),
  originalTag: $("#originalTag"),
  chunkCountTag: $("#chunkCountTag"),
  selectedChunkTag: $("#selectedChunkTag"),
  statBlocks: $("#statBlocks"),
  statChunks: $("#statChunks"),
  statMode: $("#statMode"),
  statDocId: $("#statDocId"),
  apiRequest: $("#apiRequest"),
  apiResponse: $("#apiResponse"),
};

function setStatus(type, text) {
  els.statusBadge.innerHTML = `<span class="badge badge-${type}">${text}</span>`;
}

function setFile(file) {
  if (state.objectUrl) {
    URL.revokeObjectURL(state.objectUrl);
    state.objectUrl = null;
  }
  state.file = file;
  state.result = null;
  state.activeHistoryId = null;
  els.fileName.textContent = file ? file.name : "";
  els.submitBtn.disabled = !file;
  els.submitBtn.title = file ? "开始切分已选文件" : "请先上传文档";
  highlightHistoryActive();
  if (file) setStatus("idle", "已选择文件");
  else setStatus("idle", "等待上传");
}

function formatSavedAt(iso) {
  if (!iso) return "";
  try {
    const d = new Date(iso);
    if (Number.isNaN(d.getTime())) return "";
    return d.toLocaleString("zh-CN", { hour12: false });
  } catch {
    return "";
  }
}

function highlightHistoryActive() {
  if (!els.historyList) return;
  els.historyList.querySelectorAll(".history-item").forEach((row) => {
    const active = row.dataset.docId === state.activeHistoryId;
    row.classList.toggle("active", active);
    row.setAttribute("aria-selected", active ? "true" : "false");
  });
}

function clearWorkspace() {
  state.result = null;
  state.selectedIndex = 0;
  state.activeHistoryId = null;
  if (state.objectUrl) {
    URL.revokeObjectURL(state.objectUrl);
    state.objectUrl = null;
  }
  els.emptyState?.classList.remove("hidden");
  els.dualPane?.classList.add("hidden");
  els.apiPanel?.classList.add("hidden");
  els.recallPanel?.classList.add("hidden");
  els.statsSection?.classList.add("hidden");
  if (els.originalPreview) els.originalPreview.innerHTML = "";
  if (els.chunkList) els.chunkList.innerHTML = "";
  if (els.chunkPreview) els.chunkPreview.innerHTML = "";
  if (els.apiRequest) els.apiRequest.textContent = "";
  if (els.apiResponse) els.apiResponse.textContent = "";
  if (els.recallResults) els.recallResults.innerHTML = "";
  highlightHistoryActive();
  setStatus("idle", "等待上传");
}

function renderHistoryList(items) {
  state.history = items || [];
  if (!els.historyList) return;

  if (!state.history.length) {
    els.historyHint.textContent = "暂无历史记录，上传并切分后会出现在这里";
    els.historyList.innerHTML = "";
    return;
  }

  els.historyHint.textContent = `共 ${state.history.length} 条 · 点击加载`;
  els.historyList.innerHTML = state.history.map((item) => {
    const when = formatSavedAt(item.saved_at);
    const orig = item.has_original ? "" : " · 无原文";
    const active = item.doc_id === state.activeHistoryId;
    return `
      <div class="history-item${active ? " active" : ""}" role="option"
        data-doc-id="${escapeHtml(item.doc_id)}"
        aria-selected="${active ? "true" : "false"}">
        <button type="button" class="history-item-load" data-doc-id="${escapeHtml(item.doc_id)}" title="加载此切片结果">
          <span class="history-item-name">${escapeHtml(item.filename || item.doc_id)}</span>
          <span class="history-item-meta">${item.chunk_count || 0} 片 · ${escapeHtml(item.split_mode || "—")}${when ? ` · ${escapeHtml(when)}` : ""}${orig}</span>
        </button>
        <button type="button" class="history-item-delete" data-doc-id="${escapeHtml(item.doc_id)}"
          title="删除此历史记录" aria-label="删除 ${escapeHtml(item.filename || item.doc_id)}">删除</button>
      </div>
    `;
  }).join("");

  els.historyList.querySelectorAll(".history-item-load").forEach((btn) => {
    btn.addEventListener("click", () => loadHistoryResult(btn.dataset.docId));
  });
  els.historyList.querySelectorAll(".history-item-delete").forEach((btn) => {
    btn.addEventListener("click", (e) => {
      e.stopPropagation();
      deleteHistoryResult(btn.dataset.docId);
    });
  });
}

async function deleteHistoryResult(docId) {
  if (!docId) return;
  const item = state.history.find((h) => h.doc_id === docId);
  const label = item?.filename || docId;
  if (!confirm(`确定删除「${label}」？\n将同时删除切片结果、上传原文与资源文件。`)) {
    return;
  }

  setStatus("loading", "删除历史…");
  try {
    const res = await fetch(apiUrl(`/api/results/${docId}`), { method: "DELETE" });
    const text = await res.text();
    let data = null;
    try {
      data = text ? JSON.parse(text) : null;
    } catch {
      data = null;
    }
    if (!res.ok) {
      const detail = data?.detail;
      const msg = typeof detail === "string" ? detail : (detail ? JSON.stringify(detail) : `HTTP ${res.status}`);
      throw new Error(msg);
    }
    if (state.activeHistoryId === docId) {
      clearWorkspace();
    }
    await refreshHistory();
    setStatus("success", `已删除 · ${label}`);
  } catch (err) {
    setStatus("error", "删除失败");
    alert(`删除失败：${err.message || err}`);
  }
}

async function refreshHistory() {
  if (!els.historyHint) return;
  els.historyHint.textContent = "加载中…";
  const controller = new AbortController();
  const timer = setTimeout(() => controller.abort(), 30000);
  try {
    const res = await fetch(apiUrl("/api/results"), { signal: controller.signal });
    const text = await res.text();
    let data = null;
    try {
      data = text ? JSON.parse(text) : null;
    } catch {
      throw new Error(res.ok ? "响应不是 JSON" : `HTTP ${res.status}`);
    }
    if (!res.ok) {
      const detail = data?.detail;
      const msg = typeof detail === "string" ? detail : (detail ? JSON.stringify(detail) : `HTTP ${res.status}`);
      if (res.status === 404) {
        throw new Error("接口不存在，请重启后端（backend: python run.py）");
      }
      throw new Error(msg);
    }
    renderHistoryList(data.results || []);
  } catch (err) {
    const message =
      err?.name === "AbortError"
        ? "请求超时，请确认后端已启动在 :8000"
        : (err.message || String(err));
    els.historyHint.textContent = `历史加载失败：${message}`;
  } finally {
    clearTimeout(timer);
  }
}

async function renderOriginalFromHistory(docId, filename, hasOriginal) {
  if (!hasOriginal) {
    els.originalTag.textContent = filename || docId;
    els.originalPreview.innerHTML =
      '<p class="placeholder">历史记录中未找到原文文件（可能已被清理）。仍可查看右侧切片结果。</p>';
    return;
  }

  els.originalPreview.innerHTML = '<p class="placeholder">原文加载中…</p>';
  try {
    const res = await fetch(apiUrl(`/api/results/${docId}/original`));
    if (!res.ok) {
      const data = await res.json().catch(() => ({}));
      throw new Error(data.detail || `HTTP ${res.status}`);
    }
    const blob = await res.blob();
    const name = filename || "document";
    const file = new File([blob], name, { type: blob.type || "application/octet-stream" });
    state.file = file;
    els.fileName.textContent = name;
    els.submitBtn.disabled = false;
    await renderOriginalPreview(file, docId);
  } catch (err) {
    els.originalTag.textContent = filename || docId;
    els.originalPreview.innerHTML =
      `<p class="placeholder">原文预览失败：${escapeHtml(err.message || String(err))}。仍可查看切片结果。</p>`;
  }
}

async function loadHistoryResult(docId) {
  if (!docId) return;
  setStatus("loading", "加载历史…");
  els.apiRequest.textContent = JSON.stringify(
    { method: "GET", url: apiUrl(`/api/results/${docId}`) },
    null,
    2,
  );
  try {
    const res = await fetch(apiUrl(`/api/results/${docId}`));
    const data = await res.json();
    if (!res.ok) throw new Error(data.detail || `HTTP ${res.status}`);

    state.activeHistoryId = docId;
    highlightHistoryActive();
    els.apiResponse.textContent = JSON.stringify(
      { doc_id: data.doc_id, filename: data.filename, chunk_count: data.chunk_count, split_mode: data.split_mode },
      null,
      2,
    );
    showResult(data);
    setStatus("success", `已加载历史 · ${data.chunk_count} 片`);
    await renderOriginalFromHistory(docId, data.filename, data.has_original);
  } catch (err) {
    setStatus("error", "加载失败");
    els.apiResponse.textContent = JSON.stringify({ error: err.message || String(err) }, null, 2);
    alert(`加载历史失败：${err.message || err}`);
  }
}

function buildFormData() {
  const fd = new FormData();
  fd.append("file", state.file);
  const fields = collectSplitFields();
  Object.entries(fields).forEach(([key, value]) => {
    if (value != null && value !== "") fd.append(key, String(value));
  });
  return fd;
}

function unescapeDelimiter(raw) {
  return String(raw || "")
    .replace(/\\n/g, "\n")
    .replace(/\\t/g, "\t")
    .replace(/\\r/g, "\r");
}

function collectSplitFields() {
  const mode = els.splitMode?.value || "default";

  if (mode === "default") {
    return {
      mode: "default",
      max_chunk_size: Number(els.maxChunkSize?.value || 2200),
      overlap: Number(els.overlap?.value || 0),
    };
  }

  if (mode === "delimiter") {
    const delimiter = unescapeDelimiter(els.delimiter?.value?.trim());
    return {
      mode: "delimiter",
      delimiter: delimiter || "###",
      max_chunk_size: Number(els.delimiterMaxSize?.value || 1500),
      overlap: Number(els.delimiterOverlap?.value || 0),
    };
  }

  if (mode === "parent_child") {
    const parentDelimiter = unescapeDelimiter(els.parentDelimiter?.value?.trim());
    const childDelimiter = unescapeDelimiter(els.childDelimiter?.value?.trim());
    return {
      mode: "parent_child",
      parent_delimiter: parentDelimiter || "##",
      child_delimiter: childDelimiter || "",
      max_chunk_size: Number(els.parentMaxSize?.value || 2000),
      child_max_size: Number(els.childMaxSize?.value || 512),
      overlap: Number(els.parentChildOverlap?.value || 0),
    };
  }

  if (mode === "by_row") {
    return {
      mode: "by_row",
      header_row_start: Number(els.headerRowStart?.value || 1),
      header_row_end: Number(els.headerRowEnd?.value || 1),
      start_row: Number(els.startRow?.value || 2),
      rows_per_chunk: Number(els.rowsPerChunk?.value || 10),
      max_chunk_size: 2400,
      overlap: 0,
    };
  }

  return {};
}

function buildRequestPreview() {
  const fields = {
    file: state.file?.name,
    ...collectSplitFields(),
  };
  return {
    method: "POST",
    url: apiUrl("/api/chunk"),
    contentType: "multipart/form-data",
    fields,
  };
}

const MODE_HINTS = {
  default: "按标题/结构切分，适合 PDF、Word、PPT 等",
  delimiter: "按自定义标识符切开，适合 Markdown/带固定分隔符的文本",
  parent_child: "先按父标识符切父片，再按子标识符切子片；检索用子片、父片作上下文",
  by_row: "按表格行切分，适合 xlsx / xls / csv",
};

function syncModeOptions() {
  const mode = els.splitMode?.value || "default";
  els.modeOptionsDefault?.classList.toggle("hidden", mode !== "default");
  els.modeOptionsDelimiter?.classList.toggle("hidden", mode !== "delimiter");
  els.modeOptionsParentChild?.classList.toggle("hidden", mode !== "parent_child");
  els.modeOptionsByRow?.classList.toggle("hidden", mode !== "by_row");
  if (els.modeHint) els.modeHint.textContent = MODE_HINTS[mode] || MODE_HINTS.default;

  // CSS-hidden fields still join HTML5 constraint validation and can silently
  // block <form> submit with no JS callback. Disable inactive panels' controls.
  [
    [els.modeOptionsDefault, mode === "default"],
    [els.modeOptionsDelimiter, mode === "delimiter"],
    [els.modeOptionsParentChild, mode === "parent_child"],
    [els.modeOptionsByRow, mode === "by_row"],
  ].forEach(([panel, active]) => {
    panel?.querySelectorAll("input, select, textarea").forEach((input) => {
      input.disabled = !active;
    });
  });

  if (els.policyKicker) {
    els.policyKicker.textContent = "MANUAL";
  }
  if (els.policyTitle) {
    els.policyTitle.textContent = "将使用上方手动选择的切分模式与参数";
  }

  const fields = collectSplitFields();
  renderAutoPolicy({
    mode: fields.mode,
    max_chunk_size: fields.max_chunk_size,
    child_max_size: fields.child_max_size,
    overlap: fields.overlap,
    pdf_chunk_strategy: mode === "by_row" ? null : undefined,
    chunk_strategy: mode === "parent_child" ? "parent_child_delimiter" : undefined,
  });
}

function renderAutoPolicy(config) {
  if (!els.autoPolicyGrid) return;
  const modeLabel = {
    default: "结构感知",
    delimiter: "标识符",
    parent_child: "父子标识符",
    by_row: "按行",
  }[config?.mode] || "待上传后判断";
  const strategyLabel = {
    pdf_feature_step_screenshot: "功能步骤 + 截图",
    pdf_outline_report: "章节报告（标题层级）",
    heading_hierarchy: "标题层级优先",
    heading_layout_multimodal: "标题布局多模态",
    parent_child_delimiter: "父子标识符",
  }[config?.pdf_chunk_strategy || config?.chunk_strategy]
    || (config?.mode === "by_row" ? "表格按行"
      : (config?.mode === "delimiter" ? "通用标识符"
        : (config?.mode === "parent_child" ? "父子标识符" : "自动判断")));
  const maxSize = config?.max_chunk_size != null ? `${config.max_chunk_size} 字符` : "自动";
  const overlap = config?.overlap != null ? `${config.overlap} 字符` : "自动";
  const childSize =
    config?.child_max_size != null ? `${config.child_max_size} 字符` : null;

  els.autoPolicyGrid.innerHTML = `
    <div><dt>模式</dt><dd>${escapeHtml(modeLabel)}</dd></div>
    <div><dt>长度</dt><dd>${escapeHtml(maxSize)}</dd></div>
    <div><dt>重叠</dt><dd>${escapeHtml(overlap)}</dd></div>
    <div><dt>策略</dt><dd>${escapeHtml(strategyLabel)}</dd></div>
    ${childSize ? `<div><dt>子级长度</dt><dd>${escapeHtml(childSize)}</dd></div>` : ""}
  `;
}

function toAssetUrl(path, docId) {
  const raw = (path || "").trim();
  if (!raw || raw.startsWith("http://") || raw.startsWith("https://") || raw.startsWith("data:")) {
    return raw;
  }
  if (raw.startsWith("/assets/")) return apiUrl(raw);
  if (raw.startsWith("assets/")) return apiUrl(`/${raw}`);
  const name = raw.split(/[/\\]/).pop();
  return apiUrl(`/assets/${docId}/${name}`);
}

function fixAssetPaths(markdown, docId) {
  if (!markdown) return "";
  return markdown.replace(/!\[(.*?)\]\(([^)]+)\)/g, (_, alt, path) => `![${alt}](${toAssetUrl(path, docId)})`);
}

function rewritePreviewImages(container, docId) {
  container.querySelectorAll("img").forEach((img) => {
    const src = img.getAttribute("src");
    if (src) img.src = toAssetUrl(src, docId);
  });
}

function formatBbox(bbox) {
  if (!Array.isArray(bbox) || bbox.length < 4) return "";
  return bbox.map((v) => Number(v).toFixed(0)).join(", ");
}

function renderBlockItem(block, docId) {
  const order = block.order_index != null ? `data-order="${block.order_index}"` : "";
  const page = block.page != null ? `data-page="${block.page}"` : "";
  const bbox = formatBbox(block.bbox);
  const metaBadge = [block.page != null ? `p${block.page}` : "", bbox ? `[${bbox}]` : ""]
    .filter(Boolean)
    .join(" · ");

  if (block.type === "image") {
    const src = toAssetUrl(block.image_path, docId);
    const alt = block.text || block.image_id || "image";
    let html = `<figure class="chunk-block chunk-block-image" ${order} ${page}>`;
    if (block.bound_heading || block.nearest_heading) {
      html += `<div class="block-context">${escapeHtml(block.bound_heading || block.nearest_heading)}</div>`;
    }
    html += `<img src="${escapeHtml(src)}" alt="${escapeHtml(alt)}" loading="lazy" />`;
    if (block.ocr_text) {
      html += `<figcaption class="ocr-caption">*[OCR]* ${escapeHtml(block.ocr_text)}</figcaption>`;
    }
    if (metaBadge) html += `<div class="block-meta">${escapeHtml(metaBadge)}</div>`;
    html += "</figure>";
    return html;
  }

  if (block.type === "heading") {
    const level = Math.min(Math.max(block.level || 2, 1), 6);
    return `<h${level} class="chunk-block chunk-block-heading" ${order} ${page}>${escapeHtml(block.text || "")}</h${level}>`;
  }

  if (block.type === "table") {
    const title = block.table_title || block.nearest_heading || "";
    const imgPath = block.image_path || block.crop_path;
    let html = `<div class="chunk-block chunk-block-table" ${order} ${page}>`;
    if (title) html += `<div class="block-context">${escapeHtml(title)}</div>`;
    if (imgPath) {
      const src = toAssetUrl(imgPath, docId);
      html += `<figure class="table-screenshot"><img src="${escapeHtml(src)}" alt="${escapeHtml(title || "table")}" loading="lazy" /></figure>`;
    }
    html += `<div class="table-markdown">${renderMarkdown(block.markdown || block.text || "", docId)}</div>`;
    if (block.ocr_text) {
      html += `<div class="ocr-caption">*[表格 OCR]* ${escapeHtml(block.ocr_text)}</div>`;
    }
    if (block.footnotes) {
      html += `<div class="table-footnote">${escapeHtml(block.footnotes)}</div>`;
    }
    if (metaBadge) html += `<div class="block-meta">${escapeHtml(metaBadge)}</div>`;
    html += "</div>";
    return html;
  }

  const inner = block.text ? `<p>${escapeHtml(block.text)}</p>` : "";
  return `<div class="chunk-block chunk-block-paragraph" ${order} ${page}>${inner}${metaBadge ? `<div class="block-meta">${escapeHtml(metaBadge)}</div>` : ""}</div>`;
}

function renderChunkContent(chunk, docId) {
  const blocks = chunk.meta?.blocks;
  if (Array.isArray(blocks) && blocks.length > 0) {
    const sorted = [...blocks].sort((a, b) => {
      const ao = a.order_index ?? Number.MAX_SAFE_INTEGER;
      const bo = b.order_index ?? Number.MAX_SAFE_INTEGER;
      return ao - bo;
    });
    return `<div class="chunk-blocks">${sorted.map((b) => renderBlockItem(b, docId)).join("")}</div>`;
  }
  return renderMarkdown(chunk.content, docId);
}

function renderMarkdown(markdown, docId) {
  const fixed = fixAssetPaths(markdown, docId);
  if (typeof marked !== "undefined") {
    try {
      if (typeof marked.use === "function") {
        marked.use({ breaks: true, gfm: true });
      } else if (typeof marked.setOptions === "function") {
        marked.setOptions({ breaks: true, gfm: true });
      }
      const html = marked.parse(fixed);
      return typeof html === "string" ? html : String(html);
    } catch (err) {
      console.error("Markdown render failed:", err);
      return `<pre>${escapeHtml(fixed)}</pre>`;
    }
  }
  return `<pre>${escapeHtml(fixed)}</pre>`;
}

function escapeHtml(str) {
  return str
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;");
}

function uniqueTypes(types) {
  return [...new Set(types)];
}

function typeTagClass(type) {
  if (type === "heading") return "type-tag type-tag-heading";
  if (type === "image") return "type-tag type-tag-image";
  if (type === "table") return "type-tag type-tag-table";
  return "type-tag";
}

function renderChunkList(result) {
  els.chunkList.innerHTML = "";
  result.chunks.forEach((chunk, i) => {
    const btn = document.createElement("button");
    btn.type = "button";
    btn.className = `chunk-card${i === state.selectedIndex ? " active" : ""}`;
    btn.setAttribute("role", "option");
    btn.setAttribute("aria-selected", i === state.selectedIndex ? "true" : "false");
    btn.dataset.index = String(i);

    const types = uniqueTypes(chunk.block_types);
    const heading = chunk.meta?.heading || chunk.meta?.nearest_heading || chunk.meta?.parent_heading;
    const pageHint = chunk.meta?.page ? `p${chunk.meta.page}` : chunk.meta?.pages?.length ? `p${chunk.meta.pages.join(",")}` : "";
    const imageCount = chunk.meta?.images?.length || chunk.block_types.filter((t) => t === "image").length;
    const tableCount = chunk.meta?.tables?.length || chunk.block_types.filter((t) => t === "table").length;
    const parentRef = chunk.meta?.parent_chunk_id != null ? ` · 父切片 ${chunk.meta.parent_chunk_id + 1}` : "";
    const subBadge = chunk.meta?.is_sub_chunk ? '<span class="type-tag type-tag-heading">子切片</span>' : "";
    const parentBadge = chunk.meta?.is_section_parent ? '<span class="type-tag">完整节</span>' : "";
    const previewOnlyBadge = chunk.meta?.retrieval === false ? '<span class="type-tag type-tag-preview-only">仅展示</span>' : "";
    const snippet = chunk.content.replace(/!\[.*?\]\([^)]+\)/g, "[图片]").slice(0, 160);

    btn.innerHTML = `
      <div class="chunk-card-header">
        <span class="chunk-index">切片 ${chunk.index + 1}</span>
        <span class="chunk-meta">${chunk.char_count} 字符${pageHint ? ` · ${pageHint}` : ""}${imageCount ? ` · ${imageCount} 图` : ""}${tableCount ? ` · ${tableCount} 表` : ""}${parentRef}</span>
      </div>
      <div class="chunk-types">
        ${subBadge}${parentBadge}${previewOnlyBadge}${types.map((t) => `<span class="${typeTagClass(t)}">${t}</span>`).join("")}
      </div>
      ${heading ? `<div class="chunk-snippet" style="-webkit-line-clamp:1;font-weight:500;color:var(--color-text)">${escapeHtml(heading)}</div>` : ""}
      <div class="chunk-snippet">${escapeHtml(snippet)}</div>
    `;

    btn.addEventListener("click", () => selectChunk(i));
    els.chunkList.appendChild(btn);
  });
}

function selectChunk(index) {
  if (!state.result) return;
  state.selectedIndex = index;
  const chunk = state.result.chunks[index];
  const docId = state.result.doc_id;

  $$(".chunk-card").forEach((el, i) => {
    el.classList.toggle("active", i === index);
    el.setAttribute("aria-selected", i === index ? "true" : "false");
  });

  els.selectedChunkTag.textContent = `切片 ${chunk.index + 1} · ${chunk.char_count} 字符${chunk.meta?.parent_chunk_id != null ? ` · 父切片 ${chunk.meta.parent_chunk_id + 1}` : ""}`;
  els.chunkPreview.innerHTML = renderChunkContent(chunk, docId);
  rewritePreviewImages(els.chunkPreview, docId);
}

async function renderConvertedWordPreview(file, docId) {
  if (!docId) return false;
  try {
    const res = await fetch(apiUrl(`/api/results/${docId}/preview`));
    if (!res.ok) return false;
    const blob = await res.blob();
    if (state.objectUrl) URL.revokeObjectURL(state.objectUrl);
    state.objectUrl = URL.createObjectURL(blob);
    els.originalPreview.innerHTML =
      `<iframe class="original-pdf" src="${state.objectUrl}" title="${escapeHtml(file.name)} PDF 原文预览"></iframe>`;
    return true;
  } catch (err) {
    console.warn("Word PDF 预览加载失败:", err);
    return false;
  }
}

async function renderOriginalPreview(file, docId = null) {
  els.originalPreview.innerHTML = '<p class="placeholder">原文加载中…</p>';
  els.originalTag.textContent = file.name;

  const ext = file.name.split(".").pop()?.toLowerCase() || "";

  if (ext === "pdf") {
    state.objectUrl = URL.createObjectURL(file);
    els.originalPreview.innerHTML = `<iframe class="original-pdf" src="${state.objectUrl}" title="PDF 原文预览"></iframe>`;
    return;
  }

  if (["doc", "docx"].includes(ext) && await renderConvertedWordPreview(file, docId)) {
    return;
  }

  if (ext === "docx" && typeof mammoth !== "undefined") {
    const buffer = await file.arrayBuffer();
    const { value } = await mammoth.convertToHtml({ arrayBuffer: buffer });
    els.originalPreview.innerHTML = `<div class="original-docx">${value}</div>`;
    return;
  }

  if (["doc", "docx"].includes(ext)) {
    els.originalPreview.innerHTML =
      '<p class="placeholder">Word 原文将在切分完成后以 PDF 方式显示。</p>';
    return;
  }

  if (["jpg", "jpeg", "png", "bmp", "gif"].includes(ext)) {
    state.objectUrl = URL.createObjectURL(file);
    els.originalPreview.innerHTML = `<img class="original-image" src="${state.objectUrl}" alt="上传的图片" />`;
    return;
  }

  if (["txt", "md", "csv", "json", "xml", "log", "html", "htm"].includes(ext)) {
    const text = await file.text();
    els.originalPreview.innerHTML = `<pre class="original-text">${escapeHtml(text.slice(0, 50000))}${text.length > 50000 ? "\n\n… (已截断)" : ""}</pre>`;
    return;
  }

  if (["ppt", "pptx", "ppsx"].includes(ext)) {
    els.originalPreview.innerHTML =
      `<p class="placeholder">演示文稿将先转为 PDF 再解析；原文预览暂不支持，请查看右侧切片结果。</p>`;
    return;
  }

  els.originalPreview.innerHTML = `<p class="placeholder">该格式暂不支持原文预览，请查看右侧切片结果。</p>`;
}

function showResult(result) {
  state.result = result;
  state.selectedIndex = 0;
  state.activeHistoryId = result.doc_id || null;
  highlightHistoryActive();

  els.emptyState.classList.add("hidden");
  els.dualPane.classList.remove("hidden");
  els.apiPanel.classList.remove("hidden");
  els.recallPanel.classList.remove("hidden");
  els.statsSection.classList.remove("hidden");

  els.statBlocks.textContent = result.block_count;
  els.statChunks.textContent = result.chunk_count;
  els.statMode.textContent = result.split_mode;
  els.statDocId.textContent = result.doc_id;
  els.chunkCountTag.textContent = `${result.chunk_count} 个切片`;
  renderAutoPolicy(result.split_config);

  renderChunkList(result);
  selectChunk(0);
  setStatus("success", `切分完成 · ${result.chunk_count} 片`);
}

function renderRecallResults(data) {
  els.recallHint.textContent = `候选 ${data.candidate_count} 个 · 返回 ${data.returned_count} 个 · ${data.elapsed_ms} ms`;
  if (!data.results.length) {
    els.recallResults.innerHTML = '<p class="placeholder">没有匹配的切片，请尝试更具体或更短的关键词。</p>';
    return;
  }
  els.recallResults.innerHTML = data.results.map((item) => `
    <button class="recall-result" type="button" data-chunk-index="${item.chunk_index}">
      <span class="recall-rank">#${item.rank}</span>
      <span class="recall-result-main">
        <strong>${escapeHtml(item.heading || `切片 ${item.chunk_index + 1}`)}</strong>
        <span>${escapeHtml(item.content.replace(/!\[.*?\]\([^)]+\)/g, "[图片]").slice(0, 180))}</span>
      </span>
      <span class="recall-score">${Number(item.score).toFixed(3)}</span>
    </button>
  `).join("");
  els.recallResults.querySelectorAll(".recall-result").forEach((button) => {
    button.addEventListener("click", () => {
      const chunkIndex = Number(button.dataset.chunkIndex);
      const position = state.result.chunks.findIndex((chunk) => chunk.index === chunkIndex);
      if (position >= 0) selectChunk(position);
    });
  });
}

async function handleRecall(e) {
  e.preventDefault();
  if (!state.result) return;
  const request = {
    doc_id: state.result.doc_id,
    query: els.recallQuery.value.trim(),
    top_k: Number(els.recallTopK.value),
  };
  if (!request.query) return;

  els.recallSubmit.disabled = true;
  els.recallHint.textContent = "正在召回…";
  els.apiPanel.classList.remove("hidden");
  els.apiRequest.textContent = JSON.stringify({ method: "POST", url: apiUrl("/api/recall"), body: request }, null, 2);
  try {
    const response = await fetch(apiUrl("/api/recall"), {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(request),
    });
    const data = await response.json();
    if (!response.ok) throw new Error(data.detail || `HTTP ${response.status}`);
    els.apiResponse.textContent = JSON.stringify(data, null, 2);
    renderRecallResults(data);
  } catch (err) {
    els.recallHint.textContent = `召回失败：${err.message}`;
    els.apiResponse.textContent = JSON.stringify({ error: err.message }, null, 2);
  } finally {
    els.recallSubmit.disabled = false;
  }
}

async function handleSubmit(e) {
  e.preventDefault();
  if (!state.file) {
    alert("请先在上方上传文档，再点击「开始切分」");
    els.dropzone?.focus();
    return;
  }

  const mode = els.splitMode?.value || "default";
  if (mode === "delimiter") {
    const delimiter = unescapeDelimiter(els.delimiter?.value?.trim());
    if (!delimiter) {
      alert("通用标识符切分需要填写标识符");
      els.delimiter?.focus();
      return;
    }
  }
  if (mode === "parent_child") {
    const parentDelimiter = unescapeDelimiter(els.parentDelimiter?.value?.trim());
    if (!parentDelimiter) {
      alert("父子标识符切分需要填写父级标识符");
      els.parentDelimiter?.focus();
      return;
    }
    const parentMax = Number(els.parentMaxSize?.value || 2000);
    const childMax = Number(els.childMaxSize?.value || 512);
    if (childMax > parentMax) {
      alert("子级最大长度不能超过父级最大长度");
      els.childMaxSize?.focus();
      return;
    }
  }

  const btnLabel = els.submitBtn.querySelector(".btn-label");
  const spinner = els.submitBtn.querySelector(".btn-spinner");
  const setBusy = (busy) => {
    els.submitBtn.disabled = busy ? true : !state.file;
    if (btnLabel) btnLabel.textContent = busy ? "切分中…" : "开始切分";
    else els.submitBtn.textContent = busy ? "切分中…" : "开始切分";
    if (spinner) spinner.classList.toggle("hidden", !busy);
  };

  setBusy(true);
  setStatus("loading", "正在切分…");
  if (els.apiRequest) {
    els.apiRequest.textContent = JSON.stringify(buildRequestPreview(), null, 2);
  }
  els.apiPanel?.classList.remove("hidden");

  const controller = new AbortController();
  const abortTimer = setTimeout(() => controller.abort(), 10 * 60 * 1000);

  try {
    // Kick off API first; do not block chunking on original preview.
    const previewPromise = renderOriginalPreview(state.file).catch((err) => {
      console.warn("原文预览失败:", err);
    });

    const fd = buildFormData();
    const res = await fetch(apiUrl("/api/chunk"), {
      method: "POST",
      body: fd,
      signal: controller.signal,
    });
    const data = await res.json();

    if (!res.ok) {
      const detail = Array.isArray(data.detail)
        ? data.detail.map((d) => d.msg || JSON.stringify(d)).join("; ")
        : data.detail;
      throw new Error(detail || `HTTP ${res.status}`);
    }

    await previewPromise;
    if (els.apiResponse) els.apiResponse.textContent = JSON.stringify(data, null, 2);
    showResult(data);
    await renderOriginalPreview(state.file, data.doc_id);
    refreshHistory();
  } catch (err) {
    console.error("chunk submit failed:", err);
    const message =
      err?.name === "AbortError"
        ? "请求超时（超过 10 分钟）。后端可能卡在 MinerU/Office 转换，请重试或换较小文件。"
        : err.message || String(err);
    setStatus("error", "切分失败");
    if (els.apiResponse) els.apiResponse.textContent = JSON.stringify({ error: message }, null, 2);
    alert(`切分失败：${message}`);
  } finally {
    clearTimeout(abortTimer);
    setBusy(false);
  }
}

function initDropzone() {
  els.dropzone.addEventListener("click", () => els.fileInput.click());
  els.dropzone.addEventListener("keydown", (e) => {
    if (e.key === "Enter" || e.key === " ") {
      e.preventDefault();
      els.fileInput.click();
    }
  });

  els.fileInput.addEventListener("change", () => {
    if (els.fileInput.files?.[0]) setFile(els.fileInput.files[0]);
  });

  ["dragenter", "dragover"].forEach((ev) => {
    els.dropzone.addEventListener(ev, (e) => {
      e.preventDefault();
      els.dropzone.classList.add("dragover");
    });
  });
  ["dragleave", "drop"].forEach((ev) => {
    els.dropzone.addEventListener(ev, (e) => {
      e.preventDefault();
      els.dropzone.classList.remove("dragover");
    });
  });
  els.dropzone.addEventListener("drop", (e) => {
    const file = e.dataTransfer?.files?.[0];
    if (file) setFile(file);
  });
}

els.configForm.addEventListener("submit", handleSubmit);
els.recallForm.addEventListener("submit", handleRecall);
els.historyRefreshBtn?.addEventListener("click", refreshHistory);
els.splitMode?.addEventListener("change", syncModeOptions);
[
  els.maxChunkSize,
  els.overlap,
  els.delimiter,
  els.delimiterMaxSize,
  els.delimiterOverlap,
  els.parentDelimiter,
  els.childDelimiter,
  els.parentMaxSize,
  els.childMaxSize,
  els.parentChildOverlap,
  els.headerRowStart,
  els.headerRowEnd,
  els.startRow,
  els.rowsPerChunk,
].forEach((el) => el?.addEventListener("change", syncModeOptions));
syncModeOptions();
initDropzone();
refreshHistory();