"use client";

import React, { useState } from "react";
import Link from "next/link";
import Image from "next/image";
import { NavItem as NavItemType, NavChildItem } from "@/types";

interface NavItemProps {
    items: NavItemType[];
    isMobile?: boolean;
    onLinkClick?: () => void;
}

const slugify = (text: string) =>
    text
        .toLowerCase()
        .trim()
        .replace(/[^\w\s-]/g, "")
        .replace(/\s+/g, "-")
        .replace(/-+/g, "-")
        .replace(/^-+|-+$/g, "");

const NavItem: React.FC<NavItemProps> = ({ items, isMobile = false, onLinkClick }) => {
    const [hoveredPanel, setHoveredPanel] = useState<NavItemType | null>(null);
    const [hoveredParent, setHoveredParent] = useState<NavChildItem | null>(null);
    const [hoveredChild, setHoveredChild] = useState<NavChildItem | null>(null);
    const [isDropdownHovered, setIsDropdownHovered] = useState(false);

    const closeAllMenus = () => {
        setHoveredPanel(null);
        setHoveredParent(null);
        setHoveredChild(null);
        setIsDropdownHovered(false);
    };

    const handleMouseLeave = () => {
        setTimeout(() => {
            if (!isDropdownHovered) {
                setHoveredPanel(null);
                setHoveredParent(null);
                setHoveredChild(null);
            }
        }, 100);
    };

    // Mobile version
    if (isMobile) {
        return (
            <div className="bg-white">
                <ul className="flex flex-col text-center">
                    {items.map((item, index) => (
                        <li key={index} className="bg-[#0B212D] py-5">
                            <div className=" px-4">
                                <h3 className="font-semibold text-white text-[28px]">{item.label}</h3>
                            </div>
                            {item.hoverPanel && (
                                <div className="pb-4">
                                    <ul className="space-y-3 mt-3">
                                        {item.hoverPanel.points.map((parent, i) => {
                                            const slug = slugify(parent.title);
                                           const route = parent.url || (slug === "current-job-openings" ? "/current-openings" : `/${slug}`);
                                            return (
                                                <li key={i} className="pb-3 px-3 text-[19px] leading-6">
                                                    <Link
                                                        href={route}
                                                        className="block text-[#6fb07f] hover:text-orange-500 font-medium"
                                                        onClick={() => onLinkClick?.()}
                                                    >
                                                        {parent.title}
                                                    </Link>
                                                    {/* {parent.children && parent.children.length > 0 && (
                                                        <ul className="mt-2 space-y-2">
                                                            {parent.children.map((child, j) => (
                                                                <li key={j}>
                                                                    <Link 
                                                                        href={child?.url ? child.url : `/${slugify(child.title)}`}
                                                                        className="block text-gray-600 hover:text-gray-900 text-sm"
                                                                        onClick={() => setHoveredPanel(null)}
                                                                    >
                                                                        {child.title}
                                                                    </Link>
                                                                </li>
                                                            ))}
                                                        </ul>
                                                    )} */}
                                                </li>
                                            );
                                        })}
                                    </ul>
                                </div>
                            )}
                        </li>
                    ))}
                </ul>
            </div>
        );
    }

    // Desktop version (unchanged)
    return (
        <div className="relative z-50" onMouseLeave={handleMouseLeave}>
            {/* Top Nav */}
            <nav className="bg-transparent">
                <ul className="flex font-md navitem max-w-7xl mx-auto gap-12">
                    {items.map((item, index) => (
                        <li
                            key={index}
                            className="relative xl:text-[15.3px] border-b-4 border-b-transparent hover:border-b-[#fcb242] navitem py-[30px] px-[15px] cursor-pointer"
                            onMouseEnter={() => {
                                setHoveredPanel(item);
                                setHoveredParent(null);
                                setHoveredChild(null);
                            }}
                            onClick={() => {
                                if (hoveredPanel?.label === item.label) closeAllMenus() 
                                //     {
                                //     setHoveredPanel(null);
                                //     setHoveredParent(null);
                                //     setHoveredChild(null);
                                // } 
                                else {
                                    setHoveredPanel(item);
                                    setHoveredParent(null);
                                    setHoveredChild(null);
                                }
                            }}
                        >
                            <span className="text-gray-500 text-base hover:text-orange-500 transition navitem">
                                {item.label}
                            </span>
                        </li>
                    ))}
                </ul>
            </nav>

            {/* Full Width Dropdown */}
            {hoveredPanel && (
                <div
                    className="fixed pt-[50px] top-[100px] left-0 right-0 w-full bg-[#0B1D27] text-white z-50 shadow-xl transition-all duration-300 ease-in-out h-[535px]"
                    onMouseEnter={() => setIsDropdownHovered(true)}
                    onMouseLeave={() => {
                        setIsDropdownHovered(false);
                        closeAllMenus();
                        // setHoveredPanel(null);
                        // setHoveredParent(null);
                        // setHoveredChild(null);
                    }}
                >
                    <div className="container mx-auto px-2">
                        {hoveredPanel.hoverPanel && (
                            <h3 className="text-orange-400 text-[42px] font-bold border-b border-orange-400 pb-2 mb-6 uppercase tracking-wide">
                                {hoveredPanel.hoverPanel.title}
                            </h3>
                        )}
                        <div className="w-full mx-auto flex gap-8 py-12">
                            {/* Left Column: Parent Items */}
                            <div className="w-[25%]">
                                <ul className="space-y-4">
                                    {hoveredPanel?.hoverPanel?.points.map((parent, i) => {
                                        const slug = slugify(parent.title);
                                        const route = parent.url || (slug === "current-job-openings" ? "/current-openings" : `/${slug}`);
                                        return (
                                            <li key={i}
                                                onMouseEnter={() => {
                                                    setHoveredParent(parent);
                                                    setHoveredChild(null);
                                                }}
                                                onClick={() => {
                                                    setHoveredParent(parent);
                                                    setHoveredChild(null);
                                                }}
                                                className="cursor-pointer transition duration-150 text-[#6fb07f] hover:text-orange-400 pb-[10px] text-[19px]"
                                            >
                                                <Link href={route} onClick={closeAllMenus}>
                                                    {parent.title}
                                                </Link>
                                            </li>
                                        );
                                    })}
                                </ul>
                            </div>

                            {/* Middle Column: Child Items */}
                            <div className="w-[25%]">
                                <ul className="space-y-3 pt-2 pb-4">
                                    {hoveredParent?.children?.map((child, j) => (
                                        <li className="text-[#91989c]" key={j}>
                                            <Link
                                                href={child?.url ? child.url : `/${slugify(child.title)}`}
                                                className={`block transition duration-150 text-[16px] leading-6 ${hoveredChild?.title === child.title
                                                    ? "text-white"
                                                    : "text-gray-300"
                                                    } hover:text-white`}
                                                onMouseEnter={() => setHoveredChild(child)}
                                                onClick={closeAllMenus}
                                                // onClick={() => setHoveredChild(child)}
                                            >
                                                {child.title}
                                            </Link>
                                        </li>
                                    ))}
                                </ul>
                            </div>

                            {/* Right Column: Image Preview */}
                            <div className="w-[50%]">
                                {hoveredChild?.image ? (
                                    <div className="relative w-full h-full">
                                        <Image

                                            src={hoveredChild.image}
                                            alt={hoveredChild.title}
                                            fill
                                            className="object-cover shadow-lg"
                                        />
                                    </div>
                                ) : hoveredParent?.image ? (
                                    <div className="relative w-full h-[260px]">
                                        <Image
                                            src={hoveredParent.image}
                                            alt={hoveredParent.title}
                                            fill
                                            className="object-cover shadow-lg"
                                        />
                                    </div>
                                ) : (
                                    <div className="relative w-full h-[260px]">
                                        <Image
                                            src={hoveredPanel?.hoverPanel?.image || "/assets/images/default-image.jpg"}
                                            alt="Default"
                                            fill
                                            className="object-cover shadow-lg"
                                        />
                                    </div>
                                )}
                            </div>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
};

export default NavItem;