"use client";

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

export const DataTransformNode = memo(({ data, selected }: NodeProps<DataTransformNodeData>) => {
  const ruleCount = data.transformRules?.length || 0;
  const summary = ruleCount > 0
    ? `${ruleCount}개 변환 규칙`
    : "변환 규칙을 설정해 주세요";

  return (
    <CompactNodeShell
      color="#06B6D4"
      label={data.displayName || "데이터 변환"}
      summary={summary}
      icon={<Repeat className="h-3.5 w-3.5" />}
      selected={selected}
    >
      {ruleCount > 0 && (
        <div className="space-y-0.5">
          {data.transformRules!.slice(0, 3).map((r: any, i: number) => (
            <div key={i} className="flex items-center gap-1.5">
              <div className="h-1 w-1 rounded-full bg-cyan-400" />
              <span>{r.sourceField || r.field || `규칙 ${i + 1}`}</span>
              {r.targetField && <span className="text-zinc-600">→ {r.targetField}</span>}
            </div>
          ))}
          {ruleCount > 3 && <span className="text-zinc-600">외 {ruleCount - 3}개</span>}
        </div>
      )}
    </CompactNodeShell>
  );
});

DataTransformNode.displayName = "DataTransformNode";