import type { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import { notFound } from "next/navigation";
import Container from "@/components/Container";
import PageBanner from "@/components/PageBanner";
import PostCard from "@/components/PostCard";
import { getPostBySlug, getRelatedPosts, posts } from "@/data/posts";

export function generateStaticParams() {
  return posts.map((p) => ({ slug: p.slug }));
}

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { slug } = await params;
  const post = getPostBySlug(slug);
  if (!post) return {};
  return {
    title: `${post.title} | آراد آریسمان`,
    description: post.excerpt,
  };
}

export default async function BlogDetailPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const post = getPostBySlug(slug);
  if (!post) notFound();

  const related = getRelatedPosts(post);

  return (
    <>
      <PageBanner title={post.title} breadcrumb="مقالات" />

      <section className="py-16 sm:py-20">
        <Container className="max-w-3xl">
          <Link
            href="/blog"
            className="inline-flex items-center gap-2 text-sm font-semibold text-primary hover:text-primary-dark transition-colors"
          >
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
              <path
                d="M10.7 18.7a1 1 0 0 1-1.4 0l-6-6a1 1 0 0 1 0-1.4l6-6a1 1 0 1 1 1.4 1.4L6 11.3h14a1 1 0 1 1 0 2H6l4.7 4.3a1 1 0 0 1 0 1.4Z"
                fill="currentColor"
              />
            </svg>
            بازگشت به مقالات
          </Link>

          <div className="mt-6 flex items-center gap-3 text-sm text-foreground/70">
            <span className="rounded-full bg-primary/5 px-3 py-1 text-xs font-semibold text-primary">
              {post.category}
            </span>
            <span>{post.date}</span>
            <span className="h-1 w-1 rounded-full bg-foreground/30" />
            <span>{post.readingTime}</span>
          </div>

          <div className="relative mt-6 aspect-[16/9] rounded-3xl overflow-hidden shadow-xl bg-surface">
            <Image
              src={post.cover}
              alt={post.title}
              fill
              priority
              className="object-cover"
              sizes="(min-width: 1024px) 768px, 100vw"
            />
          </div>

          <div className="mt-8 space-y-5">
            {post.content.map((paragraph) => (
              <p key={paragraph} className="leading-8 text-foreground">
                {paragraph}
              </p>
            ))}
          </div>

          <div className="mt-10 rounded-2xl bg-surface p-6 flex flex-wrap items-center justify-between gap-4">
            <div>
              <p className="font-bold text-secondary">نویسنده: تیم آراد آریسمان</p>
              <p className="mt-1 text-sm text-foreground">
                برای مشاوره تخصصی تغذیه دام و طیور با ما در تماس باشید.
              </p>
            </div>
            <Link
              href="/contact"
              className="rounded-full bg-primary px-6 py-3 text-white font-semibold hover:bg-primary-dark transition-colors shrink-0"
            >
              تماس با ما
            </Link>
          </div>
        </Container>
      </section>

      {related.length > 0 && (
        <section className="pb-16 sm:pb-20 bg-surface pt-16">
          <Container>
            <h2 className="text-2xl font-extrabold text-primary">
              مقالات مرتبط
            </h2>
            <div className="mt-8 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
              {related.map((p) => (
                <PostCard key={p.id} post={p} />
              ))}
            </div>
          </Container>
        </section>
      )}
    </>
  );
}
