ERP-node/frontend/components/dataflow/node-editor/panels/PropertiesPanel.tsx

"use client";

/**
 * 노드 속성 편집 패널
 */

import { useFlowEditorStore } from "@/lib/stores/flowEditorStore";
import { TableSourceProperties } from "./properties/TableSourceProperties";
import { InsertActionProperties } from "./properties/InsertActionProperties";
import { ConditionProperties } from "./properties/ConditionProperties";
import { UpdateActionProperties } from "./properties/UpdateActionProperties";
import { DeleteActionProperties } from "./properties/DeleteActionProperties";
import { ExternalDBSourceProperties } from "./properties/ExternalDBSourceProperties";
import { UpsertActionProperties } from "./properties/UpsertActionProperties";
import { DataTransformProperties } from "./properties/DataTransformProperties";
import { AggregateProperties } from "./properties/AggregateProperties";
import { FormulaTransformProperties } from "./properties/FormulaTransformProperties";
import { RestAPISourceProperties } from "./properties/RestAPISourceProperties";
import { CommentProperties } from "./properties/CommentProperties";
import { LogProperties } from "./properties/LogProperties";
import { EmailActionProperties } from "./properties/EmailActionProperties";
import { ScriptActionProperties } from "./properties/ScriptActionProperties";
import { HttpRequestActionProperties } from "./properties/HttpRequestActionProperties";
import { ProcedureCallActionProperties } from "./properties/ProcedureCallActionProperties";
import type { NodeType } from "@/types/node-editor";

export function PropertiesPanel() {
  const { nodes, selectedNodes, setShowPropertiesPanel } = useFlowEditorStore();

  const selectedNode = selectedNodes.length === 1 ? nodes.find((n) => n.id === selectedNodes[0]) : null;

  if (selectedNodes.length === 0) {
    return (
      <div className="flex h-full items-center justify-center p-4">
        <div className="text-center text-sm text-muted-foreground">
          <p>노드를 선택해 주세요</p>
        </div>
      </div>
    );
  }

  if (selectedNodes.length > 1) {
    return (
      <div className="flex h-full items-center justify-center p-4">
        <div className="text-center text-sm text-muted-foreground">
          <p>{selectedNodes.length}개의 노드가 선택됐어요</p>
          <p className="mt-1 text-xs text-muted-foreground">하나의 노드만 선택하면 속성을 편집할 수 있어요</p>
        </div>
      </div>
    );
  }

  if (!selectedNode) return null;

  return <NodePropertiesRenderer node={selectedNode} />;
}

/**
 * 노드 타입별 속성 렌더러
 */
function NodePropertiesRenderer({ node }: { node: any }) {
  switch (node.type) {
    case "tableSource":
      return <TableSourceProperties nodeId={node.id} data={node.data} />;

    case "insertAction":
      return <InsertActionProperties nodeId={node.id} data={node.data} />;

    case "condition":
      return <ConditionProperties nodeId={node.id} data={node.data} />;

    case "updateAction":
      return <UpdateActionProperties nodeId={node.id} data={node.data} />;

    case "deleteAction":
      return <DeleteActionProperties nodeId={node.id} data={node.data} />;

    case "externalDBSource":
      return <ExternalDBSourceProperties nodeId={node.id} data={node.data} />;

    case "upsertAction":
      return <UpsertActionProperties nodeId={node.id} data={node.data} />;

    case "dataTransform":
      return <DataTransformProperties nodeId={node.id} data={node.data} />;

    case "aggregate":
      return <AggregateProperties nodeId={node.id} data={node.data} />;

    case "formulaTransform":
      return <FormulaTransformProperties nodeId={node.id} data={node.data} />;

    case "restAPISource":
      return <RestAPISourceProperties nodeId={node.id} data={node.data} />;

    case "comment":
      return <CommentProperties nodeId={node.id} data={node.data} />;

    case "log":
      return <LogProperties nodeId={node.id} data={node.data} />;

    case "emailAction":
      return <EmailActionProperties nodeId={node.id} data={node.data} />;

    case "scriptAction":
      return <ScriptActionProperties nodeId={node.id} data={node.data} />;

    case "httpRequestAction":
      return <HttpRequestActionProperties nodeId={node.id} data={node.data} />;

    case "procedureCallAction":
      return <ProcedureCallActionProperties nodeId={node.id} data={node.data} />;

    default:
      return (
        <div className="p-4">
          <div className="rounded border border-amber-200 bg-amber-50 p-4 text-sm">
            <p className="font-medium text-amber-800">속성 편집 준비 중이에요</p>
            <p className="mt-2 text-xs text-amber-700">
              {getNodeTypeLabel(node.type as NodeType)} 노드의 속성 편집은 곧 지원될 예정이에요.
            </p>
          </div>
        </div>
      );
  }
}

/**
 * 노드 타입 라벨 가져오기
 */
function getNodeTypeLabel(type: NodeType): string {
  const labels: Record<NodeType, string> = {
    tableSource: "테이블 소스",
    externalDBSource: "외부 DB 소스",
    restAPISource: "REST API 소스",
    condition: "조건 분기",
    fieldMapping: "필드 매핑",
    dataTransform: "데이터 변환",
    aggregate: "집계",
    formulaTransform: "수식 변환",
    insertAction: "INSERT 액션",
    updateAction: "UPDATE 액션",
    deleteAction: "DELETE 액션",
    upsertAction: "UPSERT 액션",
    emailAction: "메일 발송",
    scriptAction: "스크립트 실행",
    httpRequestAction: "HTTP 요청",
    procedureCallAction: "프로시저 호출",
    comment: "주석",
    log: "로그",
  };
  return labels[type] || type;
}