import type {
  OffsetOptions,
  Placement,
} from '@floating-ui/react'
import type {
  MouseEventHandler,
} from 'react'
import type {
  CommonNodeType,
  NodeDefault,
  OnNodeAdd,
  OnSelectBlock,
  ToolWithProvider,
} from '../types'
import { cn } from '@langgenius/dify-ui/cn'
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@langgenius/dify-ui/popover'
import { useDebounce } from 'ahooks'
import * as React from 'react'
import {
  memo,
  useCallback,
  useEffect,
  useMemo,
  useState,
} from 'react'
import { useTranslation } from 'react-i18next'
import Input from '@/app/components/base/input'
import SearchBox from '@/app/components/plugins/marketplace/search-box'
import { useHooksStore } from '@/app/components/workflow/hooks-store'
import useNodes from '@/app/components/workflow/store/workflow/use-nodes'
import { FlowType } from '@/types/common'
import { BlockEnum, isTriggerNode } from '../types'
import { useTabs } from './hooks'
import Snippets from './snippets'
import Tabs from './tabs'
import { TabsEnum } from './types'

export type NodeSelectorProps = {
  open?: boolean
  onOpenChange?: (open: boolean) => void
  onSelect: OnSelectBlock
  trigger?: (open: boolean) => React.ReactNode
  placement?: Placement
  offset?: OffsetOptions
  triggerStyle?: React.CSSProperties
  triggerClassName?: (open: boolean) => string
  triggerInnerClassName?: string
  renderTriggerAsButtonRoot?: boolean
  popupClassName?: string
  availableBlocksTypes?: BlockEnum[]
  disabled?: boolean
  blocks?: NodeDefault[]
  dataSources?: ToolWithProvider[]
  noBlocks?: boolean
  noTools?: boolean
  showStartTab?: boolean
  defaultActiveTab?: TabsEnum
  forceShowStartContent?: boolean
  ignoreNodeIds?: string[]
  forceEnableStartTab?: boolean // Force enabling Start tab regardless of existing trigger/user input nodes (e.g., when changing Start node type).
  allowUserInputSelection?: boolean // Override user-input availability; default logic blocks it when triggers exist.
  snippetInsertPayload?: Parameters<OnNodeAdd>[1]
}
function NodeSelector({
  open: openFromProps,
  onOpenChange,
  onSelect,
  trigger,
  placement = 'right',
  offset = 6,
  triggerClassName,
  triggerInnerClassName,
  renderTriggerAsButtonRoot = false,
  triggerStyle,
  popupClassName,
  availableBlocksTypes,
  disabled,
  blocks = [],
  dataSources = [],
  noBlocks = false,
  noTools = false,
  showStartTab = false,
  defaultActiveTab,
  forceShowStartContent = false,
  ignoreNodeIds = [],
  forceEnableStartTab = false,
  allowUserInputSelection,
  snippetInsertPayload,
}: NodeSelectorProps) {
  const { t } = useTranslation()
  const nodes = useNodes()
  const flowType = useHooksStore(s => s.configsMap?.flowType)
  const [searchText, setSearchText] = useState('')
  const [snippetsLoading, setSnippetsLoading] = useState(() => Boolean(openFromProps) && defaultActiveTab === TabsEnum.Snippets)
  const debouncedSearchText = useDebounce(searchText, { wait: 500 })
  const [tags, setTags] = useState<string[]>([])
  const [localOpen, setLocalOpen] = useState(false)
  // Exclude nodes explicitly ignored (such as the node currently being edited) when checking canvas state.
  const filteredNodes = useMemo(() => {
    if (!ignoreNodeIds.length)
      return nodes
    const ignoreSet = new Set(ignoreNodeIds)
    return nodes.filter(node => !ignoreSet.has(node.id))
  }, [nodes, ignoreNodeIds])

  const { hasTriggerNode, hasUserInputNode, hasStartPlaceholderNode } = useMemo(() => {
    const result = {
      hasTriggerNode: false,
      hasUserInputNode: false,
      hasStartPlaceholderNode: false,
    }
    for (const node of filteredNodes) {
      const nodeType = (node.data as CommonNodeType | undefined)?.type
      if (!nodeType)
        continue
      if (nodeType === BlockEnum.Start)
        result.hasUserInputNode = true
      if (nodeType === BlockEnum.StartPlaceholder)
        result.hasStartPlaceholderNode = true
      if (isTriggerNode(nodeType))
        result.hasTriggerNode = true
      if (result.hasTriggerNode && result.hasUserInputNode && result.hasStartPlaceholderNode)
        break
    }
    return result
  }, [filteredNodes])
  // Default rule: user input option is only available when no Start node nor Trigger node exists on canvas.
  const defaultAllowUserInputSelection = !hasUserInputNode && !hasTriggerNode
  const canSelectUserInput = allowUserInputSelection ?? defaultAllowUserInputSelection
  const disableStartTab = flowType === FlowType.snippet
  const disableSnippetsTab = flowType === FlowType.snippet
  const {
    activeTab,
    setActiveTab,
    tabs,
  } = useTabs({
    noBlocks,
    noSources: !dataSources.length,
    noTools,
    noSnippets: disableSnippetsTab,
    noStart: !showStartTab,
    defaultActiveTab,
    hasStartPlaceholderNode,
    disableStartTab,
    forceEnableStartTab,
  })
  const open = openFromProps === undefined ? localOpen : openFromProps
  const handleOpenChange = useCallback((newOpen: boolean) => {
    if (disabled)
      return

    setLocalOpen(newOpen)

    if (!newOpen) {
      setSearchText('')
      setSnippetsLoading(false)
    }
    else if (activeTab === TabsEnum.Snippets) {
      setSnippetsLoading(true)
    }

    if (onOpenChange)
      onOpenChange(newOpen)
  }, [activeTab, disabled, onOpenChange])
  const handleTrigger = useCallback<MouseEventHandler<HTMLElement>>((e) => {
    e.stopPropagation()
  }, [])

  const handleSelect = useCallback<OnSelectBlock>((type, pluginDefaultValue) => {
    handleOpenChange(false)
    onSelect(type, pluginDefaultValue)
  }, [handleOpenChange, onSelect])

  const handleActiveTabChange = useCallback((newActiveTab: TabsEnum) => {
    setActiveTab(newActiveTab)
    if (open && newActiveTab === TabsEnum.Snippets)
      setSnippetsLoading(true)
  }, [open, setActiveTab])

  useEffect(() => {
    if (!snippetsLoading)
      return

    const timer = window.setTimeout(() => {
      setSnippetsLoading(false)
    }, 200)

    return () => {
      window.clearTimeout(timer)
    }
  }, [snippetsLoading])
  const filterSearchText = activeTab === TabsEnum.Start || activeTab === TabsEnum.Tools
    ? debouncedSearchText
    : searchText

  const searchPlaceholder = useMemo(() => {
    if (activeTab === TabsEnum.Start)
      return t('tabs.searchTrigger', { ns: 'workflow' })

    if (activeTab === TabsEnum.Blocks)
      return t('tabs.searchBlock', { ns: 'workflow' })

    if (activeTab === TabsEnum.Tools)
      return t('tabs.searchTool', { ns: 'workflow' })

    if (activeTab === TabsEnum.Sources)
      return t('tabs.searchDataSource', { ns: 'workflow' })
    if (activeTab === TabsEnum.Snippets)
      return t('tabs.searchSnippets', { ns: 'workflow' })
    return ''
  }, [activeTab, t])

  const defaultTriggerElement = (
    <PopoverTrigger
      aria-label={t('common.addBlock', { ns: 'workflow' })}
      className={cn(
        'z-10 flex size-4 cursor-pointer items-center justify-center rounded-full border-0 bg-components-button-primary-bg p-0 text-text-primary-on-surface hover:bg-components-button-primary-bg-hover focus-visible:ring-1 focus-visible:ring-components-input-border-hover focus-visible:outline-hidden',
        triggerClassName?.(open),
      )}
      style={triggerStyle}
      onClick={handleTrigger}
    >
      <span aria-hidden className="i-custom-vender-line-general-plus-02 size-2.5" />
    </PopoverTrigger>
  )
  const triggerElement = trigger?.(open)
  const isValidTriggerElement = React.isValidElement(triggerElement)
  const isNativeButtonTrigger = isValidTriggerElement && triggerElement.type === 'button'
  const shouldRenderTriggerAsButtonRoot = isValidTriggerElement && (renderTriggerAsButtonRoot || isNativeButtonTrigger)
  const resolvedTriggerElement = shouldRenderTriggerAsButtonRoot
    ? triggerElement
    : (
        <div className={triggerInnerClassName}>
          {triggerElement}
        </div>
      )
  const resolvedOffset = typeof offset === 'number' || typeof offset === 'function' ? undefined : offset
  const sideOffset = typeof offset === 'number' ? offset : (resolvedOffset?.mainAxis ?? 0)
  const alignOffset = typeof offset === 'number' ? 0 : (resolvedOffset?.crossAxis ?? 0)

  return (
    <Popover
      open={open}
      onOpenChange={handleOpenChange}
    >
      {trigger
        ? (
            <PopoverTrigger
              nativeButton={shouldRenderTriggerAsButtonRoot}
              onClick={handleTrigger}
              render={resolvedTriggerElement as React.ReactElement}
            />
          )
        : defaultTriggerElement}
      <PopoverContent
        placement={placement}
        sideOffset={sideOffset}
        alignOffset={alignOffset}
        popupClassName="border-none bg-transparent shadow-none"
      >
        <div className={cn('w-[400px] min-w-0 overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg', popupClassName)}>
          <Tabs
            tabs={tabs}
            activeTab={activeTab}
            blocks={blocks}
            allowStartNodeSelection={canSelectUserInput}
            hasUserInputNode={hasUserInputNode}
            hasTriggerNode={hasTriggerNode}
            onActiveTabChange={handleActiveTabChange}
            filterElem={activeTab === TabsEnum.Snippets
              ? null
              : (
                  <div className="relative m-2" onClick={e => e.stopPropagation()}>
                    {activeTab === TabsEnum.Start && (
                      <SearchBox
                        autoFocus
                        search={searchText}
                        onSearchChange={setSearchText}
                        tags={tags}
                        onTagsChange={setTags}
                        placeholder={searchPlaceholder}
                        inputClassName="grow"
                      />
                    )}
                    {activeTab === TabsEnum.Blocks && (
                      <Input
                        showLeftIcon
                        showClearIcon
                        autoFocus
                        value={searchText}
                        placeholder={searchPlaceholder}
                        onChange={e => setSearchText(e.target.value)}
                        onClear={() => setSearchText('')}
                      />
                    )}
                    {activeTab === TabsEnum.Sources && (
                      <Input
                        showLeftIcon
                        showClearIcon
                        autoFocus
                        value={searchText}
                        placeholder={searchPlaceholder}
                        onChange={e => setSearchText(e.target.value)}
                        onClear={() => setSearchText('')}
                      />
                    )}
                    {activeTab === TabsEnum.Tools && (
                      <SearchBox
                        autoFocus
                        search={searchText}
                        onSearchChange={setSearchText}
                        tags={tags}
                        onTagsChange={setTags}
                        placeholder={t('searchTools', { ns: 'plugin' })!}
                        inputClassName="grow"
                      />
                    )}
                  </div>
                )}
            onSelect={handleSelect}
            searchText={filterSearchText}
            tags={tags}
            availableBlocksTypes={availableBlocksTypes}
            noBlocks={noBlocks}
            dataSources={dataSources}
            noTools={noTools}
            onTagsChange={setTags}
            forceShowStartContent={forceShowStartContent}
            snippetsElem={disableSnippetsTab
              ? undefined
              : (
                  <Snippets
                    loading={snippetsLoading}
                    searchText={searchText}
                    onSearchTextChange={setSearchText}
                    insertPayload={snippetInsertPayload}
                    onInserted={() => handleOpenChange(false)}
                  />
                )}
          />
        </div>
      </PopoverContent>
    </Popover>
  )
}

export default memo(NodeSelector)
