---
interface Item {
  id: string;
  data: {
    title: string;
    summary: string;
    topic: string;
    date: string;
    canonicalUrl: string;
    preview?: string;
    sourceRepo?: string;
    kind: "article" | "site";
  };
}

interface Props { items: Item[] }
const { items } = Astro.props;
const topicLabels: Record<string, string> = {
  "agent-systems": "Agent 系统",
  "llm-systems": "LLM 系统",
  "ai-research": "AI 研究",
  "research-method": "研究方法"
};
const topics = [...new Set(items.map((item) => item.data.topic))];
const linkFor = (item: Item) => item.data.kind === "article" ? `/articles/${item.id}/` : item.data.canonicalUrl;
---

<section class="research-shell" id="research">
  <aside class="research-rail">
    <p class="eyebrow">INDEX / 2026</p>
    <h2>研究索引</h2>
    <p>文章、实验报告与独立交互专题按同一条研究脉络组织。</p>
    <div class="topic-filters" role="group" aria-label="按主题筛选">
      <button class="topic-filter is-active" data-topic="all" type="button">全部 <span>{items.length}</span></button>
      {topics.map((topic) => (
        <button class="topic-filter" data-topic={topic} type="button">
          {topicLabels[topic] ?? topic}
          <span>{items.filter((item) => item.data.topic === topic).length}</span>
        </button>
      ))}
    </div>
  </aside>

  <div class="research-list" aria-live="polite">
    {items.map((item, index) => (
      <article class="research-entry" data-entry data-topic={item.data.topic}>
        <span class="entry-number">{String(index + 1).padStart(2, "0")}</span>
        <div class="entry-copy">
          <div class="entry-meta">
            <span>{topicLabels[item.data.topic] ?? item.data.topic}</span>
            <span>{item.data.date}</span>
            <span>{item.data.kind === "site" ? "独立专题" : "文章"}</span>
          </div>
          <h3><a href={linkFor(item)}>{item.data.title}</a></h3>
          <p>{item.data.summary}</p>
          <div class="entry-links">
            <a class="text-link" href={linkFor(item)}>打开研究 <span aria-hidden="true">↗</span></a>
            {item.data.sourceRepo && <a class="muted-link" href={item.data.sourceRepo}>源码</a>}
          </div>
        </div>
        {item.data.preview ? (
          <a class="entry-preview" href={linkFor(item)} aria-label={`打开 ${item.data.title}`}>
            <img src={item.data.preview} alt="" loading="lazy" width="640" height="360" />
          </a>
        ) : (
          <a class={`entry-abstract topic-${item.data.topic}`} href={linkFor(item)} aria-hidden="true" tabindex="-1">
            <span></span><span></span><span></span>
          </a>
        )}
      </article>
    ))}
    <p class="empty-state" hidden data-empty>这个主题暂时没有公开内容。</p>
  </div>
</section>

<script>
  const buttons = Array.from(document.querySelectorAll<HTMLButtonElement>("[data-topic].topic-filter"));
  const entries = Array.from(document.querySelectorAll<HTMLElement>("[data-entry]"));
  const empty = document.querySelector<HTMLElement>("[data-empty]");
  for (const button of buttons) {
    button.addEventListener("click", () => {
      const topic = button.dataset.topic ?? "all";
      for (const candidate of buttons) candidate.classList.toggle("is-active", candidate === button);
      let visible = 0;
      for (const entry of entries) {
        const show = topic === "all" || entry.dataset.topic === topic;
        entry.hidden = !show;
        if (show) visible += 1;
      }
      if (empty) empty.hidden = visible !== 0;
    });
  }
</script>
