import type { Metadata } from "next"
import Image from "next/image"
import Link from "next/link"
import { notFound } from "next/navigation"
import { BLOG_POSTS } from "@/lib/blog-data"

interface Props {
  params: Promise<{ slug: string }>
}

export async function generateStaticParams() {
  return BLOG_POSTS.map((post) => ({ slug: post.slug }))
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params
  const post = BLOG_POSTS.find((p) => p.slug === slug)
  if (!post) return { title: "文章未找到" }
  return {
    title: `${post.title} | DAL Code`,
    description: post.excerpt,
    openGraph: {
      title: `${post.title} | DAL Code`,
      description: post.excerpt,
      images: [{ url: post.image }],
    },
  }
}

export default async function BlogPostPage({ params }: Props) {
  const { slug } = await params
  const post = BLOG_POSTS.find((p) => p.slug === slug)
  if (!post) notFound()

  return (
    <main>
      <section className="section-small top overflow-hidden">
        <div className="w-layout-blockcontainer container-default w-container">
          <div className="inner-container _650px center">
            <div className="text-center">
              <div className="blog-details-wrapper" style={{ justifyContent: "center" }}>
                <div className="item-details">{post.date}</div>
                <div className="item-details-divider">&middot;</div>
                <div className="item-details">{post.category}</div>
              </div>
              <div className="mg-top-4x-extra-small">
                <h1>{post.title}</h1>
              </div>
              <div className="mg-top-4x-extra-small">
                <p>{post.excerpt}</p>
              </div>
            </div>
          </div>
          <div className="mg-top-regular">
            <div className="corner-gradient-container">
              <div className="border-wrapper" style={{ position: "relative", aspectRatio: "16/9" }}>
                <Image
                  src={post.image}
                  alt={post.imageAlt}
                  fill
                  style={{ objectFit: "cover", borderRadius: 12 }}
                  priority
                />
              </div>
              <div className="corner-gradient-wrapper">
                <div className="corner-gradient-horizontal top-left" />
                <div className="corner-gradient-horizontal bottom-left" />
                <div className="corner-gradient-horizontal top-right" />
                <div className="corner-gradient-horizontal bottom-right" />
              </div>
            </div>
          </div>
          <div className="mg-top-regular">
            <div className="inner-container _650px center">
              <div className="blog-post-rich-text w-richtext">
                {post.sections.map((section) => (
                  <section key={section.title}>
                    <h2>{section.title}</h2>
                    {section.paragraphs.map((paragraph) => (
                      <p key={paragraph}>{paragraph}</p>
                    ))}
                  </section>
                ))}
              </div>
            </div>
          </div>
          <div className="mg-top-regular">
            <div className="inner-container _650px center text-center">
              <Link href="/blog" className="primary-button w-inline-block">
                <div className="button-content">
                  <div>返回全部文章</div>
                  <div className="button-icon-wrapper primary">
                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 17 17" fill="none" className="squared-icon">
                      <path d="M6.25391 3.45312L10.7458 8.01563L6.25391 12.5781" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square" />
                    </svg>
                    <div className="button-icon-bg" />
                    <div className="button-icon-bg-inside" />
                  </div>
                </div>
              </Link>
            </div>
          </div>
        </div>
      </section>
    </main>
  )
}
