import * as React from "react";
import { cn } from "@/lib/utils";
import { Spinner } from "./spinner";

type Variant = "primary" | "secondary" | "ghost" | "danger" | "outline" | "danger-outline" | "ghost-danger" | "ghost-success";
type Size = "sm" | "md" | "lg" | "icon";

const variantClasses: Record<Variant, string> = {
  primary: "bg-(--color-accent) text-white shadow-sm hover:bg-(--color-accent-hover) hover:shadow-md active:bg-(--color-accent-hover) active:shadow-sm focus-visible:outline-(--color-accent) focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-2 focus-visible:ring-offset-(--color-bg)",
  secondary: "bg-(--color-surface-2) text-(--color-ink) border border-(--color-border) shadow-sm hover:bg-(--color-surface-3) hover:border-(--color-border-dark) active:bg-(--color-surface-4) active:shadow-none focus-visible:outline-(--color-accent) focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-2 focus-visible:ring-offset-(--color-bg)",
  outline: "border border-(--color-border) bg-transparent text-(--color-ink) hover:bg-(--color-surface-2) active:bg-(--color-surface-3) focus-visible:outline-(--color-accent) focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-2 focus-visible:ring-offset-(--color-bg)",
  ghost: "bg-transparent text-(--color-ink) hover:bg-(--color-surface-2) active:bg-(--color-surface-3) focus-visible:outline-(--color-accent) focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-2 focus-visible:ring-offset-(--color-bg)",
  danger: "bg-(--color-danger-solid) text-white shadow-sm hover:bg-(--color-danger-solid-hover) hover:shadow-md active:bg-(--color-danger-solid-hover) active:shadow-sm focus-visible:outline-(--color-danger) focus-visible:ring-2 focus-visible:ring-(--color-danger) focus-visible:ring-offset-2 focus-visible:ring-offset-(--color-bg)",
  "danger-outline": "border border-(--color-danger) text-(--color-danger) hover:bg-(--color-danger)/10 active:bg-(--color-danger)/20 focus-visible:outline-(--color-danger) focus-visible:ring-2 focus-visible:ring-(--color-danger) focus-visible:ring-offset-2 focus-visible:ring-offset-(--color-bg)",
  "ghost-danger": "text-(--color-danger) hover:bg-(--color-danger)/10 active:bg-(--color-danger)/20 focus-visible:outline-(--color-danger) focus-visible:ring-2 focus-visible:ring-(--color-danger) focus-visible:ring-offset-2 focus-visible:ring-offset-(--color-bg)",
  "ghost-success": "text-(--color-success) hover:bg-(--color-success)/10 active:bg-(--color-success)/20 focus-visible:outline-(--color-success) focus-visible:ring-2 focus-visible:ring-(--color-success) focus-visible:ring-offset-2 focus-visible:ring-offset-(--color-bg)",
};

const sizeClasses: Record<Size, string> = {
  sm: "h-8 px-3 text-sm gap-1.5",
  md: "h-9 px-4 text-sm gap-2",
  lg: "h-11 px-6 text-base gap-2",
  icon: "h-9 w-9 p-0",
};

export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: Variant;
  size?: Size;
  loading?: boolean;
}

export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant = "primary", size = "md", loading, disabled, children, ...props }, ref) => {
    return (
      <button
        ref={ref}
        disabled={disabled || loading}
        className={cn(
          "inline-flex items-center justify-center rounded-md font-medium transition-all duration-200 cursor-pointer",
          "disabled:opacity-50 disabled:pointer-events-none disabled:shadow-none disabled:cursor-not-allowed",
          variantClasses[variant],
          sizeClasses[size],
          className
        )}
        {...props}
      >
        {loading && <Spinner className="h-4 w-4" />}
        {children}
      </button>
    );
  }
);
Button.displayName = "Button";