'use client'

import { Badge } from '@/components/ui/badge'
import { X, Sparkles } from 'lucide-react'
import { cn } from '@/lib/utils'
import { LABEL_COLORS } from '@/lib/types'
import { useNotebooks } from '@/context/notebooks-context'

interface LabelBadgeProps {
  label: string
  type?: 'ai' | 'user'  // Optional: if provided, applies AI vs User styling
  onRemove?: () => void
  variant?: 'default' | 'filter' | 'clickable'
  onClick?: () => void
  isSelected?: boolean
  isDisabled?: boolean
}

export function LabelBadge({
  label,
  type,
  onRemove,
  variant = 'default',
  onClick,
  isSelected = false,
  isDisabled = false,
}: LabelBadgeProps) {
  const { getLabelColor } = useNotebooks()
  const colorName = getLabelColor(label)
  const colorClasses = LABEL_COLORS[colorName] || LABEL_COLORS.gray

  // AI labels get special Blueprint styling with Sparkles icon
  const isAI = type === 'ai'

  return (
    <Badge
      className={cn(
        'text-xs border gap-1 transition-all',
        isAI
          ? 'bg-blue-100/70 border-blue-200/50 text-sky-700 dark:bg-sky-900/30 dark:border-sky-700/50 dark:text-sky-300 hover:bg-blue-200/70'
          : `${colorClasses.bg} ${colorClasses.text} ${colorClasses.border}`,
        variant === 'filter' && 'cursor-pointer hover:opacity-80',
        variant === 'clickable' && 'cursor-pointer',
        isDisabled && 'opacity-50',
        isSelected && 'ring-2 ring-primary'
      )}
      onClick={onClick}
    >
      {isAI && <Sparkles className="h-3 w-3 text-[#75B2D6]" />}
      <span className="truncate">{label}</span>
      {onRemove && (
        <button
          onClick={(e) => {
            e.stopPropagation()
            onRemove()
          }}
          className="hover:text-red-600"
        >
          <X className="h-3 w-3" />
        </button>
      )}
      {isAI && (
        <span className="relative flex h-1.5 w-1.5 ml-1">
          <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#75B2D6] opacity-75"></span>
          <span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-[#75B2D6]"></span>
        </span>
      )}
    </Badge>
  )
}