{% extends 'base.html' %}

{% block content %}
<a class="breadcrumb" href="/">← 任务</a>

<section class="detail-head">
  <h2 id="detail-title" class="detail-title">正在加载...</h2>
  <div id="detail-meta" class="job-meta"></div>
</section>

<nav id="toolbar" class="toolbar" aria-label="任务操作" hidden>
  <div class="segmented" role="group" aria-label="查看方式">
    <button id="view-rendered" type="button" aria-pressed="true">渲染</button>
    <button id="view-source" type="button" aria-pressed="false">源码</button>
  </div>
  <span class="spacer"></span>
  <button id="copy-button" type="button" class="button small secondary">复制</button>
  <a id="download-button" class="button small secondary" href="/api/jobs/{{ job_id }}/download" download>下载 .md</a>
</nav>

<section id="content" class="section">
  <div class="loading"><span class="spinner"></span>正在加载...</div>
</section>

<!-- P1h 用量账单：done 且有 usage 才显示；旧任务（0.4.0 前）没有 usage，保持隐藏 -->
<section id="usage-panel" class="section" hidden>
  <details class="usage-detail">
    <summary id="usage-summary">用量与费用</summary>
    <div id="usage-rows"></div>
  </details>
</section>
{% endblock %}

{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/marked@12.0.2/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dompurify@3.1.6/dist/purify.min.js"></script>
<script>
  const jobId = "{{ job_id }}";
  const jobUrl = `/api/jobs/${encodeURIComponent(jobId)}`;
  const markdownUrl = `/api/jobs/${encodeURIComponent(jobId)}/markdown`;

  const titleEl = document.getElementById("detail-title");
  const metaEl = document.getElementById("detail-meta");
  const contentEl = document.getElementById("content");
  const toolbar = document.getElementById("toolbar");
  const btnRendered = document.getElementById("view-rendered");
  const btnSource = document.getElementById("view-source");
  const copyButton = document.getElementById("copy-button");

  const statusText = { pending: "等待中", running: "处理中", done: "已完成", failed: "失败" };

  let markdownText = null;   // 缓存原文，渲染/源码/复制共用，避免重复请求
  let viewMode = "rendered";

  function escapeHtml(value) {
    return String(value ?? "")
      .replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;")
      .replaceAll('"', "&quot;").replaceAll("'", "&#039;");
  }

  function platformLabel(p) {
    if (p === "bilibili") return "Bilibili";
    if (p === "xiaohongshu") return "小红书";
    return p || "未知平台";
  }

  function typeTag(job) {
    const t = job.content_type || "";
    if (t === "video") return "视频";
    if (t === "image_text" || t === "image_note" || t === "note" || t === "image") return "图文";
    if (t === "article") return "文章";
    if (job.platform === "xiaohongshu") return "图文";
    if (job.platform === "bilibili") return "视频";
    return "";
  }

  function formatDate(value) {
    if (!value) return "未知时间";
    const date = new Date(value);
    return Number.isNaN(date.getTime()) ? value : date.toLocaleString("zh-CN", { hour12: false });
  }

  async function fetchMarkdown() {
    if (markdownText !== null) return markdownText;
    const response = await fetch(markdownUrl);
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    markdownText = await response.text();
    return markdownText;
  }

  // 去掉文件开头的 YAML frontmatter（--- ... ---）。它是给机器看的元信息，
  // 渲染态会被 marked 误当成超大标题（一段文字紧跟 --- = setext H2）。
  // 详情页头部已经显示作者/平台/时间，这里去掉更干净；源码态保留原文。
  function stripFrontmatter(md) {
    const m = /^?---\r?\n[\s\S]*?\r?\n---\r?\n?/.exec(md);
    return m ? md.slice(m[0].length) : md;
  }

  function renderMeta(job) {
    const status = job.status || "pending";
    const dot = job.platform === "bilibili" || job.platform === "xiaohongshu"
      ? `<span class="plat-dot ${escapeHtml(job.platform)}"></span>` : "";
    metaEl.innerHTML = `
      ${dot}<span>作者：${escapeHtml(job.author || "未知作者")}</span>
      <span class="sep">·</span><span>${escapeHtml(platformLabel(job.platform))}</span>
      <span class="sep">·</span><span><span class="badge ${escapeHtml(status)}">${escapeHtml(statusText[status] || status)}</span></span>
      <span class="sep">·</span><span>${escapeHtml(formatDate(job.created_at || job.createdAt))}</span>`;
  }

  function renderView() {
    btnRendered.setAttribute("aria-pressed", String(viewMode === "rendered"));
    btnSource.setAttribute("aria-pressed", String(viewMode === "source"));
    if (markdownText === null) return;
    if (viewMode === "source") {
      contentEl.innerHTML = `<pre class="source-view">${escapeHtml(markdownText)}</pre>`;
    } else {
      // marked 转 HTML，再用 DOMPurify 清洗（内容是爬来的，防 XSS 注入）
      const rawHtml = marked.parse(stripFrontmatter(markdownText), { gfm: true, breaks: true });
      const clean = DOMPurify.sanitize(rawHtml, { ADD_ATTR: ["target", "rel"] });
      contentEl.innerHTML = `<article class="markdown-body">${clean}</article>`;
    }
  }

  // ── P1h 用量账单 ──────────────────────────────────────────
  const stageText = { asr: "语音转写", vlm: "图片理解", llm_clean: "文本清洗" };

  function formatYuan(v) {
    return (v === null || v === undefined) ? "—" : `¥${Number(v).toFixed(4)}`;
  }

  function usageAmount(e) {
    if (e.stage === "asr") {
      return (e.audio_seconds === null || e.audio_seconds === undefined)
        ? "用量未知" : `${e.audio_seconds} 秒音频`;
    }
    if (e.input_tokens === null || e.input_tokens === undefined) return "用量未知";
    return `输入 ${e.input_tokens} + 输出 ${e.output_tokens} token`;
  }

  function renderUsage(job) {
    const panel = document.getElementById("usage-panel");
    const u = job.usage;
    if (!u || !Array.isArray(u.events) || !u.events.length) { panel.hidden = true; return; }
    const rows = u.events.map((e) => `
      <div class="usage-row">
        <span>${escapeHtml(stageText[e.stage] || e.stage)}（${escapeHtml(e.model || "")}）</span>
        <span>${escapeHtml(usageAmount(e))}</span>
        <span>耗时 ${escapeHtml(String(e.elapsed_seconds ?? "—"))}s</span>
        <span>${escapeHtml(formatYuan(e.cost_yuan))}</span>
      </div>`).join("");
    document.getElementById("usage-summary").textContent =
      `用量与费用 · 估算 ${formatYuan(u.total_cost_yuan)}`;
    document.getElementById("usage-rows").innerHTML = rows;
    panel.hidden = false;
  }

  async function renderDone(job) {
    toolbar.hidden = false;
    renderUsage(job);
    const tag = typeTag(job);
    titleEl.innerHTML = `${escapeHtml(job.title || job.url || "未命名任务")}${tag ? `<span class="type-tag">${escapeHtml(tag)}</span>` : ""}`;
    contentEl.innerHTML = '<div class="loading"><span class="spinner"></span>正在加载内容...</div>';
    try {
      await fetchMarkdown();
      renderView();
    } catch (error) {
      contentEl.innerHTML = `<div class="error-box">内容加载失败：${escapeHtml(error.message)}</div>`;
    }
  }

  // 把技术异常 message 映射成一句人话。format_error_for_user 是 Python，前端调不到，
  // 这里按 error_message 的关键词做轻量映射（零 schema 改动）。映射不中也有兜底，
  // 技术细节始终在折叠的 <details> 里，不丢信息。
  function humanizeError(raw) {
    const s = String(raw || "").toLowerCase();
    if (/unsupported url|unsupported_url|不支持/.test(s))
      return "不支持的链接：只支持 B 站和小红书。";
    if (/token expired|token_expired|300031|\/404/.test(s))
      return "这条链接/清单已过期，需要重新获取链接或重新抓清单。";
    if (/cookie|relogin|rbcp login|登录/.test(s))
      return "登录已失效，请重跑 rbcp login 后再试。";
    if (/risk|captcha|风控|412|\b403\b/.test(s))
      return "可能触发了风控。建议稍后重试，或换网络节点 / 放慢速度。";
    if (/timed out|timeout|content-length|connection|network|超时|网络/.test(s))
      return "网络或超时问题。请检查网络 / 代理是否连通后重试。";
    if (/parse|初始状态|initial_state|解析|missing data|missing task_id/.test(s))
      return "页面解析失败（可能改版 / 空壳 / 风控）。稍后重试或反馈。";
    if (/http 4|http 5|api|dashscope|oss/.test(s))
      return "服务端报错。稍后重试，或展开下方详情查看技术信息。";
    return "任务失败。展开下方「技术详情」查看具体原因，或点「重试」重新抽取。";
  }

  async function retryJob() {
    // 原地重试同一条 job（不新建），重试后留在本页，轮询会自动反映状态。
    const response = await fetch(`/api/jobs/${encodeURIComponent(jobId)}/retry`, { method: "POST" });
    if (!response.ok) throw new Error((await response.text()) || `HTTP ${response.status}`);
    return response.json();
  }

  function renderFailed(job) {
    toolbar.hidden = true;
    // 跨重试别残留上一轮的账单（Codex review）
    document.getElementById("usage-panel").hidden = true;
    titleEl.textContent = job.title || job.url || "任务失败";

    const human = humanizeError(job.error_message);
    const detail = [job.error_message || "", job.log_excerpt || ""].filter(Boolean).join("\n\n");
    const canRetry = Boolean(job.url);

    contentEl.innerHTML = `
      <div class="error-box">
        <p class="error-human">${escapeHtml(human)}</p>
        ${canRetry ? `<button id="retry-button" type="button" class="button small secondary" data-url="${escapeHtml(job.url)}">重试</button>` : ""}
        ${detail ? `<details class="error-detail"><summary>技术详情</summary><pre class="source-view">${escapeHtml(detail)}</pre></details>` : ""}
      </div>`;

    const retryBtn = document.getElementById("retry-button");
    if (retryBtn) {
      retryBtn.addEventListener("click", async () => {
        retryBtn.disabled = true;
        retryBtn.textContent = "重试中...";
        try {
          await retryJob();
          window.rbToast("已重新开始这条任务", "success");
          // 留在本页，轮询会刷出 处理中 → 完成/失败
        } catch (error) {
          window.rbToast(`重试失败：${error.message}`, "error");
          retryBtn.disabled = false;
          retryBtn.textContent = "重试";
        }
      });
    }
  }

  function renderProcessing(job) {
    toolbar.hidden = true;
    document.getElementById("usage-panel").hidden = true;
    titleEl.textContent = job.title || job.url || "正在抽取...";
    contentEl.innerHTML = '<div class="loading"><span class="spinner"></span>处理中，完成后自动显示...</div>';
    setTimeout(loadJob, 2000);
  }

  async function loadJob() {
    try {
      const response = await fetch(jobUrl);
      if (response.status === 404) {
        metaEl.innerHTML = "";
        titleEl.textContent = "任务不存在";
        toolbar.hidden = true;
        contentEl.innerHTML = '<div class="empty"><p class="empty-title">任务不存在或已被删除</p><div><a href="/">← 返回任务列表</a></div></div>';
        return;
      }
      if (!response.ok) throw new Error(`HTTP ${response.status}`);
      const job = await response.json();
      renderMeta(job);
      if (job.status === "done") await renderDone(job);
      else if (job.status === "failed") renderFailed(job);
      else renderProcessing(job);
    } catch (error) {
      titleEl.textContent = "无法显示任务";
      contentEl.innerHTML = `<div class="empty"><p class="empty-title">任务加载失败</p><div>${escapeHtml(error.message)}</div></div>`;
    }
  }

  function setView(mode) { viewMode = mode; renderView(); }
  btnRendered.addEventListener("click", () => setView("rendered"));
  btnSource.addEventListener("click", () => setView("source"));

  async function copyToClipboard(text) {
    if (navigator.clipboard && navigator.clipboard.writeText) {
      await navigator.clipboard.writeText(text);
      return;
    }
    const ta = document.createElement("textarea");
    ta.value = text;
    ta.style.position = "fixed";
    ta.style.left = "-9999px";
    ta.style.top = "-9999px";
    document.body.appendChild(ta);
    ta.select();
    try {
      if (!document.execCommand("copy")) throw new Error("execCommand copy 返回 false");
    } finally {
      document.body.removeChild(ta);
    }
  }

  copyButton.addEventListener("click", async () => {
    try {
      const md = await fetchMarkdown();
      await copyToClipboard(md);
      window.rbToast("已复制全文", "success");
    } catch (error) {
      window.rbToast(`复制失败：${error.message}`, "error");
    }
  });

  // 键盘快捷键：r 切换渲染/源码，c 复制，Esc 返回
  document.addEventListener("keydown", (event) => {
    if (event.metaKey || event.ctrlKey || event.altKey) return;
    if (event.key === "Escape") { window.location.href = "/"; return; }
    if (toolbar.hidden) return;
    if (event.key === "r" || event.key === "R") { setView(viewMode === "rendered" ? "source" : "rendered"); }
    else if (event.key === "c" || event.key === "C") { copyButton.click(); }
  });

  loadJob();
</script>
{% endblock %}