'use client';

import { RouteLink, type RouteLinkProps } from '@/components/ui/route-link';
import {
  type TextVariant,
  type TypographyTone,
  textVariants,
  typographyTones,
} from '@/components/ui/typography';
import { cn } from '@/lib/utils';

/* ============================================================================
   APP LINK — the TEXT flavor. Use for prose, inline references, "read more",
   footer items, the SectionHeader eyebrow link. NOT for cards, nav, or CTAs.
     • cards / avatars / whole-block clicks -> bare <RouteLink> (no styling)
     • CTAs / "back to list" buttons         -> <Button asChild><RouteLink/></Button>
     • header / footer nav with active state  -> MenuItem (its own component)

   Two axes, same as typography:
     • variant -> shape (size / weight / tracking)   • tone -> color
   Plus a link-only `underline` affordance and an optional brand gold hover.
   ========================================================================== */

/** Shared focus ring — also apply to bare card links so every link matches. */
export const linkFocusRing =
  'rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue focus-visible:ring-offset-2';

const underlineClasses = {
  /** underline appears on hover — for standalone links */
  hover: 'no-underline underline-offset-4 hover:underline',
  /** always underlined — required for links inside blocks of prose (WCAG) */
  always: 'underline underline-offset-4',
  /** no underline — pair with another affordance (color/weight) yourself */
  none: 'no-underline',
} as const;

export type AppLinkProps = RouteLinkProps & {
  variant?: TextVariant;
  tone?: TypographyTone;
  underline?: keyof typeof underlineClasses;
  /** brand flourish: shift to MMA gold on hover (editorial "read more" links) */
  accentHover?: boolean;
};

export function AppLink({
  variant = 'body',
  tone = 'inherit',
  underline = 'hover',
  accentHover = false,
  className,
  ...props
}: AppLinkProps) {
  return (
    <RouteLink
      className={cn(
        'inline items-center gap-1 transition-colors duration-150',
        textVariants[variant as keyof typeof textVariants],
        typographyTones[tone],
        underlineClasses[underline],
        accentHover && 'hover:text-brand-yellow',
        linkFocusRing,
        className
      )}
      {...props}
    />
  );
}