import Image from 'next/image';
import Link from 'next/link';
import { ExternalLink } from 'lucide-react';
import { cn, fmtMoney } from '@/lib/format';
import { catName, gradeLabel } from '@/lib/taxonomy';
import { Badge } from '@/components/ui/primitives';

/** Small shared building blocks for market tables and cards. */

export function Thumb({ src, alt, size = 40, className, rounded = 'rounded-sm' }: { src: string | null | undefined; alt: string; size?: number; className?: string; rounded?: string }) {
  return (
    <span className={cn('relative inline-block shrink-0 overflow-hidden bg-inset', rounded, className)} style={{ width: size, height: size }}>
      {src ? <Image src={src} alt={alt} fill sizes={`${size}px`} className="object-cover" unoptimized={src.endsWith('.svg')} /> : <span className="absolute inset-0 flex items-center justify-center text-[9px] uppercase tracking-wider text-subtle">n/a</span>}
    </span>
  );
}

export function CategoryTag({ slug, className }: { slug: string | null | undefined; className?: string }) {
  if (!slug) return null;
  return (
    <Link href={`/markets/${slug}`} className={cn('text-[11px] text-muted hover:text-fg', className)}>
      {catName(slug)}
    </Link>
  );
}

export function GradeBadge({ grader, grade, className }: { grader: string | null | undefined; grade: string | null | undefined; className?: string }) {
  const label = gradeLabel(grader, grade);
  if (!label) return <span className={cn('text-subtle', className)}>—</span>;
  return (
    <Badge tone={grader && grader !== 'raw' ? 'index' : 'neutral'} className={className}>
      {label}
    </Badge>
  );
}

/** §178: source attribution with outbound link. */
export function SourceLink({ name, url, className }: { name: string; url: string | null | undefined; className?: string }) {
  if (!url) return <span className={cn('text-muted', className)}>{name}</span>;
  return (
    <a href={url} target="_blank" rel="noopener nofollow" className={cn('inline-flex items-center gap-1 text-muted hover:text-fg', className)} title={`View on ${name}`}>
      {name}
      <ExternalLink className="h-3 w-3" aria-hidden />
    </a>
  );
}

export function PriceCell({ usd, native, currency, className }: { usd: number | null | undefined; native?: number | null; currency?: string | null; className?: string }) {
  const showNative = native !== null && native !== undefined && currency && currency !== 'USD';
  return (
    <span className={cn('num inline-flex flex-col items-end leading-tight', className)}>
      <span className="font-medium text-fg">{fmtMoney(usd)}</span>
      {showNative ? <span className="text-[10px] text-subtle">{fmtMoney(native, currency!)}</span> : null}
    </span>
  );
}

export function AssetTitleCell({ slug, title, categorySlug, image, sub, size = 36 }: { slug: string; title: string; categorySlug?: string | null; image?: string | null; sub?: string | null; size?: number }) {
  return (
    <span className="flex min-w-0 items-center gap-2.5">
      <Thumb src={image} alt="" size={size} />
      <span className="min-w-0">
        <Link href={`/asset/${slug}`} className="block truncate font-medium text-fg hover:underline" title={title}>
          {title}
        </Link>
        <span className="block truncate text-[11px] text-muted">
          {categorySlug ? catName(categorySlug) : null}
          {sub ? (categorySlug ? ` · ${sub}` : sub) : null}
        </span>
      </span>
    </span>
  );
}