import type { ChecklistItem } from '../../hooks/use-checklist'
import type { BlockEnum } from '../../types'
import type { Dependency } from '@/app/components/plugins/types'
import { Button } from '@langgenius/dify-ui/button'
import { PopoverClose } from '@langgenius/dify-ui/popover'
import { memo, useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import BlockIcon from '../../block-icon'
import { useStore as usePluginDependencyStore } from '../../plugin-dependency/store'
import { ItemIndicator } from './item-indicator'

function getVersionFromMarketplaceIdentifier(identifier: string): string | undefined {
  const withoutHash = identifier.split('@')[0]
  const [, version] = withoutHash!.split(':')
  return version || undefined
}

export const ChecklistPluginGroup = memo(({ items }: { items: ChecklistItem[] }) => {
  const { t } = useTranslation()

  const identifiers = useMemo(
    () =>
      Array.from(
        new Set(
          items.map((i) => i.pluginUniqueIdentifier).filter((id): id is string => Boolean(id)),
        ),
      ),
    [items],
  )

  const dependencies = useMemo<Dependency[]>(() => {
    return identifiers.map((identifier) => {
      return {
        type: 'marketplace',
        value: {
          marketplace_plugin_unique_identifier: identifier,
          plugin_unique_identifier: identifier,
          version: getVersionFromMarketplaceIdentifier(identifier),
        },
      }
    })
  }, [identifiers])

  const handleInstallAll = () => {
    if (dependencies.length === 0) return
    const { setDependencies } = usePluginDependencyStore.getState()
    setDependencies(dependencies)
  }

  return (
    <div className="overflow-clip rounded-[10px] bg-components-panel-on-panel-item-bg">
      <div className="flex items-center gap-2 px-2 pt-2">
        <div className="flex size-5 shrink-0 items-center justify-center rounded-md border-[0.5px] border-divider-regular bg-components-icon-bg-midnight-solid shadow-xs">
          <span className="i-ri-download-line size-3.5 text-white" />
        </div>
        <span className="min-w-0 grow truncate text-sm/5 font-medium text-text-primary">
          {t(($) => $['nodes.common.pluginsNotInstalled'], { ns: 'workflow', count: items.length })}
        </span>
        <PopoverClose
          render={
            <Button
              variant="secondary"
              size="small"
              onClick={handleInstallAll}
              disabled={dependencies.length === 0}
            />
          }
        >
          {t(($) => $['nodes.agent.pluginInstaller.install'], { ns: 'workflow' })}
        </PopoverClose>
      </div>
      <div className="p-1">
        {items.map((item) => (
          <div key={item.id} className="flex items-center gap-2 rounded-lg px-1">
            <ItemIndicator />
            <BlockIcon type={item.type as BlockEnum} size="xs" toolIcon={item.toolIcon} />
            <span className="min-w-0 grow truncate text-xs/4 text-text-warning">{item.title}</span>
          </div>
        ))}
      </div>
    </div>
  )
})
ChecklistPluginGroup.displayName = 'ChecklistPluginGroup'
