import prisma from "@/lib/db";
import { Download, Briefcase, GraduationCap, Globe, Award, Sparkles, Code, Cpu, Heart, ExternalLink, Languages as LangIcon, Shield } from "lucide-react";
import { stripHtml, getDirectDriveLink } from "@/lib/text";
import Image from "next/image";
import Link from "next/link";
import AboutAnimations from "@/components/AboutAnimations";
import { Metadata } from "next";

export const revalidate = 5;

export const metadata: Metadata = {
    title: "À Propos | Sergio Hounkpessode",
    description: "Découvrez mon parcours, mes compétences et ma vision pour l'innovation technologique en Afrique. Fondateur de Meta Lab Africa.",
};

export default async function AboutPage() {
    let experiences: any[] = [];
    let education: any[] = [];
    let skills: any[] = [];
    let languages: any[] = [];
    let interests: any[] = [];
    let profile: any = null;

    try {
        experiences = await (prisma as any).experience.findMany({ orderBy: { startDate: "desc" } });
        education = await (prisma as any).education.findMany({ orderBy: { startDate: "desc" } });
        skills = await (prisma as any).skill.findMany({ orderBy: { level: "desc" } });
        languages = await (prisma as any).language.findMany();
        interests = await (prisma as any).interest.findMany();
        profile = await (prisma as any).profile.findFirst();
    } catch (err) {
        console.error("About Page Data Fetch Error:", err);
    }

    const displaySkills = skills.length > 0 ? skills.map(s => ({
        name: s.name,
        level: s.level,
        icon: s.category === "Hardware" ? <Cpu size={16} /> : <Code size={16} />
    })) : [
        { name: "Sytèmes Embarqués", level: 95, icon: <Cpu size={16} /> },
        { name: "Architecture Cloud", level: 90, icon: <Cloud size={16} /> },
        { name: "Innovation Digitale", level: 85, icon: <Sparkles size={16} /> },
    ];

    return (
        <main style={{ paddingTop: "10rem", paddingBottom: "8rem", background: "var(--background)" }}>
            <div className="container">
                {/* ---- HERO SECTION ---- */}
                <div className="hero-grid" style={{ marginBottom: "8rem" }}>
                    <div className="hero-image-item">
                        <div className="hero-image-wrapper">
                            <div style={{ position: "absolute", inset: "-10%", background: "radial-gradient(circle, rgba(99,102,241,0.15) 0%, transparent 70%)", filter: "blur(40px)", zIndex: 0 }} />
                            <div className="animate-float" style={{ position: "relative", zIndex: 2, width: "100%" }}>
                                <div className="hero-image-container" style={{ aspectRatio: "0.85" }}>
                                    <Image
                                        src={getDirectDriveLink(profile?.avatar) || "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&q=80&w=800"}
                                        alt="Sergio Hounkpessode" fill style={{ objectFit: "cover" }}
                                        priority
                                    />
                                </div>
                            </div>
                            <div className="decorative-circle" style={{ opacity: 0.15 }} />
                        </div>
                    </div>

                    <div className="hero-text-item" style={{ textAlign: "left" }}>
                        <div className="badge badge-primary" style={{ marginBottom: "1.5rem" }}>Ma Vision & Parcours</div>
                        <h1 className="hero-title">
                            Bâtir l'indépendance technologique <span className="text-gradient">par l'innovation.</span>
                        </h1>
                        <div
                            className="rich-content"
                            style={{ color: "var(--muted-foreground)", fontSize: "1.15rem", lineHeight: 1.8, marginBottom: "3rem" }}
                            dangerouslySetInnerHTML={{ __html: profile?.bio || "Expert en ingénierie et fondateur de Meta Lab Africa." }}
                        />
                        <div className="hero-actions">
                            <Link href="/contact" className="btn btn-primary">Me contacter</Link>
                            <Link href="/projects" className="btn btn-outline">Voir mes projets</Link>
                        </div>
                    </div>
                </div>

                <div className="section-grid-about" style={{ marginBottom: "10rem" }}>
                    {/* Experiences */}
                    <div className="experiences-column">
                        <div style={{ display: "flex", alignItems: "center", gap: "1.25rem", marginBottom: "3.5rem" }}>
                            <div style={{ width: 52, height: 52, background: "rgba(99,102,241,0.1)", color: "var(--primary)", borderRadius: "14px", display: "flex", alignItems: "center", justifyContent: "center" }}>
                                <Briefcase size={26} />
                            </div>
                            <h2 style={{ fontSize: "2.25rem" }}>Expériences.</h2>
                        </div>

                        <div style={{ display: "flex", flexDirection: "column", gap: "2rem" }}>
                            {experiences.map((item) => (
                                <div key={item.id} className="card" style={{ padding: "2.25rem" }}>
                                    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: "1.5rem", flexWrap: "wrap", gap: "1rem" }}>
                                        <div>
                                            <h3 style={{ fontSize: "1.4rem", marginBottom: "0.4rem", color: "var(--foreground)" }}>{item.position}</h3>
                                            <p style={{ fontWeight: 800, color: "var(--primary)", fontSize: "1rem" }}>{item.company}</p>
                                        </div>
                                        <div className="badge" style={{ background: "var(--muted)", color: "var(--muted-foreground)", padding: "0.5rem 1rem", borderRadius: "var(--radius-full)", fontWeight: 700, fontSize: "0.8rem" }}>
                                            {item.startDate} — {item.current ? "Présent" : item.endDate}
                                        </div>
                                    </div>
                                    <div className="rich-content" style={{ fontSize: "1rem", opacity: 0.85, color: "var(--muted-foreground)", lineHeight: 1.8 }} dangerouslySetInnerHTML={{ __html: item.description || "" }} />
                                </div>
                            ))}
                        </div>
                    </div>

                    {/* Education */}
                    <div className="education-column">
                        <div style={{ display: "flex", alignItems: "center", gap: "1.25rem", marginBottom: "3.5rem" }}>
                            <div style={{ width: 52, height: 52, background: "rgba(139,92,246,0.1)", color: "#8b5cf6", borderRadius: "14px", display: "flex", alignItems: "center", justifyContent: "center" }}>
                                <GraduationCap size={26} />
                            </div>
                            <h2 style={{ fontSize: "2.25rem" }}>Formation.</h2>
                        </div>

                        <div style={{ display: "flex", flexDirection: "column", gap: "2rem" }}>
                            {education.map((item) => (
                                <div key={item.id} className="card" style={{ padding: "2rem", borderLeft: "4px solid var(--primary)" }}>
                                    <span style={{ fontSize: "0.85rem", fontWeight: 800, color: "var(--primary)", display: "block", marginBottom: "0.75rem", textTransform: "uppercase", letterSpacing: "0.05em" }}>{item.startDate} — {item.endDate}</span>
                                    <h3 style={{ fontSize: "1.25rem", marginBottom: "0.5rem", color: "var(--foreground)" }}>{item.degree}</h3>
                                    <p style={{ fontWeight: 700, fontSize: "1rem", color: "var(--muted-foreground)" }}>{item.school || item.institution}</p>
                                </div>
                            ))}
                        </div>
                    </div>
                </div>

                {/* ---- SKILLS & INTERESTS ---- */}
                <div className="section-grid-about" style={{ gap: "4rem" }}>
                    <div className="skills-column">
                        <div style={{ display: "flex", alignItems: "center", gap: "1rem", marginBottom: "3rem" }}>
                            <div style={{ width: 48, height: 48, background: "rgba(34,197,94,0.1)", color: "#22c55e", borderRadius: "12px", display: "flex", alignItems: "center", justifyContent: "center" }}>
                                <Code size={24} />
                            </div>
                            <h2 style={{ fontSize: "2rem" }}>Compétences.</h2>
                        </div>
                        <div className="card" style={{ padding: "2.5rem" }}>
                            <div style={{ display: "flex", flexDirection: "column", gap: "1.75rem" }}>
                                <AboutAnimations skills={displaySkills} />
                            </div>
                        </div>
                    </div>

                    <div style={{ display: "flex", flexDirection: "column", gap: "3rem" }}>
                        {/* Languages */}
                        <div>
                            <div style={{ display: "flex", alignItems: "center", gap: "1rem", marginBottom: "2rem" }}>
                                <div style={{ width: 40, height: 40, background: "var(--muted)", borderRadius: "10px", display: "flex", alignItems: "center", justifyContent: "center" }}>
                                    <LangIcon size={20} />
                                </div>
                                <h3 style={{ fontSize: "1.4rem" }}>Langues</h3>
                            </div>
                            <div className="card" style={{ padding: "1.5rem" }}>
                                <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
                                    {languages.map((l) => (
                                        <div key={l.id} className="flex-between" style={{ padding: "0.75rem 0", borderBottom: "1px solid var(--border)" }}>
                                            <span style={{ fontWeight: 700 }}>{l.name}</span>
                                            <span className="badge badge-primary" style={{ fontSize: "0.7rem" }}>{l.proficiency}</span>
                                        </div>
                                    ))}
                                </div>
                            </div>
                        </div>

                        {/* Interests */}
                        <div>
                            <div style={{ display: "flex", alignItems: "center", gap: "1rem", marginBottom: "2rem" }}>
                                <div style={{ width: 40, height: 40, background: "var(--muted)", borderRadius: "10px", display: "flex", alignItems: "center", justifyContent: "center" }}>
                                    <Heart size={20} />
                                </div>
                                <h3 style={{ fontSize: "1.4rem" }}>Passions</h3>
                            </div>
                            <div style={{ display: "flex", flexWrap: "wrap", gap: "0.75rem" }}>
                                {interests.map(tag => (
                                    <span key={tag.id} style={{
                                        padding: "0.6rem 1.25rem",
                                        background: "var(--muted)",
                                        borderRadius: "var(--radius-full)",
                                        fontSize: "0.9rem",
                                        fontWeight: 700,
                                        border: "1px solid var(--border)"
                                    }}>{tag.name}</span>
                                ))}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <style>{`
                .section-grid-about {
                    display: grid;
                    grid-template-columns: 1.25fr 0.75fr;
                    gap: 6rem;
                    align-items: start;
                }
                @media (max-width: 1024px) {
                    .section-grid-about {
                        grid-template-columns: 1fr !important;
                        gap: 5rem;
                    }
                }
            `}</style>
        </main>
    );
}

function Cloud(props: any) {
    return (
        <svg
            {...props}
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
        >
            <path d="M17.5 19c2.5 0 4.5-2 4.5-4.5 0-2.2-1.6-4-3.7-4.4a8 8 0 1 0-11 10.3" />
            <path d="M9 19c-1.1 0-2-.9-2-2a2 2 0 0 1 2-2" />
        </svg>
    )
}
