import { imageProps } from '@/lib/images';
import { cn } from '@/lib/format';
import { SmartImage } from './smart-image';
import { glyphForFamily } from '@/lib/image-glyph';

/**
 * Server component: turns a third-party URL into cached /img sources and renders the client
 * <SmartImage> with an explicit aspect ratio (no layout shift) and a category placeholder.
 */
export function aspectForFamily(familySlug: string | null | undefined): string {
  return familySlug === 'trading_cards' || familySlug === 'sports_cards' || familySlug === 'comics' || familySlug === 'manga' || familySlug === 'books' ? 'aspect-[4/5]' : 'aspect-square';
}

export function TileImage({
  src,
  alt,
  familySlug,
  label,
  sizes = '(min-width: 1280px) 200px, (min-width: 768px) 25vw, 45vw',
  maxWidth = 384,
  priority = false,
  fit = 'contain',
  padded = true,
  className,
  imgClassName,
}: {
  src: string | null | undefined;
  alt: string;
  familySlug: string | null | undefined;
  label?: string | null;
  sizes?: string;
  maxWidth?: number;
  priority?: boolean;
  fit?: 'contain' | 'cover';
  padded?: boolean;
  className?: string;
  imgClassName?: string;
}) {
  const props = imageProps(src, { maxWidth });
  return (
    <span className={cn('relative block w-full overflow-hidden rounded-[5px] bg-sunken', aspectForFamily(familySlug), className)}>
      <SmartImage
        src={props?.src ?? null}
        srcSet={props?.srcSet ?? null}
        sizes={sizes}
        alt={alt}
        fit={fit}
        priority={priority}
        imgClassName={cn(padded ? 'p-2' : '', 'transition-transform duration-300 ease-out group-hover:scale-[1.03]', imgClassName)}
        placeholder={{ label: label ?? null, glyph: glyphForFamily(familySlug) }}
      />
    </span>
  );
}

/** Square thumbnail for tables and dense rows. */
export function Thumb({ src, alt, size = 40, familySlug, className, rounded = 'rounded-sm', fit = 'cover' }: { src: string | null | undefined; alt: string; size?: number; familySlug?: string | null; className?: string; rounded?: string; fit?: 'contain' | 'cover' }) {
  const props = imageProps(src, { maxWidth: Math.max(96, size * 2) });
  return (
    <span className={cn('relative inline-block shrink-0 overflow-hidden bg-inset', rounded, className)} style={{ width: size, height: size }}>
      <SmartImage src={props?.src ?? null} srcSet={props?.srcSet ?? null} sizes={`${size}px`} alt={alt} fit={fit} compact placeholder={{ glyph: glyphForFamily(familySlug) }} />
    </span>
  );
}