import { useId } from 'react';
import { cn } from '@/lib/cn';
import { BOLT_PATH, FOAM_PATH, GLASS_PATH, MARK_COLORS, MARK_VIEWBOX, SHINE_PATH } from './mark';

interface MarkProps {
  className?: string;
  /** Accessible name. Omit when the mark sits next to visible "PintRush" text. */
  title?: string;
}

/** Pint glass + lightning streak. Scales from 16 px favicons to hero size. */
export function LogoMark({ className, title }: MarkProps) {
  // Unique ids: the mark appears several times per page (header, footer, mocks).
  const id = useId().replace(/[^a-zA-Z0-9_-]/g, '');
  const gradientId = `pr-glass-${id}`;
  const clipId = `pr-clip-${id}`;
  return (
    <svg
      viewBox={MARK_VIEWBOX}
      className={cn('shrink-0', className)}
      role={title ? 'img' : undefined}
      aria-hidden={title ? undefined : true}
      aria-label={title}
      focusable="false"
    >
      <defs>
        <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor={MARK_COLORS.glassTop} />
          <stop offset="1" stopColor={MARK_COLORS.glassBottom} />
        </linearGradient>
        <clipPath id={clipId}>
          <path d={GLASS_PATH} />
        </clipPath>
      </defs>
      <path d={GLASS_PATH} fill={`url(#${gradientId})`} />
      <path d={FOAM_PATH} fill={MARK_COLORS.foam} clipPath={`url(#${clipId})`} />
      <path d={SHINE_PATH} fill="none" stroke="#fff" strokeOpacity={0.35} strokeWidth={2.2} strokeLinecap="round" />
      <path
        d={BOLT_PATH}
        fill={MARK_COLORS.bolt}
        stroke={MARK_COLORS.boltEdge}
        strokeWidth={2.4}
        strokeLinejoin="round"
        paintOrder="stroke"
      />
    </svg>
  );
}

/** "PintRush" set in the display face; "Rush" carries the brand gradient. */
export function LogoWordmark({ className }: { className?: string }) {
  return (
    <span className={cn('font-display font-bold tracking-[-0.03em] leading-none whitespace-nowrap', className)}>
      Pint<span className="text-gradient-brand">Rush</span>
    </span>
  );
}

type LogoVariant = 'full' | 'mark' | 'wordmark';

const sizes = {
  sm: { mark: 'size-7', text: 'text-lg', gap: 'gap-2' },
  md: { mark: 'size-9', text: 'text-xl', gap: 'gap-2.5' },
  lg: { mark: 'size-14', text: 'text-3xl', gap: 'gap-3' },
} as const;

export function Logo({
  variant = 'full',
  size = 'md',
  className,
}: {
  variant?: LogoVariant;
  size?: keyof typeof sizes;
  className?: string;
}) {
  const s = sizes[size];
  if (variant === 'mark') return <LogoMark title="PintRush" className={cn(s.mark, className)} />;
  if (variant === 'wordmark') return <LogoWordmark className={cn(s.text, className)} />;
  return (
    <span className={cn('inline-flex items-center', s.gap, className)}>
      <LogoMark className={s.mark} />
      <LogoWordmark className={s.text} />
    </span>
  );
}