"use client";

import { memo } from "react";
import { NodeProps } from "reactflow";
import { Plus } from "lucide-react";
import { CompactNodeShell } from "./CompactNodeShell";
import type { InsertActionNodeData } from "@/types/node-editor";

export const InsertActionNode = memo(({ data, selected }: NodeProps<InsertActionNodeData>) => {
  const mappingCount = data.fieldMappings?.length || 0;
  const summary = data.targetTable
    ? `${data.targetTable} (${mappingCount}개 필드)`
    : "대상 테이블을 선택해 주세요";

  return (
    <CompactNodeShell
      color="#22C55E"
      label={data.displayName || "INSERT"}
      summary={summary}
      icon={<Plus className="h-3.5 w-3.5" />}
      selected={selected}
    >
      {mappingCount > 0 && (
        <div className="space-y-0.5">
          {data.fieldMappings!.slice(0, 3).map((m, i) => (
            <div key={i} className="flex items-center gap-1">
              <span>{m.sourceFieldLabel || m.sourceField || "?"}</span>
              <span className="text-zinc-600">→</span>
              <span className="font-mono text-zinc-300">{m.targetFieldLabel || m.targetField}</span>
            </div>
          ))}
          {mappingCount > 3 && <span className="text-zinc-600">외 {mappingCount - 3}개</span>}
        </div>
      )}
    </CompactNodeShell>
  );
});

InsertActionNode.displayName = "InsertActionNode";