/**
 * Schaltfläche.
 *
 * Die Ausprägung "destructive" ist bewusst eigenständig und nicht nur eine
 * rote Farbe: Löschende Handlungen sollen sich auch dann unterscheiden, wenn
 * jemand die Oberfläche in Graustufen betrachtet oder farbfehlsichtig ist.
 * Deshalb trägt sie zusätzlich einen kräftigen Rand.
 */

import { Slot } from '@radix-ui/react-slot';
import { cva, type VariantProps } from 'class-variance-authority';
import { Loader2 } from 'lucide-react';
import { forwardRef, type ButtonHTMLAttributes } from 'react';
import { cn } from '@/lib/utils';

const buttonVariants = cva(
  // Gemeinsame Grundlage aller Ausprägungen.
  [
    'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg',
    'text-sm font-medium transition-colors',
    'disabled:pointer-events-none disabled:opacity-50',
    '[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
  ].join(' '),
  {
    variants: {
      variant: {
        primary: 'bg-accent text-accent-fg shadow-[var(--shadow-card)] hover:bg-accent-hover',
        secondary: 'border border-line-strong bg-card text-fg hover:bg-hover',
        ghost: 'text-fg-muted hover:bg-hover hover:text-fg',
        destructive:
          'border border-critical bg-critical text-white hover:brightness-110 dark:text-fg-inverted',
        link: 'text-accent underline-offset-4 hover:underline',
      },
      size: {
        sm: 'h-8 px-3 text-xs',
        md: 'h-9 px-4',
        lg: 'h-10 px-6',
        icon: 'size-9',
      },
    },
    defaultVariants: {
      variant: 'secondary',
      size: 'md',
    },
  },
);

export interface ButtonProps
  extends ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  /** Rendert die Kindkomponente statt eines <button> (z. B. einen Link). */
  readonly asChild?: boolean | undefined;
  /** Zeigt einen Ladeanzeiger und sperrt die Schaltfläche. */
  readonly isLoading?: boolean | undefined;
}

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
  { className, variant, size, asChild = false, isLoading = false, children, disabled, ...restProps },
  forwardedReference,
) {
  const RenderedComponent = asChild ? Slot : 'button';

  return (
    <RenderedComponent
      ref={forwardedReference}
      className={cn(buttonVariants({ variant, size }), className)}
      // Während eine Handlung läuft, darf sie nicht ein zweites Mal ausgelöst
      // werden. Bei einem Sicherungslauf wäre der zweite Klick ein 409, bei
      // einer Löschung schlimmstenfalls mehr als beabsichtigt.
      disabled={disabled || isLoading}
      {...restProps}
    >
      {isLoading ? <Loader2 className="animate-spin" aria-hidden /> : null}
      {children}
    </RenderedComponent>
  );
});

export { buttonVariants };