import { cn } from "@buzzwaretech/utils";
import Link from "next/link";
import React from "react";

// ============================================================================
// TYPES
// ============================================================================

interface AppSidebarItemData {
  href?: string;
  label?: string;
  icon?: React.ReactNode;
  isActive?: boolean;
  onClick?: () => void;
  disabled?: boolean;
  showLabel?: boolean;
}

interface AppSidebarItemProps {
  variant?: "link" | "button";
  item?: AppSidebarItemData;
  as?: React.ElementType;
}

interface AppSidebarItemLabelProps {
  highlight?: boolean;
  label?: string;
}

interface AppSidebarItemIconProps {
  icon?: React.ReactNode;
  highlight?: boolean;
}

interface AppSidebarLinkItemProps {
  href?: string;
  children: React.ReactNode;
  className?: string;
}

interface AppSidebarButtonItemProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  children: React.ReactNode;
  onClick?: () => void;
  disabled?: boolean;
  className?: string;
  as?: React.ElementType;
}

// ============================================================================
// STYLES
// ============================================================================

const styles = {
  base: "group flex flex-col gap-0.5 items-center justify-center text-tertiary",
  icon: "flex items-center justify-center gap-2 size-8 rounded-md text-tertiary",
  iconActive: "bg-layer-transparent-selected text-secondary !text-icon-primary",
  iconInactive:
    "group-hover:text-icon-secondary group-hover:bg-layer-transparent-hover !text-icon-tertiary",
  label: "text-11 font-medium",
  labelActive: "text-secondary",
  labelInactive: "group-hover:text-secondary text-tertiary",
} as const;

// ============================================================================
// SUB-COMPONENTS
// ============================================================================

function AppSidebarItemLabel({
  highlight = false,
  label,
}: AppSidebarItemLabelProps) {
  if (!label) return null;

  return (
    <span
      className={cn(styles.label, {
        [styles.labelActive]: highlight,
        [styles.labelInactive]: !highlight,
      })}
    >
      {label}
    </span>
  );
}

function AppSidebarItemIcon({ icon, highlight }: AppSidebarItemIconProps) {
  if (!icon) return null;

  return (
    <div
      className={cn(styles.icon, {
        [styles.iconActive]: highlight,
        [styles.iconInactive]: !highlight,
      })}
    >
      {icon}
    </div>
  );
}

const AppSidebarLinkItem = React.forwardRef<
  HTMLAnchorElement,
  AppSidebarLinkItemProps
>(({ href, children, className, ...props }, ref) => {
  if (!href) return null;

  return (
    <Link ref={ref} href={href} className={cn(styles.base, className)} {...props}>
      {children}
    </Link>
  );
});
AppSidebarLinkItem.displayName = "AppSidebarLinkItem";

const AppSidebarButtonItem = React.forwardRef<
  HTMLButtonElement | HTMLDivElement,
  AppSidebarButtonItemProps
>(({ children, onClick, disabled = false, className, as, ...props }, ref) => {
  const Component = as || "button";
  return (
    <Component
      ref={ref as any}
      className={cn(styles.base, className)}
      onClick={onClick}
      disabled={disabled}
      type={as ? undefined : "button"}
      {...props}
    >
      {children}
    </Component>
  );
});
AppSidebarButtonItem.displayName = "AppSidebarButtonItem";

// ============================================================================
// MAIN COMPONENT
// ============================================================================

type AppSidebarItemComponentType = React.ForwardRefExoticComponent<
  AppSidebarItemProps & React.RefAttributes<any>
> & {
  Label: typeof AppSidebarItemLabel;
  Icon: typeof AppSidebarItemIcon;
  Link: typeof AppSidebarLinkItem;
  Button: typeof AppSidebarButtonItem;
};

const AppSidebarItem = React.forwardRef<any, AppSidebarItemProps>(
  ({ variant = "link", item, ...props }, ref) => {
    if (!item) return null;

    const {
      icon,
      isActive,
      label,
      href,
      onClick,
      disabled,
      showLabel = true,
    } = item;

    const commonItems = (
      <>
        <AppSidebarItemIcon icon={icon} highlight={isActive} />
        {showLabel && <AppSidebarItemLabel highlight={isActive} label={label} />}
      </>
    );

    if (variant === "link") {
      return (
        <AppSidebarLinkItem ref={ref} href={href} {...props}>
          {commonItems}
        </AppSidebarLinkItem>
      );
    }

    return (
      <AppSidebarButtonItem ref={ref} onClick={onClick} disabled={disabled} {...props}>
        {commonItems}
      </AppSidebarButtonItem>
    );
  }
) as AppSidebarItemComponentType;
AppSidebarItem.displayName = "AppSidebarItem";

// ============================================================================
// COMPOUND COMPONENT ASSIGNMENT
// ============================================================================

AppSidebarItem.Label = AppSidebarItemLabel;
AppSidebarItem.Icon = AppSidebarItemIcon;
AppSidebarItem.Link = AppSidebarLinkItem;
AppSidebarItem.Button = AppSidebarButtonItem;

export { AppSidebarItem };
export type { AppSidebarItemData, AppSidebarItemProps };