import * as React from "react";
import { ChevronRight, MoreHorizontal } from "lucide-react";
import { cva, type VariantProps } from "class-variance-authority";

import { cn } from "../../lib/utils";

const MoonUIbreadcrumbVariantsPro = cva(
  "flex items-center gap-1.5 text-sm",
  {
    variants: {
      variant: {
        default: "dark:text-gray-100 transition-colors",
        muted: "text-muted-foreground dark:text-gray-400 transition-colors",
        ghost: "text-foreground/60 dark:text-gray-300/60 transition-colors",
      },
      size: {
        default: "text-sm",
        sm: "text-xs",
        lg: "text-base",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
);

interface BreadcrumbProps
  extends React.HTMLAttributes<HTMLElement>,
    VariantProps<typeof MoonUIbreadcrumbVariantsPro> {
  separator?: React.ReactNode;
  showHomeIcon?: boolean;
}

interface BreadcrumbListProps extends React.HTMLAttributes<HTMLOListElement> {
  collapsed?: boolean;
  collapsedWidth?: number;
}

interface BreadcrumbItemProps extends React.HTMLAttributes<HTMLLIElement> {
  isCurrent?: boolean;
  href?: string;
  asChild?: boolean;
}

interface BreadcrumbSeparatorProps extends React.HTMLAttributes<HTMLSpanElement> {
  /** Custom separator icon or text */
  icon?: React.ReactNode;
}

interface BreadcrumbEllipsisProps extends React.HTMLAttributes<HTMLSpanElement> {
  /** Custom ellipsis icon */
  icon?: React.ReactNode;
}

const MoonUIBreadcrumbPro = React.forwardRef<HTMLElement, BreadcrumbProps>(
  ({ className, variant, size, ...props }, ref) => (
    <nav
      ref={ref}
      className={cn(MoonUIbreadcrumbVariantsPro({ variant, size }), className)}
      aria-label="breadcrumb"
      {...props}
    />
  )
);
MoonUIBreadcrumbPro.displayName = "BreadcrumbPro";

const MoonUIBreadcrumbListPro = React.forwardRef<HTMLOListElement, BreadcrumbListProps>(
  ({ className, collapsed, collapsedWidth = 3, ...props }, ref) => {
    const MoonUIchildrenArrayPro = React.Children.toArray(props.children).filter(Boolean);
    const MoonUIchildCountPro = MoonUIchildrenArrayPro.length;

    if (collapsed && MoonUIchildCountPro > collapsedWidth) {
      const MoonUIfirstItemPro = MoonUIchildrenArrayPro[0];
      // const MoonUImiddleItemsPro = childrenArray.slice(1, -2); // Uncomment when needed
      const MoonUIlastTwoItemsPro = MoonUIchildrenArrayPro.slice(-2);

      return (
        <ol
          ref={ref}
          className={cn(
            "flex flex-wrap items-center gap-1.5 sm:gap-2.5",
            className
          )}
          {...props}
        >
          {MoonUIfirstItemPro}
          <MoonUIBreadcrumbEllipsisPro />
          {MoonUIlastTwoItemsPro}
        </ol>
      );
    }

    return (
      <ol
        ref={ref}
        className={cn(
          "flex flex-wrap items-center gap-1.5 sm:gap-2.5",
          className
        )}
        {...props}
      />
    );
  }
);
MoonUIBreadcrumbListPro.displayName = "BreadcrumbListPro";

const MoonUIBreadcrumbItemPro = React.forwardRef<HTMLLIElement, BreadcrumbItemProps>(
  ({ className, isCurrent, href, asChild = false, ...props }, ref) => {
    const MoonUICompPro = asChild ? React.Fragment : href ? "a" : "span";
    const MoonUIitemPropsPro = asChild ? {} : href ? { href } : {};

    return (
      <li
        ref={ref}
        className={cn("inline-flex items-center gap-1.5", className)}
        aria-current={isCurrent ? "page" : undefined}
        {...props}
      >
        <MoonUICompPro 
          className={cn(
            "transition-colors duration-200 hover:text-foreground",
            isCurrent 
              ? "font-medium text-foreground dark:text-white dark:text-opacity-95" 
              : "text-muted-foreground hover:text-foreground dark:text-gray-400 dark:hover:text-gray-200 dark:hover:text-opacity-95 hover:underline hover:underline-offset-4 hover:decoration-gray-300/30"
          )}
          {...MoonUIitemPropsPro}
        >
          {props.children}
        </MoonUICompPro>
      </li>
    );
  }
);
MoonUIBreadcrumbItemPro.displayName = "BreadcrumbItemPro";

const MoonUIBreadcrumbSeparatorPro = ({
  children,
  className,
  ...props
}: BreadcrumbSeparatorProps) => (
  <span
    role="presentation"
    aria-hidden="true"
    className={cn("text-muted-foreground dark:text-gray-500 opacity-70", className)}
    {...props}
  >
    {children || <ChevronRight className="h-3.5 w-3.5" />}
  </span>
);
MoonUIBreadcrumbSeparatorPro.displayName = "BreadcrumbSeparatorPro";

const MoonUIBreadcrumbEllipsisPro = ({
  className,
  ...props
}: BreadcrumbEllipsisProps) => (
  <span
    role="presentation"
    aria-hidden="true"
    className={cn("flex items-center text-muted-foreground dark:text-gray-500 dark:hover:text-gray-400 transition-colors duration-200", className)}
    {...props}
  >
    <MoreHorizontal className="h-4 w-4" />
    <span className="sr-only">More pages</span>
  </span>
);
MoonUIBreadcrumbEllipsisPro.displayName = "BreadcrumbEllipsisPro";

const MoonUIBreadcrumbLinkPro = React.forwardRef<HTMLAnchorElement, React.AnchorHTMLAttributes<HTMLAnchorElement>>(
  ({ className, href, ...props }, ref) => (
    <a
      ref={ref}
      href={href}
      className={cn(
        "transition-colors duration-200 hover:text-foreground text-muted-foreground hover:underline hover:underline-offset-4 hover:decoration-gray-300/30 dark:text-gray-400 dark:hover:text-gray-200",
        className
      )}
      {...props}
    />
  )
);
MoonUIBreadcrumbLinkPro.displayName = "BreadcrumbLinkPro";

const MoonUIBreadcrumbPagePro = React.forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>(
  ({ className, ...props }, ref) => (
    <span
      ref={ref}
      className={cn(
        "font-medium text-foreground dark:text-white dark:text-opacity-95",
        className
      )}
      {...props}
    />
  )
);
MoonUIBreadcrumbPagePro.displayName = "BreadcrumbPagePro";


// Internal aliases for Pro component usage
export const breadcrumbVariantsInternal = MoonUIbreadcrumbVariantsPro
export const BreadcrumbInternal = MoonUIBreadcrumbPro
export const BreadcrumbListInternal = MoonUIBreadcrumbListPro
export const BreadcrumbItemInternal = MoonUIBreadcrumbItemPro
export const BreadcrumbSeparatorInternal = MoonUIBreadcrumbSeparatorPro
export const BreadcrumbEllipsisInternal = MoonUIBreadcrumbEllipsisPro
export const BreadcrumbLinkInternal = MoonUIBreadcrumbLinkPro
export const BreadcrumbPageInternal = MoonUIBreadcrumbPagePro

// Pro exports  
export { MoonUIbreadcrumbVariantsPro, MoonUIBreadcrumbPro, MoonUIBreadcrumbListPro, MoonUIBreadcrumbItemPro, MoonUIBreadcrumbSeparatorPro, MoonUIBreadcrumbEllipsisPro, MoonUIBreadcrumbLinkPro, MoonUIBreadcrumbPagePro }

// Clean exports (without MoonUI prefix for easier usage)
export { MoonUIbreadcrumbVariantsPro as breadcrumbVariants, MoonUIBreadcrumbPro as Breadcrumb, MoonUIBreadcrumbListPro as BreadcrumbList, MoonUIBreadcrumbItemPro as BreadcrumbItem, MoonUIBreadcrumbSeparatorPro as BreadcrumbSeparator, MoonUIBreadcrumbEllipsisPro as BreadcrumbEllipsis, MoonUIBreadcrumbLinkPro as BreadcrumbLink, MoonUIBreadcrumbPagePro as BreadcrumbPage };