import { isValidElement } from "react";
import { Button as ButtonPrimitive } from "@base-ui/react/button";
import { cva, type VariantProps } from "class-variance-authority";

import { cn } from "./cn";

/*
 * Every class below resolves through a token from `@sub-design/tokens`. The
 * component has no palette value, no radius literal, and no product name in it
 * — swapping `data-brand` is the only thing that changes how it looks.
 *
 * Colours use the `(color:--token)` form and widths the `(length:--token)`
 * form: without the data-type hint Tailwind cannot tell what a bare custom
 * property holds.
 */
const buttonVariants = cva(
  [
    "inline-flex shrink-0 select-none items-center justify-center gap-2",
    "whitespace-nowrap border border-transparent",
    "text-(length:--font-size-control) leading-none font-(--button-font-weight)",
    "rounded-(--button-radius)",
    "transition-colors duration-(--motion-duration) ease-(--motion-ease)",
    // Focus is a semantic guarantee, not a brand decision — see tokens README.
    // `outline-solid` is load-bearing: `outline-none` zeroes outline-style, so
    // without restoring it the ring computes a correct width and colour and
    // still paints nothing.
    "outline-none",
    "focus-visible:outline-solid",
    "focus-visible:outline-(length:--focus-ring-width)",
    "focus-visible:outline-(color:--color-focus-ring)",
    "focus-visible:outline-offset-2",
    "disabled:pointer-events-none disabled:opacity-50",
    "data-disabled:pointer-events-none data-disabled:opacity-50",
    "[&_svg]:pointer-events-none [&_svg]:shrink-0",
    "[&_svg:not([class*='size-'])]:size-4",
  ],
  {
    variants: {
      variant: {
        primary: [
          "bg-(color:--color-action-primary)",
          "text-(color:--color-action-primary-content)",
          "hover:bg-(color:--color-action-primary-hover)",
        ],
        neutral: [
          "bg-(color:--color-action-neutral)",
          "text-(color:--color-action-neutral-content)",
          "hover:bg-(color:--color-action-neutral-hover)",
        ],
        outline: [
          "border-(color:--color-border)",
          "text-(color:--color-content)",
          "hover:bg-(color:--color-action-neutral)",
        ],
        ghost: [
          "text-(color:--color-content)",
          "hover:bg-(color:--button-ghost-hover-bg)",
          "hover:text-(color:--button-ghost-hover-content)",
        ],
        destructive: [
          "bg-(color:--button-danger-bg)",
          "text-(color:--button-danger-content)",
          "hover:bg-(color:--button-danger-bg-hover)",
        ],
        link: [
          // Accent, not action: a near-black GoodSync link would read as body
          // text. For NOKL the two tokens are the same green, so nothing moves.
          "text-(color:--color-brand-accent)",
          "underline-offset-4 hover:underline",
        ],
      },
      size: {
        xs: "h-(--button-height-xs) gap-1.5 px-(--button-padding-x-xs) text-(length:--font-size-control-sm) [&_svg:not([class*='size-'])]:size-3.5",
        sm: "h-(--button-height-sm) px-(--button-padding-x-sm)",
        md: "h-(--button-height-md) px-(--button-padding-x-md)",
        lg: "h-(--button-height-lg) px-(--button-padding-x-lg)",
        "icon-xs": "size-(--button-height-xs) [&_svg:not([class*='size-'])]:size-3.5",
        "icon-sm": "size-(--button-height-sm)",
        "icon-md": "size-(--button-height-md)",
        "icon-lg": "size-(--button-height-lg)",
      },
    },
    defaultVariants: {
      variant: "primary",
      size: "md",
    },
  },
);

type ButtonVariants = VariantProps<typeof buttonVariants>;

export interface ButtonProps
  extends Omit<ButtonPrimitive.Props, "className">,
    ButtonVariants {
  className?: string;
}

function Button({
  className,
  variant,
  size,
  render,
  nativeButton,
  focusableWhenDisabled,
  type,
  role,
  ref,
  ...props
}: ButtonProps) {
  // A `render` target may be an anchor or any non-button element, where `type`
  // is invalid. Only default it when we know a real <button> is produced.
  const isNativeButton = nativeButton ?? !render;

  /*
   * The Base UI layer earns its place only when this is *not* a plain button:
   * it supplies the Enter/Space handling, roles and disabled semantics a <div>
   * or <a> lacks. A native <button> already has all of it.
   *
   * Keeping the layer regardless breaks composition. Products write
   * `<Menu.Trigger asChild><Button/></Menu.Trigger>` — `render={<Button/>}`
   * here — which lands two primitives on one DOM node, each running
   * `useButton`. The inner one wins and the trigger silently stops opening:
   * correct ARIA, no reaction to a click, nothing in the console. Radix's Slot
   * merged the two; `render` does not.
   */
  const needsPrimitive =
    render != null || focusableWhenDisabled != null || nativeButton === false;

  if (!needsPrimitive) {
    return (
      <button
        ref={ref as React.Ref<HTMLButtonElement>}
        data-slot="button"
        className={cn(buttonVariants({ variant, size }), className)}
        type={type ?? "button"}
        role={role}
        {...(props as React.ButtonHTMLAttributes<HTMLButtonElement>)}
      />
    );
  }

  // Base UI stamps `role="button"` on anything it renders that is not a native
  // button — including an anchor that navigates. Its keyboard handling is
  // already link-aware, so only the announced role is wrong: a screen reader
  // says "button" while the control behaves, and looks to a sighted user, like
  // a link. Anything carrying an `href` is announced as the link it is.
  //
  // The check reads the render element's props rather than the tag, so
  // framework links (`render={<Link href=… />}`) are covered too.
  const rendersLink =
    !isNativeButton &&
    isValidElement<{ href?: unknown }>(render) &&
    render.props.href != null;

  return (
    <ButtonPrimitive
      data-slot="button"
      className={cn(buttonVariants({ variant, size }), className)}
      render={render}
      nativeButton={isNativeButton}
      focusableWhenDisabled={focusableWhenDisabled}
      // Without this a button inside a form submits it. Enterprise's current
      // wrapper does not enforce this; the platform contract does.
      type={isNativeButton ? (type ?? "button") : type}
      role={rendersLink ? (role ?? "link") : role}
      {...props}
    />
  );
}

export { Button, buttonVariants };