import type { BaseItemDto } from '../../api/types'
import { getTopBadges, getAllBadges } from '../../lib/jellyfin-meta'

interface Props {
  item: Pick<BaseItemDto, 'MediaSources' | 'Width' | 'Height'>
  variant?: 'card' | 'hero'
  className?: string
}

/** Tiny corner pills for poster cards (4K / HDR / DV / Atmos). Hidden when nothing notable. */
export default function MetaBadges({ item, variant = 'card', className = '' }: Props) {
  const badges = variant === 'card' ? getTopBadges(item) : getAllBadges(item)
  if (badges.length === 0) return null

  if (variant === 'card') {
    return (
      <div className={`flex flex-col items-end gap-1 ${className}`}>
        {badges.map(b => (
          <CardBadge key={b} label={b} />
        ))}
      </div>
    )
  }

  return (
    <div className={`flex items-center gap-1.5 flex-wrap ${className}`}>
      {badges.map(b => (
        <HeroBadge key={b} label={b} />
      ))}
    </div>
  )
}

function CardBadge({ label }: { label: string }) {
  const tone = badgeTone(label)
  return (
    <span
      className={`inline-flex items-center h-[18px] px-1.5 rounded text-[9px] font-bold tracking-[0.04em] uppercase backdrop-blur-md border ${tone}`}
      title={label}
    >
      {label}
    </span>
  )
}

function HeroBadge({ label }: { label: string }) {
  const tone = badgeTone(label, true)
  return (
    <span
      className={`inline-flex items-center h-6 px-2 rounded-md text-[10px] font-bold tracking-[0.06em] uppercase backdrop-blur border ${tone}`}
    >
      {label}
    </span>
  )
}

function badgeTone(label: string, hero = false): string {
  // Subtle gradient accents to reinforce visual meaning without screaming
  switch (label) {
    case '4K':
      return hero
        ? 'bg-cool/20 text-cool border-cool/35'
        : 'bg-cool/30 text-cool border-cool/40'
    case 'HDR10':
    case 'HDR10+':
    case 'HDR':
      return hero
        ? 'bg-gradient-to-r from-amber-500/30 to-rose-500/25 text-amber-200 border-amber-400/35'
        : 'bg-gradient-to-r from-amber-500/40 to-rose-500/35 text-amber-100 border-amber-400/45'
    case 'Dolby Vision':
      return hero
        ? 'bg-gradient-to-r from-indigo-500/30 to-blue-500/25 text-indigo-100 border-indigo-400/40'
        : 'bg-gradient-to-r from-indigo-500/40 to-blue-500/35 text-indigo-100 border-indigo-400/50'
    case 'Atmos':
    case 'DTS:X':
      return hero
        ? 'bg-emerald-500/20 text-emerald-200 border-emerald-500/35'
        : 'bg-emerald-500/30 text-emerald-100 border-emerald-500/40'
    default:
      return hero
        ? 'bg-white/10 text-white/85 border-white/15'
        : 'bg-white/15 text-white/95 border-white/20'
  }
}
