"use client";

import React from "react";
import Link from "next/link";

type MenuItem = {
    id?: string | number;
    title: string;
    href?: string;
    children?: MenuItem[];
    submenu?: MenuItem[];
    relation?: any[];
    linkedMenuItemId?: string | number | null;
    linkedMenuItemName?: string | null;
    megaMenu?: boolean;
    menuType?: string;
    enableRelation?: boolean;
    customLink?: string | null;
};

interface MegaMenuProps {
    items: MenuItem[];
    parentItem?: MenuItem;
}

const slugify = (value: string) => {
    return value
        ?.trim()
        .toLowerCase()
        .replace(/&/g, "and")
        .replace(/[^a-z0-9]+/g, "-")
        .replace(/^-+|-+$/g, "");
};

const getProductCategoryUrl = (item: MenuItem) => {
    const linkedName = item?.linkedMenuItemName;

    if (linkedName?.trim()) {
        const categories = linkedName
            .split("=>")
            .map((part) => slugify(part))
            .filter(Boolean);

        if (categories.length > 0) {
            return `/product-category/${categories.join("/")}`;
        }
    }

    if (item?.linkedMenuItemId !== null && item?.linkedMenuItemId !== undefined && item?.linkedMenuItemId !== "") {
        const linkedId = String(item.linkedMenuItemId);
        const categories = linkedId
            .split(/[-_]/)
            .filter(Boolean)
            .map((part) => slugify(part));

        if (categories.length > 0) {
            return `/product-category/${categories.join("/")}`;
        }
    }

    if (item?.customLink?.trim() && item.customLink !== "#") {
        return item.customLink;
    }

    if (item?.href && item.href !== "#") {
        return item.href;
    }

    return `/product-category/${slugify(item?.title || "")}`;
};

const getMenuItemUrl = (item: MenuItem) => {
    const relationSlug = item?.relation?.[0]?.targets?.[0]?.slug;
    if (relationSlug) {
        return `/industries/${relationSlug}`;
    }

    if (item?.customLink?.trim() && item.customLink !== "#") {
        return item.customLink;
    }

    if (
        item?.linkedMenuItemName ||
        (item?.linkedMenuItemId !== null && item?.linkedMenuItemId !== undefined && item?.linkedMenuItemId !== "") ||
        item?.menuType === "category" ||
        item?.href?.includes("/product-category")
    ) {
        return getProductCategoryUrl(item);
    }

    if (item?.href && item.href !== "#") {
        return item.href;
    }

    return `/product-category/${slugify(item?.title || "")}`;
};

export default function MegaMenu({ items = [], parentItem }: MegaMenuProps) {
    if (!items || items.length === 0) return null;

    const isIndustriesMenu = Boolean(parentItem?.title?.toLowerCase().includes("industr"));

    // For Industries menu, group flat items into vertical columns (columnwise)
    let verticalColumns: MenuItem[][] = [];
    if (isIndustriesMenu && items.length > 0) {
        const numCols = Math.min(items.length, 4);
        const itemsPerCol = Math.ceil(items.length / numCols);
        verticalColumns = Array.from({ length: numCols }, (_, i) =>
            items.slice(i * itemsPerCol, (i + 1) * itemsPerCol)
        );
    }

    const applications = [
        { title: "Surveying", href: "/survey-equipment" },
        { title: "Inspections", href: "/industries/inspections" },
    ];

    return (
        <div
            className="
                invisible
                absolute
                left-0
                right-0
                top-full
                z-50
                w-full
                bg-white
                opacity-0
                shadow-xl
                border-t
                border-gray-100
                transition-all
                duration-200
                group-hover:visible
                group-hover:opacity-100
            "
        >
            <div className="max-w-7xl mx-auto px-6 sm:px-8 py-8 md:py-10">
                {isIndustriesMenu ? (
                    /* Industries Layout: Normal text links stacked vertically columnwise */
                    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-10">
                        {verticalColumns.map((colItems, colIdx) => (
                            <div key={colIdx} className="flex flex-col space-y-3">
                                {colItems.map((item, itemIdx) => {
                                    const itemUrl = getMenuItemUrl(item);
                                    return (
                                        <Link
                                            key={item.id || item.title || itemIdx}
                                            href={itemUrl}
                                            className="text-[15px] font-medium text-gray-700 hover:text-secondary transition-colors duration-150 block py-1"
                                        >
                                            {item.title}
                                        </Link>
                                    );
                                })}
                            </div>
                        ))}
                    </div>
                ) : items?.length > 0 ? (
                    /* Drones Layout: Category Headings + Sub-item lists */
                    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-10">
                        {items.map((column, colIdx) => {
                            const columnItems = column?.submenu?.length
                                ? column.submenu
                                : column?.children?.length
                                    ? column.children
                                    : [];

                            const colUrl = getMenuItemUrl(column);

                            return (
                                <div key={column.id || column.title || colIdx} className="flex flex-col">
                                    <h3 className="font-bold text-primary text-[15px] mb-5 tracking-tight">

                                        {column.title}

                                    </h3>

                                    {columnItems.length > 0 && (
                                        <ul className="space-y-2.5">
                                            {columnItems.map((child, childIdx) => {
                                                const childSubItems = child?.submenu?.length
                                                    ? child.submenu
                                                    : child?.children?.length
                                                        ? child.children
                                                        : [];

                                                const childUrl = getMenuItemUrl(child);

                                                return (
                                                    <li key={child.id || child.title || childIdx}>
                                                        <Link
                                                            href={childUrl}
                                                            className="text-[15px] font-normal text-gray-600 hover:text-secondary transition-colors duration-150 block leading-snug mb-5"
                                                        >
                                                            {child.title}
                                                        </Link>

                                                        {childSubItems.length > 0 && (
                                                            <ul className="mt-1.5 pl-3 space-y-1">
                                                                {childSubItems.map((subItem, subIdx) => (
                                                                    <li key={subItem.id || subItem.title || subIdx}>
                                                                        <Link
                                                                            href={getMenuItemUrl(subItem)}
                                                                            className="text-[15px] font-normal text-gray-500 hover:text-secondary transition-colors duration-150 block"
                                                                        >
                                                                            {subItem.title}
                                                                        </Link>
                                                                    </li>
                                                                ))}
                                                            </ul>
                                                        )}
                                                    </li>
                                                );
                                            })}
                                        </ul>
                                    )}
                                </div>
                            );
                        })}
                    </div>
                ) : null}

                <div className="border-t border-gray-100 mt-8 pt-4 flex flex-wrap items-center gap-6 text-[14px]">
                    <span className="text-gray-500 font-normal">Explore applications</span>
                    {applications.map((app) => (
                        <Link
                            key={app.title}
                            href={app.href}
                            className="font-medium text-secondary hover:underline flex items-center gap-1 transition-colors"
                        >
                            {app.title} <span className="text-xs">→</span>
                        </Link>
                    ))}
                </div>
            </div>
        </div>
    );
}