import React, { useState, useEffect, useCallback, useRef } from "react";
import { useNavigate } from "react-router-dom";

interface WorkflowNode {
  id: string;
  type: string;
  position: { x: number; y: number };
  data: { label: string; config: Record<string, any> };
}

interface WorkflowEdge {
  id: string;
  source: string;
  target: string;
  sourceHandle?: string | null;
  targetHandle?: string | null;
}

interface Workflow {
  id: string;
  name: string;
  description: string;
  agent_id: string | null;
  nodes: WorkflowNode[];
  edges: WorkflowEdge[];
  variables: Record<string, any>;
  status: string;
  version: number;
  created_at: string;
  updated_at: string;
}

interface NodeTemplate {
  type: string;
  label: string;
  icon: string;
  color: string;
  description: string;
  config_schema: Record<string, any>;
}

const NODE_COLORS: Record<string, string> = {
  start: "#3B6D11",
  llm: "#534AB7",
  knowledge: "#185FA5",
  skill: "#0F6E56",
  condition: "#BA7517",
  http: "#D4537E",
  code: "#5F5E5A",
  agent: "#7C3AED",
  end: "#A32D2D",
};

const NODE_LABELS: Record<string, string> = {
  start: "开始",
  llm: "LLM 调用",
  knowledge: "知识库检索",
  skill: "Skill 调用",
  condition: "条件分支",
  http: "HTTP 请求",
  code: "代码执行",
  agent: "Agent 节点",
  end: "结束",
};

export default function Workflow() {
  const navigate = useNavigate();
  const [workflows, setWorkflows] = useState<Workflow[]>([]);
  const [loading, setLoading] = useState(true);
  const [view, setView] = useState<"list" | "editor">("list");
  const [currentWf, setCurrentWf] = useState<Workflow | null>(null);
  const [templates, setTemplates] = useState<NodeTemplate[]>([]);
  const [options, setOptions] = useState<Record<string, any[]>>({});
  const [selectedNode, setSelectedNode] = useState<WorkflowNode | null>(null);
  const [draggingNode, setDraggingNode] = useState<string | null>(null);
  const [connectingFrom, setConnectingFrom] = useState<string | null>(null);
  const [executeResult, setExecuteResult] = useState<any>(null);
  const [executeInput, setExecuteInput] = useState("");
  const [showExecute, setShowExecute] = useState(false);
  const [executing, setExecuting] = useState(false);
  const [nodeStatus, setNodeStatus] = useState<Record<string, string>>({});
  const [stats, setStats] = useState({ total: 0, draft: 0, published: 0, archived: 0 });
  const canvasRef = useRef<HTMLDivElement>(null);
  const dragOffset = useRef({ x: 0, y: 0 });

  const api = (window as any).api;

  // Load workflows
  const loadWorkflows = useCallback(async () => {
    setLoading(true);
    try {
      const res = await api.get("/admin/workflows/");
      if (res.code === 0) setWorkflows(res.data.items || []);
    } catch (e) { console.error(e); }
    try {
      const s = await api.get("/admin/workflows/stats");
      if (s.code === 0) setStats(s.data);
    } catch (e) { console.error(e); }
    setLoading(false);
  }, []);

  // Load templates
  const loadTemplates = useCallback(async () => {
    try {
      const res = await api.get("/admin/workflows/templates");
      if (res.code === 0) {
        setTemplates(Object.values(res.data.node_templates || {}));
        setOptions(res.data.options || {});
      }
    } catch (e) { console.error(e); }
  }, []);

  useEffect(() => { loadWorkflows(); loadTemplates(); }, []);

  // Create new workflow
  const handleCreate = async () => {
    const name = prompt("工作流名称:", "新工作流");
    if (!name) return;
    try {
      const res = await api.post("/admin/workflows/", {
        name,
        description: "",
        nodes: [
          { id: "start-1", type: "start", position: { x: 100, y: 200 }, data: { label: "开始", config: { input_variable: "input" } } },
          { id: "end-1", type: "end", position: { x: 500, y: 200 }, data: { label: "结束", config: { output_variable: "output" } } },
        ],
        edges: [],
      });
      if (res.code === 0) {
        loadWorkflows();
        handleOpenEditor(res.data);
      }
    } catch (e) { console.error(e); }
  };

  // Open editor
  const handleOpenEditor = (wf: Workflow) => {
    setCurrentWf(wf);
    setSelectedNode(null);
    setView("editor");
  };

  // Save workflow
  const handleSave = async () => {
    if (!currentWf) return;
    try {
      const res = await api.put(`/admin/workflows/${currentWf.id}`, {
        name: currentWf.name,
        description: currentWf.description,
        nodes: currentWf.nodes,
        edges: currentWf.edges,
        variables: currentWf.variables,
      });
      if (res.code === 0) {
        setCurrentWf(res.data);
        alert("保存成功");
      }
    } catch (e) { console.error(e); }
  };

  // Delete workflow
  const handleDelete = async (id: string) => {
    if (!confirm("确认删除此工作流?")) return;
    try {
      await api.del(`/admin/workflows/${id}`);
      loadWorkflows();
    } catch (e) { console.error(e); }
  };

  // Toggle publish
  const handleToggle = async (wf: Workflow) => {
    const isActive = wf.status !== "published";
    try {
      await api.put(`/admin/workflows/${wf.id}/toggle?is_active=${isActive}`);
      loadWorkflows();
    } catch (e) { console.error(e); }
  };

  // Add node to canvas
  const handleAddNode = (template: NodeTemplate) => {
    if (!currentWf) return;
    const id = `${template.type}-${Date.now()}`;
    const newNode: WorkflowNode = {
      id,
      type: template.type,
      position: { x: 250 + Math.random() * 100, y: 150 + Math.random() * 100 },
      data: {
        label: template.label,
        config: Object.fromEntries(
          Object.entries(template.config_schema).map(([k, v]: [string, any]) => [k, v.default ?? ""])
        ),
      },
    };
    setCurrentWf({ ...currentWf, nodes: [...currentWf.nodes, newNode] });
  };

  // Node drag
  const handleNodeMouseDown = (e: React.MouseEvent, nodeId: string) => {
    e.stopPropagation();
    const node = currentWf!.nodes.find(n => n.id === nodeId);
    if (!node || !canvasRef.current) return;
    const rect = canvasRef.current.getBoundingClientRect();
    dragOffset.current = {
      x: e.clientX - rect.left - node.position.x,
      y: e.clientY - rect.top - node.position.y,
    };
    setDraggingNode(nodeId);
    setSelectedNode(node);
  };

  const handleCanvasMouseMove = (e: React.MouseEvent) => {
    if (!draggingNode || !currentWf || !canvasRef.current) return;
    const rect = canvasRef.current.getBoundingClientRect();
    const x = e.clientX - rect.left - dragOffset.current.x;
    const y = e.clientY - rect.top - dragOffset.current.y;
    setCurrentWf({
      ...currentWf,
      nodes: currentWf.nodes.map(n => n.id === draggingNode ? { ...n, position: { x, y } } : n),
    });
  };

  const handleCanvasMouseUp = () => { setDraggingNode(null); };

  // Canvas click (deselect / cancel connecting)
  const handleCanvasClick = (e: React.MouseEvent) => {
    if (e.target === e.currentTarget) {
      setSelectedNode(null);
      setConnectingFrom(null);
    }
  };

  // Start connecting from a node
  const handleStartConnect = (e: React.MouseEvent, nodeId: string) => {
    e.stopPropagation();
    setConnectingFrom(nodeId);
  };

  // Complete connection to a node
  const handleEndConnect = (e: React.MouseEvent, nodeId: string) => {
    e.stopPropagation();
    if (!connectingFrom || !currentWf) return;
    if (connectingFrom === nodeId) { setConnectingFrom(null); return; }
    // Check if edge already exists
    const exists = currentWf.edges.some(e => e.source === connectingFrom && e.target === nodeId);
    if (exists) { setConnectingFrom(null); return; }
    const newEdge: WorkflowEdge = {
      id: `e-${Date.now()}`,
      source: connectingFrom,
      target: nodeId,
    };
    setCurrentWf({ ...currentWf, edges: [...currentWf.edges, newEdge] });
    setConnectingFrom(null);
  };

  // Delete edge
  const handleDeleteEdge = (edgeId: string) => {
    if (!currentWf) return;
    setCurrentWf({ ...currentWf, edges: currentWf.edges.filter(e => e.id !== edgeId) });
  };

  // Delete selected node
  const handleDeleteNode = () => {
    if (!selectedNode || !currentWf) return;
    const nodeId = selectedNode.id;
    setCurrentWf({
      ...currentWf,
      nodes: currentWf.nodes.filter(n => n.id !== nodeId),
      edges: currentWf.edges.filter(e => e.source !== nodeId && e.target !== nodeId),
    });
    setSelectedNode(null);
  };

  // Update node config
  const handleConfigChange = (key: string, value: any) => {
    if (!selectedNode || !currentWf) return;
    const updatedNodes = currentWf.nodes.map(n =>
      n.id === selectedNode.id
        ? { ...n, data: { ...n.data, label: n.data.label, config: { ...n.data.config, [key]: value } } }
        : n
    );
    setCurrentWf({ ...currentWf, nodes: updatedNodes });
    setSelectedNode(updatedNodes.find(n => n.id === selectedNode.id) || null);
  };

  // Execute workflow (supports streaming via WebSocket when available)
  const handleExecute = async () => {
    if (!currentWf) return;
    setExecuting(true);
    setExecuteResult(null);
    setNodeStatus({});

    // Highlight running nodes in real-time
    const wsProtocol = window.location.protocol === "https:" ? "wss:" : "ws:";
    const wsHost = window.location.host;
    const wsUrl = `${wsProtocol}//${wsHost}/app/api/admin/workflows/${currentWf.id}/execute-stream`;

    let ws: WebSocket | null = null;
    let result: any = null;

    try {
      // Connect WebSocket
      ws = new WebSocket(wsUrl);
      ws.onmessage = (event) => {
        try {
          const msg = JSON.parse(event.data);
          if (msg.type === "node_start") {
            setNodeStatus(prev => ({ ...prev, [msg.node_id]: "running" }));
            // Add to log
            setExecuteResult((prev: any) => ({
              ...prev,
              log: [...(prev?.log || []), {
                node_id: msg.node_id,
                node_label: msg.node_label,
                node_type: msg.node_type,
                success: null,
              }],
            }));
          } else if (msg.type === "node_complete") {
            setNodeStatus(prev => ({ ...prev, [msg.node_id]: "completed" }));
            // Update log entry
            setExecuteResult((prev: any) => {
              const log = (prev?.log || []).map((l: any) =>
                l.node_id === msg.node_id ? { ...l, success: true, output_preview: msg.output_preview } : l
              );
              return { ...prev, log };
            });
          } else if (msg.type === "node_error") {
            setNodeStatus(prev => ({ ...prev, [msg.node_id]: "failed" }));
            setExecuteResult((prev: any) => {
              const log = (prev?.log || []).map((l: any) =>
                l.node_id === msg.node_id ? { ...l, success: false, error: msg.error } : l
              );
              return { ...prev, log };
            });
          } else if (msg.type === "workflow_complete") {
            result = msg.data;
            setExecuteResult(msg.data);
          } else if (msg.type === "workflow_error") {
            result = msg.data;
            setExecuteResult(msg.data);
          }
        } catch (e) { /* ignore parse errors */ }
      };

      ws.onopen = () => {
        ws?.send(JSON.stringify({
          input_text: executeInput,
          token: (window as any).api?.getToken?.() || "",
        }));
      };

      // Also call REST API as fallback
      const res = await api.post(`/admin/workflows/${currentWf.id}/execute`, {
        input_text: executeInput,
      });
      if (res.code === 0 && !result) {
        setExecuteResult(res.data);
      }
    } catch (e) {
      console.error(e);
      // Try REST API fallback
      try {
        const res = await api.post(`/admin/workflows/${currentWf.id}/execute`, {
          input_text: executeInput,
        });
        if (res.code === 0) setExecuteResult(res.data);
      } catch (e2) { console.error(e2); }
    } finally {
      setExecuting(false);
      setTimeout(() => {
        if (ws?.readyState === WebSocket.OPEN) ws.close();
      }, 1000);
    }
  };

  // SVG edge path (bezier curve)
  const getEdgePath = (src: WorkflowNode, tgt: WorkflowNode) => {
    const x1 = src.position.x + 90;
    const y1 = src.position.y + 25;
    const x2 = tgt.position.x;
    const y2 = tgt.position.y + 25;
    const dx = Math.abs(x2 - x1) * 0.5;
    return `M ${x1} ${y1} C ${x1 + dx} ${y1}, ${x2 - dx} ${y2}, ${x2} ${y2}`;
  };

  // ============================================================
  // LIST VIEW
  // ============================================================
  if (view === "list") {
    return (
      <div style={{ padding: "24px", color: "#1A1F36", minHeight: "100vh" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "24px" }}>
          <div>
            <h2 style={{ margin: 0, fontSize: "20px", color: "#1A1F36" }}>Agent 可视化编排</h2>
            <p style={{ margin: "4px 0 0", color: "#6B7280", fontSize: "13px" }}>拖拽式 DAG 工作流编排引擎 · LLM/知识库/Skill/条件/HTTP/代码/Agent 节点 · 并行多 Agent 协作</p>
          </div>
          <button onClick={handleCreate} style={btnPrimary}>+ 新建工作流</button>
        </div>

        {/* Stats */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "16px", marginBottom: "24px" }}>
          {[
            { label: "总工作流", value: stats.total, color: "#534AB7" },
            { label: "草稿", value: stats.draft, color: "#BA7517" },
            { label: "已发布", value: stats.published, color: "#3B6D11" },
            { label: "已归档", value: stats.archived, color: "#5F5E5A" },
          ].map(s => (
            <div key={s.label} style={{ ...statCard, borderLeft: `3px solid ${s.color}` }}>
              <div style={{ fontSize: "24px", fontWeight: 600, color: "#1A1F36" }}>{s.value}</div>
              <div style={{ fontSize: "12px", color: "#6B7280" }}>{s.label}</div>
            </div>
          ))}
        </div>

        {/* Workflow list */}
        <div style={{ background: "#FFFFFF", borderRadius: "12px", overflow: "hidden" }}>
          <table style={{ width: "100%", borderCollapse: "collapse" }}>
            <thead>
              <tr style={{ borderBottom: "1px solid rgba(0,0,0,0.08)" }}>
                {["名称", "状态", "节点数", "版本", "更新时间", "操作"].map(h => (
                  <th key={h} style={{ padding: "12px 16px", textAlign: "left", fontSize: "13px", color: "#6B7280", fontWeight: 500 }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {loading ? (
                <tr><td colSpan={6} style={{ padding: "40px", textAlign: "center", color: "#9CA3AF" }}>加载中...</td></tr>
              ) : workflows.length === 0 ? (
                <tr><td colSpan={6} style={{ padding: "40px", textAlign: "center", color: "#9CA3AF" }}>暂无工作流，点击"新建工作流"开始</td></tr>
              ) : workflows.map(wf => (
                <tr key={wf.id} style={{ borderBottom: "1px solid rgba(0,0,0,0.08)" }}>
                  <td style={{ padding: "12px 16px" }}>
                    <div style={{ color: "#1A1F36", fontWeight: 500 }}>{wf.name}</div>
                    <div style={{ color: "#9CA3AF", fontSize: "12px" }}>{wf.description || "—"}</div>
                  </td>
                  <td style={{ padding: "12px 16px" }}>
                    <span style={statusBadge(wf.status)}>{wf.status === "published" ? "已发布" : wf.status === "archived" ? "已归档" : "草稿"}</span>
                  </td>
                  <td style={{ padding: "12px 16px", color: "#9CA3AF" }}>{wf.nodes?.length || 0}</td>
                  <td style={{ padding: "12px 16px", color: "#9CA3AF" }}>v{wf.version}</td>
                  <td style={{ padding: "12px 16px", color: "#6B7280", fontSize: "12px" }}>{wf.updated_at?.slice(0, 19).replace("T", " ") || "—"}</td>
                  <td style={{ padding: "12px 16px" }}>
                    <button onClick={() => handleOpenEditor(wf)} style={btnSmall}>编辑</button>
                    <button onClick={() => handleToggle(wf)} style={{ ...btnSmall, marginLeft: "4px" }}>{wf.status === "published" ? "归档" : "发布"}</button>
                    <button onClick={() => handleDelete(wf.id)} style={{ ...btnSmall, marginLeft: "4px", color: "#F09595" }}>删除</button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    );
  }

  // ============================================================
  // EDITOR VIEW
  // ============================================================
  if (!currentWf) return null;

  return (
    <div style={{ display: "flex", flexDirection: "column", height: "100vh", background: "#F8F9FC", color: "#1A1F36" }}>
      {/* Toolbar */}
      <div style={{ display: "flex", alignItems: "center", padding: "8px 16px", background: "#FFFFFF", borderBottom: "1px solid rgba(0,0,0,0.08)", gap: "8px" }}>
        <button onClick={() => { setView("list"); loadWorkflows(); }} style={btnSmall}>← 返回</button>
        <input
          value={currentWf.name}
          onChange={e => setCurrentWf({ ...currentWf, name: e.target.value })}
          style={{ background: "transparent", border: "1px solid rgba(0,0,0,0.08)", borderRadius: "6px", padding: "4px 12px", color: "#1A1F36", fontSize: "14px", width: "200px" }}
        />
        <span style={{ color: "#9CA3AF", fontSize: "12px" }}>v{currentWf.version} · {currentWf.nodes.length} 节点 · {currentWf.edges.length} 连线</span>
        <div style={{ flex: 1 }} />
        <button onClick={handleSave} style={btnPrimary}>保存</button>
        <button onClick={() => setShowExecute(!showExecute)} style={{ ...btnSmall, borderColor: "#3B6D11" }}>执行</button>
        {selectedNode && <button onClick={handleDeleteNode} style={{ ...btnSmall, color: "#F09595" }}>删除节点</button>}
      </div>

      {/* Execute panel */}
      {showExecute && (
        <div style={{ padding: "12px 16px", background: "#FFFFFF", borderBottom: "1px solid rgba(0,0,0,0.08)" }}>
          <div style={{ display: "flex", gap: "8px", alignItems: "flex-end" }}>
            <div style={{ flex: 1 }}>
              <label style={{ fontSize: "12px", color: "#6B7280" }}>输入文本</label>
              <textarea
                value={executeInput}
                onChange={e => setExecuteInput(e.target.value)}
                placeholder="输入测试文本..."
                style={{ width: "100%", background: "#F8F9FC", border: "1px solid rgba(0,0,0,0.08)", borderRadius: "6px", padding: "8px", color: "#1A1F36", fontSize: "13px", minHeight: "40px", resize: "vertical" }}
              />
            </div>
            <button onClick={handleExecute} style={{ ...btnPrimary, opacity: executing ? 0.6 : 1 }} disabled={executing}>
              {executing ? "执行中..." : "执行工作流"}
            </button>
          </div>
          {executing && (
            <div style={{ marginTop: "8px", fontSize: "12px", color: "#534AB7" }}>
              ⏳ 工作流执行中...
            </div>
          )}
          {executeResult && (
            <div style={{ marginTop: "12px" }}>
              <div style={{ fontSize: "12px", color: "#6B7280", marginBottom: "4px" }}>执行日志:</div>
              {executeResult.log?.map((l: any, i: number) => (
                <div key={i} style={{ fontSize: "12px", padding: "4px 8px", background: l.success ? "rgba(59,109,17,0.15)" : "rgba(163,45,45,0.15)", borderRadius: "4px", marginBottom: "2px" }}>
                  <span style={{ color: l.success ? "#97C459" : "#F09595" }}>[{l.node_type}]</span>{" "}
                  <span style={{ color: "#9CA3AF" }}>{l.node_label}</span>
                  {l.output_preview && <span style={{ color: "#9CA3AF" }}> → {l.output_preview.slice(0, 100)}</span>}
                  {l.error && <span style={{ color: "#F09595" }}> → {l.error}</span>}
                </div>
              ))}
              <div style={{ marginTop: "8px", padding: "8px", background: "#F8F9FC", borderRadius: "6px", border: "1px solid rgba(0,0,0,0.08)" }}>
                <div style={{ fontSize: "12px", color: "#6B7280", marginBottom: "4px" }}>最终输出:</div>
                <pre style={{ margin: 0, color: "#97C459", fontSize: "13px", whiteSpace: "pre-wrap" }}>{executeResult.output}</pre>
              </div>
            </div>
          )}
        </div>
      )}

      {/* Main area: palette | canvas | config */}
      <div style={{ display: "flex", flex: 1, overflow: "hidden" }}>
        {/* Node palette */}
        <div style={{ width: "180px", background: "#FFFFFF", borderRight: "1px solid rgba(0,0,0,0.08)", padding: "12px", overflowY: "auto" }}>
          <div style={{ fontSize: "12px", color: "#9CA3AF", marginBottom: "8px", textTransform: "uppercase" }}>节点类型</div>
          {Object.entries(NODE_LABELS).map(([type, label]) => (
            <div
              key={type}
              onClick={() => {
                const tmpl = templates.find(t => t.type === type);
                if (tmpl) handleAddNode(tmpl);
                else handleAddNode({ type, label, icon: "", color: NODE_COLORS[type], description: "", config_schema: {} });
              }}
              style={{
                padding: "8px 12px",
                marginBottom: "4px",
                borderRadius: "6px",
                cursor: "pointer",
                background: "#FFFFFF",
                border: "1px solid rgba(0,0,0,0.08)",
                borderLeft: `3px solid ${NODE_COLORS[type]}`,
                transition: "background 0.2s",
              }}
              onMouseEnter={e => (e.currentTarget.style.background = "#E8ECF4")}
              onMouseLeave={e => (e.currentTarget.style.background = "#FFFFFF")}
            >
              <span style={{ color: "#1A1F36", fontSize: "13px" }}>{label}</span>
            </div>
          ))}
        </div>

        {/* Canvas */}
        <div
          ref={canvasRef}
          onClick={handleCanvasClick}
          onMouseMove={handleCanvasMouseMove}
          onMouseUp={handleCanvasMouseUp}
          style={{
            flex: 1,
            position: "relative",
            overflow: "hidden",
            background: "#F8F9FC",
          }}
        >
          {/* SVG for edges */}
          <svg style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%", pointerEvents: "none" }}>
            {currentWf.edges.map(edge => {
              const src = currentWf.nodes.find(n => n.id === edge.source);
              const tgt = currentWf.nodes.find(n => n.id === edge.target);
              if (!src || !tgt) return null;
              return (
                <g key={edge.id} style={{ pointerEvents: "auto" }}>
                  <path d={getEdgePath(src, tgt)} fill="none" stroke="#534AB7" strokeWidth={2} markerEnd="url(#arrowhead)" />
                  <circle cx={(src.position.x + tgt.position.x + 90) / 2} cy={(src.position.y + tgt.position.y + 25) / 2} r={8} fill="#FFFFFF" stroke="#534AB7" strokeWidth={1} style={{ cursor: "pointer" }} onClick={() => handleDeleteEdge(edge.id)} />
                  <text x={(src.position.x + tgt.position.x + 90) / 2} y={(src.position.y + tgt.position.y + 25) / 2 + 3} textAnchor="middle" fill="#F09595" fontSize="10" style={{ pointerEvents: "none" }}>x</text>
                </g>
              );
            })}
            <defs>
              <marker id="arrowhead" markerWidth="8" markerHeight="8" refX="7" refY="3" orient="auto">
                <polygon points="0 0, 8 3, 0 6" fill="#534AB7" />
              </marker>
            </defs>
          </svg>

          {/* Nodes */}
          {currentWf.nodes.map(node => {
            const isSelected = selectedNode?.id === node.id;
            const status = nodeStatus[node.id];
            const baseColor = NODE_COLORS[node.type] || "#5F5E5A";
            const color = status === "running" ? "#58a6ff" : status === "completed" ? "#3fb950" : status === "failed" ? "#f85149" : baseColor;
            const borderWidth = isSelected || status ? 2 : 1;
            return (
              <div
                key={node.id}
                onMouseDown={e => handleNodeMouseDown(e, node.id)}
                onClick={e => { e.stopPropagation(); setSelectedNode(node); }}
                style={{
                  position: "absolute",
                  left: node.position.x,
                  top: node.position.y,
                  width: "90px",
                  minHeight: "50px",
                  background: "#FFFFFF",
                  border: `${borderWidth}px solid ${color}`,
                  borderRadius: "8px",
                  cursor: draggingNode === node.id ? "grabbing" : "grab",
                  padding: "8px",
                  textAlign: "center",
                  boxShadow: isSelected ? `0 0 12px ${color}40` : "none",
                  zIndex: isSelected ? 10 : 1,
                }}
              >
                <div style={{ fontSize: "11px", color, fontWeight: 600, marginBottom: "2px" }}>{NODE_LABELS[node.type] || node.type}</div>
                <div style={{ fontSize: "11px", color: "#9CA3AF" }}>{node.data.label}</div>
                {/* Connection handles */}
                <div
                  onClick={e => connectingFrom ? handleEndConnect(e, node.id) : handleStartConnect(e, node.id)}
                  style={{
                    position: "absolute", right: -6, top: "50%", transform: "translateY(-50%)",
                    width: 12, height: 12, borderRadius: "50%",
                    background: connectingFrom === node.id ? "#97C459" : "#534AB7",
                    cursor: "pointer", border: "2px solid #1A1F36",
                  }}
                />
                <div
                  onClick={e => connectingFrom && handleEndConnect(e, node.id)}
                  style={{
                    position: "absolute", left: -6, top: "50%", transform: "translateY(-50%)",
                    width: 12, height: 12, borderRadius: "50%",
                    background: "#9CA3AF", cursor: "pointer", border: "2px solid #FFFFFF",
                  }}
                />
              </div>
            );
          })}

          {connectingFrom && (
            <div style={{ position: "absolute", top: 12, left: "50%", transform: "translateX(-50%)", background: "#534AB7", color: "#fff", padding: "4px 12px", borderRadius: "6px", fontSize: "12px" }}>
              点击目标节点的右端口完成连线
            </div>
          )}
        </div>

        {/* Config panel */}
        <div style={{ width: "280px", background: "#FFFFFF", borderLeft: "1px solid rgba(0,0,0,0.08)", padding: "16px", overflowY: "auto" }}>
          {selectedNode ? (
            <>
              <div style={{ fontSize: "14px", fontWeight: 600, color: "#1A1F36", marginBottom: "4px" }}>
                {NODE_LABELS[selectedNode.type] || selectedNode.type}
              </div>
              <div style={{ fontSize: "12px", color: "#9CA3AF", marginBottom: "16px" }}>节点 ID: {selectedNode.id}</div>

              <div style={{ marginBottom: "12px" }}>
                <label style={{ fontSize: "12px", color: "#6B7280" }}>显示名称</label>
                <input
                  value={selectedNode.data.label}
                  onChange={e => {
                    const updated = currentWf.nodes.map(n => n.id === selectedNode.id ? { ...n, data: { ...n.data, label: e.target.value } } : n);
                    setCurrentWf({ ...currentWf, nodes: updated });
                    setSelectedNode({ ...selectedNode, data: { ...selectedNode.data, label: e.target.value } });
                  }}
                  style={configInput}
                />
              </div>

              {/* Config fields */}
              {Object.entries(templates.find(t => t.type === selectedNode.type)?.config_schema || {}).map(([key, schema]: [string, any]) => (
                <div key={key} style={{ marginBottom: "12px" }}>
                  <label style={{ fontSize: "12px", color: "#6B7280" }}>{schema.label || key}</label>
                  {schema.help && <div style={{ fontSize: "11px", color: "#9CA3AF", marginBottom: "2px" }}>{schema.help}</div>}
                  {schema.type === "textarea" ? (
                    <textarea
                      value={selectedNode.data.config[key] ?? ""}
                      onChange={e => handleConfigChange(key, e.target.value)}
                      style={{ ...configInput, minHeight: "60px", resize: "vertical" }}
                    />
                  ) : schema.type === "select" && schema.options_from ? (
                    <select
                      value={selectedNode.data.config[key] ?? ""}
                      onChange={e => handleConfigChange(key, e.target.value)}
                      style={configInput}
                    >
                      <option value="">-- 选择 --</option>
                      {(options[schema.options_from] || []).map((opt: any) => (
                        <option key={opt.value} value={opt.value}>{opt.label}</option>
                      ))}
                    </select>
                  ) : schema.type === "select" && schema.options ? (
                    <select
                      value={selectedNode.data.config[key] ?? ""}
                      onChange={e => handleConfigChange(key, e.target.value)}
                      style={configInput}
                    >
                      <option value="">-- 选择 --</option>
                      {schema.options.map((opt: string) => (
                        <option key={opt} value={opt}>{opt}</option>
                      ))}
                    </select>
                  ) : (
                    <input
                      type={schema.type === "number" ? "number" : "text"}
                      value={selectedNode.data.config[key] ?? ""}
                      onChange={e => handleConfigChange(key, schema.type === "number" ? parseFloat(e.target.value) || 0 : e.target.value)}
                      style={configInput}
                    />
                  )}
                </div>
              ))}
            </>
          ) : (
            <div style={{ color: "#9CA3AF", fontSize: "13px", textAlign: "center", marginTop: "40px" }}>
              选择一个节点查看配置
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

// ============================================================
// Styles
// ============================================================
const btnPrimary: React.CSSProperties = {
  background: "#534AB7", color: "#fff", border: "none", borderRadius: "6px",
  padding: "6px 16px", cursor: "pointer", fontSize: "13px", fontWeight: 500,
};

const btnSmall: React.CSSProperties = {
  background: "transparent", color: "#9CA3AF", border: "1px solid rgba(0,0,0,0.08)", borderRadius: "4px",
  padding: "4px 10px", cursor: "pointer", fontSize: "12px",
};

const statCard: React.CSSProperties = {
  background: "#FFFFFF", borderRadius: "8px", padding: "16px", border: "1px solid rgba(0,0,0,0.08)",
};

const configInput: React.CSSProperties = {
  width: "100%", background: "#F8F9FC", border: "1px solid rgba(0,0,0,0.08)",
  borderRadius: "4px", padding: "6px 8px", color: "#1A1F36", fontSize: "13px",
  outline: "none",
};

function statusBadge(status: string): React.CSSProperties {
  const colors: Record<string, string> = {
    published: "#3B6D11",
    draft: "#BA7517",
    archived: "#5F5E5A",
  };
  const bg = colors[status] || "#5F5E5A";
  return {
    background: `${bg}20`, color: bg, padding: "2px 8px",
    borderRadius: "4px", fontSize: "12px",
  };
}