import { DragEvent, useCallback, useMemo, useState } from "react";
import {
  Background,
  Controls,
  Handle,
  MiniMap,
  Position,
  ReactFlow,
  ReactFlowProvider,
  SelectionMode,
  addEdge,
  type Connection,
  type Edge,
  type Node,
  type NodeProps,
  type NodeTypes,
  useEdgesState,
  useNodesState,
  useReactFlow,
} from "@xyflow/react";

type ParameterValue = number | string;

type ParameterDefinition = {
  label: string;
  unit?: string;
  default: ParameterValue;
};

type ComponentDefinition = {
  type: string;
  label: string;
  modelType: string;
  ports: string[];
  parameters: Record<string, ParameterDefinition>;
};

type SimulationNodeData = {
  label: string;
  componentType: string;
  modelType: string;
  ports: string[];
  parameters: Record<string, ParameterValue>;
};

type SimulationNode = Node<SimulationNodeData, "simulationComponent">;
type SimulationEdge = Edge;

type SimulationConfig = {
  t_start: number;
  t_stop: number;
  step: number;
  max_step: number;
  method: string;
};

type ProjectNodePayload = {
  id: string;
  type: "simulationComponent";
  position: {
    x: number;
    y: number;
  };
  data: SimulationNodeData;
};

type ProjectEdgePayload = {
  id: string;
  source: string;
  target: string;
  sourceHandle: string | null;
  targetHandle: string | null;
};

type ReactFlowProjectPayload = {
  name: string;
  nodes: ProjectNodePayload[];
  edges: ProjectEdgePayload[];
  simulation: SimulationConfig;
};

type SaveProjectResult = {
  id: string;
  componentCount: number;
  connectionCount: number;
};

type SimulationResult = {
  success: boolean;
  message: string;
  final: {
    time: number;
    tankPressure: number;
    tankTemperature: number;
    cylinderPressure: number;
    cylinderTemperature: number;
  };
  series: Record<string, number[]>;
  artifacts: Record<string, string>;
  networkSummary: string;
};

const defaultSimulationConfig: SimulationConfig = {
  t_start: 0,
  t_stop: 2,
  step: 0.1,
  max_step: 0.005,
  method: "BDF",
};

const componentDefinitions: ComponentDefinition[] = [
  {
    type: "cylinder",
    label: "气瓶",
    modelType: "cylinder",
    ports: ["port_b"],
    parameters: {
      volume: { label: "容积", unit: "m3", default: 0.01 },
      p0: { label: "初始压力", unit: "Pa", default: 35000000 },
      T0: { label: "初始温度", unit: "K", default: 300 },
    },
  },
  {
    type: "tank",
    label: "贮箱",
    modelType: "tank",
    ports: ["port_a"],
    parameters: {
      volume: { label: "容积", unit: "m3", default: 0.1 },
      p0: { label: "初始压力", unit: "Pa", default: 100000 },
      T0: { label: "初始温度", unit: "K", default: 300 },
    },
  },
  {
    type: "pipe",
    label: "管段",
    modelType: "pipe",
    ports: ["port_a", "port_b"],
    parameters: {
      length: { label: "长度", unit: "m", default: 5 },
      diameter: { label: "直径", unit: "m", default: 0.02 },
      lambda_darcy: { label: "摩阻系数", default: 0.02 },
      p0: { label: "初始压力", unit: "Pa", default: 100000 },
      T0: { label: "初始温度", unit: "K", default: 300 },
    },
  },
  {
    type: "orifice",
    label: "孔板/阀门",
    modelType: "orifice",
    ports: ["port_a", "port_b"],
    parameters: {
      K: { label: "流量系数", default: 0.00001 },
      opening: { label: "开度", default: 1 },
    },
  },
  {
    type: "tee",
    label: "三通",
    modelType: "tee",
    ports: ["port_in", "port_out1", "port_out2"],
    parameters: {},
  },
];

const nextNodeNumberByType: Record<string, number> = {};

function defaultParameters(definition: ComponentDefinition) {
  return Object.fromEntries(
    Object.entries(definition.parameters).map(([key, parameter]) => [
      key,
      parameter.default,
    ]),
  );
}

function buildNodeData(definition: ComponentDefinition): SimulationNodeData {
  return {
    label: definition.label,
    componentType: definition.type,
    modelType: definition.modelType,
    ports: definition.ports,
    parameters: defaultParameters(definition),
  };
}

function SimulationComponentNode({ data, selected }: NodeProps<SimulationNode>) {
  const inputPorts = data.ports.filter((port) => port.includes("in") || port === "port_a");
  const outputPorts = data.ports.filter((port) => !inputPorts.includes(port));
  const singlePorts = data.ports.length === 1 ? data.ports : [];

  return (
    <div className={`sim-node sim-node-${data.componentType} ${selected ? "selected" : ""}`}>
      <div className="node-symbol" aria-hidden="true">
        {symbolForComponent(data.componentType)}
      </div>
      <div className="node-label">{data.label}</div>
      {inputPorts.map((port, index) => (
        <Handle
          className="port-handle"
          id={port}
          key={port}
          position={Position.Left}
          style={{ top: `${35 + index * 24}%` }}
          type="target"
        />
      ))}
      {outputPorts.map((port, index) => (
        <Handle
          className="port-handle"
          id={port}
          key={port}
          position={Position.Right}
          style={{ top: `${35 + index * 24}%` }}
          type="source"
        />
      ))}
      {singlePorts.map((port) => (
        <Handle
          className="port-handle"
          id={port}
          key={port}
          position={Position.Right}
          type="source"
        />
      ))}
    </div>
  );
}

function symbolForComponent(type: string) {
  if (type === "cylinder") {
    return <div className="symbol-cylinder" />;
  }
  if (type === "tank") {
    return <div className="symbol-tank" />;
  }
  if (type === "pipe") {
    return <div className="symbol-pipe" />;
  }
  if (type === "orifice") {
    return <div className="symbol-orifice" />;
  }
  return <div className="symbol-tee" />;
}

function FlowWorkbench() {
  const [nodes, setNodes, onNodesChange] = useNodesState<SimulationNode>([]);
  const [edges, setEdges, onEdgesChange] = useEdgesState<SimulationEdge>([]);
  const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null);
  const [projectName, setProjectName] = useState("demo-system");
  const [simulationConfig, setSimulationConfig] = useState<SimulationConfig>(
    defaultSimulationConfig,
  );
  const [xmlText, setXmlText] = useState("");
  const [statusText, setStatusText] = useState("后端待调用");
  const [simulationResult, setSimulationResult] = useState<SimulationResult | null>(null);
  const [busy, setBusy] = useState(false);
  const reactFlow = useReactFlow<SimulationNode, SimulationEdge>();

  const nodeTypes = useMemo<NodeTypes>(
    () => ({ simulationComponent: SimulationComponentNode }),
    [],
  );

  const selectedNode = nodes.find((node) => node.id === selectedNodeId) ?? null;
  const selectedDefinition = selectedNode
    ? componentDefinitions.find((definition) => definition.type === selectedNode.data.componentType)
    : null;

  const buildCurrentProject = useCallback(
    () => buildProjectPayload(projectName, nodes, edges, simulationConfig),
    [edges, nodes, projectName, simulationConfig],
  );

  const onConnect = useCallback(
    (connection: Connection) => {
      setEdges((currentEdges) =>
        addEdge(
          {
            ...connection,
            id: `edge-${connection.source}-${connection.sourceHandle}-${connection.target}-${connection.targetHandle}-${Date.now()}`,
          },
          currentEdges,
        ),
      );
    },
    [setEdges],
  );

  const onDragStart = (event: DragEvent<HTMLButtonElement>, type: string) => {
    event.dataTransfer.setData("application/system-component", type);
    event.dataTransfer.effectAllowed = "move";
  };

  const onDrop = useCallback(
    (event: DragEvent<HTMLDivElement>) => {
      event.preventDefault();
      const type = event.dataTransfer.getData("application/system-component");
      const definition = componentDefinitions.find((item) => item.type === type);
      if (!definition) {
        return;
      }

      const position = reactFlow.screenToFlowPosition({
        x: event.clientX,
        y: event.clientY,
      });
      const id = takeNextNodeId(definition.type);
      const node: SimulationNode = {
        id,
        type: "simulationComponent",
        position,
        data: buildNodeData(definition),
      };
      setNodes((currentNodes) => [...currentNodes, node]);
      setSelectedNodeId(id);
    },
    [reactFlow, setNodes],
  );

  const updateSelectedNode = (updater: (node: SimulationNode) => SimulationNode) => {
    if (!selectedNodeId) {
      return;
    }
    setNodes((currentNodes) =>
      currentNodes.map((node) => (node.id === selectedNodeId ? updater(node) : node)),
    );
  };

  const updateSimulationConfig = (key: keyof SimulationConfig, value: string) => {
    setSimulationConfig((current) => ({
      ...current,
      [key]: key === "method" ? value : Number(value),
    }));
  };

  const generateXml = async () => {
    await runBusyAction("正在调用后端生成 XML...", async () => {
      const xml = await postJsonText("/api/reactflow/system-xml", buildCurrentProject());
      setXmlText(xml);
      setStatusText(`XML 已生成：${nodes.length} 个组件，${edges.length} 条连接`);
    });
  };

  const downloadXml = async () => {
    await runBusyAction("正在生成并下载 XML...", async () => {
      const xml = await postJsonText("/api/reactflow/system-xml", buildCurrentProject());
      setXmlText(xml);
      downloadText(`${safeFilename(projectName)}.xml`, xml);
      setStatusText("XML 已下载");
    });
  };

  const saveProject = async () => {
    await runBusyAction("正在保存工程...", async () => {
      const project = buildCurrentProject();
      const result = await postJson<SaveProjectResult>(
        `/api/reactflow/projects/${encodeURIComponent(project.name)}`,
        project,
      );
      setStatusText(
        `工程已保存：${result.id}，${result.componentCount} 个组件，${result.connectionCount} 条连接`,
      );
    });
  };

  const loadProject = async () => {
    await runBusyAction("正在加载工程...", async () => {
      const projectId = projectName.trim() || "untitled";
      const project = await getJson<ReactFlowProjectPayload>(
        `/api/reactflow/projects/${encodeURIComponent(projectId)}`,
      );
      const loadedNodes = project.nodes.map(normalizeLoadedNode);
      setNodes(loadedNodes);
      setEdges(project.edges.map(normalizeLoadedEdge));
      setProjectName(project.name || projectId);
      setSimulationConfig({ ...defaultSimulationConfig, ...project.simulation });
      setSelectedNodeId(null);
      setSimulationResult(null);
      setXmlText("");
      syncNextNodeNumbers(loadedNodes);
      setStatusText(`工程已加载：${loadedNodes.length} 个组件，${project.edges.length} 条连接`);
      window.requestAnimationFrame(() => reactFlow.fitView());
    });
  };

  const runSimulation = async () => {
    await runBusyAction("正在调用 PythonModels 仿真...", async () => {
      const result = await postJson<SimulationResult>(
        "/api/reactflow/simulate-testmodel",
        buildCurrentProject(),
      );
      setSimulationResult(result);
      setStatusText(result.success ? "仿真完成" : `仿真返回：${result.message}`);
    });
  };

  async function runBusyAction(message: string, action: () => Promise<void>) {
    setBusy(true);
    setStatusText(message);
    try {
      await action();
    } catch (error) {
      setStatusText(`操作失败：${formatError(error)}`);
    } finally {
      setBusy(false);
    }
  }

  return (
    <div className="app-shell">
      <header className="topbar">
        <div>
          <div className="product-name">System Simulation Flow</div>
          <div className="product-meta">React Flow 建模与仿真 MVP</div>
        </div>
        <div className="topbar-actions">
          <label className="project-name-field">
            <span>工程</span>
            <input value={projectName} onChange={(event) => setProjectName(event.target.value)} />
          </label>
          <button className="secondary-button" onClick={() => reactFlow.fitView()} type="button">
            适配视图
          </button>
          <button className="secondary-button" disabled={busy} onClick={saveProject} type="button">
            保存工程
          </button>
          <button className="secondary-button" disabled={busy} onClick={loadProject} type="button">
            加载工程
          </button>
          <button className="secondary-button" disabled={busy} onClick={generateXml} type="button">
            生成 XML
          </button>
          <button className="secondary-button" disabled={busy} onClick={downloadXml} type="button">
            下载 XML
          </button>
          <button className="primary-button" disabled={busy} onClick={runSimulation} type="button">
            运行仿真
          </button>
        </div>
      </header>

      <main className="workbench">
        <aside className="palette">
          <div className="panel-title">组件库</div>
          <div className="palette-list">
            {componentDefinitions.map((definition) => (
              <button
                className="palette-item"
                draggable
                key={definition.type}
                onDragStart={(event) => onDragStart(event, definition.type)}
                type="button"
              >
                <span className={`palette-icon icon-${definition.type}`} />
                <span>
                  <strong>{definition.label}</strong>
                  <small>{definition.ports.join(" / ") || "无端口"}</small>
                </span>
              </button>
            ))}
          </div>
        </aside>

        <section
          className="flow-canvas"
          onDragOver={(event) => {
            event.preventDefault();
            event.dataTransfer.dropEffect = "move";
          }}
          onDrop={onDrop}
        >
          <ReactFlow
            colorMode="light"
            edges={edges}
            fitView
            nodeTypes={nodeTypes}
            nodes={nodes}
            onConnect={onConnect}
            onEdgesChange={onEdgesChange}
            onNodeClick={(_, node) => setSelectedNodeId(node.id)}
            onNodesChange={onNodesChange}
            onPaneClick={() => setSelectedNodeId(null)}
            onSelectionChange={({ nodes: selectedNodes }) =>
              setSelectedNodeId(selectedNodes.length === 1 ? selectedNodes[0].id : null)
            }
            panActivationKeyCode="Space"
            panOnDrag={[1]}
            selectionMode={SelectionMode.Partial}
            selectionOnDrag
            zoomOnDoubleClick={false}
          >
            <Background gap={18} />
            <MiniMap pannable zoomable />
            <Controls />
          </ReactFlow>
        </section>

        <aside className="properties">
          <div className="status-strip">{statusText}</div>

          <div className="panel-title">组件参数</div>
          {selectedNode && selectedDefinition ? (
            <div className="parameter-form">
              <label className="field">
                <span>组件名称</span>
                <input
                  value={selectedNode.data.label}
                  onChange={(event) =>
                    updateSelectedNode((node) => ({
                      ...node,
                      data: { ...node.data, label: event.target.value },
                    }))
                  }
                />
              </label>
              <div className="node-id">{selectedNode.id}</div>
              {Object.entries(selectedDefinition.parameters).map(([key, definition]) => (
                <label className="field" key={key}>
                  <span>
                    {definition.label}
                    {definition.unit ? <em>{definition.unit}</em> : null}
                  </span>
                  <input
                    value={selectedNode.data.parameters[key] ?? ""}
                    onChange={(event) =>
                      updateSelectedNode((node) => ({
                        ...node,
                        data: {
                          ...node.data,
                          parameters: {
                            ...node.data.parameters,
                            [key]: event.target.value,
                          },
                        },
                      }))
                    }
                  />
                </label>
              ))}
            </div>
          ) : (
            <div className="empty-state">选择画布上的组件后编辑参数</div>
          )}

          <div className="panel-title">仿真设置</div>
          <div className="parameter-form compact-form">
            <label className="field">
              <span>起始时间</span>
              <input
                type="number"
                value={simulationConfig.t_start}
                onChange={(event) => updateSimulationConfig("t_start", event.target.value)}
              />
            </label>
            <label className="field">
              <span>结束时间</span>
              <input
                type="number"
                value={simulationConfig.t_stop}
                onChange={(event) => updateSimulationConfig("t_stop", event.target.value)}
              />
            </label>
            <label className="field">
              <span>采样步长</span>
              <input
                type="number"
                value={simulationConfig.step}
                onChange={(event) => updateSimulationConfig("step", event.target.value)}
              />
            </label>
            <label className="field">
              <span>最大积分步长</span>
              <input
                type="number"
                value={simulationConfig.max_step}
                onChange={(event) => updateSimulationConfig("max_step", event.target.value)}
              />
            </label>
            <label className="field">
              <span>求解器</span>
              <input
                value={simulationConfig.method}
                onChange={(event) => updateSimulationConfig("method", event.target.value)}
              />
            </label>
          </div>

          {simulationResult ? (
            <>
              <div className="panel-title">仿真结果</div>
              <div className="result-section">
                <div className="result-grid">
                  <span>时间</span>
                  <strong>{formatNumber(simulationResult.final.time)}</strong>
                  <span>贮箱压力</span>
                  <strong>{formatNumber(simulationResult.final.tankPressure)} Pa</strong>
                  <span>贮箱温度</span>
                  <strong>{formatNumber(simulationResult.final.tankTemperature)} K</strong>
                  <span>气瓶压力</span>
                  <strong>{formatNumber(simulationResult.final.cylinderPressure)} Pa</strong>
                  <span>气瓶温度</span>
                  <strong>{formatNumber(simulationResult.final.cylinderTemperature)} K</strong>
                </div>
                <div className="run-message">{simulationResult.message}</div>
                <div className="artifact-list">
                  {Object.entries(simulationResult.artifacts).map(([key, path]) => (
                    <div key={key}>
                      <span>{key}</span>
                      <code>{path}</code>
                    </div>
                  ))}
                </div>
              </div>
            </>
          ) : null}

          {xmlText ? (
            <>
              <div className="panel-title">系统 XML</div>
              <textarea className="xml-output" readOnly value={xmlText} />
            </>
          ) : null}
        </aside>
      </main>
    </div>
  );
}

function buildProjectPayload(
  name: string,
  nodes: SimulationNode[],
  edges: SimulationEdge[],
  simulation: SimulationConfig,
): ReactFlowProjectPayload {
  return {
    name: name.trim() || "untitled",
    nodes: nodes.map((node) => ({
      id: node.id,
      type: "simulationComponent",
      position: {
        x: node.position.x,
        y: node.position.y,
      },
      data: {
        label: node.data.label,
        componentType: node.data.componentType,
        modelType: node.data.modelType,
        ports: [...node.data.ports],
        parameters: { ...node.data.parameters },
      },
    })),
    edges: edges.map((edge) => ({
      id: edge.id,
      source: edge.source,
      target: edge.target,
      sourceHandle: edge.sourceHandle ?? null,
      targetHandle: edge.targetHandle ?? null,
    })),
    simulation,
  };
}

function normalizeLoadedNode(node: ProjectNodePayload): SimulationNode {
  const definition =
    componentDefinitions.find((item) => item.type === node.data.componentType) ??
    componentDefinitions.find((item) => item.modelType === node.data.modelType);
  const parameters = definition
    ? { ...defaultParameters(definition), ...node.data.parameters }
    : { ...node.data.parameters };

  return {
    id: node.id,
    type: "simulationComponent",
    position: {
      x: node.position?.x ?? 0,
      y: node.position?.y ?? 0,
    },
    data: {
      label: node.data.label || definition?.label || node.id,
      componentType: node.data.componentType || definition?.type || "component",
      modelType: node.data.modelType || definition?.modelType || node.data.componentType,
      ports: node.data.ports?.length ? node.data.ports : definition?.ports ?? [],
      parameters,
    },
  };
}

function normalizeLoadedEdge(edge: ProjectEdgePayload): SimulationEdge {
  return {
    id: edge.id,
    source: edge.source,
    target: edge.target,
    sourceHandle: edge.sourceHandle,
    targetHandle: edge.targetHandle,
  };
}

function takeNextNodeId(componentType: string) {
  const nextNumber = nextNodeNumberByType[componentType] ?? 1;
  nextNodeNumberByType[componentType] = nextNumber + 1;
  return `${componentType}_${nextNumber}`;
}

function syncNextNodeNumbers(nodes: SimulationNode[]) {
  Object.keys(nextNodeNumberByType).forEach((type) => {
    delete nextNodeNumberByType[type];
  });

  nodes.forEach((node) => {
    const componentType = node.data.componentType;
    const idPrefix = `${componentType}_`;
    if (!node.id.startsWith(idPrefix)) {
      return;
    }

    const nodeNumber = Number(node.id.slice(idPrefix.length));
    if (!Number.isInteger(nodeNumber) || nodeNumber < 1) {
      return;
    }

    nextNodeNumberByType[componentType] = Math.max(
      nextNodeNumberByType[componentType] ?? 1,
      nodeNumber + 1,
    );
  });
}

async function postJson<TResponse>(url: string, body: unknown): Promise<TResponse> {
  const response = await fetch(url, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(body),
  });
  if (!response.ok) {
    throw new Error(await readApiError(response));
  }
  return (await response.json()) as TResponse;
}

async function postJsonText(url: string, body: unknown): Promise<string> {
  const response = await fetch(url, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(body),
  });
  if (!response.ok) {
    throw new Error(await readApiError(response));
  }
  return response.text();
}

async function getJson<TResponse>(url: string): Promise<TResponse> {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error(await readApiError(response));
  }
  return (await response.json()) as TResponse;
}

async function readApiError(response: Response) {
  const text = await response.text();
  if (!text) {
    return `${response.status} ${response.statusText}`;
  }
  try {
    const parsed = JSON.parse(text) as { detail?: unknown };
    if (typeof parsed.detail === "string") {
      return parsed.detail;
    }
  } catch {
    return text;
  }
  return text;
}

function downloadText(filename: string, content: string) {
  const blob = new Blob([content], { type: "application/xml;charset=utf-8" });
  const url = URL.createObjectURL(blob);
  const link = document.createElement("a");
  link.href = url;
  link.download = filename;
  document.body.appendChild(link);
  link.click();
  link.remove();
  URL.revokeObjectURL(url);
}

function safeFilename(value: string) {
  return (value.trim() || "system").replace(/[\\/:*?"<>|]+/g, "_");
}

function formatError(error: unknown) {
  if (error instanceof Error) {
    return error.message;
  }
  return String(error);
}

function formatNumber(value: number) {
  if (!Number.isFinite(value)) {
    return "-";
  }
  if (Math.abs(value) >= 100000 || (Math.abs(value) > 0 && Math.abs(value) < 0.001)) {
    return value.toExponential(4);
  }
  return value.toFixed(4).replace(/\.?0+$/, "");
}

export default function App() {
  return (
    <ReactFlowProvider>
      <FlowWorkbench />
    </ReactFlowProvider>
  );
}