import React, { ReactNode, forwardRef, AnchorHTMLAttributes } from 'react';

export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
  children: ReactNode;
  variant?: 'primary' | 'secondary' | 'ghost' | 'inherit';
  underline?: 'always' | 'hover' | 'none';
  size?: string;
  weight?: string;
  letterSpacing?: string;
  block?: boolean;
  hoverColor?: string;
  transition?: boolean;
  pb?: number;
  truncate?: boolean;
  hoverTextColor?: string;
  display?: string;
  alignItems?: string;
  gap?: number;
  rounded?: string;
  bg?: string;
  px?: number;
  py?: number;
  border?: boolean;
  borderColor?: string;
  shadow?: string;
  hoverBorderColor?: string;
}

export const Link = forwardRef<HTMLAnchorElement, LinkProps>(({ 
  children, 
  variant = 'primary',
  underline = 'hover',
  size,
  weight,
  letterSpacing,
  block = false,
  hoverColor,
  transition = true,
  pb,
  truncate,
  hoverTextColor,
  display,
  alignItems,
  gap,
  rounded,
  bg,
  px,
  py,
  border,
  borderColor,
  shadow,
  hoverBorderColor,
  ...props
}, ref) => {
  const variantClasses = {
    primary: 'text-[var(--ui-color-intent-primary)] hover:opacity-80',
    secondary: 'text-[var(--ui-color-text-med)] hover:text-[var(--ui-color-text-high)]',
    ghost: 'text-[var(--ui-color-text-low)] hover:text-[var(--ui-color-text-high)]',
    inherit: 'text-inherit',
  };

  const underlineClasses = {
    always: 'underline',
    hover: 'hover:underline',
    none: 'no-underline',
  };

  const classes = [
    transition ? 'transition-all duration-150 ease-in-out' : '',
    'cursor-pointer',
    block ? 'block' : 'inline',
    variantClasses[variant],
    underlineClasses[underline],
    truncate ? 'truncate' : '',
  ].join(' ');

  const style: React.CSSProperties = {
    ...(size ? { fontSize: size } : {}),
    ...(weight ? { fontWeight: weight } : {}),
    ...(letterSpacing ? { letterSpacing } : {}),
    ...(pb ? { paddingBottom: `${pb * 0.25}rem` } : {}),
    ...(display ? { display } : {}),
    ...(alignItems ? { alignItems } : {}),
    ...(gap ? { gap: `${gap * 0.25}rem` } : {}),
    ...(rounded ? { borderRadius: rounded === 'full' ? '9999px' : `var(--ui-radius-${rounded})` } : {}),
    ...(bg ? { backgroundColor: bg.startsWith('bg-') ? undefined : bg } : {}),
    ...(px ? { paddingLeft: `${px * 0.25}rem`, paddingRight: `${px * 0.25}rem` } : {}),
    ...(py ? { paddingTop: `${py * 0.25}rem`, paddingBottom: `${py * 0.25}rem` } : {}),
    ...(border ? { border: '1px solid var(--ui-color-border-default)' } : {}),
    ...(borderColor ? { borderColor: borderColor.startsWith('border-') ? undefined : borderColor } : {}),
    ...(shadow ? { boxShadow: shadow.startsWith('shadow-') ? undefined : shadow } : {}),
  };

  return (
    <a
      ref={ref}
      className={classes}
      style={style}
      {...props}
    >
      {children}
    </a>
  );
});

Link.displayName = 'Link';