import { CustomLink } from '@/src/components/custom-link'; // Ensure correct import path
import { FiChevronDown } from 'react-icons/fi';

// Define types for subMenuItems and menuItems
type SubMenuItem = {
  label: string;
  href: string;
};

type NestedSubMenuItem = {
  label: string;
  subMenuItems: SubMenuItem[];
};

type MenuItem = {
  title: string;
  href?: string;
  subMenuItems?: (SubMenuItem | NestedSubMenuItem)[]; // Allowing for both types of sub-menu items
};

type NavigationProps = {
  menuItems: MenuItem[];
  isSticky: boolean;
};

// Type guard to check if the item is a SubMenuItem
function isSubMenuItem(
  item: SubMenuItem | NestedSubMenuItem
): item is SubMenuItem {
  return (item as SubMenuItem).href !== undefined;
}

// Navigation Component
export function Navigation({ menuItems, isSticky }: NavigationProps) {
  // Render the subMenuItems
  const renderSubMenu = (subMenuItems: (SubMenuItem | NestedSubMenuItem)[]) => {
    return (
      <div className="submenu absolute left-1/2 top-full z-10 grid w-[1500px] -translate-x-1/4 transform grid-cols-3 gap-5">
        {subMenuItems.map((item, index) => {
          if (isSubMenuItem(item)) {
            // If it's a SubMenuItem, render it
            return (
              <div key={index}>
                <CustomLink
                  href={item.href}
                  className="block font-medium text-gray-100 hover:text-primary"
                >
                  {item.label}
                </CustomLink>
              </div>
            );
          }

          // If it's a NestedSubMenuItem, render the nested items
          return (
            <div key={index} className="submenu-group">
              <h4 className="text-lg font-semibold text-primary">
                {item.label}
              </h4>
              <ul>
                {item.subMenuItems.map((subItem, subIndex) => (
                  <li key={subIndex}>
                    <CustomLink
                      href={subItem.href}
                      className="block font-medium text-gray-100 hover:text-primary"
                    >
                      {subItem.label}
                    </CustomLink>
                  </li>
                ))}
              </ul>
            </div>
          );
        })}
      </div>
    );
  };

  return (
    <nav className={`relative ${isSticky ? 'sticky top-0 z-20' : ''}`}>
      <ul className="menu flex items-center justify-center gap-x-6">
        {menuItems.map((menuItem, index) => (
          <li key={index} className="menu-item group relative">
            <CustomLink
              href={menuItem.href || '#'}
              className="menu-title block flex items-center gap-2 py-4 font-bold text-black dark:text-white"
            >
              {menuItem.title}
              {menuItem.subMenuItems && (
                <FiChevronDown className="text-lg text-primary group-hover:text-primary" />
              )}
            </CustomLink>

            {menuItem.subMenuItems && menuItem.title !== 'Portfolio' && (
              <div className="submenu absolute left-1/2 top-full z-10 grid w-[1500px] -translate-x-1/4 transform grid-cols-3 gap-5">
                <div className="flex gap-32">
                  {/* Column 1: Services */}
                  <div className="gap-4 pl-20">
                    <h4 className="flex text-lg font-semibold text-primary">
                      Services
                    </h4>
                    {menuItem.subMenuItems[0] &&
                      'subMenuItems' in menuItem.subMenuItems[0] &&
                      menuItem.subMenuItems[0].subMenuItems.map(
                        (item, itemIndex) => {
                          if ('href' in item) {
                            // This is a SubMenuItem
                            return (
                              <CustomLink
                                key={itemIndex}
                                href={item.href}
                                className="block font-medium text-gray-100 hover:text-primary"
                              >
                                {item.label}
                              </CustomLink>
                            );
                          }
                          return null;
                        }
                      )}
                  </div>

                  {/* Column 2: Our Solutions */}
                  <div className="gap-4">
                    <h4 className="flex text-lg font-semibold text-primary">
                      Our ServiceNow Expertise
                    </h4>
                    {menuItem.subMenuItems[1] &&
                      'subMenuItems' in menuItem.subMenuItems[1] &&
                      menuItem.subMenuItems[1].subMenuItems.map(
                        (item, itemIndex) => {
                          if ('href' in item) {
                            // This is a SubMenuItem
                            return (
                              <CustomLink
                                key={itemIndex}
                                href={item.href}
                                className="block font-medium text-gray-100 hover:text-primary"
                              >
                                {item.label}
                              </CustomLink>
                            );
                          }
                          return null;
                        }
                      )}
                  </div>

                  {/* Column 3: Image and Content */}
                  <div className="gap-4">
                    <img
                      src="/assets/images/about/do.png"
                      alt="Description of the image"
                      className="ml-32 h-auto w-80 p-2" // Customize width and height if needed
                    />
                    <p className="ml-20 text-primary">
                      Streamline, automate, and accelerate with ServiceNow
                      solutions.
                    </p>
                    <h3 className="mr-10 text-primary">
                      We help you optimize operations and deliver superior
                      customer experiences with ease.
                    </h3>
                    <div className="mt-2">
                      <CustomLink
                        href="/services"
                        className="ml-[240px] inline-block rounded-lg bg-primary text-white transition-all hover:text-black"
                      >
                        Explore More
                      </CustomLink>
                    </div>
                  </div>
                </div>
              </div>
            )}

            {/* Portfolio section */}
            {menuItem.title === 'Portfolio' && menuItem.subMenuItems && (
              <div className="submenu absolute left-1/2 top-full z-10 hidden w-[200px] -translate-x-1/4 transform  bg-white shadow-md group-hover:block">
                <div className="flex flex-col gap-4 px-6 py-4">
                  {menuItem.subMenuItems.map((subItem, index) => {
                    // Check if it's a SubMenuItem before accessing href
                    if ('href' in subItem) {
                      return (
                        <CustomLink
                          key={index}
                          href={subItem.href}
                          className="block font-medium text-gray-100 hover:text-primary"
                        >
                          {subItem.label}
                        </CustomLink>
                      );
                    }
                    return null;
                  })}
                </div>
              </div>
            )}
          </li>
        ))}
      </ul>
    </nav>
  );
}

// Pass the `menuItemsProps` into the component
export const menuItemsProps: MenuItem[] = [
  {
    title: 'About',
    href: '/about',
  },
  {
    title: 'What We Do',
    subMenuItems: [
      {
        label: 'Services',
        subMenuItems: [
          { label: 'ServiceNow', href: '/services' },
          { label: 'Advisory & Consulting', href: '/services/advisory' },
          { label: 'Cybersecurity Solutions', href: '/services/cybersecurity' },
          { label: 'Digital Transformation', href: '/services/digital' },
          {
            label: 'Technology Stack Expertise',
            href: '/services/softwaredev',
          },
          { label: 'Technical Support Services', href: '/services/support' },
          { label: 'Salesforce', href: '/services/salesforce' },
        ],
      },
      {
        label: 'Our ServiceNow Expertise',
        subMenuItems: [
          {
            label: 'IT Service Management (ITSM)',
            href: '/services/servicenow/itsm',
          },
          {
            label: 'IT Business Management (ITBM)',
            href: '/services/servicenow/itbm',
          },
          {
            label: 'IT Operations Management (ITOM)',
            href: '/services/servicenow/itom',
          },
          {
            label: 'ServiceNow Integration',
            href: '/services/servicenow/integration',
          },
          {
            label: 'IT Asset Management (ITAM)',
            href: '/services/servicenow/ham',
          },
          {
            label: 'Service Portal Management',
            href: '/services/servicenow/portal',
          },
          { label: 'Creator Workflow', href: '/services/servicenow/workflow' },
        ],
      },
    ],
  },
  {
    title: 'Portfolio',
    subMenuItems: [
      { label: 'Testimonial', href: '/testimonial' },
      { label: 'Research', href: '/research' },
    ],
  },
  { title: 'Blogs', href: '/blogs' },
  { title: 'Contact', href: '/contact' },
];