const state = {
  atlas: null,
  health: null,
  view: "atlas",
  activeTopic: "",
  topicFocus: null,
  selectedPaper: null,
  selectedMarkdown: "",
  searchItems: [],
  searchTotal: 0,
  aiBusy: false,
};

const $ = (selector) => document.querySelector(selector);

const elements = {
  healthLine: $("#healthLine"),
  searchInput: $("#searchInput"),
  searchBtn: $("#searchBtn"),
  mapTitle: $("#mapTitle"),
  atlasSvg: $("#atlasSvg"),
  routeList: $("#routeList"),
  timeline: $("#timeline"),
  explainAtlasBtn: $("#explainAtlasBtn"),
  readingPathBtn: $("#readingPathBtn"),
  lensEyebrow: $("#lensEyebrow"),
  lensTitle: $("#lensTitle"),
  lensBody: $("#lensBody"),
  closePaperBtn: $("#closePaperBtn"),
};

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

function debounce(fn, delay = 260) {
  let timer = null;
  return (...args) => {
    window.clearTimeout(timer);
    timer = window.setTimeout(() => fn(...args), delay);
  };
}

async function api(path, options = {}) {
  const response = await fetch(path, {
    ...options,
    headers: {
      "content-type": "application/json",
      ...(options.headers || {}),
    },
  });
  const payload = await response.json();
  if (!response.ok) {
    throw new Error(payload.error || `HTTP ${response.status}`);
  }
  return payload;
}

function topicLabel(topic) {
  const found = state.atlas?.topics?.find((item) => item.id === topic);
  return found?.label || topic.replaceAll("-", " ");
}

function colorFor(index) {
  const colors = ["#0d766f", "#ba5644", "#aa7419", "#527b46", "#665d9f", "#236092", "#8a5a25"];
  return colors[index % colors.length];
}

async function loadHealth() {
  try {
    const health = await api("/api/health");
    state.health = health;
    elements.healthLine.textContent = `${health.paper_count} papers · ${health.ollama_ok ? "Ollama online" : "Ollama offline"}`;
  } catch (error) {
    elements.healthLine.textContent = error.message;
  }
}

async function loadAtlas() {
  state.atlas = await api("/api/atlas");
  elements.mapTitle.textContent = `${state.atlas.paper_count} 篇论文构成的 Agent 版图`;
  renderAtlasMap();
  renderRoutes();
  renderTimeline();
  renderOverview();
}

function renderAtlasMap() {
  const topics = state.atlas.topics.filter((topic) => topic.count >= 30).slice(0, 13);
  const topicMap = new Map(topics.map((topic, index) => [topic.id, { ...topic, index }]));
  const maxCount = Math.max(...topics.map((topic) => topic.count), 1);
  const isMobile = window.matchMedia("(max-width: 760px)").matches;
  elements.atlasSvg.setAttribute("viewBox", isMobile ? "16 -4 78 86" : "0 0 170 100");
  const point = (topic) => ({
    x: isMobile ? topic.x : 14 + topic.x * 1.58,
    y: -18 + topic.y * 0.93,
  });

  const edges = state.atlas.edges
    .filter((edge) => topicMap.has(edge.source) && topicMap.has(edge.target))
    .map((edge) => {
      const source = topicMap.get(edge.source);
      const target = topicMap.get(edge.target);
      const sourcePoint = point(source);
      const targetPoint = point(target);
      return `
        <line class="atlas-edge"
          x1="${sourcePoint.x}" y1="${sourcePoint.y}"
          x2="${targetPoint.x}" y2="${targetPoint.y}"
          stroke-width="${Math.max(0.25, 1.8 * edge.strength).toFixed(2)}">
          <title>${escapeHtml(topicLabel(edge.source))} ↔ ${escapeHtml(topicLabel(edge.target))}: ${edge.count}</title>
        </line>
      `;
    })
    .join("");

  const nodes = topics
    .map((topic, index) => {
      const active = topic.id === state.activeTopic ? " active" : "";
      const r = 3.6 + 5.6 * (topic.count / maxCount);
      const ring = r + 1.6 + topic.heat * 1.7;
      const color = colorFor(index);
      const p = point(topic);
      return `
        <g class="atlas-node${active}" data-topic="${escapeHtml(topic.id)}" transform="translate(${p.x.toFixed(2)} ${p.y.toFixed(2)})">
          <circle class="heat-ring" r="${ring.toFixed(2)}" style="stroke:${color}; opacity:${0.2 + topic.heat * 0.65}"></circle>
          <circle r="${r.toFixed(2)}" style="stroke:${color};"></circle>
          <text y="-0.4">${escapeHtml(topic.label)}</text>
          <text class="node-count" y="3.0">${topic.count} · +${topic.recent_count}</text>
        </g>
      `;
    })
    .join("");

  elements.atlasSvg.innerHTML = `${edges}${nodes}`;
}

function renderRoutes() {
  elements.routeList.innerHTML = state.atlas.routes
    .map(
      (route) => `
        <button class="route-item" type="button" data-route="${escapeHtml(route.id)}">
          <strong>${escapeHtml(route.title)}</strong>
          <span>${escapeHtml(route.summary)}</span>
        </button>
      `,
    )
    .join("");
}

function renderTimeline() {
  const rows = state.atlas.timeline.slice(-13);
  const maxTotal = Math.max(...rows.map((row) => row.total), 1);
  elements.timeline.innerHTML = rows
    .map((row) => {
      const height = 8 + 70 * (row.total / maxTotal);
      return `
        <div class="month-cell" title="${escapeHtml(row.month)} · ${row.total}">
          <div class="month-bar" style="height:${height.toFixed(1)}px"></div>
          <div class="month-label">${escapeHtml(row.month.slice(5))}</div>
        </div>
      `;
    })
    .join("");
}

function statGrid(items) {
  return `
    <div class="stat-grid">
      ${items
        .map(
          (item) => `
            <div class="stat">
              <strong>${escapeHtml(item.value)}</strong>
              <span>${escapeHtml(item.label)}</span>
            </div>
          `,
        )
        .join("")}
    </div>
  `;
}

function paperList(items, limit = items.length) {
  if (!items?.length) {
    return `<div class="empty-state">暂无证据</div>`;
  }
  return `
    <div class="paper-list">
      ${items
        .slice(0, limit)
        .map(
          (paper) => `
            <button class="paper-item" type="button" data-paper="${escapeHtml(paper.id)}">
              <div class="paper-title">${escapeHtml(paper.title)}</div>
              <div class="paper-meta">
                <span>${escapeHtml(paper.published_at || paper.year || "unknown")}</span>
                <span>score ${escapeHtml(paper.collection_score)}</span>
                ${(paper.topics || [])
                  .slice(0, 4)
                  .map((topic) => `<span class="mini-badge">${escapeHtml(topicLabel(topic))}</span>`)
                  .join("")}
              </div>
            </button>
          `,
        )
        .join("")}
    </div>
  `;
}

function routeButtons(routes) {
  return `
    <div class="chip-row">
      ${routes
        .map(
          (route) => `
            <button class="pill-button" type="button" data-route="${escapeHtml(route.id)}">${escapeHtml(route.title)}</button>
          `,
        )
        .join("")}
    </div>
  `;
}

function renderOverview(aiHtml = "") {
  state.view = "atlas";
  state.selectedPaper = null;
  elements.lensEyebrow.textContent = "Atlas";
  elements.lensTitle.textContent = "整体脉络";
  setModeButtons("atlas");

  const topTopics = state.atlas.topics.slice(0, 7);
  elements.lensBody.innerHTML = `
    <section class="section">
      ${statGrid([
        { value: state.atlas.paper_count, label: "papers" },
        { value: state.atlas.topic_count, label: "topics" },
        { value: state.atlas.recent_months.join(" / "), label: "recent window" },
      ])}
    </section>

    <section class="section">
      <p class="statement">这版 Atlas 把论文当作证据，把主题、路线和趋势当作入口。当前最强的主轴是 evaluation、tool use、RAG、reasoning、planning、safety、memory。</p>
      <p class="question">核心问题：Agent 如何从“能回答”走向“能长期、可观察、可治理地行动”？</p>
    </section>

    <section class="section">
      <h3>主题入口</h3>
      <div class="chip-row">
        ${topTopics
          .map(
            (topic) => `
              <button class="pill-button" type="button" data-topic="${escapeHtml(topic.id)}">
                ${escapeHtml(topic.label)} · ${topic.count}
              </button>
            `,
          )
          .join("")}
      </div>
    </section>

    <section class="section">
      <h3>路线</h3>
      ${routeButtons(state.atlas.routes)}
    </section>

    <section class="section">
      <h3>关键论文候选</h3>
      ${paperList(state.atlas.key_papers, 8)}
    </section>

    <section class="section">
      <h3>AI 研究编辑</h3>
      <div class="tool-row">
        <button class="tool-button primary" type="button" data-atlas-ai="atlas">解释地图</button>
        <button class="tool-button" type="button" data-atlas-ai="path">阅读路径</button>
      </div>
      <div id="aiResult" class="ai-box" style="${aiHtml ? "" : "display:none"}">${aiHtml}</div>
    </section>
  `;
}

async function selectTopic(topic) {
  state.activeTopic = topic;
  state.selectedPaper = null;
  renderAtlasMap();
  const focus = await api(`/api/topic?topic=${encodeURIComponent(topic)}`);
  state.topicFocus = focus;
  renderTopic(focus);
}

function renderTopic(focus, aiHtml = "") {
  state.view = "atlas";
  elements.lensEyebrow.textContent = "Topic";
  elements.lensTitle.textContent = focus.label;
  setModeButtons("atlas");

  const recentTotal = Object.values(focus.months).slice(-3).reduce((sum, value) => sum + Number(value || 0), 0);
  elements.lensBody.innerHTML = `
    <section class="section">
      ${statGrid([
        { value: focus.count, label: "papers" },
        { value: recentTotal, label: "recent" },
        { value: focus.neighbors.length, label: "neighbors" },
      ])}
    </section>

    <section class="section">
      <p class="statement">${escapeHtml(focus.stance)}</p>
      <p class="question">${escapeHtml(focus.question)}</p>
    </section>

    <section class="section">
      <h3>相邻主题</h3>
      <div class="chip-row">
        ${focus.neighbors
          .slice(0, 8)
          .map(
            (item) => `
              <button class="pill-button" type="button" data-topic="${escapeHtml(item.topic)}">
                ${escapeHtml(item.label)} · ${item.count}
              </button>
            `,
          )
          .join("")}
      </div>
    </section>

    <section class="section">
      <h3>所在路线</h3>
      ${routeButtons(focus.routes)}
    </section>

    <section class="section">
      <h3>AI 研究编辑</h3>
      <div class="tool-row">
        <button class="tool-button primary" type="button" data-topic-ai="topic">生成主题导读</button>
        <button class="tool-button" type="button" data-topic-ai="path">生成阅读路径</button>
        ${
          focus.neighbors[0]
            ? `<button class="tool-button" type="button" data-compare-topic="${escapeHtml(focus.neighbors[0].topic)}">对比 ${escapeHtml(focus.neighbors[0].label)}</button>`
            : ""
        }
      </div>
      <div id="aiResult" class="ai-box" style="${aiHtml ? "" : "display:none"}">${aiHtml}</div>
    </section>

    <section class="section">
      <h3>关键论文</h3>
      ${paperList(focus.key_papers, 10)}
    </section>

    <section class="section">
      <h3>最近新增</h3>
      ${paperList(focus.recent_papers, 8)}
    </section>
  `;
}

function renderRoute(routeId) {
  const route = state.atlas.routes.find((item) => item.id === routeId);
  if (!route) return;
  state.selectedPaper = null;
  elements.lensEyebrow.textContent = "Route";
  elements.lensTitle.textContent = route.title;
  elements.lensBody.innerHTML = `
    <section class="section">
      <p class="statement">${escapeHtml(route.summary)}</p>
    </section>
    <section class="section">
      <h3>主题链路</h3>
      <div class="chip-row">
        ${route.topics
          .map((topic) => `<button class="pill-button" type="button" data-topic="${escapeHtml(topic)}">${escapeHtml(topicLabel(topic))}</button>`)
          .join("")}
      </div>
    </section>
    <section class="section">
      <h3>路线证据</h3>
      ${paperList(
        state.atlas.key_papers.filter((paper) => paper.topics.some((topic) => route.topics.includes(topic))),
        12,
      )}
    </section>
  `;
}

async function runSearch() {
  const q = elements.searchInput.value.trim();
  if (!q) {
    renderOverview();
    return;
  }
  state.view = "search";
  setModeButtons("search");
  elements.lensEyebrow.textContent = "Search";
  elements.lensTitle.textContent = q;
  elements.lensBody.innerHTML = `<div class="empty-state">searching</div>`;
  const params = new URLSearchParams({ q, limit: "60", sort: "score" });
  if (state.activeTopic) params.set("topic", state.activeTopic);
  const payload = await api(`/api/papers?${params.toString()}`);
  state.searchItems = payload.items;
  state.searchTotal = payload.total;
  elements.lensBody.innerHTML = `
    <section class="section">
      ${statGrid([
        { value: payload.total, label: "matches" },
        { value: state.activeTopic ? topicLabel(state.activeTopic) : "all", label: "scope" },
        { value: "score", label: "sort" },
      ])}
    </section>
    <section class="section">
      ${paperList(payload.items, payload.items.length)}
    </section>
  `;
}

function renderReading() {
  state.view = "reading";
  setModeButtons("reading");
  elements.lensEyebrow.textContent = "Reading";
  elements.lensTitle.textContent = "阅读流";
  elements.lensBody.innerHTML = `
    <section class="section">
      <p class="statement">先从路线理解问题，再进入主题，最后把论文作为证据读。当前版本把高分论文和最近新增放在这里，后续可以接入个人阅读队列。</p>
    </section>
    <section class="section">
      <h3>高优先级</h3>
      ${paperList(state.atlas.key_papers, 12)}
    </section>
    <section class="section">
      <h3>最近新增</h3>
      ${paperList(state.atlas.recent_papers, 12)}
    </section>
  `;
}

function stripFrontmatter(markdown) {
  const text = String(markdown || "");
  const match = text.match(/^# .+?\n\n---[\s\S]*?\n---\n\n?/);
  return match ? text.slice(match[0].length) : text;
}

function renderMarkdown(markdown) {
  return escapeHtml(stripFrontmatter(markdown))
    .replace(/^### (.+)$/gm, "\n$1\n")
    .replace(/^## (.+)$/gm, "\n$1\n")
    .replace(/^# (.+)$/gm, "$1\n")
    .replace(/\[([^\]]+)\]\((https?:\/\/[^)]+)\)/g, "$1 ($2)");
}

async function selectPaper(id) {
  const payload = await api(`/api/paper?id=${encodeURIComponent(id)}`);
  state.selectedPaper = payload.paper;
  state.selectedMarkdown = payload.markdown;
  renderPaperReader();
}

function renderPaperReader(aiHtml = "", abstractHtml = "") {
  const paper = state.selectedPaper;
  if (!paper) return;
  elements.lensEyebrow.textContent = "Paper";
  elements.lensTitle.textContent = "研读";
  elements.lensBody.innerHTML = `
    <section class="section">
      <h3 class="reader-title">${escapeHtml(paper.title)}</h3>
      <div class="paper-meta">
        <span>${escapeHtml(paper.published_at || paper.year)}</span>
        <span>${escapeHtml(paper.venue || paper.source)}</span>
        <span>score ${escapeHtml(paper.collection_score)}</span>
      </div>
      <div class="chip-row" style="margin-top:10px">
        ${(paper.topics || []).map((topic) => `<button class="pill-button" type="button" data-topic="${escapeHtml(topic)}">${escapeHtml(topicLabel(topic))}</button>`).join("")}
      </div>
    </section>

    <section class="section">
      <div class="tool-row">
        <a class="paper-link" href="${escapeHtml(paper.url)}" target="_blank" rel="noreferrer">arXiv</a>
        <button class="tool-button" type="button" data-paper-action="abstract">摘要</button>
        <button class="tool-button primary" type="button" data-paper-action="summary">中文摘要</button>
        <button class="tool-button" type="button" data-paper-action="translate">翻译</button>
        <button class="tool-button" type="button" data-paper-action="deep">深度研读</button>
      </div>
    </section>

    <section class="section" id="paperAbstract" style="${abstractHtml ? "" : "display:none"}">${abstractHtml}</section>
    <section class="section" id="paperAi" style="${aiHtml ? "" : "display:none"}">${aiHtml}</section>

    <section class="section">
      <h3>本地卡片</h3>
      <div class="reader-box markdown-preview">${renderMarkdown(state.selectedMarkdown)}</div>
    </section>
  `;
}

async function loadAbstract() {
  if (!state.selectedPaper) return;
  setAiBusy(true, "摘要获取中");
  try {
    const payload = await api(`/api/paper/abstract?id=${encodeURIComponent(state.selectedPaper.id)}`);
    const abstract = payload.abstract;
    const html = abstract
      ? `<h3>arXiv Abstract</h3><div class="abstract-text">${escapeHtml(abstract.abstract)}</div>`
      : `<div class="empty-state">${escapeHtml(payload.message || "No abstract")}</div>`;
    renderPaperReader("", html);
  } catch (error) {
    renderPaperReader("", `<div class="empty-state">${escapeHtml(error.message)}</div>`);
  } finally {
    setAiBusy(false);
  }
}

function setAiBusy(isBusy, label = "") {
  state.aiBusy = isBusy;
  document.querySelectorAll(".tool-button, .quiet-button").forEach((button) => {
    button.disabled = isBusy;
  });
  if (isBusy) {
    const box = $("#aiResult") || $("#paperAi");
    if (box) {
      box.style.display = "";
      box.innerHTML = `<div class="empty-state">${escapeHtml(label)}</div>`;
    }
  }
}

async function runPaperAi(mode) {
  if (!state.selectedPaper) return;
  const model = state.health?.default_models?.[mode] || (mode === "translate" ? "ChatGPT-5.6:light" : "ChatGPT-5.6:fast");
  if (model.includes(":large") && !window.confirm("将调用 large 模型，占用更多 GPU。继续？")) return;
  setAiBusy(true, `${mode} · ${model}`);
  try {
    const payload = await api("/api/ai", {
      method: "POST",
      body: JSON.stringify({ id: state.selectedPaper.id, mode, model }),
    });
    const cache = payload.cached ? "cached" : `${payload.duration_seconds}s`;
    const html = `<h3>${escapeHtml(payload.model)} · ${escapeHtml(cache)}</h3><div class="ai-output">${escapeHtml(payload.response)}</div>`;
    renderPaperReader(html, $("#paperAbstract")?.innerHTML || "");
  } catch (error) {
    renderPaperReader(`<div class="empty-state">${escapeHtml(error.message)}</div>`, $("#paperAbstract")?.innerHTML || "");
  } finally {
    setAiBusy(false);
  }
}

async function runAtlasAi(mode, topic = "", topicB = "") {
  const model = state.health?.default_models?.[mode] || "ChatGPT-5.6:fast";
  if (model.includes(":large") && !window.confirm("将调用 large 模型做高维综合，占用更多 GPU。继续？")) return;
  setAiBusy(true, `${mode} · ${model}`);
  try {
    const payload = await api("/api/atlas/ai", {
      method: "POST",
      body: JSON.stringify({ mode, topic, topic_b: topicB, model }),
    });
    const cache = payload.cached ? "cached" : `${payload.duration_seconds}s`;
    const html = `<h3>${escapeHtml(payload.model)} · ${escapeHtml(cache)}</h3><div class="ai-output">${escapeHtml(payload.response)}</div>`;
    if (mode === "topic" || (mode === "path" && state.topicFocus)) {
      renderTopic(state.topicFocus, html);
    } else {
      renderOverview(html);
    }
  } catch (error) {
    const html = `<div class="empty-state">${escapeHtml(error.message)}</div>`;
    if (state.topicFocus) renderTopic(state.topicFocus, html);
    else renderOverview(html);
  } finally {
    setAiBusy(false);
  }
}

function setModeButtons(view) {
  document.querySelectorAll("[data-view]").forEach((button) => {
    button.classList.toggle("active", button.dataset.view === view);
  });

  window.addEventListener(
    "resize",
    debounce(() => {
      if (state.atlas) renderAtlasMap();
    }, 150),
  );
}

function scrollLensIntoView() {
  if (window.matchMedia("(max-width: 760px)").matches) {
    document.querySelector(".lens-panel").scrollIntoView({ behavior: "smooth", block: "start" });
  }
}

function bindEvents() {
  elements.atlasSvg.addEventListener("click", async (event) => {
    const node = event.target.closest("[data-topic]");
    if (!node) return;
    await selectTopic(node.dataset.topic);
    scrollLensIntoView();
  });

  elements.routeList.addEventListener("click", (event) => {
    const button = event.target.closest("[data-route]");
    if (button) {
      renderRoute(button.dataset.route);
      scrollLensIntoView();
    }
  });

  elements.lensBody.addEventListener("click", async (event) => {
    const topicButton = event.target.closest("[data-topic]");
    const routeButton = event.target.closest("[data-route]");
    const paperButton = event.target.closest("[data-paper]");
    const atlasAi = event.target.closest("[data-atlas-ai]");
    const topicAi = event.target.closest("[data-topic-ai]");
    const compareButton = event.target.closest("[data-compare-topic]");
    const paperAction = event.target.closest("[data-paper-action]");

    if (topicButton) {
      await selectTopic(topicButton.dataset.topic);
      scrollLensIntoView();
    } else if (routeButton) {
      renderRoute(routeButton.dataset.route);
    } else if (paperButton) {
      await selectPaper(paperButton.dataset.paper);
      scrollLensIntoView();
    } else if (atlasAi) {
      await runAtlasAi(atlasAi.dataset.atlasAi, state.activeTopic);
    } else if (topicAi) {
      await runAtlasAi(topicAi.dataset.topicAi, state.activeTopic);
    } else if (compareButton) {
      await runAtlasAi("compare", state.activeTopic, compareButton.dataset.compareTopic);
    } else if (paperAction) {
      const action = paperAction.dataset.paperAction;
      if (action === "abstract") await loadAbstract();
      else await runPaperAi(action);
    }
  });

  elements.searchBtn.addEventListener("click", runSearch);
  elements.searchInput.addEventListener(
    "input",
    debounce(() => {
      if (elements.searchInput.value.trim()) runSearch();
    }),
  );

  elements.explainAtlasBtn.addEventListener("click", () => runAtlasAi("atlas", state.activeTopic));
  elements.readingPathBtn.addEventListener("click", () => runAtlasAi("path", state.activeTopic));
  elements.closePaperBtn.addEventListener("click", () => {
    if (state.topicFocus) renderTopic(state.topicFocus);
    else renderOverview();
  });

  document.querySelectorAll("[data-view]").forEach((button) => {
    button.addEventListener("click", async () => {
      const view = button.dataset.view;
      if (view === "atlas") {
        state.activeTopic ? await selectTopic(state.activeTopic) : renderOverview();
      } else if (view === "search") {
        await runSearch();
      } else {
        renderReading();
      }
      scrollLensIntoView();
    });
  });
}

async function boot() {
  bindEvents();
  await loadHealth();
  await loadAtlas();
}

boot();