"use client";

import { useRef, forwardRef } from "react";
import Image from "next/image";
import {
    Briefcase, GraduationCap, Mail, Phone, MapPin,
    Globe, Github, Linkedin, Cpu, Code, Languages as LangIcon, Music
} from "lucide-react";
import { stripHtml, getDirectDriveLink } from "@/lib/text";

const CVContent = forwardRef<HTMLDivElement, { profile: any, experiences: any[], education: any[], skills: any[] }>(
    ({ profile, experiences, education, skills }, ref) => {
        const strip = (html: string) => stripHtml(html);

        return (
            <div ref={ref} style={{
                padding: "50px",
                background: "white",
                color: "#1e293b",
                width: "210mm",
                minHeight: "297mm",
                margin: "0 auto",
                fontFamily: "'Inter', sans-serif",
                position: "relative"
            }}>
                {/* PDF Accent Bar */}
                <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: "6px", background: "var(--primary, #2563eb)" }} />

                {/* Header */}
                <header style={{
                    display: "flex",
                    justifyContent: "space-between",
                    alignItems: "flex-start",
                    marginBottom: "40px"
                }}>
                    <div style={{ flex: 1 }}>
                        <h1 style={{ fontSize: "36px", fontWeight: 900, color: "#0f172a", marginBottom: "4px", textTransform: "uppercase", letterSpacing: "-0.03em" }}>
                            {profile?.name || "Sergio Hounkpessode"}
                        </h1>
                        <h2 style={{ fontSize: "18px", fontWeight: 700, color: "#2563eb", marginBottom: "20px", textTransform: "uppercase", letterSpacing: "0.05em" }}>
                            Expert en Systèmes Embarqués & Cloud IoT
                        </h2>

                        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "12px", fontSize: "12px", color: "#475569" }}>
                            <div style={{ display: "flex", alignItems: "center", gap: "8px" }}><Mail size={14} color="#2563eb" /> {profile?.email}</div>
                            <div style={{ display: "flex", alignItems: "center", gap: "8px" }}><Phone size={14} color="#2563eb" /> {profile?.phone}</div>
                            <div style={{ display: "flex", alignItems: "center", gap: "8px" }}><MapPin size={14} color="#2563eb" /> {profile?.address}</div>
                            <div style={{ display: "flex", alignItems: "center", gap: "8px" }}><Globe size={14} color="#2563eb" /> metalab.africa</div>
                        </div>
                    </div>
                    {profile?.avatar && (
                        <div style={{ width: "110px", height: "110px", borderRadius: "18px", overflow: "hidden", border: "4px solid #f1f5f9", boxShadow: "0 10px 25px rgba(0,0,0,0.05)" }}>
                            <Image src={getDirectDriveLink(profile.avatar)} alt="Avatar" width={110} height={110} style={{ objectFit: "cover" }} />
                        </div>
                    )}
                </header>

                <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: "45px" }} className="cv-main-grid">
                    {/* Sidebar */}
                    <aside>
                        <section style={{ marginBottom: "35px" }}>
                            <h3 style={{ fontSize: "13px", fontWeight: 900, color: "#0f172a", textTransform: "uppercase", letterSpacing: "0.15em", borderBottom: "2px solid #f1f5f9", paddingBottom: "6px", marginBottom: "15px" }}>
                                Profil
                            </h3>
                            <p style={{ fontSize: "11.5px", lineHeight: "1.7", color: "#475569", textAlign: "justify" }}>
                                {strip(profile?.bio).slice(0, 450)}
                            </p>
                        </section>

                        <section style={{ marginBottom: "35px" }}>
                            <h3 style={{ fontSize: "13px", fontWeight: 900, color: "#0f172a", textTransform: "uppercase", letterSpacing: "0.15em", borderBottom: "2px solid #f1f5f9", paddingBottom: "6px", marginBottom: "15px" }}>
                                Compétences
                            </h3>
                            <div style={{ display: "flex", flexDirection: "column", gap: "10px" }}>
                                {skills.map((s, i) => (
                                    <div key={i}>
                                        <div style={{ display: "flex", justifyContent: "space-between", fontSize: "11px", fontWeight: 800, color: "#334155", marginBottom: "4px" }}>
                                            <span>{s.name}</span>
                                            <span>{s.level}%</span>
                                        </div>
                                        <div style={{ height: "5px", background: "#f1f5f9", borderRadius: "3px", overflow: "hidden" }}>
                                            <div style={{ height: "100%", width: `${s.level}%`, background: "linear-gradient(90deg, #2563eb, #60a5fa)", borderRadius: "3px" }} />
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </section>

                        <section>
                            <h3 style={{ fontSize: "13px", fontWeight: 900, color: "#0f172a", textTransform: "uppercase", letterSpacing: "0.15em", borderBottom: "2px solid #f1f5f9", paddingBottom: "6px", marginBottom: "15px" }}>
                                Réseaux
                            </h3>
                            <div style={{ display: "flex", flexDirection: "column", gap: "8px", fontSize: "11.5px", color: "#475569" }}>
                                {profile?.github && <div style={{ display: "flex", alignItems: "center", gap: "8px" }}><Github size={13} color="#2563eb" /> {profile.github.replace("https://", "").replace("www.", "")}</div>}
                                {profile?.linkedin && <div style={{ display: "flex", alignItems: "center", gap: "8px" }}><Linkedin size={13} color="#2563eb" /> {profile.linkedin.replace("https://", "").replace("www.", "")}</div>}
                                {profile?.facebook && <div style={{ display: "flex", alignItems: "center", gap: "8px" }}><Globe size={13} color="#2563eb" /> {profile.facebook.replace("https://", "").replace("www.", "")}</div>}
                                {profile?.tiktok && <div style={{ display: "flex", alignItems: "center", gap: "8px" }}><Music size={13} color="#2563eb" /> {profile.tiktok.replace("https://", "").replace("www.", "")}</div>}
                            </div>
                        </section>
                    </aside>

                    {/* Main Content */}
                    <main>
                        <section style={{ marginBottom: "40px" }}>
                            <h3 style={{ fontSize: "15px", fontWeight: 900, color: "#0f172a", textTransform: "uppercase", letterSpacing: "0.15em", borderBottom: "2px solid #2563eb", paddingBottom: "6px", marginBottom: "20px", display: "flex", alignItems: "center", gap: "12px" }}>
                                <Briefcase size={20} color="#2563eb" /> Expériences Professionnelles
                            </h3>
                            {experiences.map((exp, i) => (
                                <div key={i} style={{ marginBottom: "20px", borderLeft: "2px solid #f1f5f9", paddingLeft: "15px", position: "relative" }}>
                                    <div style={{ position: "absolute", left: "-6px", top: "0px", width: "10px", height: "10px", borderRadius: "50%", background: "#2563eb" }} />
                                    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "4px" }}>
                                        <h4 style={{ fontSize: "14.5px", fontWeight: 800, color: "#0f172a" }}>{exp.position}</h4>
                                        <span style={{ fontSize: "11px", fontWeight: 800, color: "#64748b", background: "#f8fafc", padding: "2px 8px", borderRadius: "4px" }}>{exp.startDate} — {exp.current ? "Présent" : exp.endDate}</span>
                                    </div>
                                    <p style={{ fontSize: "13px", fontWeight: 700, color: "#2563eb", marginBottom: "6px" }}>{exp.company}</p>
                                    <p style={{ fontSize: "11.5px", color: "#64748b", lineHeight: "1.6", whiteSpace: "pre-line" }}>{strip(exp.description)}</p>
                                </div>
                            ))}
                        </section>

                        <section>
                            <h3 style={{ fontSize: "15px", fontWeight: 900, color: "#0f172a", textTransform: "uppercase", letterSpacing: "0.15em", borderBottom: "2px solid #2563eb", paddingBottom: "6px", marginBottom: "20px", display: "flex", alignItems: "center", gap: "12px" }}>
                                <GraduationCap size={20} color="#2563eb" /> Parcours Académique
                            </h3>
                            {education.map((edu, i) => (
                                <div key={i} style={{ marginBottom: "15px", borderLeft: "2px solid #f1f5f9", paddingLeft: "15px", position: "relative" }}>
                                    <div style={{ position: "absolute", left: "-6px", top: "0px", width: "10px", height: "10px", borderRadius: "50%", background: "#ccd7ff" }} />
                                    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "4px" }}>
                                        <h4 style={{ fontSize: "14px", fontWeight: 800, color: "#0f172a" }}>{edu.degree}</h4>
                                        <span style={{ fontSize: "11px", fontWeight: 800, color: "#64748b" }}>{edu.startDate} — {edu.endDate}</span>
                                    </div>
                                    <p style={{ fontSize: "12px", color: "#475569", fontWeight: 600 }}>{edu.school}</p>
                                    {edu.description && <p style={{ fontSize: "11px", color: "#94a3b8", marginTop: "4px" }}>{strip(edu.description)}</p>}
                                </div>
                            ))}
                        </section>
                    </main>
                </div>

                <footer style={{ marginTop: "50px", paddingTop: "20px", borderTop: "1px solid #f1f5f9", textAlign: "center", fontSize: "10px", color: "#94a3b8", letterSpacing: "0.05em" }}>
                    DOCUMENT OFFICIEL — GÉNÉRÉ PAR METALAB.AFRICA — {new Date().toLocaleDateString("fr-FR", { day: 'numeric', month: 'long', year: 'numeric' })}
                </footer>
            </div>
        );
    });

CVContent.displayName = "CVContent";

export default function CVPageContent({ profile, experiences, education, skills }: any) {
    const componentRef = useRef<HTMLDivElement>(null);

    const handlePrint = () => {
        window.print();
    };

    return (
        <div style={{ background: "#f8fafc", minHeight: "100vh", padding: "100px 20px" }}>
            <div className="container" style={{ textAlign: "center", marginBottom: "30px" }}>
                <h1 style={{ fontSize: "2.5rem", fontWeight: 900, marginBottom: "1rem" }}>Curriculum Vitae</h1>
                <p style={{ color: "var(--muted-foreground)", marginBottom: "2rem" }}>Version optimisée pour l'impression.</p>
                <div style={{ display: "flex", justifyContent: "center", gap: "1rem" }}>
                    <button onClick={handlePrint} className="btn btn-primary">
                        Imprimer en PDF
                    </button>
                    <a href="/about" className="btn btn-secondary" style={{ border: "1px solid var(--border)", background: "var(--card)" }}>
                        Retour
                    </a>
                </div>
            </div>

            <div style={{
                boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
                width: "fit-content",
                margin: "0 auto",
                borderRadius: "2px",
                overflow: "hidden"
            }} className="cv-preview">
                <CVContent
                    ref={componentRef}
                    profile={profile}
                    experiences={experiences}
                    education={education}
                    skills={skills}
                />
            </div>

            <style>{`
                @media print {
                    nav, footer, .btn, .container, header { display: none !important; }
                    body { background: white !important; margin: 0; padding: 0; }
                    .cv-preview { box-shadow: none !important; margin: 0 !important; width: 100% !important; overflow: visible !important; }
                    @page { margin: 15mm; size: A4; }
                    
                    /* Prevents breaking sections in the middle across pages */
                    section, .sidebar section, main section { break-inside: avoid; page-break-inside: avoid; }
                    h3 { break-after: avoid; }
                    
                    /* Ensures content flows correctly despite the grid on multiple pages */
                    .cv-main-grid { display: block !important; }
                    aside { width: 100% !important; border-bottom: 2px solid #f1f5f9; margin-bottom: 30px; padding-bottom: 20px; }
                }
            `}</style>
        </div>
    );
}
