import prisma from "@/lib/db";
import { stripHtml, getDirectDriveLink } from "@/lib/text";
export const revalidate = 5;
import { notFound } from "next/navigation";
import Image from "next/image";
import Link from "next/link";
import { ArrowLeft, Calendar, Tag, Share2 } from "lucide-react";
import { Metadata } from "next";

export async function generateMetadata({ params }: { params: Promise<{ id: string }> }): Promise<Metadata> {
    const { id } = await params;
    const article = await (prisma as any).article.findUnique({ where: { id } });
    if (!article) return { title: "Article non trouvé" };
    const cleanDesc = stripHtml(article.excerpt || article.content).slice(0, 160);
    return {
        title: `${article.title} | Blog Sergio Hounkpessode`,
        description: cleanDesc,
        openGraph: {
            title: article.title,
            description: cleanDesc,
            images: article.coverImage ? [getDirectDriveLink(article.coverImage)] : [],
        }
    };
}

type ArticleData = {
    id: string; title: string; content: string; coverImage?: string | null;
    category?: { name: string } | null; createdAt: Date;
};

export default async function ArticleDetailPage({ params }: { params: Promise<{ id: string }> }) {
    const { id } = await params;

    const article = await prisma.article.findUnique({
        where: { id },
        include: { category: true }
    }) as ArticleData | null;

    if (!article) {
        notFound();
    }

    return (
        <article style={{ paddingTop: "8rem", paddingBottom: "6rem" }}>
            <div className="container" style={{ maxWidth: "56rem" }}>
                <Link href="/blog" style={{ display: "inline-flex", alignItems: "center", gap: "0.5rem", color: "var(--primary)", fontWeight: 700, marginBottom: "3rem" }}>
                    <ArrowLeft size={18} /> Retour au blog
                </Link>

                <header style={{ marginBottom: "3rem" }}>
                    <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: "0.75rem", marginBottom: "1.5rem" }}>
                        <span style={{ padding: "0.35rem 1rem", background: "rgba(37,99,235,0.1)", color: "var(--primary)", borderRadius: 50, fontSize: "0.8rem", fontWeight: 900, textTransform: "uppercase", letterSpacing: "0.08em", display: "flex", alignItems: "center", gap: "0.4rem" }}>
                            <Tag size={13} /> {article.category?.name || "Technologie"}
                        </span>
                        <span style={{ display: "flex", alignItems: "center", gap: "0.4rem", color: "var(--muted-foreground)", fontSize: "0.875rem", fontWeight: 600 }}>
                            <Calendar size={14} /> {new Date(article.createdAt).toLocaleDateString("fr-FR", { day: "numeric", month: "long", year: "numeric" })}
                        </span>
                    </div>

                    <h1 style={{ fontSize: "clamp(2rem, 5vw, 3.5rem)", fontWeight: 900, lineHeight: 1.1, letterSpacing: "-0.02em", marginBottom: "2rem", wordBreak: "break-word", overflowWrap: "anywhere" }}>
                        {article.title}
                    </h1>

                    <div style={{ display: "flex", alignItems: "center", gap: "1rem", padding: "1.25rem 0", borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)" }}>
                        <div style={{ width: 48, height: 48, borderRadius: "50%", background: "rgba(37,99,235,0.15)", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 900, color: "var(--primary)", fontSize: "1.1rem" }}>SH</div>
                        <div>
                            <p style={{ fontWeight: 900 }}>Sergio Hounkpessode</p>
                            <p style={{ fontSize: "0.8rem", color: "var(--muted-foreground)" }}>Fondateur de Meta Lab Africa</p>
                        </div>
                    </div>
                </header>

                <div style={{ position: "relative", aspectRatio: "16/9", borderRadius: "1.5rem", overflow: "hidden", boxShadow: "0 24px 64px rgba(0,0,0,0.15)", marginBottom: "3rem", background: "#f1f5f9" }}>
                    {article.coverImage ? (
                        <Image src={getDirectDriveLink(article.coverImage)} alt={article.title} fill style={{ objectFit: "cover" }} />
                    ) : (
                        <div style={{ width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--muted-foreground)" }}>Image non disponible</div>
                    )}
                </div>

                <div
                    className="article-content rich-content"
                    style={{ lineHeight: 1.85, fontSize: "1.125rem", color: "var(--foreground)", wordBreak: "break-word", overflowWrap: "anywhere" }}
                    dangerouslySetInnerHTML={{ __html: article.content }}
                />

                <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "space-between", alignItems: "center", gap: "1rem", paddingTop: "2.5rem", borderTop: "1px solid var(--border)", marginTop: "3rem" }}>
                    <div style={{ display: "flex", gap: "0.6rem" }}>
                        {["Innovation", "Afrique", "IoT", "Tech"].map(tag => (
                            <span key={tag} style={{ padding: "0.4rem 0.9rem", background: "var(--secondary)", borderRadius: 50, fontSize: "0.78rem", fontWeight: 800 }}>{tag}</span>
                        ))}
                    </div>
                </div>
            </div>
        </article>
    );
}
