import Link from 'next/link';
import { cn } from '@/lib/utils';
import { LogoIcon } from '@/components/brand/LogoIcon';

type BrandLogoTheme = 'dark' | 'light';

type BrandLogoProps = {
  variant?: 'icon' | 'wordmark' | 'stacked' | 'header';
  theme?: BrandLogoTheme;
  href?: string;
  className?: string;
  iconClassName?: string;
  tagline?: string;
  onClick?: () => void;
};

function Wordmark({ theme, className }: { theme: BrandLogoTheme; className?: string }) {
  return (
    <span
      className={cn(
        'font-bold tracking-[-0.02em]',
        theme === 'dark' ? 'text-white' : 'text-[var(--home-ink)]',
        className
      )}
      style={{ fontFamily: 'var(--font-archivo), var(--font-inter), system-ui, sans-serif' }}
    >
      <span className="text-[var(--home-amber)]">e</span>
      HandyHire
    </span>
  );
}

export function BrandLogo({
  variant = 'wordmark',
  theme = 'dark',
  href,
  className,
  iconClassName,
  tagline,
  onClick,
}: BrandLogoProps) {
  const iconSizes = {
    icon: 'h-9 w-9',
    wordmark: 'h-8 w-8 sm:h-9 sm:w-9',
    stacked: 'h-12 w-12 md:h-14 md:w-14',
    header: 'h-9 w-9',
  } as const;

  const content =
    variant === 'icon' ? (
      <LogoIcon
        title="eHandyHire"
        className={cn('text-[var(--home-amber)]', iconSizes.icon, iconClassName)}
      />
    ) : variant === 'stacked' ? (
      <span className="inline-flex flex-col items-center gap-2.5 text-center">
        <LogoIcon
          title="eHandyHire"
          className={cn('text-[var(--home-amber)]', iconSizes.stacked, iconClassName)}
        />
        <Wordmark theme={theme} className="text-xl sm:text-2xl" />
      </span>
    ) : variant === 'header' ? (
      <span className="inline-flex min-w-0 items-center gap-2.5">
        <span className="flex h-9 w-9 shrink-0 items-center justify-center">
          <LogoIcon className={cn('h-8 w-8 text-[var(--home-amber)]', iconClassName)} />
        </span>
        <span className="min-w-0 leading-tight">
          <Wordmark theme={theme} className="block truncate text-sm sm:text-base" />
          {tagline ? (
            <span className="block truncate text-[10px] font-semibold uppercase tracking-[0.14em] text-amber-400/90">
              {tagline}
            </span>
          ) : null}
        </span>
      </span>
    ) : (
      <span className="inline-flex items-center gap-2">
        <LogoIcon className={cn('text-[var(--home-amber)]', iconSizes.wordmark, iconClassName)} />
        <Wordmark theme={theme} className="text-base sm:text-lg" />
      </span>
    );

  const rootClassName = cn('inline-flex shrink-0 items-center', className);

  if (href) {
    return (
      <Link href={href} className={rootClassName} onClick={onClick}>
        {content}
      </Link>
    );
  }

  return <span className={rootClassName}>{content}</span>;
}