import Image from "next/image";
import Link from "next/link";
import { ArrowUpRight, User, Clock } from "lucide-react";
import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";
import Breadcrumbs from "@/components/Breadcrumbs";
import { newsItems } from "@/lib/news";
import { notFound } from "next/navigation";

export function generateStaticParams() {
    return newsItems.map((item) => ({
        id: item.id,
    }));
}

export async function generateMetadata({ params }: { params: Promise<{ id: string }> }) {
    const resolvedParams = await params;
    const news = newsItems.find((n) => n.id === resolvedParams.id);
    if (!news) {
        return {
            title: "News Not Found",
        };
    }
    return {
        title: `${news.title} | iRoof News`,
        description: news.excerpt,
        openGraph: {
            title: news.title,
            description: news.excerpt,
            images: [news.image],
        },
    };
}

export default async function NewsPostPage({ params }: { params: Promise<{ id: string }> }) {
    const resolvedParams = await params;
    const news = newsItems.find((n) => n.id === resolvedParams.id);

    if (!news) {
        notFound();
    }

    return (
        <main className="min-h-screen bg-white">
            <Navbar />

            {/* HEADER GAP */}
            <div className="pt-24 md:pt-32 bg-white" />

            <div className="max-w-[1400px] mx-auto px-8 md:px-16 lg:px-32 xl:px-40 pb-8 pt-8">
                <Breadcrumbs 
                    items={[
                        { label: "News", href: "/news" },
                        { label: news.title }
                    ]} 
                    className="mb-8" 
                />
            </div>

            {/* HERO IMAGE */}
            <div className="max-w-[1400px] mx-auto px-8 md:px-16 lg:px-32 xl:px-40">
                <div className="relative h-[400px] md:h-[500px] lg:h-[600px] w-full rounded-[2rem] overflow-hidden bg-zinc-100 mb-16">
                    <Image
                        src={news.image}
                        alt={news.title}
                        fill
                        className="object-cover"
                        priority
                    />
                </div>
            </div>

            {/* CONTENT */}
            <div className="max-w-[1400px] mx-auto px-8 md:px-16 lg:px-32 xl:px-40 pb-24">
                <div className="inline-flex items-center gap-4 mb-8 text-brand-dark/40 text-[9px] md:text-[10px] font-black uppercase tracking-[0.2em] md:tracking-widest bg-zinc-50 px-6 py-2 border border-zinc-100 rounded-full shadow-sm">
                    <span className="text-brand-accent">{news.category}</span>
                    <div className="w-1 h-1 rounded-full bg-brand-dark/20" />
                    <span>{news.date}</span>
                </div>

                <h1 className="text-3xl md:text-5xl lg:text-6xl font-black text-brand-dark tracking-tighter leading-[1.1] mb-12">
                    {news.title}
                </h1>

                <div className="grid grid-cols-1 xl:grid-cols-12 gap-12 xl:gap-20">
                    <div className="xl:col-span-8">
                        <div className="prose prose-zinc prose-invert max-w-none">
                            {news.content.split('\n\n').map((para, i) => (
                                <p key={i} className="text-lg text-brand-dark/70 leading-relaxed font-medium mb-8">
                                    {para}
                                </p>
                            ))}
                        </div>
                    </div>
                    
                    <div className="xl:col-span-4">
                        <div className="sticky top-32 space-y-12">
                            <div className="p-10 rounded-[2rem] bg-zinc-50 border border-brand-dark/5">
                                <h4 className="text-[10px] font-black uppercase tracking-widest text-brand-dark/40 mb-6">Article Details</h4>
                                <div className="space-y-6">
                                    <div className="flex items-center gap-4 text-xs font-bold text-brand-dark">
                                        <div className="w-8 h-8 rounded-lg bg-white flex items-center justify-center shadow-sm">
                                            <User className="w-3.5 h-3.5 text-brand-accent" />
                                        </div>
                                        By {news.author}
                                    </div>
                                    <div className="flex items-center gap-4 text-xs font-bold text-brand-dark">
                                        <div className="w-8 h-8 rounded-lg bg-white flex items-center justify-center shadow-sm">
                                            <Clock className="w-3.5 h-3.5 text-brand-accent" />
                                        </div>
                                        {news.readTime}
                                    </div>
                                </div>
                            </div>

                            <div className="p-10 rounded-[2rem] bg-brand-dark text-white">
                                <h4 className="text-[10px] font-black uppercase tracking-widest text-brand-accent mb-6">Need Similar Solutions?</h4>
                                <p className="text-sm font-medium text-white/60 mb-8 leading-relaxed">
                                    Our technical experts are ready to help you with your next construction project using sustainable i-Roof materials.
                                </p>
                                <Link href="/contact" className="w-full py-4 bg-brand-accent text-white rounded-xl text-[10px] font-black uppercase tracking-widest flex items-center justify-center gap-3 hover:scale-105 transition-all">
                                    Contact Expert <ArrowUpRight className="w-3 h-3" />
                                </Link>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <Footer />
        </main>
    );
}