{% extends 'base.html' %}

{% block content %}
<section class="submit-card">
  <div class="segmented submit-tabs" role="tablist" aria-label="提交方式">
    <button id="tab-single" type="button" role="tab" aria-pressed="true">单条</button>
    <button id="tab-batch" type="button" role="tab" aria-pressed="false">批量</button>
  </div>

  <!-- 单条面板 -->
  <div id="panel-single" role="tabpanel">
    <form id="job-form" class="submit-row">
      <input id="url-input" type="text" name="url" placeholder="粘贴 B 站 / 小红书链接，或整段分享文案（带标题也行），回车抽取" required
             autocomplete="off" spellcheck="false">
      <button id="submit-button" type="submit">抽取</button>
    </form>
    <div id="submit-hint" class="submit-hint" aria-live="polite"></div>
  </div>

  <!-- 批量面板：导入插件导出的 notes.json -->
  <div id="panel-batch" role="tabpanel" hidden>
    <div class="batch-import-row">
      <label class="button secondary file-pick" for="batch-file-input">
        选择 notes.json
        <input id="batch-file-input" type="file" accept="application/json,.json" hidden>
      </label>
      <span id="batch-file-name" class="file-name">未选择文件（也可在下方粘贴内容）</span>
    </div>
    <details class="batch-paste">
      <summary>直接粘贴 notes.json 内容 ▾</summary>
      <textarea id="batch-paste-input" rows="5"
                placeholder='{"schema_version":1,"source":"xhs_user_posted",...}'></textarea>
    </details>
    <div class="batch-import-row">
      <input id="batch-title-input" type="text" placeholder="批次名称（可选，默认按博主+条数自动取名）"
             autocomplete="off">
    </div>
    <div class="batch-import-row batch-options">
      <label><input id="force-redownload" type="checkbox"> 已下过的也重新下载</label>
      <label><input id="allow-partial" type="checkbox"> 允许半份清单</label>
      <span class="spacer"></span>
      <button id="import-button" type="button">导入开跑</button>
    </div>
    <div id="import-hint" class="submit-hint" aria-live="polite"></div>
  </div>
</section>

<section class="section">
  <div class="section-head">
    <h2 class="section-title">任务 <span id="total-cost" class="total-cost" title="所有任务的模型调用估算费用（目录价，不含免费额度）"></span></h2>
    <div id="filters" class="filters" role="group" aria-label="按状态筛选">
      <button type="button" class="filter-chip" data-filter="all" aria-pressed="true">全部 <span id="cnt-all">0</span></button>
      <button type="button" class="filter-chip" data-filter="running" aria-pressed="false"><span class="dot running"></span>处理中 <span id="cnt-running">0</span></button>
      <button type="button" class="filter-chip" data-filter="done" aria-pressed="false"><span class="dot done"></span>已完成 <span id="cnt-done">0</span></button>
      <button type="button" class="filter-chip" data-filter="failed" aria-pressed="false"><span class="dot failed"></span>失败 <span id="cnt-failed">0</span></button>
    </div>
  </div>
  <div id="batch-list"></div>
  <div id="job-list" class="job-list">
    <div class="loading"><span class="spinner"></span>正在加载...</div>
  </div>
</section>
{% endblock %}

{% block scripts %}
<script>
  const form = document.getElementById("job-form");
  const input = document.getElementById("url-input");
  const button = document.getElementById("submit-button");
  const hint = document.getElementById("submit-hint");
  const list = document.getElementById("job-list");
  const filtersEl = document.getElementById("filters");

  const EXAMPLE_URL = "https://www.bilibili.com/video/BV1GJ411x7h7";

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

  let currentFilter = "all";
  let lastSignature = null;   // 防闪烁：内容未变就不重绘
  let knownIds = null;        // 已见过的 job id，用于高亮新任务

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

  // 从链接推断平台（提交提示 + 卡片色条都用）
  function detectPlatform(url) {
    const u = String(url || "").toLowerCase();
    if (/bilibili\.com|b23\.tv/.test(u)) return { key: "bilibili", label: "B站视频" };
    if (/xiaohongshu\.com|xhslink\.com|xhs\.cn/.test(u)) return { key: "xiaohongshu", label: "小红书图文" };
    return { key: "", label: "" };
  }

  // 卡片里只显示 host+path，去掉超长 query（B站 vd_source / 小红书 xsec_token 等）；
  // href 仍是完整 url，能正常跳转
  function shortUrl(url) {
    try { const u = new URL(url); return u.host + u.pathname; }
    catch { return url; }
  }

  function platformOf(job) {
    if (job.platform === "bilibili" || job.platform === "xiaohongshu") return job.platform;
    return detectPlatform(job.url || job.source_url || "").key;
  }

  function normalizeJobs(payload) {
    if (Array.isArray(payload)) return payload;
    for (const k of ["jobs", "items", "data"]) {
      if (Array.isArray(payload?.[k])) return payload[k];
    }
    return [];
  }

  // 返回 m:ss；时间戳异常（负数 / 超过 24h，多半是跨时区或时钟问题）返回 null，
  // 宁可不显示数字也不显示一个错的
  function fmtElapsed(ms) {
    if (!Number.isFinite(ms) || ms < 0 || ms > 24 * 3600 * 1000) return null;
    const s = Math.floor(ms / 1000);
    const m = Math.floor(s / 60);
    return `${m}:${String(s % 60).padStart(2, "0")}`;
  }

  // 每秒刷新「处理中」卡片上的计时，独立于列表重绘（重绘是防闪烁门控的）
  function tickTimers() {
    const now = Date.now();
    document.querySelectorAll(".job-timer[data-start]").forEach((el) => {
      const start = Date.parse(el.dataset.start);
      const text = Number.isNaN(start) ? null : fmtElapsed(now - start);
      el.textContent = text || "";
    });
  }

  function cardHtml(job, isNew) {
    const id = job.id ?? job.job_id ?? "";
    const status = job.status || "pending";
    const plat = platformOf(job);
    const title = job.title || job.url || (status === "done" ? "未命名内容" : "等待抽取");
    const author = job.author || "未知作者";
    const url = job.url || job.source_url || "";
    const source = url
      ? `<a class="job-src" href="${escapeHtml(url)}" target="_blank" rel="noopener noreferrer">${escapeHtml(shortUrl(url))}</a>`
      : "无原始链接";

    let badge;
    if (status === "running") {
      const start = job.started_at || job.created_at || "";
      badge = `<span class="badge running"><span class="spinner"></span>处理中 <span class="job-timer" data-start="${escapeHtml(start)}">0:00</span></span>`;
    } else {
      badge = `<span class="badge ${escapeHtml(status)}">${escapeHtml(statusText[status] || status)}</span>`;
    }

    const errorLine = status === "failed" && job.error_message
      ? `<div class="error-line">${escapeHtml(job.error_message)}</div>` : "";
    const retryBtn = status === "failed" && id !== ""
      ? `<button type="button" class="button small secondary retry-btn" data-id="${escapeHtml(id)}">重试</button>` : "";

    return `
      <article class="job-item${isNew ? " is-new" : ""}" data-platform="${escapeHtml(plat)}" data-id="${escapeHtml(id)}">
        <div class="job-bar"></div>
        <div class="job-body">
          <div style="min-width:0">
            <h3 class="job-title"><span class="plat-dot ${escapeHtml(plat)}"></span>${escapeHtml(title)}</h3>
            <div class="job-meta"><span>${escapeHtml(author)}</span><span class="sep">·</span><span>${source}</span></div>
            ${errorLine}
          </div>
          <div class="job-actions">
            ${badge}
            ${retryBtn}
            <a class="button small ghost" href="/jobs/${encodeURIComponent(id)}">详情 →</a>
          </div>
        </div>
      </article>`;
  }

  function updateCounts(jobs) {
    const c = { all: jobs.length, running: 0, done: 0, failed: 0, pending: 0 };
    jobs.forEach((j) => { c[j.status || "pending"] = (c[j.status || "pending"] || 0) + 1; });
    document.getElementById("cnt-all").textContent = c.all;
    document.getElementById("cnt-running").textContent = c.running + c.pending; // pending 也算「处理中」桶
    document.getElementById("cnt-done").textContent = c.done;
    document.getElementById("cnt-failed").textContent = c.failed;
  }

  function applyFilter(jobs) {
    if (currentFilter === "all") return jobs;
    if (currentFilter === "running") return jobs.filter((j) => j.status === "running" || j.status === "pending");
    return jobs.filter((j) => j.status === currentFilter);
  }

  function renderJobs(jobs) {
    updateCounts(jobs);
    const view = applyFilter(jobs);

    // 防闪烁：只有当 (筛选 + 每条 id/status/title/error) 变化时才重绘
    const signature = currentFilter + "|" + view.map((j) =>
      `${j.id}:${j.status}:${j.title || ""}:${(j.error_message || "").slice(0, 20)}`).join(",");
    if (signature === lastSignature) { tickTimers(); return; }
    lastSignature = signature;

    if (!view.length) {
      if (currentFilter === "all") {
        list.innerHTML = `
          <div class="empty">
            <p class="empty-title">还没有任务</p>
            <div>粘贴一个 B 站 / 小红书链接，开始沉淀你的知识库。</div>
            <div class="example">试试：<code id="example-link">${escapeHtml(EXAMPLE_URL)}</code></div>
          </div>`;
        const ex = document.getElementById("example-link");
        if (ex) ex.addEventListener("click", () => { input.value = EXAMPLE_URL; input.focus(); onInput(); });
      } else {
        list.innerHTML = `<div class="empty"><p class="empty-title">没有「${statusText[currentFilter] || currentFilter}」的任务</p></div>`;
      }
      return;
    }

    const seen = knownIds;
    list.innerHTML = view.map((job) => {
      const id = String(job.id ?? job.job_id ?? "");
      const isNew = seen !== null && !seen.has(id);   // 首次加载不全亮，之后才高亮新增
      return cardHtml(job, isNew);
    }).join("");

    knownIds = new Set(view.map((j) => String(j.id ?? j.job_id ?? "")));
    tickTimers();
  }

  async function refreshJobs() {
    try {
      // exclude_batched：批量任务住在批次卡片里，单卡不重复显示
      const response = await fetch("/api/jobs?limit=50&exclude_batched=true");
      if (!response.ok) throw new Error(`HTTP ${response.status}`);
      renderJobs(normalizeJobs(await response.json()));
    } catch (error) {
      if (lastSignature === null) {
        list.innerHTML = `<div class="empty"><p class="empty-title">任务列表加载失败</p><div>${escapeHtml(error.message)}</div></div>`;
      }
    }
    refreshBatches();
    refreshTotalCost();
  }

  // ── 批次卡片（M5b：批量进任务列表）────────────────────────
  const batchListEl = document.getElementById("batch-list");
  const expandedBatches = new Set();   // 展开过的批次 id
  const batchItemsCache = {};          // batch_id -> 全量条目
  let lastBatchSignature = null;

  function itemRowHtml(item) {
    const label = item.title || item.note_id || "";
    const st = item.status || "pending";
    const stText = { done: "完成", failed: "失败", skipped: "跳过", pending: "待下" }[st] || st;
    const link = item.job_id
      ? `<a href="/jobs/${encodeURIComponent(item.job_id)}">${escapeHtml(label)}</a>`
      : escapeHtml(label);
    return `<div class="batch-item-row"><span class="badge mini ${escapeHtml(st)}">${stText}</span>${link}</div>`;
  }

  function batchCardHtml(b) {
    const c = b.counts || {};
    const done = c.done || 0, failed = c.failed || 0, skipped = c.skipped || 0, pending = c.pending || 0;
    const total = done + failed + skipped + pending;
    const finished = done + failed + skipped;
    const pct = total ? Math.round((finished / total) * 100) : 0;
    const title = b.title || (b.user_id ? `博主 ${b.user_id}` : `批次 ${b.id}`);
    // 批次费用 = 关联任务的账单汇总；历史任务（0.4.1 前）没记账，只算有账的
    const cost = Number(b.cost_yuan || 0);
    const costText = cost > 0
      ? ` · 估算 ¥${cost >= 0.01 ? cost.toFixed(2) : cost.toFixed(4)}` : "";
    const expanded = expandedBatches.has(b.id);
    const items = expanded ? (batchItemsCache[b.id] || []) : (b.items_preview || []);
    const more = !expanded && total > items.length
      ? `<button type="button" class="button small ghost batch-expand" data-id="${b.id}">展开全部 ${total} 条</button>`
      : "";
    return `
      <article class="job-item batch-card" data-platform="xiaohongshu">
        <div class="job-bar"></div>
        <div class="job-body" style="display:block">
          <div class="batch-head">
            <h3 class="job-title"><span class="plat-dot xiaohongshu"></span>${escapeHtml(title)}</h3>
            <span class="batch-progress-text">${finished}/${total}${escapeHtml(costText)}${b.status === "running" ? ' · <span class="spinner"></span>' : ""}</span>
          </div>
          <div class="job-meta batch-counts">
            <span>✓ ${done}</span><span class="sep">·</span><span>✗ ${failed}</span>
            <span class="sep">·</span><span>⤼ ${skipped}</span><span class="sep">·</span><span>待 ${pending}</span>
            ${b.complete ? "" : '<span class="sep">·</span><span class="partial-flag">半份清单</span>'}
          </div>
          <div class="batch-progress"><div style="width:${pct}%"></div></div>
          <div class="batch-items${expanded ? " expanded" : ""}">${items.map(itemRowHtml).join("")}</div>
          ${more}
        </div>
      </article>`;
  }

  async function refreshBatches() {
    try {
      const resp = await fetch("/api/batches");
      if (!resp.ok) return;
      const batches = (await resp.json()).batches || [];
      // 展开的批次同步取全量条目（状态会变）
      await Promise.all([...expandedBatches].map(async (id) => {
        const r = await fetch(`/api/batches/${id}/items`);
        if (r.ok) batchItemsCache[id] = (await r.json()).items || [];
      }));
      const signature = JSON.stringify(batches) + "|" + [...expandedBatches].join(",")
        + "|" + Object.values(batchItemsCache).map((v) => v.length).join(",");
      if (signature === lastBatchSignature) return;
      lastBatchSignature = signature;
      batchListEl.innerHTML = batches.map(batchCardHtml).join("");
    } catch (_) { /* 轮询失败静默 */ }
  }

  batchListEl.addEventListener("click", async (event) => {
    const btn = event.target.closest(".batch-expand");
    if (!btn) return;
    const id = Number(btn.dataset.id);
    expandedBatches.add(id);
    lastBatchSignature = null;
    await refreshBatches();
  });

  // P1h：累计估算费用（拿不到就留空，不挡任务列表）
  async function refreshTotalCost() {
    try {
      const response = await fetch("/api/stats");
      if (!response.ok) return;
      const stats = await response.json();
      const total = Number(stats.total_cost_yuan || 0);
      // 小额别四舍五入成 ¥0.00（真用发现：¥0.002 显示成 0.00 误导）
      const text = total >= 0.01 ? total.toFixed(2) : total.toFixed(4);
      document.getElementById("total-cost").textContent =
        total > 0 ? `· 累计估算 ¥${text}` : "";
    } catch (_) { /* 静默：统计失败不影响主功能 */ }
  }

  // 输入即识别平台
  function onInput() {
    const url = input.value.trim();
    if (!url) { hint.className = "submit-hint"; hint.textContent = ""; return; }
    const p = detectPlatform(url);
    if (p.key) {
      hint.className = "submit-hint";
      hint.innerHTML = `<span class="plat-chip"><span class="plat-dot ${p.key}"></span>${p.label}</span>`;
    } else {
      hint.className = "submit-hint";
      hint.innerHTML = `<span class="plat-chip">未识别平台，确认是 B 站 / 小红书链接</span>`;
    }
  }
  input.addEventListener("input", onInput);

  async function submitUrl(url, force = false) {
    const response = await fetch("/api/jobs", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ url, force }),
    });
    if (response.status === 409) {
      // M5b 去重：已成功下过 → 问一句，强制才重下
      const detail = ((await response.json()) || {}).detail || {};
      if (detail.duplicate) {
        const name = detail.title ? `「${detail.title}」` : "这条内容";
        const again = window.confirm(
          `${name}已经下载过（任务 #${detail.existing_job_id}）。\n还要重新下载一遍吗？`
        );
        if (again) return submitUrl(url, true);
        return { skipped: true, existing_job_id: detail.existing_job_id };
      }
    }
    if (!response.ok) throw new Error((await response.text()) || `HTTP ${response.status}`);
    return response.json();
  }

  form.addEventListener("submit", async (event) => {
    event.preventDefault();
    const url = input.value.trim();
    if (!url) return;
    button.disabled = true;
    try {
      const result = await submitUrl(url);
      input.value = "";
      hint.className = "submit-hint";
      hint.textContent = "";
      if (result.skipped) {
        window.rbToast(`已跳过：此前下载过（任务 #${result.existing_job_id}）`, "success");
      } else {
        window.rbToast("已提交，开始抽取", "success");
      }
      lastSignature = null;       // 强制立即重绘，让新任务高亮出现
      await refreshJobs();
    } catch (error) {
      window.rbToast(`提交失败：${error.message}`, "error");
    } finally {
      button.disabled = false;
    }
  });

  // ── 标签切换（M5b：单条/批量整合进主页）──────────────────
  const tabSingle = document.getElementById("tab-single");
  const tabBatch = document.getElementById("tab-batch");
  const panelSingle = document.getElementById("panel-single");
  const panelBatch = document.getElementById("panel-batch");

  function setTab(which) {
    const single = which === "single";
    tabSingle.setAttribute("aria-pressed", String(single));
    tabBatch.setAttribute("aria-pressed", String(!single));
    panelSingle.hidden = !single;
    panelBatch.hidden = single;
    if (single) input.focus();
  }
  tabSingle.addEventListener("click", () => setTab("single"));
  tabBatch.addEventListener("click", () => setTab("batch"));

  // ── 批量导入（插件导出的 notes.json）──────────────────────
  const fileInput = document.getElementById("batch-file-input");
  const fileNameEl = document.getElementById("batch-file-name");
  const pasteInput = document.getElementById("batch-paste-input");
  const importHint = document.getElementById("import-hint");

  fileInput.addEventListener("change", () => {
    fileNameEl.textContent = fileInput.files[0]
      ? fileInput.files[0].name : "未选择文件（也可在下方粘贴内容）";
  });

  document.getElementById("import-button").addEventListener("click", async () => {
    const f = fileInput.files[0];
    const pasted = pasteInput.value.trim();
    let raw;
    if (f) { raw = await f.text(); }
    else if (pasted) { raw = pasted; }
    else { importHint.textContent = "请选择 notes.json 文件，或在上方粘贴内容"; return; }

    let envelope;
    try { envelope = JSON.parse(raw); }
    catch (_) { importHint.textContent = "内容不是合法 JSON"; return; }

    const params = new URLSearchParams({
      allow_partial: document.getElementById("allow-partial").checked,
      force: document.getElementById("force-redownload").checked,
    });
    const batchTitle = document.getElementById("batch-title-input").value.trim();
    if (batchTitle) params.set("title", batchTitle);

    importHint.textContent = "导入中...";
    try {
      const r = await fetch(`/api/import-list?${params}`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(envelope),
      });
      const d = await r.json();
      if (!r.ok) { importHint.textContent = `导入失败：${d.detail || "未知错误"}`; return; }
      const parts = [`已开跑 ${d.count || 0} 条`];
      if (d.skipped_duplicates) parts.push(`跳过已下过的 ${d.skipped_duplicates} 条`);
      if (!d.count) parts[0] = "没有新内容";
      importHint.textContent = parts.join("，") + "。进度看下方批次卡片。";
      lastBatchSignature = null;
      refreshBatches();
    } catch (e) {
      importHint.textContent = `导入请求失败：${e}`;
    }
  });

  // 重试（事件委托：列表动态渲染）
  list.addEventListener("click", async (event) => {
    const btn = event.target.closest(".retry-btn");
    if (!btn) return;
    const jobId = btn.dataset.id;
    if (!jobId) return;
    btn.disabled = true;
    btn.textContent = "重试中...";
    try {
      // 原地重试同一条 job，不新建
      const resp = await fetch(`/api/jobs/${encodeURIComponent(jobId)}/retry`, { method: "POST" });
      if (!resp.ok) throw new Error((await resp.json().catch(() => ({}))).detail || resp.status);
      window.rbToast("已重新开始这条任务", "success");
      lastSignature = null;
      await refreshJobs();
    } catch (error) {
      window.rbToast(`重试失败：${error.message}`, "error");
      btn.disabled = false;
      btn.textContent = "重试";
    }
  });

  // 状态筛选
  filtersEl.addEventListener("click", (event) => {
    const chip = event.target.closest(".filter-chip");
    if (!chip) return;
    currentFilter = chip.dataset.filter;
    filtersEl.querySelectorAll(".filter-chip").forEach((c) =>
      c.setAttribute("aria-pressed", String(c === chip)));
    lastSignature = null;
    refreshJobs();
  });

  refreshJobs();
  setInterval(refreshJobs, 2000);
  setInterval(tickTimers, 1000);
</script>
{% endblock %}