import Link from 'next/link';
import type { AnchorHTMLAttributes, ButtonHTMLAttributes, ComponentProps } from 'react';
import { cn } from '@/lib/cn';

export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'accent' | 'danger';
export type ButtonSize = 'sm' | 'md' | 'lg' | 'xl';

export interface ButtonStyleOptions {
  variant?: ButtonVariant;
  size?: ButtonSize;
  fullWidth?: boolean;
  className?: string;
}

const base =
  'relative inline-flex select-none items-center justify-center gap-2 rounded-xl font-semibold whitespace-nowrap ' +
  'transition-[transform,box-shadow,background-color,border-color,color] duration-200 ease-out ' +
  'focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-cyan ' +
  'disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 ' +
  'motion-safe:active:scale-[0.98] [&_svg]:size-[1.15em] [&_svg]:shrink-0';

const variants: Record<ButtonVariant, string> = {
  // White on violet-strong→deep stays >= 5.3:1; the glow carries the brand energy.
  primary:
    'bg-[linear-gradient(135deg,var(--color-violet-strong),var(--color-violet-deep))] text-white ' +
    'shadow-[inset_0_1px_0_rgb(255_255_255/0.25),0_8px_28px_-8px_rgb(124_92_255/0.75)] ' +
    'hover:shadow-[inset_0_1px_0_rgb(255_255_255/0.3),0_0_0_1px_rgb(169_150_255/0.6),0_12px_36px_-6px_rgb(124_92_255/0.9)] motion-safe:hover:-translate-y-px',
  secondary:
    'border border-line-strong bg-raised text-fg hover:border-violet-soft hover:bg-raised-hover motion-safe:hover:-translate-y-px',
  ghost: 'text-fg hover:bg-white/[0.06]',
  accent:
    'bg-cyan text-on-bright shadow-[0_8px_28px_-10px_rgb(34_211_238/0.8)] hover:bg-cyan-soft motion-safe:hover:-translate-y-px',
  danger: 'bg-danger text-on-bright hover:bg-danger-soft',
};

// Every size keeps a >= 48 px touch target.
const sizes: Record<ButtonSize, string> = {
  sm: 'min-h-12 px-4 text-sm',
  md: 'min-h-12 px-5 text-base',
  lg: 'min-h-14 px-7 text-base sm:text-lg',
  xl: 'min-h-16 px-8 text-lg sm:text-xl',
};

export function buttonStyles({ variant = 'primary', size = 'md', fullWidth, className }: ButtonStyleOptions = {}): string {
  return cn(base, variants[variant], sizes[size], fullWidth && 'w-full', className);
}

export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, Omit<ButtonStyleOptions, 'className'> {}

export function Button({ variant, size, fullWidth, className, type = 'button', ...rest }: ButtonProps) {
  return <button type={type} className={buttonStyles({ variant, size, fullWidth, className })} {...rest} />;
}

export type ButtonLinkProps = ComponentProps<typeof Link> &
  Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> &
  Omit<ButtonStyleOptions, 'className'>;

/** A link that looks like a button (navigation should stay a link for semantics). */
export function ButtonLink({ variant, size, fullWidth, className, ...rest }: ButtonLinkProps) {
  return <Link className={buttonStyles({ variant, size, fullWidth, className })} {...rest} />;
}