import { type FC, type ReactNode, createElement, isValidElement } from "react";
import Link from "next/link";
import { cx } from '../../utils/cx';
import { isReactComponent } from '../../utils/is-react-component';

interface GenericHeaderComponentProps {
    items: Array<{
        label: string;
        href: string;
        icon?: FC<{ className?: string }>;
        subtitle?: string;
    }>;
}

// Nav Menu Item Link component (consolidated)
interface NavMenuItemLinkProps {
    href: string;
    icon?: FC<{ className?: string }> | ReactNode;
    iconClassName?: string;
    className?: string;
    title: string;
    subtitle?: string;
    badge?: ReactNode;
    actionsContent?: ReactNode;
    onClick?: (e: React.MouseEvent) => void;
}

const NavMenuItemLink = ({ href, icon: Icon, iconClassName, title, subtitle, badge, actionsContent, className, onClick }: NavMenuItemLinkProps) => {
    const content = (
        <>
            {isValidElement(Icon) && Icon}
            {isReactComponent(Icon) && createElement(Icon, { className: cx("mt-0.5 size-4 shrink-0 stroke-[2.3px] text-fg-brand-primary", iconClassName) } as Record<string, unknown>)}

            <div className="flex min-w-0 flex-1 flex-col gap-3">
                <div className="flex min-w-0 flex-1 flex-col gap-0.5">
                    <div className="flex items-center gap-2">
                        <span className="text-md font-semibold text-primary">{title}</span>
                        {badge}
                    </div>

                    {subtitle && <span className="line-clamp-2 min-w-0 text-sm text-tertiary">{subtitle}</span>}
                </div>

                {actionsContent}
            </div>
        </>
    );

    if (onClick) {
        return (
            <button
                onClick={onClick}
                className={cx(
                    "inline-flex w-full gap-3 px-4 py-3 outline-focus-ring transition duration-100 ease-linear hover:bg-primary_hover focus-visible:outline-2 sm:p-3 md:rounded-lg text-left",
                    className,
                )}
            >
                {content}
            </button>
        );
    }

    return (
        <Link
            href={href}
            className={cx(
                "inline-flex w-full gap-3 px-4 py-3 outline-focus-ring transition duration-100 ease-linear hover:bg-primary_hover focus-visible:outline-2 sm:p-3 md:rounded-lg",
                className,
            )}
        >
            {content}
        </Link>
    );
};

/**
 * Generic header dropdown menu component for navigation
 * Based on the UntitledUI dropdown-menu-simple pattern from the design system
 * Used in the site template header for dropdown navigation menus
 */
export const GenericHeaderComponent = ({ items }: GenericHeaderComponentProps) => {
    return (
        <div className="px-3 pb-2 md:max-w-84 md:p-0" style={{ fontFamily: 'var(--font-body, var(--font-inter, "Inter"), -apple-system, "Segoe UI", Roboto, Arial, sans-serif)' }}>
            <nav className="overflow-hidden rounded-2xl bg-primary py-2 shadow-xs ring-1 ring-secondary_alt md:p-2 md:shadow-lg">
                <ul className="flex flex-col gap-0.5">
                    {items.map((item) => (
                        <li key={item.label || item.href}>
                            <NavMenuItemLink
                                icon={item.icon}
                                title={item.label}
                                subtitle={item.subtitle}
                                href={item.href}
                            />
                        </li>
                    ))}
                </ul>
            </nav>
        </div>
    );
};

