"use client"

import { useState, type PointerEvent as ReactPointerEvent } from "react"
import { XIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { ScrollArea } from "@/components/ui/scroll-area"
import type { AIWorkflowDefinition, AIWorkflowNodeSpec } from "@/lib/api/admin"

import type { SelectedWorkflowBranch } from "./workflow-branch-selection"
import { ConditionBranchConfigPanel, NodeConfigPanel } from "./node-config-panel"
import { WorkflowNodeIcon } from "./workflow-node-icon"
import {
  getAvailableVariables,
  normalizeNodeConfig,
  type WorkflowNodeData,
} from "./workflow-utils"

const PANEL_DEFAULT_WIDTH = 460
const PANEL_MIN_WIDTH = 320
const PANEL_MAX_WIDTH = 600

export function WorkflowConfigPanel({
  definition,
  nodeSpecs,
  selectedNodeId,
  selectedBranch,
  onClose,
  onChangeNodeData,
  onDeleteNode,
}: {
  definition: AIWorkflowDefinition
  nodeSpecs: AIWorkflowNodeSpec[]
  selectedNodeId: string
  selectedBranch: SelectedWorkflowBranch | null
  onClose: () => void
  onChangeNodeData: (nodeId: string, data: WorkflowNodeData) => void
  onDeleteNode: (nodeId: string) => void
}) {
  const [panelWidth, setPanelWidth] = useState(PANEL_DEFAULT_WIDTH)
  const selectedNode = definition.nodes.find((node) => node.id === selectedNodeId) ?? null
  const selectedNodeSpec = selectedNode
    ? nodeSpecs.find((spec) => spec.type === selectedNode.type)
    : undefined
  const availableVariables = selectedNode
    ? getAvailableVariables(definition, selectedNode.id, nodeSpecs)
    : []
  const selectedBranchItem = selectedNode && selectedBranch?.nodeId === selectedNode.id
    ? normalizeNodeConfig(selectedNode.data?.config).branches?.find((branch) => branch.id === selectedBranch.branchId) ?? null
    : null
  const panelTitle = selectedBranchItem
    ? selectedBranchItem.name || selectedBranchItem.id
    : selectedNode?.data?.title || selectedNodeSpec?.title || selectedNode?.type || ""
  const panelDescription = selectedBranchItem
    ? ""
    : selectedNodeSpec?.description || ""
  const panelIcon = selectedBranchItem ? "GitBranchIcon" : selectedNodeSpec?.icon

  if (!selectedNode) {
    return null
  }

  const updatePanelTitle = (title: string) => {
    if (selectedBranchItem && selectedBranch) {
      const config = normalizeNodeConfig(selectedNode.data?.config)
      onChangeNodeData(selectedNode.id, {
        ...(selectedNode.data ?? {}),
        config: {
          ...config,
          branches: (config.branches ?? []).map((branch) => (
            branch.id === selectedBranch.branchId ? { ...branch, name: title } : branch
          )),
        },
      })
      return
    }
    onChangeNodeData(selectedNode.id, {
      ...(selectedNode.data ?? {}),
      title,
    })
  }
  const startResize = (event: ReactPointerEvent<HTMLDivElement>) => {
    event.preventDefault()
    const startX = event.clientX
    const startWidth = panelWidth
    const maxWidth = Math.max(PANEL_MIN_WIDTH, Math.min(PANEL_MAX_WIDTH, window.innerWidth - 320))

    const resize = (moveEvent: PointerEvent) => {
      const nextWidth = startWidth + startX - moveEvent.clientX
      setPanelWidth(Math.min(Math.max(nextWidth, PANEL_MIN_WIDTH), maxWidth))
    }
    const stopResize = () => {
      window.removeEventListener("pointermove", resize)
      window.removeEventListener("pointerup", stopResize)
    }

    window.addEventListener("pointermove", resize)
    window.addEventListener("pointerup", stopResize)
  }

  return (
    <div
      className="pointer-events-none absolute inset-y-3 right-3 z-50 flex max-w-[calc(100%-1.5rem)]"
      style={{ width: panelWidth }}
    >
      <div
        role="separator"
        aria-orientation="vertical"
        aria-label="调整属性面板宽度"
        className="group pointer-events-auto absolute inset-y-2 left-0 z-10 flex w-3 -translate-x-1.5 cursor-col-resize items-center justify-center"
        onPointerDown={startResize}
      >
        <span className="h-12 w-1 rounded-full bg-slate-300/80 transition-colors group-hover:bg-blue-400" />
      </div>
      <section className="pointer-events-auto flex min-h-0 w-full flex-col overflow-hidden rounded-lg bg-white shadow-[0_18px_45px_rgba(15,23,42,0.18)] backdrop-blur">
        <ScrollArea className="min-h-0 flex-1">
          <div className="py-3">
            <div className="px-4 pb-3">
              <div className="flex min-w-0 items-center justify-between gap-3">
                <div className="flex min-w-0 flex-1 items-center gap-2.5">
                  <WorkflowNodeIcon
                    icon={panelIcon}
                    size="sm"
                    className="rounded-md shadow-none"
                  />
                  <div className="min-w-0 flex-1">
                    <Input
                      value={panelTitle}
                      placeholder={selectedBranchItem ? selectedBranchItem.id : selectedNodeSpec?.title || selectedNode.type}
                      className="h-7 w-full rounded-md border-transparent bg-transparent px-1 text-sm font-semibold leading-5 text-slate-900 shadow-none transition-colors hover:border-slate-200 hover:bg-slate-50 focus-visible:border-blue-300 focus-visible:bg-white focus-visible:ring-2 focus-visible:ring-blue-100"
                      onChange={(event) => updatePanelTitle(event.target.value)}
                    />
                  </div>
                </div>
                <Button
                  type="button"
                  variant="ghost"
                  size="icon"
                  className="size-7 shrink-0 rounded-md text-slate-500 hover:bg-slate-100 hover:text-slate-700"
                  aria-label="关闭属性面板"
                  onClick={onClose}
                >
                  <XIcon className="size-4" />
                </Button>
              </div>
              {panelDescription ? (
                <div className="mt-1 text-xs leading-5 text-slate-500">
                  {panelDescription}
                </div>
              ) : null}
            </div>
            {selectedBranchItem && selectedBranch ? (
              <ConditionBranchConfigPanel
                node={selectedNode}
                nodes={definition.nodes}
                branchId={selectedBranch.branchId}
                variables={availableVariables}
                onChange={onChangeNodeData}
              />
            ) : (
              <NodeConfigPanel
                node={selectedNode}
                nodeSpec={selectedNodeSpec}
                nodes={definition.nodes}
                availableVariables={availableVariables}
                showHeader={false}
                showConditionBranches={selectedNode.type !== "condition"}
                onChange={onChangeNodeData}
                onDelete={onDeleteNode}
              />
            )}
          </div>
        </ScrollArea>
      </section>
    </div>
  )
}
