import type { ChecklistItem } from '../../hooks/use-checklist'
import type { BlockEnum } from '../../types'
import { cn } from '@langgenius/dify-ui/cn'
import { memo, useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import BlockIcon from '../../block-icon'
import { ItemIndicator } from './item-indicator'

type ChecklistSubItem = {
  key: string
  message: string
}

export const ChecklistNodeGroup = memo(
  ({
    item,
    showGoTo,
    onItemClick,
  }: {
    item: ChecklistItem
    showGoTo: boolean
    onItemClick: (item: ChecklistItem) => void
  }) => {
    const { t } = useTranslation()
    const goToEnabled = showGoTo && item.canNavigate && !item.disableGoTo

    const subItems = useMemo(() => {
      const items: ChecklistSubItem[] = []
      for (let i = 0; i < item.errorMessages.length; i++)
        items.push({ key: `error-${i}`, message: item.errorMessages[i]! })
      if (item.unConnected)
        items.push({
          key: 'unconnected',
          message: t(($) => $['common.needConnectTip'], { ns: 'workflow' }),
        })
      return items
    }, [item.errorMessages, item.unConnected, t])

    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">
          <BlockIcon type={item.type as BlockEnum} size="sm" toolIcon={item.toolIcon} />
          <span className="min-w-0 grow truncate text-sm/5 font-medium text-text-primary">
            {item.title}
          </span>
        </div>
        <div className="p-1">
          {subItems.map((sub) => {
            const content = (
              <>
                <ItemIndicator />
                <span className="min-w-0 grow truncate text-xs/4 text-text-warning">
                  {sub.message}
                </span>
                {goToEnabled && (
                  <div className="flex shrink-0 items-center gap-0.5 pr-0.5 opacity-0 transition-opacity duration-150 group-hover/item:opacity-100">
                    <span className="text-xs/4 font-medium whitespace-nowrap text-text-accent">
                      {t(($) => $['panel.goToFix'], { ns: 'workflow' })}
                    </span>
                    <span
                      className="i-ri-arrow-right-line size-3.5 text-text-accent"
                      aria-hidden="true"
                    />
                  </div>
                )}
              </>
            )
            const className = cn(
              'group/item flex w-full items-center gap-2 rounded-lg px-1 text-left',
              goToEnabled && 'cursor-pointer hover:bg-state-base-hover',
            )

            if (goToEnabled) {
              return (
                <button
                  key={sub.key}
                  type="button"
                  className={cn(className, 'border-none bg-transparent')}
                  title={sub.message}
                  onClick={() => onItemClick(item)}
                >
                  {content}
                </button>
              )
            }

            return (
              <div key={sub.key} className={className} title={sub.message}>
                {content}
              </div>
            )
          })}
        </div>
      </div>
    )
  },
)
ChecklistNodeGroup.displayName = 'ChecklistNodeGroup'
