import { Button } from '@langgenius/dify-ui/button'
import { Checkbox } from '@langgenius/dify-ui/checkbox'
import { CheckboxGroup } from '@langgenius/dify-ui/checkbox-group'
import { cn } from '@langgenius/dify-ui/cn'
import { Input } from '@langgenius/dify-ui/input'
import { Popover, PopoverContent, PopoverTitle, PopoverTrigger } from '@langgenius/dify-ui/popover'
import { useQuery } from '@tanstack/react-query'
import { useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { consoleQuery } from '@/service/client'

type SnippetTagsFilterProps = {
  embedded?: boolean
  value: string[]
  onChange: (value: string[]) => void
}

const SnippetTagsFilter = ({ embedded = false, value, onChange }: SnippetTagsFilterProps) => {
  const { t } = useTranslation()
  const [open, setOpen] = useState(false)
  const [searchText, setSearchText] = useState('')

  const { data: tagList = [] } = useQuery(
    consoleQuery.tags.get.queryOptions({
      input: {
        query: {
          type: 'snippet',
        },
      },
    }),
  )

  const tagById = useMemo(() => new Map(tagList.map((tag) => [tag.id, tag])), [tagList])
  const filteredTags = useMemo(() => {
    const normalizedSearch = searchText.trim().toLowerCase()
    if (!normalizedSearch) return tagList

    return tagList.filter((tag) => tag.name.toLowerCase().includes(normalizedSearch))
  }, [searchText, tagList])

  const selectedTags = value.flatMap((tagId) => {
    const tag = tagById.get(tagId)
    return tag ? [tag] : []
  })
  const triggerLabel = selectedTags.length
    ? selectedTags.map((tag) => tag.name).join(', ')
    : t(($) => $['tag.placeholder'], { ns: 'common' })
  const handleOpenChange = (nextOpen: boolean) => {
    setOpen(nextOpen)
    if (!nextOpen) setSearchText('')
  }

  return (
    <Popover open={open} onOpenChange={handleOpenChange}>
      <PopoverTrigger
        render={
          <Button
            variant="ghost"
            size="small"
            aria-label={triggerLabel}
            className={cn(
              'relative text-text-tertiary select-none focus-visible:ring-inset',
              embedded
                ? 'mr-1 h-7 rounded-md'
                : 'h-8 min-w-8 rounded-lg border-[0.5px] border-components-panel-border bg-components-input-bg-normal px-2',
              embedded && !value.length && 'size-7 min-h-0 p-0',
              embedded &&
                value.length > 0 &&
                'border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg py-0.5 pr-1.5 pl-1 shadow-xs shadow-shadow-shadow-3',
              !embedded && 'hover:bg-components-input-bg-hover',
              open &&
                (embedded
                  ? !value.length && 'bg-state-base-hover'
                  : 'border-components-input-border-active bg-components-input-bg-active text-text-secondary'),
              value.length > 0 && 'text-text-secondary',
            )}
          >
            <span
              className="i-custom-vender-line-financeAndECommerce-tag-01 size-4 text-text-tertiary"
              aria-hidden="true"
            />
            {value.length > 0 && (
              <span className="ml-1 system-xs-medium text-text-secondary">{value.length}</span>
            )}
          </Button>
        }
      />
      <PopoverContent
        placement="bottom-end"
        sideOffset={6}
        popupClassName="w-[240px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-0 shadow-lg backdrop-blur-xs"
      >
        <PopoverTitle className="sr-only">{triggerLabel}</PopoverTitle>
        <div className="p-2 pb-1">
          <div className="relative">
            <span
              className="absolute top-1/2 left-2 i-ri-search-line size-4 -translate-y-1/2 text-components-input-text-placeholder"
              aria-hidden="true"
            />
            <Input
              aria-label={t(($) => $.searchTags, { ns: 'pluginTags' }) || ''}
              autoComplete="off"
              className="pl-6.5"
              value={searchText}
              onChange={(event) => setSearchText(event.target.value)}
              placeholder={t(($) => $.searchTags, { ns: 'pluginTags' }) || ''}
            />
          </div>
        </div>
        <CheckboxGroup
          aria-label={t(($) => $.allTags, { ns: 'pluginTags' })}
          value={value}
          onValueChange={onChange}
          className="max-h-112 overflow-y-auto p-1"
        >
          {filteredTags.map((tag) => (
            <label
              key={tag.id}
              className="flex h-7 cursor-pointer items-center rounded-lg px-2 py-1.5 select-none hover:bg-state-base-hover"
            >
              <Checkbox className="mr-1" value={tag.id} />
              <div className="px-1 system-sm-medium text-text-secondary">{tag.name}</div>
            </label>
          ))}
          {!filteredTags.length && (
            <div className="px-3 py-2 system-xs-regular text-text-tertiary">
              {t(($) => $['tag.noTag'], { ns: 'common' })}
            </div>
          )}
        </CheckboxGroup>
      </PopoverContent>
    </Popover>
  )
}

export default SnippetTagsFilter
