import prisma from "@/lib/db";
import Link from "next/link";
import Image from "next/image";
import { Calendar, BookOpen, ArrowRight, Zap } from "lucide-react";
import { Metadata } from "next";
import Newsletter from "@/components/Newsletter";
import { stripHtml, getDirectDriveLink } from "@/lib/text";

export const revalidate = 5;

export const metadata: Metadata = {
    title: "Blog & Actualités | Sergio Hounkpessode",
    description: "Réflexions, tutoriels et actualités sur la tech en Afrique, l'électronique et l'IoT par Sergio Hounkpessode.",
};

export default async function BlogPage() {
    const posts = await prisma.article.findMany({
        where: { published: true },
        include: { category: true },
        orderBy: { createdAt: "desc" }
    });

    const featured = posts[0];
    const others = posts.slice(1);

    return (
        <main style={{ paddingTop: "10rem", paddingBottom: "8rem", minHeight: "100vh" }}>
            <div className="container">
                {/* Header */}
                <div style={{ marginBottom: "5rem" }}>
                    <div className="badge badge-primary" style={{ marginBottom: "1.5rem" }}>
                        Insights & Tech
                    </div>
                    <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "space-between", alignItems: "flex-end", gap: "2rem" }}>
                        <div style={{ maxWidth: "45rem" }}>
                            <h1 style={{ fontSize: "clamp(3rem, 6vw, 4.5rem)", marginBottom: "1.5rem" }}>
                                Partager le <span className="text-gradient">Savoir.</span>
                            </h1>
                            <p style={{ color: "var(--muted-foreground)", fontSize: "1.15rem", lineHeight: 1.7 }}>
                                Explorations approfondies sur les systèmes embarqués, l'intelligence artificielle et l'impact de la technologie en Afrique.
                            </p>
                        </div>
                        <div style={{ display: "flex", alignItems: "center", gap: "0.75rem", padding: "1rem 1.5rem", background: "var(--muted)", borderRadius: "var(--radius-full)", border: "1px solid var(--border)", fontSize: "0.9rem", fontWeight: 700 }}>
                            <BookOpen size={18} className="text-primary" /> {posts.length} Publications
                        </div>
                    </div>
                </div>

                {posts.length === 0 ? (
                    <div className="card" style={{ textAlign: "center", padding: "6rem 2rem", background: "var(--background)" }}>
                        <div style={{ width: 64, height: 64, background: "var(--muted)", borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto 1.5rem" }}>
                            <Zap size={32} className="text-muted-foreground" />
                        </div>
                        <h3 style={{ fontSize: "1.5rem", marginBottom: "1rem" }}>En cours de rédaction...</h3>
                        <p style={{ color: "var(--muted-foreground)" }}>Revenez bientôt pour découvrir mes prochains articles techniques.</p>
                    </div>
                ) : (
                    <>
                        {/* Featured Post */}
                        {featured && (
                            <Link href={`/blog/${featured.id}`} className="card" style={{ display: "block", overflow: "hidden", marginBottom: "4rem", border: "1px solid var(--primary-border)" }}>
                                <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(360px, 1fr))" }}>
                                    <div style={{ position: "relative", minHeight: "24rem" }}>
                                        <Image src={getDirectDriveLink(featured.coverImage) || "https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&q=80&w=800"} alt={featured.title} fill style={{ objectFit: "cover" }} />
                                    </div>
                                    <div style={{ padding: "4rem", display: "flex", flexDirection: "column", justifyContent: "center" }}>
                                        <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: "1rem", marginBottom: "1.5rem" }}>
                                            <span className="badge badge-primary">{featured.category?.name || "Innovation"}</span>
                                            <span style={{ display: "flex", alignItems: "center", gap: "0.5rem", color: "var(--muted-foreground)", fontSize: "0.85rem", fontWeight: 600 }}>
                                                <Calendar size={14} /> {new Date(featured.createdAt).toLocaleDateString("fr-FR", { day: "numeric", month: "long", year: "numeric" })}
                                            </span>
                                        </div>
                                        <h2 style={{ fontSize: "clamp(2rem, 4vw, 2.5rem)", marginBottom: "1.5rem" }}>{featured.title}</h2>
                                        <p style={{ color: "var(--muted-foreground)", lineHeight: 1.8, marginBottom: "2.5rem", fontSize: "1.1rem" }}>
                                            {stripHtml(featured.excerpt || featured.content).slice(0, 200)}...
                                        </p>
                                        <div style={{ display: "flex", alignItems: "center", gap: "0.75rem", fontWeight: 800, color: "var(--primary)", fontSize: "0.95rem" }}>
                                            CONSULTER L'ARTICLE <ArrowRight size={20} />
                                        </div>
                                    </div>
                                </div>
                            </Link>
                        )}

                        {/* Other Posts */}
                        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(340px, 1fr))", gap: "3rem" }}>
                            {others.map((post: any) => (
                                <Link key={post.id} href={`/blog/${post.id}`} className="card" style={{ display: "block", overflow: "hidden" }}>
                                    <div style={{ position: "relative", height: "16rem", overflow: "hidden" }}>
                                        <Image src={getDirectDriveLink(post.coverImage) || "https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&q=80&w=800"} alt={post.title} fill style={{ objectFit: "cover" }} />
                                    </div>
                                    <div style={{ padding: "2.5rem" }}>
                                        <div style={{ display: "flex", alignItems: "center", gap: "0.75rem", marginBottom: "1.25rem" }}>
                                            <span className="badge" style={{ background: "var(--muted)", color: "var(--foreground)", fontSize: "0.7rem", fontWeight: 800 }}>{post.category?.name || "Article"}</span>
                                        </div>
                                        <h3 style={{ fontSize: "1.35rem", marginBottom: "1rem", lineHeight: 1.4 }}>{post.title}</h3>
                                        <p style={{ color: "var(--muted-foreground)", fontSize: "0.95rem", lineHeight: 1.7, marginBottom: "2rem", display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden" }}>
                                            {stripHtml(post.excerpt || post.content)}
                                        </p>
                                        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: "1.5rem", borderTop: "1px solid var(--border)" }}>
                                            <span style={{ color: "var(--muted-foreground)", fontSize: "0.85rem", fontWeight: 600 }}>{new Date(post.createdAt).toLocaleDateString("fr-FR")}</span>
                                            <span style={{ fontWeight: 800, color: "var(--primary)", fontSize: "0.85rem", display: "flex", alignItems: "center", gap: "0.4rem" }}>
                                                LIRE <ArrowRight size={16} />
                                            </span>
                                        </div>
                                    </div>
                                </Link>
                            ))}
                        </div>
                    </>
                )}
            </div>

            <Newsletter />
        </main>
    );
}