import { notFound } from "next/navigation";
import Link from "next/link";
import Image from "next/image";
import Script from "next/script";
import { getAuthorBySlug, getPostsByAuthor } from "@/lib/content";
import { authors } from "@/lib/author-data";
import { authorPageSchema } from "@/lib/schema";

export function generateMetadata({ params }: { params: { slug: string } }) {
    const author = getAuthorBySlug(params.slug);
    if (!author) return {};
    return {
        title: {
            absolute: `${author.name} - ${author.role}`,
        },
        description: author.bio,
        alternates: {
            canonical: `https://www.qrmaster.net/authors/${author.slug}`,
        },
        openGraph: {
            url: `https://www.qrmaster.net/authors/${author.slug}`,
        },
    };
}

export function generateStaticParams() {
    return authors.map((author) => ({
        slug: author.slug,
    }));
}

export default function AuthorPage({ params }: { params: { slug: string } }) {
    const author = getAuthorBySlug(params.slug);
    if (!author) return notFound();

    const posts = getPostsByAuthor(params.slug);
    const jsonLd = authorPageSchema(author, posts);

    return (
        <main className="container mx-auto max-w-3xl py-12 px-4 space-y-10">
            <Script id="ld-author" type="application/ld+json" strategy="afterInteractive"
                dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
            <header className="flex flex-col md:flex-row gap-8 items-center md:items-start text-center md:text-left">
                {author.image ? (
                    <div className="relative w-32 h-32 flex-shrink-0">
                        <Image
                            src={author.image}
                            alt={author.name}
                            fill
                            className="rounded-full object-cover border-4 border-white shadow-lg"
                        />
                    </div>
                ) : (
                    <div className="w-32 h-32 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold text-4xl shadow-lg">
                        {author.name.charAt(0)}
                    </div>
                )}

                <div className="space-y-3">
                    <div className="flex items-center gap-3">
                        <h1 className="text-3xl font-extrabold text-gray-900">{author.name}</h1>
                        <Image src="/favicon1.png" alt="QR Master" width={24} height={24} className="rounded-full object-cover opacity-90" />
                    </div>
                    <p className="text-lg text-blue-600 font-medium">{author.role}</p>
                    <p className="text-gray-600 max-w-xl">{author.bio}</p>
                    {!!author.sameAs?.length && (
                        <div className="flex gap-4 justify-center md:justify-start pt-2">
                            {author.sameAs.map((url) => {
                                let label = "Profile";
                                if (url.includes('linkedin')) label = "LinkedIn";
                                if (url.includes('github')) label = "GitHub";
                                if (url.includes('instagram')) label = "Instagram";
                                if (url.includes('twitter') || url.includes('x.com')) label = "Twitter";
                                return (
                                    <a key={url} href={url} target="_blank" rel="noreferrer" className="text-sm font-semibold text-gray-500 hover:text-black border-b border-transparent hover:border-black transition-colors">
                                        {label}
                                    </a>
                                );
                            })}
                        </div>
                    )}
                </div>
            </header>

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

            <section className="space-y-6">
                <h2 className="text-2xl font-bold text-gray-900">Latest Articles</h2>
                <div className="space-y-4">
                    {posts.map(p => (
                        <Link key={p.slug} href={`/blog/${p.slug}`} className="block group p-6 rounded-xl border border-gray-200 bg-white hover:border-blue-200 hover:shadow-sm transition-all">
                            <div className="text-sm text-gray-400 mb-1">{p.date}</div>
                            <h3 className="text-xl font-bold text-gray-900 group-hover:text-blue-700 transition-colors mb-2">{p.title}</h3>
                            <p className="text-gray-600">{p.description}</p>
                        </Link>
                    ))}
                </div>
            </section>
        </main>
    );
}
