---
import BaseLayout from "../layouts/BaseLayout.astro"
import type { MarkdownInstance } from "astro"
import dayjs from "dayjs"
import { CA_LOGO_URL } from "../consts"

type Cover = {
  url: string
  square: string
  alt: string
} | string

type Post = {
  layout: string
  title: string
  pubDate: string // ISO 字符串，可选改为 `Date` 类型
  description: string
  author: string
  cover?: Cover
  tags: string[]
  theme: string
  featured: boolean
}

const posts: MarkdownInstance<Post>[] = await Astro.glob("./posts/*.md")
const blogs: MarkdownInstance<Post>[] = await Astro.glob("../pages/posts/blogs/**/*.md")

const allPosts = [...posts, ...blogs].sort((a, b) => {
  return new Date(b.frontmatter.pubDate).getTime() - new Date(a.frontmatter.pubDate).getTime()
})

const getCover = (post: MarkdownInstance<Post>) => {
  if (typeof post.frontmatter.cover === "string") {
    return { url: post.frontmatter.cover, square: post.frontmatter.cover, alt: "" }
  }
  return post.frontmatter.cover || { url: "", square: "", alt: "" }
}

  // const tags = allPosts.reduce((acc, post) => {
  //   post.frontmatter.tags.forEach(tag => {
  //     if (!acc.includes(tag)) {
  //       acc.push(tag)
  //     }
  //   })
  //   return acc
  // }, [] as string[]).sort((a, b) => a.localeCompare(b))

---

<BaseLayout primaryTitle="归档">
  <div class="box-border border-b sticky top-0 bg-white/80 backdrop-blur z-20 h-12">
    <div class="h-full flex items-center justify-between text-lg max-w-[1024px] mx-auto px-[22px]">
      <span id="repair-header" class="font-semibold select-none cursor-default">博客</span>
      <div class="flex items-center">
      </div>
    </div>
  </div>
  <section class="mb-12">
    <div class="section-content">
      <div class="flex flex-col gap-2 group">
        {
          allPosts.map((v) => {
            return (
              <a class="flex items-start sm:items-center gap-4 sm:gap-6 py-8 no-underline appearance-none text-gray-900 cursor-pointer" style="text-decoration:none" href={v.url}>
                <img
                  class="rounded-xl sm:rounded-[20px] w-[105px] sm:w-[264px] xl:w-[295px] shrink-0 aspect-video overflow-hidden bg-gray-100 object-cover object-center archive-cover"
                  src={getCover(v).url || CA_LOGO_URL}
                  alt={getCover(v).alt || "fallback cover"}
                />
                <div class="flex flex-col gap-1 sm:gap-2">
                  <div class="flex items-center gap-2">
                    {v.frontmatter.tags.slice(0, 3).map((tag) => {
                      return <span class="text-xs text-gray-700">{tag}</span>
                    })}
                  </div>
                  <div class="sm:text-xl font-bold">{v.frontmatter.title}</div>
                  <div class="text-sm sm:font-semibold text-gray-600 sm:mt-1">{dayjs(v.frontmatter.pubDate).format("YYYY-MM-DD")}</div>
                </div>
              </a>
              <div class="w-full h-[0.5px] bg-gray-600 my-1 flex-shrink-0 last:hidden"></div>
            )
          })
        }
      </div>
    </div>
  </section>
</BaseLayout>