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. */

import { Thumb } from '@/components/ui/tile-image';
export { Thumb };

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>
  );
}

/** Heuristic sale verification label (§39, §205): verified · likely · unverified · excluded. Never a claim of independent confirmation. */
export function VerificationBadge({ label, reason, className }: { label: 'verified' | 'likely' | 'unverified' | 'excluded'; reason?: string; className?: string }) {
  const tone = label === 'verified' ? 'gain' : label === 'likely' ? 'neutral' : 'alert';
  const text = label === 'verified' ? 'Verified' : label === 'likely' ? 'Likely' : label === 'unverified' ? 'Unverified' : 'Excluded';
  return (
    <Badge tone={tone} className={className}>
      <span title={`${text} sale — heuristic on source type, sale type, match confidence and source trust${reason ? `: ${reason}` : ''}`}>{text}</span>
    </Badge>
  );
}