"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { Mail, MapPin, Zap, ArrowUp } from "lucide-react";

interface FooterProps {
    settings: any;
    profile: any;
    footerLinks: any[];
    socialLinks: any[];
}

export default function Footer({ settings, profile, footerLinks, socialLinks }: FooterProps) {
    const pathname = usePathname();

    const scrollToTop = () => {
        window.scrollTo({ top: 0, behavior: "smooth" });
    };

    if (pathname?.startsWith("/admin")) return null;

    return (
        <footer style={{ background: "var(--muted)", paddingTop: "6rem", paddingBottom: "3rem", borderTop: "1px solid var(--border)" }}>
            <div className="container">
                <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: "4rem", marginBottom: "5rem" }}>
                    {/* Brand Info */}
                    <div className="footer-brand">
                        <Link href="/" style={{ display: "flex", alignItems: "center", gap: "0.75rem", marginBottom: "1.5rem" }}>
                            <div style={{
                                width: 34, height: 34,
                                background: "var(--primary)",
                                borderRadius: "10px",
                                display: "flex", alignItems: "center", justifyContent: "center",
                                boxShadow: "0 8px 16px -4px rgba(99, 102, 241, 0.4)"
                            }}>
                                <Zap size={18} color="white" fill="white" />
                            </div>
                            <span style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: "1.4rem" }}>
                                {settings?.siteName?.split(' ')[0] || "Sergio"} <span className="text-gradient">{settings?.siteName?.split(' ')[1] || "Hounkpessode"}</span>
                            </span>
                        </Link>
                        <p style={{ color: "var(--muted-foreground)", maxWidth: "26rem", marginBottom: "2.5rem", fontSize: "1rem", lineHeight: 1.7 }}>
                            {settings?.siteDesc || "Ingénieur en informatique industrielle et systèmes embarqués. Spécialisé dans la création de solutions technologiques à fort impact local."}
                        </p>
                        <div style={{ display: "flex", gap: "1rem" }}>
                            {socialLinks.map((s, i) => (
                                <a key={i} href={s.href!} target="_blank" rel="noopener noreferrer" className="social-link" title={s.label}>
                                    {s.icon}
                                </a>
                            ))}
                        </div>
                    </div>

                    {/* Quick Links */}
                    <div>
                        <h4 style={{ fontSize: "1rem", fontWeight: 800, marginBottom: "1.75rem", textTransform: "uppercase", letterSpacing: "0.05em" }}>Navigation</h4>
                        <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: "1.125rem" }}>
                            {footerLinks.map(l => (
                                <li key={l.href}>
                                    <Link href={l.href} className="footer-link">{l.label}</Link>
                                </li>
                            ))}
                        </ul>
                    </div>

                    {/* Contact Info */}
                    <div>
                        <h4 style={{ fontSize: "1rem", fontWeight: 800, marginBottom: "1.75rem", textTransform: "uppercase", letterSpacing: "0.05em" }}>Contact</h4>
                        <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: "1.25rem" }}>
                            <li style={{ display: "flex", alignItems: "center", gap: "0.75rem", color: "var(--muted-foreground)", fontSize: "0.95rem" }}>
                                <div style={{ color: "var(--primary)" }}><Mail size={18} /></div>
                                {settings?.contactEmail || "contact@metalab.africa"}
                            </li>
                            <li style={{ display: "flex", alignItems: "center", gap: "0.75rem", color: "var(--muted-foreground)", fontSize: "0.95rem" }}>
                                <div style={{ color: "var(--primary)" }}><MapPin size={18} /></div>
                                {profile?.address || "Bénin, Afrique de l'Ouest"}
                            </li>
                        </ul>
                    </div>
                </div>

                {/* Bottom Bar */}
                <div style={{
                    paddingTop: "2.5rem",
                    borderTop: "1px solid var(--border)",
                    display: "flex",
                    justifyContent: "space-between",
                    alignItems: "center",
                    flexWrap: "wrap",
                    gap: "1.5rem"
                }}>
                    <p style={{ fontSize: "0.875rem", color: "var(--muted-foreground)" }}>
                        © {new Date().getFullYear()} {settings?.siteName}. Tous droits réservés.
                    </p>
                    <button onClick={scrollToTop} className="flex-center" style={{
                        gap: "0.5rem", fontSize: "0.875rem", fontWeight: 700, color: "var(--primary)"
                    }}>
                        Retour en haut <ArrowUp size={16} />
                    </button>
                </div>
            </div>

            <style>{`
                .social-link {
                    width: 44px;
                    height: 44px;
                    border-radius: 12px;
                    background: var(--card-bg);
                    border: 1px solid var(--border);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: var(--foreground);
                    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                }
                .social-link:hover {
                    background: var(--primary);
                    color: white;
                    transform: translateY(-5px);
                    box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.3);
                    border-color: var(--primary);
                }
                .footer-link {
                    color: var(--muted-foreground);
                    font-size: 1rem;
                    font-weight: 500;
                    transition: all 0.3s ease;
                }
                .footer-link:hover {
                    color: var(--primary);
                    padding-left: 6px;
                }
                .footer-brand { grid-column: span 2; }
                @media (max-width: 991px) {
                    .footer-brand { grid-column: span 1; }
                }
                @media (max-width: 768px) {
                    footer { text-align: center; }
                    .social-link { margin: 0 auto; }
                    ul { align-items: center; justify-content: center; }
                    li { justify-content: center; }
                    div[style*="display: flex; gap: 1rem"] { justify-content: center; }
                    .flex-between, .flex-center { justify-content: center !important; }
                }
            `}</style>
        </footer>
    );
}