import { notFound } from "next/navigation";
import Link from "next/link";
import Script from "next/script";
import { pillarMeta } from "@/lib/pillar-data";
import { getPostsByPillar } from "@/lib/content";
import type { PillarKey } from "@/lib/types";
import { pillarPageSchema, faqPageSchema } from "@/lib/schema";
import { FAQSection } from "@/components/aeo/FAQSection";
import { AnswerBox } from "@/components/aeo/AnswerBox";

export function generateMetadata({ params }: { params: { pillar: string } }) {
    const meta = pillarMeta.find(p => p.key === params.pillar);
    if (!meta) return {};
    return {
        title: `${meta.title} - Ultimate Guide | QR Master`,
        description: meta.description,
        alternates: {
            canonical: `https://www.qrmaster.net/learn/${meta.key}`,
        },
        openGraph: {
            url: `https://www.qrmaster.net/learn/${meta.key}`,
        },
    };
}

export function generateStaticParams() {
    return pillarMeta.map((pillar) => ({
        pillar: pillar.key,
    }));
}

export default function PillarPage({ params }: { params: { pillar: PillarKey } }) {
    const meta = pillarMeta.find(p => p.key === params.pillar);
    if (!meta) return notFound();

    const posts = getPostsByPillar(meta.key);
    const jsonLd = pillarPageSchema(meta, posts);
    const faqLd = meta.miniFaq ? faqPageSchema(meta.miniFaq) : null;

    return (
        <main className="container mx-auto max-w-5xl py-12 px-4 space-y-10">
            <Script id="ld-pillar" type="application/ld+json" strategy="afterInteractive"
                dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
            {faqLd && (
                <Script id="ld-pillar-faq" type="application/ld+json" strategy="afterInteractive"
                    dangerouslySetInnerHTML={{ __html: JSON.stringify(faqLd) }} />
            )}

            <header className="space-y-4 max-w-3xl">
                <div className="text-sm font-medium text-gray-500 hover:text-gray-700">
                    <Link href="/learn">Learn</Link> → <span className="text-gray-900">{meta.title}</span>
                </div>
                <h1 className="text-4xl md:text-5xl font-extrabold text-gray-900">{meta.title}</h1>
                <p className="text-xl text-gray-600">{meta.description}</p>
            </header>

            <AnswerBox html={meta.quickAnswer} />

            <section className="space-y-6">
                <h2 className="text-2xl font-bold text-gray-900">Guides & Articles</h2>
                <div className="grid md:grid-cols-2 gap-6">
                    {posts.map(p => (
                        <Link key={p.slug} href={`/blog/${p.slug}`} className="group block rounded-xl border border-gray-200 bg-white p-6 shadow-sm hover:shadow-md hover:border-blue-200 transition-all">
                            <div className="text-xs text-gray-400 mb-2">{p.date}</div>
                            <div className="text-lg font-bold text-gray-900 mb-2 group-hover:text-blue-700">{p.title}</div>
                            <div className="text-sm text-gray-600 line-clamp-2">{p.description}</div>
                        </Link>
                    ))}
                </div>
            </section>

            {!!meta.miniFaq?.length && <FAQSection items={meta.miniFaq} title={`${meta.title} FAQ`} />}
        </main>
    );
}
