import { Plus, X } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'

interface BulkTagsEditorProps {
  allTags: { id: string; name: string; color: string | null }[]
  tagInput: string
  onTagInputChange: (value: string) => void
  disabled: boolean
  onApply: (tagId: string) => void
  onRemove: (tagId: string) => void
  onCreate: (name: string) => void
}

/**
 * Compact bulk tag editor for the multi-select right sidebar. Unlike the
 * single-photo TagsEditor we don't show "current tags" — there's no clean
 * single-photo notion of that across an arbitrary selection. Instead the
 * user picks an existing tag (apply to all) or types a new one (create
 * and apply to all).
 */
export function BulkTagsEditor({
  allTags,
  tagInput,
  onTagInputChange,
  disabled,
  onApply,
  onRemove,
  onCreate,
}: BulkTagsEditorProps) {
  const trimmed = tagInput.trim()
  const lower = trimmed.toLowerCase()

  const filtered = trimmed
    ? allTags.filter((t) => t.name.toLowerCase().includes(lower))
    : allTags

  const exactMatch = trimmed
    ? allTags.find((t) => t.name.toLowerCase() === lower)
    : null

  const handleSubmit = () => {
    if (!trimmed || disabled) return
    if (exactMatch) {
      onApply(exactMatch.id)
      onTagInputChange('')
    } else {
      onCreate(trimmed)
    }
  }

  return (
    <div className="space-y-2">
      <Input
        type="text"
        value={tagInput}
        onChange={(e) => onTagInputChange(e.target.value)}
        onKeyDown={(e) => {
          if (e.key === 'Enter') {
            e.preventDefault()
            handleSubmit()
          } else if (e.key === 'Escape') {
            onTagInputChange('')
          }
        }}
        placeholder="Filter or create…"
        disabled={disabled}
        className="h-7 text-xs"
      />

      {trimmed && !exactMatch && (
        <Button
          variant="outline"
          size="sm"
          onClick={handleSubmit}
          disabled={disabled}
          className="w-full border-dashed border-primary/50 bg-transparent text-primary hover:bg-primary/10"
        >
          <Plus className="mr-1 h-3 w-3" />
          Create "{trimmed}" and apply
        </Button>
      )}

      {filtered.length > 0 ? (
        <div className="flex max-h-40 flex-wrap gap-1 overflow-y-auto">
          {filtered.map((tag) => (
            <span
              key={tag.id}
              className="flex items-center gap-1 rounded bg-surface-2 px-2 py-0.5 text-xs text-text"
              style={
                tag.color
                  ? { backgroundColor: `${tag.color}33`, color: tag.color }
                  : undefined
              }
            >
              <button
                onClick={() => onApply(tag.id)}
                disabled={disabled}
                className="hover:underline disabled:opacity-50"
                title={`Apply "${tag.name}" to selection`}
              >
                {tag.name}
              </button>
              <button
                onClick={() => onRemove(tag.id)}
                disabled={disabled}
                className="rounded p-0.5 opacity-60 hover:bg-surface-offset hover:opacity-100 disabled:opacity-30"
                title={`Remove "${tag.name}" from selection`}
                aria-label={`Remove ${tag.name} from selection`}
              >
                <X className="h-3 w-3" />
              </button>
            </span>
          ))}
        </div>
      ) : (
        <div className="text-xs text-text-faint">No tags match</div>
      )}
    </div>
  )
}
