"use client";

import { useState, useEffect } from "react";
import Link from "next/link";
import Image from "next/image";
import { ArrowRight, ArrowUpRight, ChevronDown, Scroll, StickyNote, Menu, X, Facebook, Instagram, Linkedin, Twitter } from "lucide-react";
import { usePathname } from "next/navigation";
import { cn } from "@/lib/utils";

interface ProductItem {
    id: string;
    name: string;
    href: string;
    image: string;
}

interface SubLinkItem {
    name: string;
    href: string;
    target?: string;
}

interface NavLinkItem {
    name: string;
    href: string;
    isMegaMenu?: boolean;
    products?: ProductItem[];
    subLinks?: SubLinkItem[];
}

export default function Navbar() {
    const pathname = usePathname();
    const [isScrolled, setIsScrolled] = useState(false);
    const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
    const [openMenu, setOpenMenu] = useState<string | null>(null);
    useEffect(() => {
        const handleScroll = () => {
            setIsScrolled(window.scrollY > 20);
        };
        window.addEventListener("scroll", handleScroll);
        return () => window.removeEventListener("scroll", handleScroll);
    }, []);

    const leftLinks: NavLinkItem[] = [
        { name: "Home", href: "/" },
        { name: "About", href: "/about" },
        {
            name: "Collection",
            href: "/products",
            isMegaMenu: true
        },
        {
            name: "Resources",
            href: "/#",
            subLinks: [
                { name: "Projects", href: "/projects" },
                { name: "News", href: "/news" },
                { name: "Awards & Certificates", href: "/awards" },
                { name: "Contact", href: "/contact" },
                { name: "FAQs", href: "/faq" },
            ]
        }
    ];

    return (
        <>
            <nav
                className={cn(
                    "fixed top-0 left-0 right-0 z-[60] transition-all duration-300 px-6 xl:px-14 min-[1600px]:px-20",
                    isScrolled ? "py-3 shadow-sm" : "py-5",
                    isMobileMenuOpen ? "bg-transparent" : "bg-white border-b border-zinc-100"
                )}
            >
                <div className="max-w-[1500px] min-[1600px]:max-w-none w-full mx-auto flex items-center justify-between relative">

                    {/* Left Side Links */}
                    <div className="flex-1 hidden xl:flex items-center gap-8">
                        {leftLinks.map((link) => {
                            const isActive = pathname === link.href || 
                                (link.href === "/products" && pathname.startsWith("/products")) ||
                                (link.name === "Collection" && pathname.startsWith("/products"));
                            return (
                                <div key={link.name} className="relative group/nav">
                                    {link.href.startsWith("http") ? (
                                        <a
                                            href={link.href}
                                            target="_blank"
                                            rel="noopener noreferrer"
                                            className={cn(
                                                "relative font-heading text-[13px] font-[600] uppercase tracking-[0.2em] transition-colors duration-300 flex items-center gap-1 group/link pb-1",
                                                link.name === "Arctic Roof"
                                                    ? "text-[#596E8D] hover:text-[#45566f] font-medium"
                                                    : "text-medium hover:text-[#596E8D]"
                                            )}
                                        >
                                            {link.name}
                                            <span className={cn(
                                                "absolute bottom-0 left-0 w-full h-[2px] bg-[#596E8D] origin-left transition-transform duration-300 ease-out scale-x-0 group-hover/link:scale-x-100"
                                            )} />
                                        </a>
                                    ) : (
                                        <Link
                                            href={link.href}
                                            className={cn(
                                                "relative font-heading text-[13px] font-[600] uppercase tracking-[0.2em] transition-colors duration-300 flex items-center gap-1 group/link pb-1",
                                                isActive ? "text-[#b12028]" : "text-black hover:text-[#b12028]"
                                            )}
                                        >
                                            {link.name}
                                            {(link.subLinks || link.isMegaMenu) && <ChevronDown className="w-3 h-3 transition-transform group-hover/nav:rotate-180" />}
                                            <span className={cn(
                                                "absolute bottom-0 left-0 w-full h-[2px] bg-[#b12028] origin-left transition-transform duration-300 ease-out",
                                                isActive ? "scale-x-100" : "scale-x-0 group-hover/link:scale-x-100"
                                            )} />
                                        </Link>
                                    )}

                                    {/* Minimalistic Dropdown */}
                                    {link.subLinks && (
                                        <div className="absolute top-full left-0 pt-4 opacity-0 invisible group-hover/nav:opacity-100 group-hover/nav:visible transition-all duration-300 translate-y-2 group-hover/nav:translate-y-0">
                                            <div className="bg-white/95 backdrop-blur-xl border-[0.5px] border-zinc-100 shadow-[0_15px_30px_-5px_rgba(0,0,0,0.1)] rounded-2xl py-4 min-w-[240px] flex flex-col">
                                                {link.subLinks.map((sub) =>
                                                    sub.href.startsWith("http") ? (
                                                        <a
                                                            key={sub.name}
                                                            href={sub.href}
                                                            target={sub.target || "_blank"}
                                                            rel={sub.target === "_blank" || !sub.target ? "noopener noreferrer" : undefined}
                                                            className="w-full flex items-center px-6 py-2.5 font-sans text-[11px] font-[600] uppercase tracking-[0.15em] text-zinc-500 hover:text-black transition-all duration-300 group/dropdownitem"
                                                        >
                                                            <span className="w-0 h-[2px] bg-[#b12028] mr-0 transition-all duration-300 group-hover/dropdownitem:w-4 group-hover/dropdownitem:mr-3" />
                                                            <span className="transform translate-x-0 transition-transform duration-300 group-hover/dropdownitem:translate-x-1">{sub.name}</span>
                                                        </a>
                                                    ) : (
                                                        <Link
                                                            key={sub.name}
                                                            href={sub.href}
                                                            className="w-full flex items-center px-6 py-2.5 font-sans text-[11px] font-[600] uppercase tracking-[0.15em] text-zinc-500 hover:text-black transition-all duration-300 group/dropdownitem"
                                                        >
                                                            <span className="w-0 h-[2px] bg-[#b12028] mr-0 transition-all duration-300 group-hover/dropdownitem:w-4 group-hover/dropdownitem:mr-3" />
                                                            <span className="transform translate-x-0 transition-transform duration-300 group-hover/dropdownitem:translate-x-1">{sub.name}</span>
                                                        </Link>
                                                    )
                                                )}
                                            </div>
                                        </div>
                                    )}

                                    {/* Mega Dropdown for Collection */}
                                    {link.isMegaMenu && link.name === "Collection" && (
                                        <div className="absolute top-full left-0 pt-4 opacity-0 invisible group-hover/nav:opacity-100 group-hover/nav:visible transition-all duration-300 translate-y-2 group-hover/nav:translate-y-0 z-50">
                                            <div className="bg-white/95 backdrop-blur-xl border border-zinc-100 shadow-[0_20px_40px_-15px_rgba(0,0,0,0.15)] rounded-2xl p-6 w-[880px]">
                                                {/* iRoof Max section */}
                                                <div className="flex items-center justify-between mb-4 pb-2 border-b border-zinc-100">
                                                    <span className="text-[11px] font-medium text-brand-dark uppercase tracking-widest">iRoof Max Products</span>
                                                    <Link href="/products" className="text-[10px] font-medium text-[#b12028] hover:text-[#8e1a20] uppercase tracking-wider flex items-center gap-1">
                                                        View All <ArrowRight className="w-3.5 h-3.5" />
                                                    </Link>
                                                </div>
                                                <div className="grid grid-cols-5 gap-6">
                                                    {[
                                                        { id: "iroof-max-brick", name: "Brick Red", href: "/products/iroof-max-brick", image: "/images/Brick Red1.png", subtitle: "iRoof Max" },
                                                        { id: "iroof-max-green", name: "Dark Green", href: "/products/iroof-max-green", image: "/images/Dark Green1.png", subtitle: "iRoof Max" },
                                                        { id: "iroof-max-chocolate-brown", name: "Chocolate Brown", href: "/products/iroof-max-chocolate-brown", image: "/images/Chocolate Brown1.png", subtitle: "iRoof Max" },
                                                        { id: "iroof-max-white", name: "White", href: "/products/iroof-max-white", image: "/images/White1.png", subtitle: "iRoof Max" },
                                                        { id: "iroof-max-accessories", name: "Accessories", href: "/accessories", image: "/images/i-roof-xtra-accessories1.png", subtitle: "iRoof Max" }
                                                    ].map((prod) => (
                                                        <Link
                                                            key={prod.id}
                                                            href={prod.href}
                                                            className="group/item flex flex-col hover:no-underline"
                                                        >
                                                            <div className="relative aspect-[4/3] w-full rounded-xl overflow-hidden bg-zinc-50 border border-zinc-100 mb-2 shadow-sm group-hover/item:border-[#b12028]/20 group-hover/item:shadow-md transition-all duration-300">
                                                                <Image
                                                                    src={prod.image}
                                                                    alt={prod.name}
                                                                    fill
                                                                    className="object-contain p-0 group-hover/item:scale-130 transition-transform duration-500 scale-120"
                                                                />
                                                            </div>
                                                            <div className="flex flex-col text-left">
                                                                <span className="text-[9px] font-medium text-zinc-400 uppercase tracking-widest">{prod.subtitle}</span>
                                                                <span className="text-[11px] font-semibold text-brand-dark group-hover/item:text-[#b12028] transition-colors mt-0.5 uppercase tracking-wide">
                                                                    {prod.name}
                                                                </span>
                                                            </div>
                                                        </Link>
                                                    ))}
                                                </div>

                                                {/* Divider */}
                                                <div className="my-6 border-b border-zinc-100" />

                                                {/* Arctic Roof & Accessories section */}
                                                <div className="flex items-center justify-between mb-4 pb-2 border-b border-zinc-100">
                                                    <span className="text-[11px] font-medium text-brand-dark uppercase tracking-widest">Arctic Roof</span>
                                                </div>
                                                <div className="grid grid-cols-5 gap-6">
                                                    <a
                                                        href="https://arcticroofing.lk"
                                                        target="_blank"
                                                        rel="noopener noreferrer"
                                                        className="group/item flex flex-col hover:no-underline"
                                                    >
                                                        <div className="relative aspect-[4/3] w-full rounded-xl overflow-hidden bg-zinc-50 border border-zinc-100 mb-2 shadow-sm group-hover/item:border-[#b12028]/20 group-hover/item:shadow-md transition-all duration-300">
                                                            <Image
                                                                src="/images/arctic-roofing.webp"
                                                                alt="Arctic Roof"
                                                                fill
                                                                className="object-contain p-0 group-hover/item:scale-105 transition-transform duration-500"
                                                            />
                                                        </div>
                                                        <div className="flex flex-col text-left">
                                                            <span className="text-[9px] font-medium text-zinc-400 uppercase tracking-widest">Collection</span>
                                                            <span className="text-[11px] font-semibold text-brand-dark group-hover/item:text-[#b12028] transition-colors mt-0.5 uppercase tracking-wide">
                                                                Arctic Roof
                                                            </span>
                                                        </div>
                                                    </a>

                                                    {/* <Link
                                                        href="/accessories"
                                                        className="group/item flex flex-col hover:no-underline"
                                                    >
                                                        <div className="relative aspect-[4/3] w-full rounded-xl overflow-hidden bg-zinc-50 border border-zinc-100 mb-2 shadow-sm group-hover/item:border-[#b12028]/20 group-hover/item:shadow-md transition-all duration-300">
                                                            <Image
                                                                src="/images/i-roof-xtra-accessories1.webp"
                                                                alt="Accessories"
                                                                fill
                                                                className="object-contain p-0 group-hover/item:scale-130 transition-transform duration-500 scale-120"
                                                            />
                                                        </div>
                                                        <div className="flex flex-col text-left">
                                                            <span className="text-[9px] font-bold text-zinc-400 uppercase tracking-widest">iRoof Max</span>
                                                            <span className="text-[11px] font-black text-brand-dark group-hover/item:text-[#b12028] transition-colors mt-0.5 uppercase tracking-wide">
                                                                Roofing Accessories
                                                            </span>
                                                        </div>
                                                    </Link> */}
                                                </div>
                                            </div>
                                        </div>
                                    )}
                                </div>
                            );
                        })}
                    </div>

                    {/* Center Logo / Mobile Left Logo */}
                    <div className="absolute left-0 xl:left-1/2 top-1/2 xl:-translate-x-1/2 -translate-y-1/2 z-[70] transition-opacity duration-300">
                        <Link href="/" onClick={() => setIsMobileMenuOpen(false)}>
                            <Image
                                src="/images/logo-new.png"
                                alt="iRoof.lk Logo"
                                width={180}
                                height={60}
                                className="h-10 xl:h-16 w-auto object-contain"
                            />
                        </Link>
                    </div>

                    {/* Right Side Components */}
                    <div className="flex-1 flex justify-end items-center gap-6 xl:gap-8 z-50 relative">
                        <Link
                            href="/contact#quotation"
                            className="hidden xl:flex items-center justify-center font-sans bg-[#b12028] hover:bg-[#8e1a20] rounded-md text-white px-8 py-3 text-[10px] xl:text-[12px] font-normal uppercase tracking-[0.2em] transition-all duration-300 hover:scale-105 active:scale-95 shadow-xl shadow-[#b12028]/20"
                        >
                            Get Quote
                            <StickyNote className="w-4 h-4 ml-2 stroke-[3px] transition-transform duration-300 group-hover:translate-x-1" />
                        </Link>
                        <button
                            className="xl:hidden p-2 -mr-2 text-black hover:text-[#b12028] transition-colors"
                            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
                        >
                            {isMobileMenuOpen ? <X size={28} /> : <Menu size={28} />}
                        </button>
                    </div>
                </div>
            </nav>

            {/* Mobile Menu Backdrop */}
            <div
                className={cn(
                    "fixed inset-0 z-[50] bg-black/10 transition-opacity duration-500 xl:hidden",
                    isMobileMenuOpen ? "opacity-100 visible pointer-events-auto" : "opacity-0 invisible pointer-events-none"
                )}
                onClick={() => setIsMobileMenuOpen(false)}
            />

            {/* Mobile Menu Drawer (Slides from Right with Blur) */}
            <div
                className={cn(
                    "fixed top-0 right-0 bottom-0 z-[55] w-[100vw] sm:w-[60vw] bg-white/70 backdrop-blur-3xl border-l border-white/50 transition-transform duration-500 ease-[cubic-bezier(0.16,1,0.3,1)] xl:hidden flex flex-col pt-24 px-6 overflow-y-auto shadow-2xl",
                    isMobileMenuOpen ? "translate-x-0" : "translate-x-full"
                )}
            >
                <div className="flex flex-col gap-6 pb-10 pt-4 flex-1 mt-20">
                    {leftLinks.map((link) => (
                        <div key={link.name} className="flex flex-col border-b border-black/5 pb-2">
                            <div className="flex items-center justify-between">
                                {link.href.startsWith("http") ? (
                                    <a
                                        href={link.href}
                                        target="_blank"
                                        rel="noopener noreferrer"
                                        onClick={() => setIsMobileMenuOpen(false)}
                                        className={cn(
                                            "font-heading text-sm font-bold uppercase leading-tight",
                                            link.name === "Arctic Roof" ? "text-[#596E8D]" : "text-[#b12028]"
                                        )}
                                    >
                                        {link.name}
                                    </a>
                                ) : (
                                    <Link
                                        href={link.href}
                                        className="font-heading text-sm font-bold uppercase leading-tight text-[#b12028]"
                                        onClick={() => {
                                            if (link.href !== "#") setIsMobileMenuOpen(false);
                                        }}
                                    >
                                        {link.name}
                                    </Link>
                                )}
                                {(link.subLinks || link.isMegaMenu) && (
                                    <button
                                        className="p-2 -mr-2 text-[#b12028]"
                                        onClick={() => setOpenMenu(openMenu === link.name ? null : link.name)}
                                    >
                                        <ChevronDown className={cn("w-5 h-5 transition-transform duration-300", openMenu === link.name ? "rotate-180" : "rotate-0")} />
                                    </button>
                                )}
                            </div>

                            {link.subLinks && (
                                <div className={cn(
                                    "flex flex-col gap-4 pl-4 border-l-2 border-[#b12028]/20 overflow-hidden transition-all duration-300",
                                    openMenu === link.name ? "max-h-64 mt-4 opacity-100" : "max-h-0 mt-0 opacity-0"
                                )}>
                                    {link.subLinks.map(sub => (
                                        typeof sub.href === 'string' && sub.href.startsWith('http') ? (
                                            <a
                                                key={sub.name}
                                                href={sub.href}
                                                target="_blank"
                                                rel="noopener noreferrer"
                                                onClick={() => setIsMobileMenuOpen(false)}
                                                className="font-sans text-[11px] font-semibold uppercase tracking-widest text-zinc-600 hover:text-black transition-colors"
                                            >
                                                {sub.name}
                                            </a>
                                        ) : (
                                            <Link
                                                key={sub.name}
                                                href={sub.href}
                                                onClick={() => setIsMobileMenuOpen(false)}
                                                className="font-sans text-[11px] font-semibold uppercase tracking-widest text-zinc-600 hover:text-black transition-colors"
                                            >
                                                {sub.name}
                                            </Link>
                                        )
                                    ))}
                                </div>
                            )}

                             {link.isMegaMenu && link.name === "Collection" && (
                                 <div className={cn(
                                     "flex flex-col gap-4 overflow-hidden transition-all duration-300",
                                     openMenu === link.name ? "max-h-[850px] mt-4 opacity-100" : "max-h-0 mt-0 opacity-0"
                                 )}>
                                     {/* iRoof Max Products heading */}
                                     <div className="text-[10px] font-medium text-[#b12028] uppercase tracking-widest pl-2">iRoof Max Products</div>
                                     <div className="grid grid-cols-2 gap-4">
                                         {[
                                             { id: "iroof-max-chocolate-brown", name: "Chocolate Brown", href: "/products/iroof-max-chocolate-brown", image: "/images/Chocolate Brown1.png" },
                                             { id: "iroof-max-brick", name: "Brick Red", href: "/products/iroof-max-brick", image: "/images/Brick Red1.png" },
                                             { id: "iroof-max-green", name: "Dark Green", href: "/products/iroof-max-green", image: "/images/Dark Green1.png" },
                                             { id: "iroof-max-white", name: "White", href: "/products/iroof-max-white", image: "/images/White1.png" },
                                             { id: "iroof-max-yellow", name: "Yellow", href: "/products/iroof-max-yellow", image: "/images/roof-hero22.png" },
                                         ].map(prod => (
                                             <Link
                                                 key={prod.id}
                                                 href={prod.href}
                                                 onClick={() => setIsMobileMenuOpen(false)}
                                                 className="group/item flex flex-col items-center bg-zinc-50 border border-zinc-100/50 rounded-xl p-3 hover:bg-zinc-100/80 transition-colors"
                                             >
                                                 <div className="relative aspect-[4/3] w-full rounded-lg overflow-hidden bg-white border border-zinc-100 mb-2">
                                                     <Image
                                                         src={prod.image}
                                                         alt={prod.name}
                                                         fill
                                                         className="object-contain p-0"
                                                     />
                                                 </div>
                                                 <span className="text-[10px] font-bold text-zinc-900 group-hover/item:text-[#b12028] transition-colors text-center uppercase tracking-wide">
                                                     {prod.name}
                                                 </span>
                                             </Link>
                                         ))}
                                     </div>

                                     {/* Divider */}
                                     <div className="border-b border-black/5 my-2" />

                                     {/* Arctic Roof & Accessories heading */}
                                     <div className="grid grid-cols-2 gap-4">
                                         <div>
                                             <div className="text-[10px] font-medium text-[#b12028] uppercase tracking-widest pl-2 mb-2">Arctic Roof</div>
                                             <a
                                                 href="https://arcticroofing.lk"
                                                 target="_blank"
                                                 rel="noopener noreferrer"
                                                 onClick={() => setIsMobileMenuOpen(false)}
                                                 className="group/item flex flex-col items-center bg-zinc-50 border border-zinc-100/50 rounded-xl p-3 hover:bg-zinc-100/80 transition-colors w-full"
                                             >
                                                 <div className="relative aspect-[4/3] w-full rounded-lg overflow-hidden bg-white border border-zinc-100 mb-2">
                                                     <Image
                                                         src="/images/arctic-roofing.webp"
                                                         alt="Arctic Roof"
                                                         fill
                                                         className="object-contain p-0"
                                                     />
                                                 </div>
                                                 <span className="text-[10px] font-medium text-zinc-900 group-hover/item:text-[#b12028] transition-colors text-center uppercase tracking-wide">
                                                     Arctic Roof
                                                 </span>
                                             </a>
                                         </div>
                                         <div>
                                             <div className="text-[10px] font-black text-[#b12028] uppercase tracking-widest pl-2 mb-2">Accessories</div>
                                             <Link
                                                 href="/accessories"
                                                 onClick={() => setIsMobileMenuOpen(false)}
                                                 className="group/item flex flex-col items-center bg-zinc-50 border border-zinc-100/50 rounded-xl p-3 hover:bg-zinc-100/80 transition-colors w-full"
                                             >
                                                 <div className="relative aspect-[4/3] w-full rounded-lg overflow-hidden bg-white border border-zinc-100 mb-2">
                                                     <Image
                                                         src="/images/i-roof-xtra-accessories1 - Copy.png"
                                                         alt="Accessories"
                                                         fill
                                                         className="object-contain"
                                                     />
                                                 </div>
                                                 <span className="text-[10px] font-bold text-zinc-900 group-hover/item:text-[#b12028] transition-colors text-center uppercase tracking-wide">
                                                     Accessories
                                                 </span>
                                             </Link>
                                         </div>
                                     </div>
                                 </div>
                             )}
                        </div>
                    ))}
                </div>

                {/* Mobile Drawer Footer with Get Quote and Socials */}
                <div className="mt-auto pb-10 flex flex-col gap-8">
                    <Link
                        href="/contact#quotation"
                        onClick={() => setIsMobileMenuOpen(false)}
                        className="flex items-center justify-center font-sans bg-[#b12028] text-white py-4 mx-16 rounded-md text-[11px] font-bold uppercase tracking-[0.2em] shadow-xl active:scale-95 transition-transform"
                    >
                        Get Free Quote
                        <StickyNote className="w-4 h-4 ml-2" />
                    </Link>

                    <div className="flex items-center justify-center gap-6">
                        {[
                            { Icon: Facebook, href: "https://www.facebook.com/iRoof.lk/" },
                            { Icon: Instagram, href: "https://www.instagram.com/iroof.lk" },
                            { Icon: Twitter, href: "https://x.com/i_rooflk" },
                        ].map((social, i) => (
                            <a
                                key={i}
                                href={social.href}
                                target="_blank"
                                rel="noopener noreferrer"
                                className="w-10 h-10 rounded-full border border-black/10 flex items-center justify-center text-zinc-600 hover:text-[#b12028] hover:border-[#b12028] transition-colors"
                            >
                                <social.Icon className="w-4 h-4" />
                            </a>
                        ))}
                    </div>
                </div>
            </div>
        </>
    );
}