import { notFound } from "next/navigation";
import { getPublishedPostBySlug, getAuthorBySlug, getRelatedPosts, getPublishedPosts } from "@/lib/content";
import { AnswerBox } from "@/components/aeo/AnswerBox";
import { StepList } from "@/components/aeo/StepList";
import { FAQSection } from "@/components/aeo/FAQSection";
import { SourcesList } from "@/components/aeo/SourcesList";
import { AuthorCard } from "@/components/author/AuthorCard";
import { RelatedPosts } from "@/components/blog/RelatedPosts";
import { blogPostingSchema, howToSchema, faqPageSchema, breadcrumbSchema } from "@/lib/schema";
import Image from "next/image";
import Link from "next/link";

function formatIsoDate(date: string) {
  return new Date(date).toLocaleDateString("en-US", {
    year: "numeric",
    month: "long",
    day: "numeric",
  });
}

export function generateMetadata({ params }: { params: { slug: string } }) {
  const post = getPublishedPostBySlug(params.slug);
  if (!post) return {};

  const ogImage = post.heroImage ? `https://www.qrmaster.net${post.heroImage}` : undefined;

  return {
    title: post.title,
    description: post.description,
    alternates: {
      canonical: `https://www.qrmaster.net/blog/${post.slug}`,
    },
    openGraph: {
      title: post.title,
      description: post.description,
      type: "article",
      publishedTime: post.datePublished,
      modifiedTime: post.dateModified || post.datePublished,
      authors: ["https://www.qrmaster.net"],
      tags: post.keywords,
      images: ogImage ? [{ url: ogImage, alt: post.imageAlt || post.title }] : undefined,
    },
    twitter: {
      card: "summary_large_image",
      title: post.title,
      description: post.description,
      images: ogImage ? [ogImage] : undefined,
    }
  };
}

export function generateStaticParams() {
  // Only generate static params for published posts
  return getPublishedPosts().map((post) => ({
    slug: post.slug,
  }));
}

export default function BlogPostPage({ params }: { params: { slug: string } }) {
  const post = getPublishedPostBySlug(params.slug);
  if (!post) return notFound(); // STRICT 404 GATE

  const author = getAuthorBySlug(post.authorSlug);
  const related = getRelatedPosts(post);

  const jsonLd = blogPostingSchema(post, author);
  const howtoLd = post.keySteps?.length ? howToSchema(post, author) : null;
  const faqLd = post.faq ? faqPageSchema(post.faq) : null;
  const visibleUpdated = post.updatedAt || post.dateModified;
  const showUpdated = Boolean(visibleUpdated && visibleUpdated !== post.datePublished);

  // Generate breadcrumb schema: Home -> Learn -> Pillar -> Post
  const pillarName = post.pillar ? post.pillar.charAt(0).toUpperCase() + post.pillar.slice(1) : "Blog";
  const breadcrumbLd = breadcrumbSchema([
    { name: "Home", url: "/" },
    { name: "Learn", url: "/learn" },
    { name: pillarName, url: `/learn/${post.pillar}` },
    { name: post.title, url: `/blog/${post.slug}` },
  ]);

  return (
    <main className="container mx-auto max-w-4xl py-12 px-4">
      <script type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
      {howtoLd && (
        <script type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: JSON.stringify(howtoLd) }} />
      )}
      {faqLd && (
        <script type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: JSON.stringify(faqLd) }} />
      )}
      <script type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbLd) }} />

      <header className="space-y-6 text-center max-w-3xl mx-auto mb-10">
        <div className="flex justify-center gap-2 text-sm text-gray-500 font-medium">
          <Link href="/learn" className="hover:text-blue-600">Hub</Link>
          <span>/</span>
          <Link href={`/learn/${post.pillar}`} className="hover:text-blue-600 capitalize">{post.pillar}</Link>
        </div>
        <h1 className="text-3xl md:text-5xl font-extrabold text-gray-900 tracking-tight leading-tight">{post.title}</h1>
        <p className="text-xl text-gray-600 relaxed">{post.description}</p>

        {author && (
          <div className="flex items-center justify-center gap-3 pt-4">
            {author.image ? (
              <Image src={author.image} alt={author.name} width={40} height={40} className="rounded-full" />
            ) : (
              <div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold">
                {author.name.charAt(0)}
              </div>
            )}
            <div className="text-left text-sm">
              <div className="font-bold text-gray-900">{author.name}</div>
              <div className="text-gray-500 text-xs mt-0.5">
                Published {post.date}
                {showUpdated && visibleUpdated && (
                  <> <span className="mx-1">|</span> Updated {formatIsoDate(visibleUpdated)}</>
                )}
              </div>
            </div>
          </div>
        )}
      </header>

      {post.heroImage && (
        <div className="relative aspect-video w-full rounded-2xl overflow-hidden shadow-lg mb-10">
          <Image
            src={post.heroImage}
            alt={post.imageAlt || post.title}
            fill
            unoptimized={post.heroImage.endsWith(".svg")}
            className="object-cover"
          />
        </div>
      )}

      {/* AEO BLOCK: ANSWER */}
      <div className="max-w-3xl mx-auto">
        {post.quickAnswer && <AnswerBox html={post.quickAnswer} />}

        {/* AEO BLOCK: STEPS (If defined separate from body) */}
        {!!post.keySteps?.length && <StepList steps={post.keySteps} title="Step-by-Step Guide" />}

        {/* MAIN CONTENT */}
        <article className="prose prose-lg prose-blue max-w-none text-gray-800" dangerouslySetInnerHTML={{ __html: post.content }} />

        {/* AEO BLOCK: FAQ */}
        {!!post.faq?.length && <div className="mt-12"><FAQSection items={post.faq} /></div>}

        {/* AEO BLOCK: SOURCES */}
        {!!post.sources?.length && <SourcesList sources={post.sources} />}

        <div className="border-t border-gray-100 my-12"></div>

        {author && <AuthorCard author={author} />}

        <div className="mt-12">
          <RelatedPosts posts={related} />
        </div>
      </div>
    </main>
  );
}