import { Link, type LinkProps, NavLink, type NavLinkProps } from "@remix-run/react";
import React, {
  forwardRef,
  type ReactNode,
  useEffect,
  useImperativeHandle,
  useRef,
  useState,
} from "react";
import { type ShortcutDefinition, useShortcutKeys } from "~/hooks/useShortcutKeys";
import { cn } from "~/utils/cn";
import { ShortcutKey } from "./ShortcutKey";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./Tooltip";
import { Icon, type RenderIcon } from "./Icon";
import { Spinner } from "./Spinner";

const sizes = {
  small: {
    button: "h-6 px-2.5 text-xs",
    icon: "h-3.5 -mx-1",
    iconSpacing: "gap-x-2.5",
    shortcutVariant: "small" as const,
    shortcut: "-ml-0.5 -mr-1.5 justify-self-center",
  },
  medium: {
    button: "h-8 px-3 text-sm",
    icon: "h-4 -mx-1",
    iconSpacing: "gap-x-2.5",
    shortcutVariant: "medium" as const,
    shortcut: "-ml-0.5 -mr-1.5 rounded justify-self-center",
  },
  large: {
    button: "h-10 px-2 text-base font-medium",
    icon: "h-5",
    iconSpacing: "gap-x-0.5",
    shortcutVariant: "medium" as const,
    shortcut: "ml-1.5 -mr-0.5",
  },
  "extra-large": {
    button: "h-12 px-2 text-base font-medium",
    icon: "h-5",
    iconSpacing: "gap-x-0.5",
    shortcutVariant: "medium" as const,
    shortcut: "ml-1.5 -mr-0.5",
  },
};

type Size = keyof typeof sizes;

const theme = {
  primary: {
    textColor:
      "text-text-bright group-hover/button:text-white transition group-disabled/button:text-text-dimmed",
    button:
      "bg-indigo-600 border border-indigo-500 group-hover/button:bg-indigo-500 group-hover/button:border-indigo-400 group-disabled/button:opacity-50 group-disabled/button:bg-indigo-600 group-disabled/button:border-indigo-500 group-disabled/button:pointer-events-none",
    shortcut:
      "border-text-bright/40 text-text-bright group-hover/button:border-text-bright/60 group-hover/button:text-text-bright",
    icon: "text-text-bright",
  },
  secondary: {
    textColor: "text-text-bright transition group-disabled/button:text-text-dimmed/80",
    button:
      "bg-secondary group-hover/button:bg-surface-control group-hover/button:border-border-brighter border border-border-bright group-disabled/button:bg-secondary group-disabled/button:opacity-60 group-disabled/button:pointer-events-none",
    shortcut:
      "border-text-dimmed/40 text-text-dimmed group-hover/button:text-text-bright group-hover/button:border-text-dimmed",
    icon: "text-text-bright",
  },
  tertiary: {
    textColor: "text-text-bright transition group-disabled/button:text-text-dimmed/80",
    button:
      "bg-tertiary group-hover/button:bg-surface-control group-disabled/button:bg-tertiary group-disabled/button:opacity-60 group-disabled/button:pointer-events-none",
    shortcut:
      "border-text-dimmed/40 text-text-dimmed group-hover/button:text-text-bright group-hover/button:border-text-dimmed",
    icon: "text-text-bright",
  },
  minimal: {
    textColor: "text-text-dimmed group-disabled/button:text-text-dimmed transition",
    button:
      "bg-transparent group-hover/button:bg-tertiary disabled:opacity-50 group-disabled/button:bg-transparent group-disabled/button:pointer-events-none",
    shortcut:
      "border-dimmed/40 text-text-dimmed group-hover/button:text-text-bright/80 group-hover/button:border-dimmed/60",
    icon: "text-text-dimmed",
  },
  danger: {
    textColor:
      "text-text-bright group-hover/button:text-white transition group-disabled/button:text-text-bright/80",
    button:
      "bg-error group-hover/button:bg-rose-500 disabled:opacity-50 group-disabled/button:bg-error group-disabled/button:pointer-events-none",
    shortcut: "border-text-bright text-text-bright group-hover/button:border-text-bright/60",
    icon: "text-text-bright",
  },
  docs: {
    textColor: "text-blue-200/70 transition group-disabled/button:text-text-dimmed/80",
    button:
      "bg-background-raised border border-border-bright/50 shadow-sm group-hover/button:bg-secondary group-disabled/button:bg-tertiary group-disabled/button:opacity-60 group-disabled/button:pointer-events-none",
    shortcut:
      "border-text-dimmed/40 text-text-dimmed group-hover/button:text-text-bright group-hover/button:border-text-dimmed",
    icon: "text-blue-500",
  },
};

type Theme = keyof typeof theme;

function createVariant(sizeName: Size, themeName: Theme) {
  return {
    textColor: theme[themeName].textColor,
    button: cn(sizes[sizeName].button, theme[themeName].button),
    icon: cn(sizes[sizeName].icon, theme[themeName].icon),
    iconSpacing: sizes[sizeName].iconSpacing,
    shortcutVariant: sizes[sizeName].shortcutVariant,
    shortcut: cn(sizes[sizeName].shortcut, theme[themeName].shortcut),
  };
}

const variant = {
  "primary/small": createVariant("small", "primary"),
  "primary/medium": createVariant("medium", "primary"),
  "primary/large": createVariant("large", "primary"),
  "primary/extra-large": createVariant("extra-large", "primary"),
  "secondary/small": createVariant("small", "secondary"),
  "secondary/medium": createVariant("medium", "secondary"),
  "secondary/large": createVariant("large", "secondary"),
  "secondary/extra-large": createVariant("extra-large", "secondary"),
  "tertiary/small": createVariant("small", "tertiary"),
  "tertiary/medium": createVariant("medium", "tertiary"),
  "tertiary/large": createVariant("large", "tertiary"),
  "tertiary/extra-large": createVariant("extra-large", "tertiary"),
  "minimal/small": createVariant("small", "minimal"),
  "minimal/medium": createVariant("medium", "minimal"),
  "minimal/large": createVariant("large", "minimal"),
  "minimal/extra-large": createVariant("extra-large", "minimal"),
  "danger/small": createVariant("small", "danger"),
  "danger/medium": createVariant("medium", "danger"),
  "danger/large": createVariant("large", "danger"),
  "danger/extra-large": createVariant("extra-large", "danger"),
  "docs/small": createVariant("small", "docs"),
  "docs/medium": createVariant("medium", "docs"),
  "docs/large": createVariant("large", "docs"),
  "docs/extra-large": createVariant("extra-large", "docs"),
  "menu-item": {
    textColor: "text-text-bright px-1",
    button:
      "h-9 px-[0.475rem] text-sm rounded-sm bg-transparent group-hover/button:bg-background-hover",
    icon: "h-5",
    iconSpacing: "gap-x-0.5",
    shortcutVariant: undefined,
    shortcut: undefined,
  },
  "small-menu-item": {
    textColor: "text-text-bright",
    button:
      "h-[1.8rem] px-[0.4rem] text-2sm rounded-sm text-text-dimmed bg-transparent group-hover/button:bg-background-hover",
    icon: "h-[1.125rem]",
    iconSpacing: "gap-x-1.5",
    shortcutVariant: undefined,
    shortcut: undefined,
  },
  "small-menu-sub-item": {
    textColor: "text-text-dimmed",
    button:
      "h-[1.8rem] px-2 ml-5 text-2sm rounded-sm text-text-dimmed bg-transparent group-hover/button:bg-background-hover focus-custom",
    icon: undefined,
    iconSpacing: undefined,
    shortcutVariant: undefined,
    shortcut: undefined,
  },
};

const allVariants = {
  $all: "font-normal text-center font-sans justify-center items-center shrink-0 transition duration-150 rounded-[3px] select-none group-focus/button:outline-hidden group-disabled/button:opacity-75 group-disabled/button:pointer-events-none focus-custom",
  variant: variant,
};

export type ButtonVariant = keyof typeof variant;

export type ButtonContentPropsType = {
  children?: React.ReactNode;
  LeadingIcon?: RenderIcon;
  TrailingIcon?: RenderIcon;
  trailingIconClassName?: string;
  leadingIconClassName?: string;
  fullWidth?: boolean;
  textAlignLeft?: boolean;
  className?: string;
  shortcut?: ShortcutDefinition;
  variant: ButtonVariant;
  shortcutPosition?: "before-trailing-icon" | "after-trailing-icon";
  tooltip?: ReactNode;
  iconSpacing?: string;
  hideShortcutKey?: boolean;
  isLoading?: boolean;
};

export function ButtonContent(props: ButtonContentPropsType) {
  const {
    children: text,
    LeadingIcon,
    TrailingIcon,
    trailingIconClassName,
    leadingIconClassName,
    shortcut,
    fullWidth,
    textAlignLeft,
    className,
    tooltip,
    iconSpacing,
    hideShortcutKey,
    isLoading,
  } = props;

  const [showSpinner, setShowSpinner] = useState(false);
  useEffect(() => {
    if (!isLoading) {
      setShowSpinner(false);
      return;
    }
    const timer = setTimeout(() => setShowSpinner(true), 200);
    return () => clearTimeout(timer);
  }, [isLoading]);

  const variation = allVariants.variant[props.variant];

  const btnClassName = cn(allVariants.$all, variation.button);
  const iconClassName = variation.icon;
  const iconSpacingClassName = variation.iconSpacing;
  const shortcutClassName = variation.shortcut;
  const textColorClassName = variation.textColor;

  const renderShortcutKey = () =>
    shortcut &&
    !hideShortcutKey && (
      <ShortcutKey
        className={cn(shortcutClassName)}
        shortcut={shortcut}
        variant={variation.shortcutVariant ?? "medium"}
      />
    );

  const buttonContent = (
    <div className={cn("flex", fullWidth ? "" : "w-fit text-xxs", btnClassName, className)}>
      <div className={cn("relative", "flex w-full items-center")}>
        <div
          className={cn(
            textAlignLeft ? "text-left" : "justify-center",
            "flex w-full items-center",
            iconSpacingClassName,
            iconSpacing,
            showSpinner && "invisible"
          )}
        >
          {LeadingIcon && (
            <Icon
              icon={LeadingIcon}
              className={cn(
                iconClassName,
                variation.icon,
                leadingIconClassName,
                "shrink-0 justify-start"
              )}
            />
          )}

          {text &&
            (typeof text === "string" ? (
              <span className={cn("mx-auto grow self-center truncate", textColorClassName)}>
                {text}
              </span>
            ) : (
              <>{text}</>
            ))}

          {shortcut &&
            !tooltip &&
            props.shortcutPosition === "before-trailing-icon" &&
            renderShortcutKey()}

          {TrailingIcon && (
            <Icon
              icon={TrailingIcon}
              className={cn(
                iconClassName,
                variation.icon,
                trailingIconClassName,
                "shrink-0 justify-end"
              )}
            />
          )}

          {shortcut &&
            !tooltip &&
            (!props.shortcutPosition || props.shortcutPosition === "after-trailing-icon") &&
            renderShortcutKey()}
        </div>
        {showSpinner && (
          <span className="absolute inset-0 flex items-center justify-center">
            <Spinner className="size-3.5" color="white" />
          </span>
        )}
      </div>
    </div>
  );

  if (tooltip) {
    return (
      <TooltipProvider>
        <Tooltip>
          <TooltipTrigger asChild>{buttonContent}</TooltipTrigger>
          <TooltipContent className="flex items-center gap-1.5 py-1.5 pl-2.5 pr-2 text-xs text-text-bright">
            {tooltip} {shortcut && renderShortcutKey()}
          </TooltipContent>
        </Tooltip>
      </TooltipProvider>
    );
  }

  return buttonContent;
}

type ButtonPropsType = Pick<
  JSX.IntrinsicElements["button"],
  "type" | "disabled" | "onClick" | "name" | "value" | "form" | "autoFocus" | "aria-label"
> &
  React.ComponentProps<typeof ButtonContent>;

export const Button = forwardRef<HTMLButtonElement, ButtonPropsType>(
  ({ type, disabled, autoFocus, onClick, "aria-label": ariaLabel, ...props }, ref) => {
    const innerRef = useRef<HTMLButtonElement>(null);
    useImperativeHandle(ref, () => innerRef.current as HTMLButtonElement);

    const isDisabled = disabled || props.isLoading;

    useShortcutKeys({
      shortcut: props.shortcut,
      action: (e) => {
        if (innerRef.current) {
          innerRef.current.click();
          e.preventDefault();
          e.stopPropagation();
        }
      },
      disabled: isDisabled || !props.shortcut,
    });

    const buttonElement = (
      <button
        className={cn("group/button outline-hidden focus-custom", props.fullWidth ? "w-full" : "")}
        type={type}
        disabled={isDisabled}
        onClick={onClick}
        name={props.name}
        value={props.value}
        ref={innerRef}
        form={props.form}
        autoFocus={autoFocus}
        aria-label={ariaLabel}
      >
        <ButtonContent
          {...props}
          tooltip={undefined}
          hideShortcutKey={props.tooltip ? true : props.hideShortcutKey}
        />
      </button>
    );

    if (props.tooltip) {
      return (
        <TooltipProvider>
          <Tooltip>
            <TooltipTrigger asChild>
              <span className={cn("flex", isDisabled && "cursor-default")}>{buttonElement}</span>
            </TooltipTrigger>
            <TooltipContent className="flex items-center gap-1.5 py-1.5 pl-2.5 pr-2 text-xs text-text-bright">
              {props.tooltip}{" "}
              {props.shortcut && !props.hideShortcutKey && (
                <ShortcutKey shortcut={props.shortcut} variant="medium" />
              )}
            </TooltipContent>
          </Tooltip>
        </TooltipProvider>
      );
    }

    return buttonElement;
  }
);

type LinkPropsType = Pick<
  LinkProps,
  "to" | "target" | "onClick" | "onMouseDown" | "onMouseEnter" | "onMouseLeave" | "download"
> & { disabled?: boolean; replace?: boolean } & React.ComponentProps<typeof ButtonContent>;
export const LinkButton = ({
  to,
  onClick,
  onMouseDown,
  onMouseEnter,
  onMouseLeave,
  download,
  disabled = false,
  replace,
  ...props
}: LinkPropsType) => {
  const innerRef = useRef<HTMLAnchorElement>(null);

  useShortcutKeys({
    shortcut: props.shortcut,
    action: () => {
      if (innerRef.current) {
        innerRef.current.click();
      }
    },
    disabled: disabled || !props.shortcut,
  });

  if (disabled) {
    return (
      <div
        className={cn(
          "group/button pointer-events-none cursor-default opacity-40 outline-hidden",
          props.fullWidth ? "w-full" : ""
        )}
      >
        <ButtonContent {...props} />
      </div>
    );
  }

  if (to.toString().startsWith("http") || to.toString().startsWith("/resources")) {
    return (
      <ExtLink
        href={to.toString()}
        ref={innerRef}
        className={cn("group/button block focus-custom", props.fullWidth ? "w-full" : "")}
        onClick={onClick}
        onMouseDown={onMouseDown}
        onMouseEnter={onMouseEnter}
        onMouseLeave={onMouseLeave}
        download={download}
      >
        <ButtonContent {...props} />
      </ExtLink>
    );
  } else {
    return (
      <Link
        to={to}
        ref={innerRef}
        replace={replace}
        className={cn("group/button block focus-custom", props.fullWidth ? "w-full" : "w-fit")}
        onClick={onClick}
        onMouseDown={onMouseDown}
        onMouseEnter={onMouseEnter}
        onMouseLeave={onMouseLeave}
        download={download}
      >
        <ButtonContent {...props} />
      </Link>
    );
  }
};

type NavLinkPropsType = Pick<NavLinkProps, "to" | "target"> &
  Omit<React.ComponentProps<typeof ButtonContent>, "className"> & {
    className?: (props: { isActive: boolean; isPending: boolean }) => string | undefined;
  };
export const NavLinkButton = ({ to, className, target, ...props }: NavLinkPropsType) => {
  return (
    <NavLink
      to={to}
      className={cn("group/button outline-hidden block", props.fullWidth ? "w-full" : "")}
      target={target}
    >
      {({ isActive, isPending }) => (
        <ButtonContent className={className && className({ isActive, isPending })} {...props} />
      )}
    </NavLink>
  );
};

type ExtLinkProps = JSX.IntrinsicElements["a"] & {
  children: React.ReactNode;
  className?: string;
  href: string;
};

const ExtLink = forwardRef<HTMLAnchorElement, ExtLinkProps>(
  ({ className, href, children, ...props }, ref) => {
    return (
      <a
        className={cn(className)}
        target="_blank"
        rel="noopener noreferrer"
        href={href}
        ref={ref}
        {...props}
      >
        {children}
      </a>
    );
  }
);