import type { ButtonHTMLAttributes, ReactNode } from "react";
import { cn } from "../../lib/cn";
import { Spinner } from "../feedback";

export type ButtonTone = "primary" | "secondary" | "ghost" | "destructive";
type ButtonSize = "compact" | "regular" | "large";

export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
  iconOnly?: boolean;
  leadingIcon?: ReactNode;
  leadingContent?: ReactNode;
  loading?: boolean;
  loadingLabel?: string;
  size?: ButtonSize;
  trailingIcon?: ReactNode;
  trailingContent?: ReactNode;
  tone?: ButtonTone;
};

const toneClasses: Record<ButtonTone, string> = {
  primary:
    "bg-[var(--uhuru-action-primary)] text-[var(--uhuru-text-inverse)] shadow-[var(--uhuru-shadow-sm)] hover:bg-[var(--uhuru-action-primary-hover)]",
  secondary:
    "border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-default)] text-[var(--uhuru-text-primary)] hover:border-[var(--uhuru-border-accent)] hover:bg-[var(--uhuru-surface-muted)]",
  ghost:
    "border-transparent bg-transparent text-[var(--uhuru-text-primary)] hover:border-[var(--uhuru-border-subtle)] hover:bg-[var(--uhuru-surface-muted)]",
  destructive:
    "border-[var(--uhuru-error-border)] bg-[var(--uhuru-error-text)] text-[var(--uhuru-text-inverse)] shadow-[var(--uhuru-shadow-sm)] hover:bg-[var(--uhuru-error-border)]",
};

const sizeClasses: Record<ButtonSize, string> = {
  compact: "h-[calc(var(--uhuru-control-height)-0.5rem)] px-3 text-[0.8125rem]",
  regular: "h-[var(--uhuru-control-height)] px-[var(--uhuru-control-padding-x)] text-sm",
  large: "h-[calc(var(--uhuru-control-height)+0.5rem)] px-5 text-sm",
};

export function Button({
  className,
  children,
  iconOnly = false,
  leadingIcon,
  leadingContent,
  loading = false,
  loadingLabel = "Loading",
  size = "regular",
  tone = "primary",
  trailingIcon,
  trailingContent,
  type = "button",
  ...props
}: ButtonProps) {
  const startAdornment = loading ? <Spinner className="h-4 w-4 border-[1.5px]" /> : leadingIcon ?? leadingContent;
  const endAdornment = !loading ? trailingIcon ?? trailingContent : null;

  return (
    <button
      className={cn(
        "inline-flex items-center justify-center gap-2 rounded-[var(--uhuru-radius-control)] border font-medium transition duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--uhuru-border-accent)] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-70",
        toneClasses[tone],
        sizeClasses[size],
        iconOnly ? "aspect-square px-0" : "",
        className,
      )}
      disabled={loading || props.disabled}
      type={type}
      {...props}
    >
      {startAdornment ? (
        <span className="grid h-4.5 w-4.5 shrink-0 place-items-center [&_svg]:h-4.5 [&_svg]:w-4.5">
          {startAdornment}
        </span>
      ) : null}
      {!iconOnly ? <span>{loading ? loadingLabel : children}</span> : null}
      {endAdornment ? (
        <span className="grid h-4.5 w-4.5 shrink-0 place-items-center [&_svg]:h-4.5 [&_svg]:w-4.5">
          {endAdornment}
        </span>
      ) : null}
    </button>
  );
}