content.js

const PANEL_ID = "v2ex-comment-distribution-panel";
const COLORS = [
  "#3b82f6",
  "#10b981",
  "#f59e0b",
  "#ef4444",
  "#8b5cf6",
  "#06b6d4",
  "#84cc16",
  "#f97316",
  "#ec4899",
  "#14b8a6",
  "#6366f1",
  "#a855f7"
];

function getTopicIdFromPath() {
  const match = location.pathname.match(/^\/t\/(\d+)/);
  return match?.[1] || "";
}

function ensurePanel() {
  let panel = document.getElementById(PANEL_ID);
  if (panel) {
    return panel;
  }

  panel = document.createElement("section");
  panel.id = PANEL_ID;
  panel.className = "v2ex-dist-panel";
  panel.innerHTML = `
    <div class="v2ex-dist-title">评论观点分布</div>
    <div class="v2ex-dist-status">正在通过 V2EX API 获取评论并分析...</div>
    <div class="v2ex-dist-bar" hidden></div>
    <ul class="v2ex-dist-legend"></ul>
    <p class="v2ex-dist-summary"></p>
  `;

  const firstReplyCell = document.querySelector("#Main div.cell[id^='r_']");
  const repliesBox = firstReplyCell?.closest(".box");
  if (repliesBox?.parentNode) {
    repliesBox.parentNode.insertBefore(panel, repliesBox);
    return panel;
  }

  const topicMain = document.querySelector("#Main .box .cell .topic_content")?.closest(".box");
  const fallback = document.querySelector("#Main");
  (topicMain || fallback)?.appendChild(panel);

  return panel;
}

function renderError(panel, message) {
  panel.querySelector(".v2ex-dist-status").textContent = `分析失败：${message}`;
  panel.querySelector(".v2ex-dist-bar").hidden = true;
  panel.querySelector(".v2ex-dist-legend").innerHTML = "";
  panel.querySelector(".v2ex-dist-summary").textContent = "";
}

function buildRateLimitText(apiMeta) {
  const remain = apiMeta?.repliesRateInfo?.remaining;
  const limit = apiMeta?.repliesRateInfo?.limit;
  if (!remain && remain !== 0) {
    return "";
  }
  const cacheHint = apiMeta?.cached ? "（命中缓存）" : "";
  return `API 配额：${remain}/${limit}${cacheHint}`;
}

function renderEmpty(panel, commentCount, apiMeta) {
  const rateText = buildRateLimitText(apiMeta);
  panel.querySelector(".v2ex-dist-status").textContent = `共读取 ${commentCount} 条评论，暂无可归类观点。${
    rateText ? ` ${rateText}` : ""
  }`;
  panel.querySelector(".v2ex-dist-bar").hidden = true;
  panel.querySelector(".v2ex-dist-legend").innerHTML = "";
}

function renderDistribution(panel, data) {
  const status = panel.querySelector(".v2ex-dist-status");
  const bar = panel.querySelector(".v2ex-dist-bar");
  const legend = panel.querySelector(".v2ex-dist-legend");
  const summary = panel.querySelector(".v2ex-dist-summary");

  if (!data.viewpoints.length) {
    renderEmpty(panel, data.totalComments || 0, data.apiMeta);
    summary.textContent = data.summary || "";
    return;
  }

  const total = data.viewpoints.reduce((sum, item) => sum + item.count, 0) || 1;
  const totalComments = Math.max(total, Number(data.totalComments) || 0);
  const rateText = buildRateLimitText(data.apiMeta);
  status.textContent = `已归类 ${total}/${totalComments} 条评论。${rateText ? ` ${rateText}` : ""}`;
  bar.hidden = false;
  bar.innerHTML = "";
  legend.innerHTML = "";

  data.viewpoints.forEach((item, index) => {
    const color = COLORS[index % COLORS.length];
    const ratio = (item.count / total) * 100;

    const segment = document.createElement("span");
    segment.className = "v2ex-dist-segment";
    segment.style.width = `${Math.max(ratio, 3)}%`;
    segment.style.background = color;
    segment.title = `${item.label} ${ratio.toFixed(1)}%`;
    bar.appendChild(segment);

    const li = document.createElement("li");
    li.innerHTML = `
      <span class="v2ex-dist-dot" style="background:${color}"></span>
      <span class="v2ex-dist-item-main">
        <span class="v2ex-dist-label">${item.label}</span>
        <span class="v2ex-dist-value">${item.count}（${ratio.toFixed(1)}%）</span>
      </span>
    `;
    legend.appendChild(li);
  });

  summary.textContent = data.summary || "";
}

function collectPageComments() {
  return Array.from(document.querySelectorAll("#Main div.cell[id^='r_'] .reply_content"))
    .map((node) => String(node?.textContent || "").replace(/\s+/g, " ").trim())
    .filter(Boolean);
}

function run() {
  const topicId = getTopicIdFromPath();
  if (!topicId) {
    return;
  }

  const panel = ensurePanel();
  if (!panel) {
    return;
  }

  chrome.runtime.sendMessage(
    {
      type: "ANALYZE_V2EX_DISTRIBUTION",
      payload: { topicId, pageComments: collectPageComments() }
    },
    (response) => {
      if (chrome.runtime.lastError) {
        renderError(panel, chrome.runtime.lastError.message);
        return;
      }

      if (!response?.ok) {
        renderError(panel, response?.error || "未知错误");
        return;
      }

      renderDistribution(panel, response.result);
    }
  );
}

run();