import Link from "next/link";
import { notFound } from "next/navigation";
import Container from "@/components/ui/Container";
import BlogCard from "@/components/cards/BlogCard";
import CTASection from "@/components/sections/CTASection";
import { getBlogPosts, getBlogPostBySlug, getSiteSettings } from "@/lib/api";

export const revalidate = 300;

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

export async function generateMetadata({ params }: { params: { slug: string } }) {
  const post = await getBlogPostBySlug(params.slug);
  return { title: post ? `${post.title} | LarCare Blog` : "LarCare Blog" };
}

export default async function BlogPostPage({ params }: { params: { slug: string } }) {
  const [post, allPosts, site] = await Promise.all([
    getBlogPostBySlug(params.slug),
    getBlogPosts(),
    getSiteSettings()
  ]);

  if (!post) notFound();

  const related = allPosts.filter((p) => p.slug !== post.slug).slice(0, 3);

  return (
    <>
      <section
        className="relative min-h-[320px] [@media(max-height:500px)]:min-h-[220px] flex items-end bg-neutral-800 text-white"
        style={{
          backgroundImage: `linear-gradient(rgba(28,25,21,0.55), rgba(28,25,21,0.65)), url(${post.coverImage})`,
          backgroundSize: "cover",
          backgroundPosition: "center"
        }}
      >
        <Container className="py-12">
          <Link href="/blog" className="text-sm text-neutral-300 hover:text-white">
            ← Back to all blog posts
          </Link>
          <h1 className="mt-4 font-display text-2xl md:text-4xl max-w-3xl">{post.title}</h1>
        </Container>
      </section>

      <section className="py-16">
        <Container className="max-w-3xl mx-auto prose-larcare" dangerouslySetInnerHTML={{ __html: post.bodyHtml }} />
      </section>

      {related.length ? (
        <section className="bg-neutral-100 py-16">
          <Container>
            <h2 className="font-display text-2xl text-neutral-900 mb-8">Related articles</h2>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
              {related.map((p) => (
                <BlogCard key={p.slug} post={p} />
              ))}
            </div>
          </Container>
        </section>
      ) : null}

      <CTASection phone={site.phone} />
    </>
  );
}