"use client"

import type { ReactNode } from "react"
import { Trash2Icon } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { OptionCombobox } from "@/components/option-combobox"
import type { AIWorkflowDefinition, AIWorkflowNodeSpec } from "@/lib/api/admin"
import { cn } from "@/lib/utils"

import { VariableSelector } from "./variable-selector"
import {
  buildVariableSpecDisplay,
  createConditionBranchID,
  isRefValue,
  normalizeNodeConfig,
  refField,
  refNodeId,
  type WorkflowConditionBranch,
  type WorkflowVariableRef,
} from "./workflow-utils"

export type WorkflowBranchSummary = {
  branchId: string
  targetNodeId?: string
  targetName?: string
}

const CONDITION_OPERATOR_OPTIONS = [
  { value: "eq", label: "等于" },
  { value: "neq", label: "不等于" },
  { value: "contains", label: "包含" },
  { value: "not_contains", label: "不包含" },
  { value: "gt", label: "大于" },
  { value: "gte", label: "大于等于" },
  { value: "lt", label: "小于" },
  { value: "lte", label: "小于等于" },
  { value: "exists", label: "存在" },
  { value: "empty", label: "为空" },
]

const cardInputClassName = "h-8 rounded-md border-slate-200 bg-white text-xs shadow-none"
const cardComboboxClassName = "h-8 rounded-md border-slate-200 bg-white text-xs shadow-none"

export function NodeConfigPanel({
  node,
  nodeSpec,
  nodes,
  availableVariables,
  showHeader = true,
  showConditionBranches = true,
  onChange,
  onDelete,
}: {
  node: AIWorkflowDefinition["nodes"][number] | null
  nodeSpec?: AIWorkflowNodeSpec
  nodes: AIWorkflowDefinition["nodes"]
  availableVariables?: WorkflowVariableRef[]
  branchSummaries?: WorkflowBranchSummary[]
  showHeader?: boolean
  showConditionBranches?: boolean
  onChange: (nodeId: string, data: AIWorkflowDefinition["nodes"][number]["data"]) => void
  onDelete?: (nodeId: string) => void
}) {
  if (!node) {
    return (
      <div className="flex h-full items-center justify-center p-6 text-sm text-muted-foreground">
        未选择节点
      </div>
    )
  }

  const inputsValues = node.data?.inputsValues ?? {}
  const inputSchema = nodeSpec?.inputSchema ?? []
  const outputSchema = nodeSpec?.outputSchema ?? []
  const canDelete = node.type !== "start" && node.type !== "end"
  const config = normalizeNodeConfig(node.data?.config)
  const branches = config.branches ?? []

  const updateData = (data: Partial<AIWorkflowDefinition["nodes"][number]["data"]>) => {
    onChange(node.id, {
      ...(node.data ?? {}),
      ...data,
    })
  }
  const updateConfig = (nextConfig: Record<string, unknown>) => updateData({ config: nextConfig })
  const updateBranch = (branch: WorkflowConditionBranch) => {
    const nextBranches = branches.some((item) => item.id === branch.id)
      ? branches.map((item) => (item.id === branch.id ? branch : item))
      : [...branches, branch]
    updateConfig({ ...config, branches: nextBranches })
  }
  const deleteBranch = (branchId: string) => {
    updateConfig({ ...config, branches: branches.filter((branch) => branch.id !== branchId) })
  }
  const addBranch = () => {
    const targetNodeId = nodes.find((item) => item.id !== node.id && item.type !== "start")?.id ?? ""
    updateBranch({
      id: createConditionBranchID(branches),
      name: "新分支",
      targetNodeId,
      condition: {
        operator: "eq",
      },
    })
  }

  return (
    <div className="space-y-3 px-3 pb-3">
      {showHeader ? (
        <div className="border-b px-4 py-3">
          <div className="flex items-start justify-between gap-2">
            <div className="min-w-0">
              <div className="truncate text-sm font-medium">
                {node.data?.title || nodeSpec?.title || node.type}
              </div>
              <div className="mt-1 truncate text-xs text-muted-foreground">{node.id}</div>
            </div>
            {canDelete ? (
              <Button
                type="button"
                variant="ghost"
                size="icon"
                className="size-8 shrink-0 text-muted-foreground hover:text-destructive"
                onClick={() => onDelete?.(node.id)}
                aria-label="删除节点"
              >
                <Trash2Icon className="size-4" />
              </Button>
            ) : null}
          </div>
        </div>
      ) : null}
      <div className="space-y-3">
        {inputSchema.length > 0 ? (
          <ConfigCard title="输入" meta={`${inputSchema.length} 项`}>
            <div className="space-y-3">
            {inputSchema.map((input) => {
              const value = inputsValues[input.name]
              return (
                <div key={input.name} className="space-y-1.5">
                  <Label className="flex items-center gap-1 text-xs text-slate-600">
                    <span>{input.label || input.name}</span>
                    {input.required ? <span className="text-destructive">*</span> : null}
                  </Label>
                  <VariableSelector
                    value={isRefValue(value) ? value : undefined}
                    variables={availableVariables ?? []}
                    placeholder="选择变量"
                    triggerClassName={cardComboboxClassName}
                    onChange={(next) => {
                      updateData({
                        inputsValues: {
                          ...inputsValues,
                          [input.name]: next,
                        },
                      })
                    }}
                  />
                </div>
              )
            })}
            </div>
          </ConfigCard>
        ) : null}

        {showConditionBranches && (node.type === "condition" || branches.length > 0) ? (
          <ConditionBranchesEditor
            branches={branches}
            nodes={nodes}
            currentNodeId={node.id}
            variables={availableVariables ?? []}
            onAdd={addBranch}
            onChange={updateBranch}
            onDelete={deleteBranch}
          />
        ) : null}

        {outputSchema.length > 0 ? (
          <ConfigCard title="输出" meta={`${outputSchema.length} 项`}>
            <div className="space-y-2">
              {outputSchema.map((output) => {
                const item = buildVariableSpecDisplay(output)
                return (
                  <div key={item.key} className="rounded-md border border-slate-200 bg-slate-50/60 px-2.5 py-2">
                    <div className="truncate text-xs font-medium text-slate-700">{item.label}</div>
                    <div className="mt-1 truncate font-mono text-[11px] leading-4 text-slate-500">{item.subtitle}</div>
                    {item.description ? (
                      <div className="mt-1 text-xs leading-4 text-muted-foreground">{item.description}</div>
                    ) : null}
                  </div>
                )
              })}
            </div>
          </ConfigCard>
        ) : null}
      </div>
    </div>
  )
}

export function ConditionBranchConfigPanel({
  node,
  nodes,
  branchId,
  variables,
  onChange,
  onDelete,
}: {
  node: AIWorkflowDefinition["nodes"][number]
  nodes: AIWorkflowDefinition["nodes"]
  branchId: string
  variables: WorkflowVariableRef[]
  onChange: (nodeId: string, data: AIWorkflowDefinition["nodes"][number]["data"]) => void
  onDelete: (branchId: string) => void
}) {
  const config = normalizeNodeConfig(node.data?.config)
  const branches = config.branches ?? []
  const branch = branches.find((item) => item.id === branchId)
  const targetOptions = buildTargetOptions(nodes, node.id)

  if (!branch) {
    return (
      <div className="flex h-full items-center justify-center p-6 text-sm text-muted-foreground">
        条件分支不存在
      </div>
    )
  }

  const updateBranch = (nextBranch: WorkflowConditionBranch) => {
    onChange(node.id, {
      ...(node.data ?? {}),
      config: {
        ...config,
        branches: branches.map((item) => (item.id === nextBranch.id ? nextBranch : item)),
      },
    })
  }

  return (
    <div className="space-y-3 px-3 pb-3">
      <ConfigCard title="分支目标" meta={branch.default ? "默认" : "条件"}>
        <div className="space-y-3">
          <div className="space-y-1.5">
            <Label className="text-xs text-slate-600">目标节点</Label>
            <OptionCombobox
              value={branch.targetNodeId}
              options={targetOptions}
              placeholder="选择目标节点"
              triggerClassName={cardComboboxClassName}
              onChange={(targetNodeId) => updateBranch({ ...branch, targetNodeId })}
            />
          </div>

          <label className="flex items-center gap-2 text-xs text-slate-600">
            <input
              type="checkbox"
              checked={branch.default === true}
              className="size-3.5"
              onChange={(event) => updateBranch({
                ...branch,
                default: event.target.checked,
                condition: event.target.checked ? undefined : branch.condition,
              })}
            />
            默认分支
          </label>
        </div>
      </ConfigCard>

      {branch.default ? (
        <div className="rounded-md border border-slate-200 bg-white px-3 py-2 text-xs text-slate-500">
          默认分支不需要条件表达式，会在其他条件不匹配时执行。
        </div>
      ) : (
        <ConfigCard title="条件表达式">
          <ConditionFields branch={branch} variables={variables} onChange={updateBranch} />
        </ConfigCard>
      )}

      {branch.default ? null : (
        <Button
          type="button"
          variant="ghost"
          size="sm"
          className="h-8 px-2 text-xs text-slate-500 hover:text-destructive"
          onClick={() => onDelete(branch.id)}
        >
          删除条件
        </Button>
      )}
    </div>
  )
}

function ConditionBranchesEditor({
  branches,
  nodes,
  currentNodeId,
  variables,
  onAdd,
  onChange,
  onDelete,
}: {
  branches: WorkflowConditionBranch[]
  nodes: AIWorkflowDefinition["nodes"]
  currentNodeId: string
  variables: WorkflowVariableRef[]
  onAdd: () => void
  onChange: (branch: WorkflowConditionBranch) => void
  onDelete: (branchId: string) => void
}) {
  const targetOptions = buildTargetOptions(nodes, currentNodeId)

  return (
    <ConfigCard
      title="条件分支"
      meta={`${branches.length} 项`}
      action={
        <Button type="button" variant="ghost" size="sm" className="h-7 px-2 text-xs" onClick={onAdd}>
          添加
        </Button>
      }
    >
      {branches.length === 0 ? (
        <div className="rounded-md border border-dashed border-slate-200 bg-slate-50 px-3 py-3 text-xs text-slate-500">
          暂无分支。条件节点需要至少一个默认分支或条件分支。
        </div>
      ) : null}
      <div className="space-y-2">
        {branches.map((branch) => {
          return (
            <div key={branch.id} className="space-y-2 rounded-md border border-slate-200 bg-slate-50/60 p-2.5">
              <div className="flex items-center justify-between gap-2">
                <span className="inline-flex h-5 shrink-0 items-center rounded-full border border-slate-200 bg-white px-2 font-mono text-[10px] font-semibold text-slate-600">
                  {branch.default ? "ELSE" : "IF"}
                </span>
                <Input
                  value={branch.name ?? ""}
                  placeholder={branch.id}
                  className={cn(cardInputClassName, "min-w-0 flex-1 border-transparent bg-white font-medium")}
                  onChange={(event) => onChange({ ...branch, name: event.target.value })}
                />
                {branch.default ? null : (
                  <Button
                    type="button"
                    variant="ghost"
                    size="sm"
                    className="h-7 px-2 text-xs text-slate-500 hover:text-destructive"
                    onClick={() => onDelete(branch.id)}
                  >
                    删除
                  </Button>
                )}
              </div>

              <div className="grid grid-cols-[64px_minmax(0,1fr)] items-center gap-2">
                <Label className="text-xs text-slate-500">目标节点</Label>
                <OptionCombobox
                  value={branch.targetNodeId}
                  options={targetOptions}
                  placeholder="选择目标节点"
                  triggerClassName={cardComboboxClassName}
                  onChange={(targetNodeId) => onChange({ ...branch, targetNodeId })}
                />
              </div>

              <label className="flex items-center gap-2 text-xs text-slate-500">
                <input
                  type="checkbox"
                  checked={branch.default === true}
                  className="size-3.5"
                  onChange={(event) => onChange({
                    ...branch,
                    default: event.target.checked,
                    condition: event.target.checked ? undefined : branch.condition,
                  })}
                />
                默认分支
              </label>

              {branch.default ? null : (
                <div className="border-t border-slate-200 pt-2">
                  <ConditionFields branch={branch} variables={variables} onChange={onChange} compact />
                </div>
              )}
            </div>
          )
        })}
      </div>
    </ConfigCard>
  )
}

function ConditionFields({
  branch,
  variables,
  onChange,
  compact = false,
}: {
  branch: WorkflowConditionBranch
  variables: WorkflowVariableRef[]
  onChange: (branch: WorkflowConditionBranch) => void
  compact?: boolean
}) {
  const condition = branch.condition ?? {}
  const selectedVariable = isRefValue(condition.left)
    ? variables.find((item) => item.nodeId === refNodeId(condition.left) && item.field === refField(condition.left))
    : undefined
  const valueOptions = selectedVariable?.valueOptions ?? []
  const rightDisabled = ["exists", "empty"].includes(condition.operator ?? "")

  return (
    <div className={cn("space-y-3", compact && "space-y-2")}>
      <div className={cn("space-y-1.5", compact && "grid grid-cols-[64px_minmax(0,1fr)] items-center gap-2 space-y-0")}>
        <Label className="text-xs text-slate-500">左值</Label>
        <VariableSelector
          value={isRefValue(condition.left) ? condition.left : undefined}
          variables={variables}
          placeholder="选择变量"
          triggerClassName={cardComboboxClassName}
          onChange={(left) => onChange({
            ...branch,
            condition: { ...condition, left },
          })}
        />
      </div>
      <div className={cn("grid grid-cols-[1fr_1fr] gap-2", compact && "grid-cols-[64px_minmax(0,1fr)_96px] items-center")}>
        {compact ? <Label className="text-xs text-slate-500">判断</Label> : null}
        <div className={cn("space-y-1.5", compact && "space-y-0")}>
          {compact ? null : <Label className="text-xs text-slate-500">操作符</Label>}
          <OptionCombobox
            value={condition.operator ?? ""}
            options={CONDITION_OPERATOR_OPTIONS}
            placeholder="选择操作符"
            triggerClassName={cardComboboxClassName}
            onChange={(operator) => onChange({
              ...branch,
              condition: { ...condition, operator },
            })}
          />
        </div>
        <div className={cn("space-y-1.5", compact && "space-y-0", rightDisabled && "opacity-50")}>
          {compact ? null : <Label className="text-xs text-slate-500">右值</Label>}
          {valueOptions.length > 0 && !rightDisabled ? (
            <OptionCombobox
              value={stringifyConditionRight(condition.right)}
              options={valueOptions.map((option) => ({
                value: stringifyConditionRight(option.value),
                label: option.label || stringifyConditionRight(option.value),
                description: option.description,
              }))}
              placeholder="选择取值"
              triggerClassName={cardComboboxClassName}
              onChange={(nextValue) => {
                const selectedOption = valueOptions.find((option) => stringifyConditionRight(option.value) === nextValue)
                onChange({
                  ...branch,
                  condition: { ...condition, right: selectedOption?.value ?? nextValue },
                })
              }}
            />
          ) : (
            <Input
              value={stringifyConditionRight(condition.right)}
              disabled={rightDisabled}
              className={cardInputClassName}
              onChange={(event) => onChange({
                ...branch,
                condition: { ...condition, right: event.target.value },
              })}
            />
          )}
        </div>
      </div>
    </div>
  )
}

function ConfigCard({
  title,
  meta,
  action,
  children,
}: {
  title: string
  meta?: string
  action?: ReactNode
  children: ReactNode
}) {
  return (
    <section className="overflow-hidden rounded-md border border-slate-200 bg-white">
      <div className="flex min-h-10 items-center justify-between gap-2 border-b border-slate-100 px-3 py-2">
        <div className="min-w-0">
          <div className="truncate text-[13px] font-semibold text-slate-900">{title}</div>
        </div>
        <div className="flex shrink-0 items-center gap-2">
          {meta ? <span className="text-xs text-slate-500">{meta}</span> : null}
          {action}
        </div>
      </div>
      <div className="p-3">{children}</div>
    </section>
  )
}

function buildTargetOptions(nodes: AIWorkflowDefinition["nodes"], currentNodeId: string) {
  return nodes
    .filter((node) => node.id !== currentNodeId && node.type !== "start")
    .map((node) => ({
      value: node.id,
      label: node.data?.title || node.type || node.id,
    }))
}

function stringifyConditionRight(value: unknown) {
  if (value === undefined || value === null) {
    return ""
  }
  if (typeof value === "string") {
    return value
  }
  return JSON.stringify(value)
}