import { useEffect, useMemo, useState, type ReactNode } from 'react'
import { ArrowRight, Plus } from 'lucide-react'

import type { WorkflowNodeDefinition } from '../../api/workflows'
import {
  AUTHORING_STAGE_DESCRIPTIONS,
  AUTHORING_STAGE_LABELS,
  AUTHORING_STAGE_STYLES,
  CATEGORY_COLORS,
  CATEGORY_LABELS,
  FAMILY_FILTER_DESCRIPTIONS,
  FAMILY_FILTER_LABELS,
  FAMILY_FILTER_STYLES,
  NODE_KIND_FILTER_LABELS,
  NODE_LIBRARY_GROUP_LABELS,
  NODE_LIBRARY_GROUP_STYLES,
  getDefinitionBadges,
  getDefinitionFamily,
  getDefinitionModuleLabel,
  getDefinitionModuleNamespace,
  type WorkflowAuthoringStage,
  type WorkflowGraphFamily,
  type WorkflowNodeFamilyFilter,
  type WorkflowNodeKindFilter,
  type WorkflowNodeLibraryGroup,
} from './workflowNodeLibrary'
import {
  buildWorkflowNodeCatalogModel,
  filterWorkflowNodeDefinitions,
  getAvailableFamilyFilters,
} from './workflowNodeCatalog'
import { STARTER_NODE_STEP_ORDER, STARTER_PATH_TITLES } from './workflowAuthoringGuidance'
import {
  CATEGORY_FILTER_LABELS,
  CATEGORY_FILTERS,
  type FilterPillOption,
  type WorkflowNodeCategoryFilter,
  WorkflowNodeCatalogFilterControls,
} from './WorkflowNodeCatalogFilterControls'
import { WorkflowNodeCatalogEmptyState } from './WorkflowNodeCatalogEmptyState'
import { WorkflowNodeCatalogQuickInsert } from './WorkflowNodeCatalogQuickInsert'
import {
  getWorkflowNodeContractPresentation,
  getWorkflowNodeContractSignals,
  getWorkflowNodeContractSummary,
} from './workflowNodeContracts'
import { WorkflowNodeContractSignalList } from './WorkflowNodeContractSignalList'

function ContractSummaryMetric({
  label,
  value,
  title,
}: {
  label: string
  value: string
  title?: string
}) {
  return (
    <div
      className="rounded-lg border border-border-default bg-surface-hover/50 px-2 py-1"
      title={title}
    >
      <p className="text-[9px] font-semibold uppercase tracking-wide text-content-muted">{label}</p>
      <p className="mt-0.5 text-[11px] font-medium text-content">{value}</p>
    </div>
  )
}

function RuntimeCoverageBadges({
  runtimeCounts,
  size = 'sm',
}: {
  runtimeCounts: Partial<Record<WorkflowNodeLibraryGroup, number>>
  size?: 'sm' | 'xs'
}) {
  return (
    <>
      {(['legacy', 'bridge', 'graph'] as WorkflowNodeLibraryGroup[]).map(group => {
        const count = runtimeCounts[group] ?? 0
        if (count === 0) return null
        const label = size === 'sm' ? NODE_LIBRARY_GROUP_LABELS[group] : NODE_KIND_FILTER_LABELS[group]

        return (
          <span
            key={group}
            className={
              size === 'xs'
                ? `rounded-full px-1.5 py-0.5 text-[10px] font-medium ${NODE_LIBRARY_GROUP_STYLES[group]}`
                : `inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-medium ${NODE_LIBRARY_GROUP_STYLES[group]}`
            }
            title={size === 'sm' ? NODE_LIBRARY_GROUP_LABELS[group] : undefined}
          >
            <span>{label}</span>
            <span>{count}</span>
          </span>
        )
      })}
    </>
  )
}

function StageCoverageBadges({
  stages,
}: {
  stages: WorkflowAuthoringStage[]
}) {
  return (
    <>
      {stages.map(stage => (
        <span
          key={stage}
          className={`rounded-full px-1.5 py-0.5 text-[10px] font-medium ${AUTHORING_STAGE_STYLES[stage]}`}
          title={AUTHORING_STAGE_DESCRIPTIONS[stage]}
        >
          {AUTHORING_STAGE_LABELS[stage]}
        </span>
      ))}
    </>
  )
}

type WorkflowNodeCatalogBrowserProps = {
  definitions: WorkflowNodeDefinition[]
  graphFamily: WorkflowGraphFamily
  variant?: 'menu' | 'panel'
  onSelectStep?: (step: string) => void
  onEmptyAction?: () => void
  emptyActionLabel?: string
  renderIcon?: (iconName?: string, size?: number) => ReactNode
  searchPlaceholder?: string
  autoFocusSearch?: boolean
}

export function WorkflowNodeCatalogBrowser({
  definitions,
  graphFamily,
  variant = 'panel',
  onSelectStep,
  onEmptyAction,
  emptyActionLabel = 'Clear Filters',
  renderIcon,
  searchPlaceholder = 'Search node label, step, or capability',
  autoFocusSearch = false,
}: WorkflowNodeCatalogBrowserProps) {
  const [query, setQuery] = useState('')
  const [familyFilter, setFamilyFilter] = useState<WorkflowNodeFamilyFilter>(
    graphFamily === 'mixed' ? 'all' : graphFamily,
  )
  const [kindFilter, setKindFilter] = useState<WorkflowNodeKindFilter>('all')
  const [categoryFilter, setCategoryFilter] = useState<WorkflowNodeCategoryFilter>('all')
  const [moduleFilter, setModuleFilter] = useState<string>('all')
  const [moduleQuery, setModuleQuery] = useState('')

  useEffect(() => {
    setFamilyFilter(graphFamily === 'mixed' ? 'all' : graphFamily)
    setCategoryFilter('all')
    setModuleFilter('all')
    setModuleQuery('')
  }, [graphFamily])

  const availableFamilyFilters = useMemo(
    () => getAvailableFamilyFilters(graphFamily),
    [graphFamily],
  )

  const filteredDefinitions = useMemo(() => {
    return filterWorkflowNodeDefinitions(definitions, {
      graphFamily,
      familyFilter,
      kindFilter,
      query,
    })
  }, [definitions, familyFilter, graphFamily, kindFilter, query])

  const normalizedModuleQuery = moduleQuery.trim().toLowerCase()

  const visibleDefinitions = useMemo(() => {
    const scopedByModule =
      moduleFilter === 'all'
        ? filteredDefinitions
        : filteredDefinitions.filter(definition => getDefinitionModuleNamespace(definition) === moduleFilter)

    const scopedByModuleQuery = !normalizedModuleQuery
      ? scopedByModule
      : scopedByModule.filter(definition => {
          const namespace = getDefinitionModuleNamespace(definition).toLowerCase()
          return (
            namespace.includes(normalizedModuleQuery) ||
            getDefinitionModuleLabel(definition).toLowerCase().includes(normalizedModuleQuery) ||
            definition.module_key.toLowerCase().includes(normalizedModuleQuery) ||
            definition.label.toLowerCase().includes(normalizedModuleQuery)
          )
        })

    if (categoryFilter === 'all') return scopedByModuleQuery
    return scopedByModuleQuery.filter(definition => definition.category === categoryFilter)
  }, [categoryFilter, filteredDefinitions, moduleFilter, normalizedModuleQuery])

  const catalogModel = useMemo(() => buildWorkflowNodeCatalogModel(visibleDefinitions), [visibleDefinitions])
  const moduleFilters = catalogModel.moduleFilters
  const stageSections = catalogModel.stageSections

  useEffect(() => {
    if (moduleFilter !== 'all' && !moduleFilters.some(module => module.namespace === moduleFilter)) {
      setModuleFilter('all')
    }
  }, [moduleFilter, moduleFilters])

  const familySections = catalogModel.familySections
  const firstVisibleDefinition = visibleDefinitions[0]
  const totalModuleCount = moduleFilters.length
  const shouldExpandStageCoverage = variant === 'panel' && query.trim().length === 0 && moduleFilter === 'all'
  const quickInsertDefinitions = useMemo(() => {
    const prioritizedSteps = STARTER_NODE_STEP_ORDER[graphFamily]
    if (prioritizedSteps.length === 0) return visibleDefinitions.slice(0, 4)

    const byStep = new Map(visibleDefinitions.map(definition => [definition.step, definition]))
    return prioritizedSteps
      .map(step => byStep.get(step))
      .filter((definition): definition is WorkflowNodeDefinition => Boolean(definition))
      .slice(0, variant === 'menu' ? 5 : 6)
  }, [graphFamily, variant, visibleDefinitions])
  const quickInsertTitle = graphFamily === 'mixed' ? 'Suggested nodes' : STARTER_PATH_TITLES[graphFamily]
  const runtimeFilterOptions: FilterPillOption<WorkflowNodeKindFilter>[] = [
    { value: 'all', label: NODE_KIND_FILTER_LABELS.all },
    { value: 'legacy', label: NODE_KIND_FILTER_LABELS.legacy },
    { value: 'bridge', label: NODE_KIND_FILTER_LABELS.bridge },
    { value: 'graph', label: NODE_KIND_FILTER_LABELS.graph },
  ]
  const familyFilterOptions = availableFamilyFilters.map(filter => ({
    value: filter,
    label: FAMILY_FILTER_LABELS[filter],
  }))
  const categoryFilterOptions: FilterPillOption<WorkflowNodeCategoryFilter>[] = CATEGORY_FILTERS.map(
    filter => ({
      value: filter,
      label: CATEGORY_FILTER_LABELS[filter],
    }),
  )

  return (
    <div className="space-y-3">
      <WorkflowNodeCatalogFilterControls
        visibleDefinitionCount={visibleDefinitions.length}
        totalModuleCount={totalModuleCount}
        graphFamily={graphFamily}
        familyFilterOptions={familyFilterOptions}
        runtimeFilterOptions={runtimeFilterOptions}
        categoryFilterOptions={categoryFilterOptions}
        familyFilter={familyFilter}
        onFamilyFilterChange={setFamilyFilter}
        kindFilter={kindFilter}
        onKindFilterChange={setKindFilter}
        categoryFilter={categoryFilter}
        onCategoryFilterChange={setCategoryFilter}
        query={query}
        onQueryChange={setQuery}
        onQueryEnter={() => {
          if (firstVisibleDefinition && onSelectStep) {
            onSelectStep(firstVisibleDefinition.step)
          }
        }}
        searchPlaceholder={searchPlaceholder}
        autoFocusSearch={autoFocusSearch}
        moduleFilters={moduleFilters}
        moduleFilter={moduleFilter}
        onModuleFilterChange={setModuleFilter}
        moduleQuery={moduleQuery}
        onModuleQueryChange={setModuleQuery}
        onClearModuleScope={() => {
          setModuleFilter('all')
          setModuleQuery('')
        }}
      />

      <div className="flex flex-wrap gap-2">
        <RuntimeCoverageBadges runtimeCounts={catalogModel.runtimeCounts} />
      </div>

      {stageSections.length > 0 && (
        <details
          className="rounded-xl border border-border-default bg-surface-hover/35 p-3"
          open={shouldExpandStageCoverage}
        >
          <summary className="flex cursor-pointer list-none flex-wrap items-start justify-between gap-2">
            <div>
              <p className="text-xs font-semibold uppercase tracking-wide text-content-secondary">
                Stage Coverage
              </p>
              <p className="mt-1 text-xs text-content-muted">
                Use Quick Insert for the first canonical steps, then use stage coverage to inspect which modules can fill the rest of the production path.
              </p>
            </div>
            <span className="rounded-full border border-border-default bg-surface px-2 py-0.5 text-[11px] text-content-muted">
              {stageSections.length} active stages
            </span>
          </summary>
          <div className="mt-3 grid gap-2 md:grid-cols-2 xl:grid-cols-3">
            {stageSections.map(section => (
              <div
                key={`stage-summary-${section.stage}`}
                className="rounded-lg border border-border-default bg-surface px-3 py-2"
              >
                <div className="flex flex-wrap items-center gap-2">
                  <span className={`rounded-full px-1.5 py-0.5 text-[10px] font-medium ${AUTHORING_STAGE_STYLES[section.stage]}`}>
                    {AUTHORING_STAGE_LABELS[section.stage]}
                  </span>
                  <span className="rounded-full border border-border-default bg-surface-hover px-1.5 py-0.5 text-[10px] text-content-muted">
                    {section.modules.length} modules
                  </span>
                  <span className="rounded-full border border-border-default bg-surface-hover px-1.5 py-0.5 text-[10px] text-content-muted">
                    {section.definitions.length} nodes
                  </span>
                </div>
                <p className="mt-2 text-xs text-content-muted">
                  {AUTHORING_STAGE_DESCRIPTIONS[section.stage]}
                </p>
              </div>
            ))}
          </div>
        </details>
      )}

      <WorkflowNodeCatalogQuickInsert
        title={quickInsertTitle}
        definitions={quickInsertDefinitions}
        onSelectStep={onSelectStep}
      />

      {visibleDefinitions.length === 0 && (
        <WorkflowNodeCatalogEmptyState
          onResetFilters={onEmptyAction}
          resetLabel={emptyActionLabel}
        />
      )}

      <div className="space-y-3">
        {familySections.map(familySection => {
          const familyLabel = FAMILY_FILTER_LABELS[familySection.family]
          const familyDescription = FAMILY_FILTER_DESCRIPTIONS[familySection.family]
          const familyStyle = FAMILY_FILTER_STYLES[familySection.family]

          return (
            <div
              key={familySection.family}
              className="rounded-xl border border-border-default bg-surface-hover/35 p-3"
            >
              <div className="flex flex-wrap items-start justify-between gap-3">
                <div className="space-y-1">
                  <div className="flex flex-wrap items-center gap-2">
                    <span className={`rounded-full px-2 py-0.5 text-[11px] font-medium ${familyStyle}`}>
                      {familyLabel}
                    </span>
                    <span className="rounded-full border border-border-default bg-surface px-2 py-0.5 text-[11px] text-content-muted">
                      {familySection.modules.length} modules
                    </span>
                    <span className="rounded-full border border-border-default bg-surface px-2 py-0.5 text-[11px] text-content-muted">
                      {familySection.definitions.length} nodes
                    </span>
                  </div>
                  <p className="text-xs text-content-muted">{familyDescription}</p>
                </div>

                <div className="flex flex-wrap gap-2">
                  <RuntimeCoverageBadges runtimeCounts={familySection.runtimeCounts} size="xs" />
                </div>
              </div>

              <div className="mt-3 space-y-3">
                {familySection.modules.map(moduleGroup => (
                    <div
                      key={`${familySection.family}:${moduleGroup.namespace}`}
                      className="rounded-lg border border-border-default bg-surface/80 p-3"
                    >
                    <div className="flex flex-wrap items-start justify-between gap-2">
                      <div className="min-w-0 space-y-1">
                        <div className="flex min-w-0 flex-wrap items-center gap-1.5">
                          <span className="rounded-full border border-border-default bg-surface px-2 py-0.5 text-xs font-medium text-content">
                            {moduleGroup.label}
                          </span>
                          <span className="truncate rounded-full border border-border-default bg-surface px-2 py-0.5 font-mono text-[10px] text-content-muted">
                            {moduleGroup.namespace}
                          </span>
                          <StageCoverageBadges stages={moduleGroup.stages} />
                        </div>
                        <div className="flex flex-wrap gap-1.5">
                          <RuntimeCoverageBadges runtimeCounts={moduleGroup.runtimeCounts} size="xs" />
                        </div>
                      </div>
                      <span className="text-xs text-content-muted">{moduleGroup.definitions.length}</span>
                    </div>

                    <div className="mt-3 space-y-3">
                      {moduleGroup.stageSections.map(stageSection => {
                        const stageLabel = AUTHORING_STAGE_LABELS[stageSection.stage]
                        const stageDescription = AUTHORING_STAGE_DESCRIPTIONS[stageSection.stage]
                        const stageStyle = AUTHORING_STAGE_STYLES[stageSection.stage]

                        return (
                          <div
                            key={`${familySection.family}:${moduleGroup.namespace}:${stageSection.stage}`}
                            className="rounded-md border border-border-default bg-surface-hover/35 p-2"
                          >
                            <div className="mb-2 flex flex-wrap items-center justify-between gap-2">
                              <div className="flex min-w-0 flex-wrap items-center gap-2">
                                <span className={`rounded-full px-1.5 py-0.5 text-[10px] font-medium ${stageStyle}`}>
                                  {stageLabel}
                                </span>
                                <p className="text-xs text-content-muted">{stageDescription}</p>
                              </div>
                              <span className="text-[10px] text-content-muted">
                                {stageSection.definitions.length}
                              </span>
                            </div>

                            <div className="space-y-2">
                              {stageSection.categories.map(categorySection => {
                                const { category, definitions: categoryDefinitions } = categorySection
                                return (
                                  <div key={`${moduleGroup.namespace}:${stageSection.stage}:${category}`}>
                                    <div className="mb-1 flex items-center justify-between gap-2">
                                      <span className={`rounded-full px-1.5 py-0.5 text-[10px] font-medium ${CATEGORY_COLORS[category]}`}>
                                        {CATEGORY_LABELS[category]}
                                      </span>
                                      <span className="text-[10px] text-content-muted">{categoryDefinitions.length}</span>
                                    </div>

                                    <div className="space-y-1">
                                      {categoryDefinitions.map(definition => {
                                        const family = getDefinitionFamily(definition)
                                        const contractSummary = getWorkflowNodeContractSummary(definition)
                                        const contractPresentation =
                                          getWorkflowNodeContractPresentation(contractSummary)
                                        const {
                                          inputMetric,
                                          variableMetric,
                                          outputMetric,
                                          socketRequirementDescription,
                                          variableSummaryText,
                                        } = contractPresentation
                                        const contractSignals = getWorkflowNodeContractSignals(
                                          definition,
                                          contractSummary,
                                        )
                                        const isActionable = Boolean(onSelectStep)

                                        return (
                                          <div
                                            key={definition.step}
                                            className={`rounded-lg border border-border-default bg-surface px-3 py-2 ${
                                              isActionable ? 'transition-colors hover:bg-surface-hover' : ''
                                            }`}
                                            title={definition.description}
                                          >
                                            <div className="flex items-start gap-2">
                                              {renderIcon && (
                                                <span className="mt-0.5 text-content-secondary">
                                                  {renderIcon(definition.icon, variant === 'menu' ? 14 : 13)}
                                                </span>
                                              )}
                                              <div className="min-w-0 flex-1">
                                                <div className="flex items-start justify-between gap-2">
                                                  <div className="min-w-0">
                                                    <div className="flex flex-wrap items-center gap-1.5">
                                                      <p className="truncate text-sm font-medium text-content">
                                                        {definition.label}
                                                      </p>
                                                      <span
                                                        className={`rounded-full px-1.5 py-0.5 text-[10px] font-medium ${FAMILY_FILTER_STYLES[family]}`}
                                                      >
                                                        {FAMILY_FILTER_LABELS[family]}
                                                      </span>
                                                      {getDefinitionBadges(definition).map(badge => (
                                                        <span
                                                          key={`${definition.step}-${badge.label}`}
                                                          className={`rounded-full px-1.5 py-0.5 text-[10px] font-medium ${badge.className}`}
                                                        >
                                                          {badge.label}
                                                        </span>
                                                      ))}
                                                    </div>
                                                    <p className="mt-0.5 truncate font-mono text-[11px] text-content-muted">
                                                      {definition.step}
                                                    </p>
                                                  </div>

                                                  {isActionable && (
                                                    <button
                                                      type="button"
                                                      onClick={() => onSelectStep?.(definition.step)}
                                                      aria-label={
                                                        variant === 'panel'
                                                          ? `Insert ${definition.label}`
                                                          : `Use ${definition.label}`
                                                      }
                                                      className={`shrink-0 rounded-lg px-2 py-1 text-xs font-medium ${
                                                        variant === 'panel'
                                                          ? 'border border-border-default text-content hover:bg-surface-hover'
                                                          : 'bg-accent text-white hover:bg-accent-hover'
                                                      }`}
                                                    >
                                                      {variant === 'panel' ? (
                                                        <span className="inline-flex items-center gap-1">
                                                          <Plus size={12} />
                                                          Insert
                                                        </span>
                                                      ) : (
                                                        <span className="inline-flex items-center gap-1">
                                                          Use
                                                          <ArrowRight size={12} />
                                                        </span>
                                                      )}
                                                    </button>
                                                  )}
                                                </div>

                                                <p className="mt-1 line-clamp-2 text-xs text-content-muted">
                                                  {definition.description}
                                                </p>

                                                <WorkflowNodeContractSignalList
                                                  signals={contractSignals}
                                                  className="mt-2 flex flex-wrap gap-1.5 text-[10px]"
                                                />

                                                <div className="mt-2 grid gap-1.5 sm:grid-cols-3">
                                                  <ContractSummaryMetric
                                                    label="Inputs"
                                                    value={inputMetric.value}
                                                    title={inputMetric.title}
                                                  />
                                                  <ContractSummaryMetric
                                                    label="Variables"
                                                    value={variableMetric.value}
                                                    title={variableMetric.title}
                                                  />
                                                  <ContractSummaryMetric
                                                    label="Outputs"
                                                    value={outputMetric.value}
                                                    title={outputMetric.title}
                                                  />
                                                </div>

                                                <div className="mt-2 grid gap-1.5 lg:grid-cols-2">
                                                  <div className="rounded-lg border border-border-default bg-surface-hover/50 px-2 py-1.5">
                                                    <p className="text-[9px] font-semibold uppercase tracking-wide text-content-muted">
                                                      Wiring
                                                    </p>
                                                    <p className="mt-1 text-[11px] text-content-secondary">
                                                      {socketRequirementDescription}
                                                    </p>
                                                  </div>
                                                  <div className="rounded-lg border border-border-default bg-surface-hover/50 px-2 py-1.5">
                                                    <p className="text-[9px] font-semibold uppercase tracking-wide text-content-muted">
                                                      Variables
                                                    </p>
                                                    <p className="mt-1 text-[11px] text-content-muted">
                                                      {variableSummaryText}
                                                    </p>
                                                  </div>
                                                </div>
                                              </div>
                                            </div>
                                          </div>
                                        )
                                      })}
                                    </div>
                                  </div>
                                )
                              })}
                            </div>
                          </div>
                        )
                      })}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )
        })}
      </div>
    </div>
  )
}