import { ExternalLink, FileImage, FileVideo, UserRound } from 'lucide-react'
import { cn } from '@/lib/utils'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { Badge } from '@/components/ui/badge'

type EntityRefProps = {
  id?: string | number | null
  name?: string | null
  kind?: string
  avatar?: string | null
  compact?: boolean
  className?: string
}

export function EntityRef({
  id,
  name,
  kind = 'User',
  avatar,
  compact = false,
  className,
}: EntityRefProps) {
  const hasId = id !== null && id !== undefined && id !== ''
  if (!name && !hasId) return <span className='text-muted-foreground'>-</span>

  const title = name || `${kind} #${id}`
  const idLabel = hasId ? `${kind} ID: ${id}` : undefined

  if (compact) {
    return (
      <span
        className={cn('inline-flex min-w-0 flex-col', className)}
        title={idLabel}
      >
        <span className='max-w-[180px] truncate font-medium'>{title}</span>
        {name && idLabel ? (
          <span className='text-xs text-muted-foreground'>#{id}</span>
        ) : null}
      </span>
    )
  }

  return (
    <span className={cn('inline-flex min-w-0 items-center gap-2', className)}>
      <Avatar className='size-8 border'>
        {avatar ? <AvatarImage src={avatar} alt={title} /> : null}
        <AvatarFallback>
          <UserRound className='size-4' />
        </AvatarFallback>
      </Avatar>
      <span className='min-w-0'>
        <span className='block max-w-[180px] truncate font-medium'>
          {title}
        </span>
        {name && idLabel ? (
          <span className='block text-xs text-muted-foreground'>{idLabel}</span>
        ) : null}
      </span>
    </span>
  )
}

type ResourcePreviewProps = {
  value?: string | null
  type?: string | null
  resolveResourceUrl?: (value?: string | null) => string | null | undefined
  className?: string
}

export function ResourcePreview({
  value,
  type,
  resolveResourceUrl,
  className,
}: ResourcePreviewProps) {
  const url = resolveResourceUrl ? resolveResourceUrl(value) : value
  const normalizedType = String(type || '').toLowerCase()
  const isVideo = normalizedType.includes('video')
  const typeLabel = isVideo ? 'Video' : 'Image'
  const fileName = value?.split(/[\\/]/).pop() || 'No resource URL'

  if (!url) return <span className='text-muted-foreground'>-</span>

  return (
    <a
      href={url}
      target='_blank'
      rel='noreferrer'
      className={cn('group inline-flex min-w-0 items-center gap-2', className)}
      title={value || undefined}
    >
      <span className='relative flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-md border bg-muted'>
        {isVideo ? (
          <FileVideo className='size-5 text-muted-foreground' />
        ) : (
          <img
            src={url}
            alt=''
            className='size-full object-cover'
            loading='lazy'
          />
        )}
      </span>
      <span className='min-w-0'>
        <span className='flex items-center gap-1.5'>
          <Badge variant='outline' className='h-5 px-1.5 text-[11px]'>
            {isVideo ? (
              <FileVideo className='mr-1 size-3' />
            ) : (
              <FileImage className='mr-1 size-3' />
            )}
            {typeLabel}
          </Badge>
          <ExternalLink className='size-3 text-muted-foreground group-hover:text-foreground' />
        </span>
        <span className='mt-0.5 block max-w-[220px] truncate text-xs text-muted-foreground'>
          {fileName}
        </span>
      </span>
    </a>
  )
}
