---
import { getCollection, render, type CollectionEntry } from "astro:content";
import BaseLayout from "../../layouts/BaseLayout.astro";

export async function getStaticPaths() {
  const posts = await getCollection("posts", ({ data }) => data.status === "published");
  return posts.map((post) => ({ params: { id: post.id }, props: { post } }));
}

interface Props { post: CollectionEntry<"posts"> }
const { post } = Astro.props;
const { Content, headings } = await render(post);
const topicLabels: Record<string, string> = {
  "agent-systems": "Agent 系统",
  "llm-systems": "LLM 系统",
  "ai-research": "AI 研究",
  "research-method": "研究方法"
};
---

<BaseLayout title={post.data.title} description={post.data.summary} canonical={post.data.canonicalUrl} article image={post.data.preview}>
  <article class="article-page">
    <header class="article-header">
      <a class="back-link" href="/">← 返回研究索引</a>
      <div class="article-kicker"><span>{topicLabels[post.data.topic] ?? post.data.topic}</span><span>{post.data.date}</span><span>更新 {post.data.updated}</span></div>
      <h1>{post.data.title}</h1>
      <p>{post.data.summary}</p>
      <div class="tag-row">{post.data.tags.map((tag) => <span>{tag}</span>)}</div>
    </header>
    <div class="article-grid">
      <aside class="article-outline" aria-label="文章目录">
        <p>本文目录</p>
        <ol>
          {headings.filter((heading) => heading.depth === 2).map((heading) => (
            <li><a href={`#${heading.slug}`}>{heading.text}</a></li>
          ))}
        </ol>
      </aside>
      <div class="prose"><Content /></div>
    </div>
  </article>
</BaseLayout>
