---
import { getBlog } from '../../lib/apis/legacy/blog'
import FullLayoutV1 from '../../layout/FullLayoutV1.astro'
import { MarkdocTreeRender } from '../../components/MarkdocRenderer.tsx'
import { getCachedMarkdocTree } from '../../lib/markdoc.server.ts'
import { Image } from 'astro:assets'
import { Icon } from 'astro-icon/components'

import Artalk from '../../components/Artalk.svelte'

export const prerender = false

const { blog_id = '' } = Astro.params
const blog_id_num = parseInt(blog_id)

if (isNaN(blog_id_num) || blog_id_num < 0) {
  return Astro.redirect('/404')
}

let blogData = null

try {
  blogData = await getBlog(blog_id_num)
} catch (e) {
  console.error(e)
  return Astro.redirect('/500')
}

if (blogData === null) {
  return Astro.redirect('/404')
}

const tree = await getCachedMarkdocTree(blogData.content)
const formatDate = (date: Date) =>
  `${date.getFullYear()} 年 ${date.getMonth() + 1} 月 ${date.getDate()} 日`
---

<FullLayoutV1 title={blogData.title} withGap>
  {
    blogData.featured_image && (
      <div class="featured-image">
        <Image
          class="image"
          src={blogData.featured_image.image_url}
          width={960}
          height={540}
          alt="博客的头图"
        />
      </div>
    )
  }
  <main>
    <h1>{blogData.title}</h1>
    {
      blogData.author && (
        <div class="blog-info">
          <a
            class="author"
            href={`https://legacy.passthem.top/user/${blogData.author.username}`}
          >
            <div class="avatar">
              <Image
                class="image"
                src={blogData.author.avatar.image_url}
                width={32}
                height={32}
                alt={`用户 ${blogData.author.nickname} 的头像`}
              />
            </div>
            <div class="username">{blogData.author.nickname}</div>
          </a>
          <span class="split">・</span>
          <span>{formatDate(blogData.updated_at)} 更新</span>
        </div>
      )
    }
    <article>
      <MarkdocTreeRender tree={tree} client:load />
    </article>
    <h1 class="comment-title">
      <Icon name="material-symbols:chat-rounded" /> 评论区
    </h1>
    <Artalk client:idle />
  </main>
</FullLayoutV1>

<style>
  .__dev__caution {
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;

    & > h1 {
      font-size: 72px;
      font-weight: 800;
    }
  }

  .featured-image {
    margin-inline: auto;
    width: 100%;
    max-width: 960px;
    aspect-ratio: 16 / 9;
    margin-block-end: 2rem;
    position: relative;

    & > .image {
      object-fit: cover;
      height: 100%;
      width: 100%;
    }

    &::after {
      content: '';
      display: block;
      position: absolute;
      left: 0;
      bottom: 0;
      height: 50px;
      width: 100%;
      background: linear-gradient(to bottom, transparent, #00000044);
    }

    @media (width < 768px) and (width >= 540px) {
      aspect-ratio: 2.5 / 1;
    }

    @media (width >= 768px) {
      aspect-ratio: 4 / 1;
      margin-block-end: 3rem;
    }
  }

  .blog-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    color: var(--color-fg-1);

    & > .author {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 0.25rem;

      & > .avatar {
        & > .image {
          width: 32px;
          height: 32px;
          object-fit: cover;
          border-radius: 16px;
        }
      }
    }
  }

  main {
    max-inline-size: 840px;
    margin-inline: auto;
    padding-block-end: 4rem;
    padding-inline: 20px;

    & > h1 {
      font-size: 2rem;
      font-weight: 900;
      margin-block-end: 1.2rem;
      margin-block-start: 2rem;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 0.25rem;

      &.comment-title {
        margin-block-start: 3rem;
      }
    }
  }
</style>
