"use client";

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

export const AggregateNode = memo(({ data, selected }: NodeProps<AggregateNodeData>) => {
  const opCount = data.operations?.length || 0;
  const groupCount = data.groupByFields?.length || 0;
  const summary = opCount > 0
    ? `${opCount}개 연산${groupCount > 0 ? `, ${groupCount}개 그룹` : ""}`
    : "집계 연산을 설정해 주세요";

  return (
    <CompactNodeShell
      color="#A855F7"
      label={data.displayName || "집계"}
      summary={summary}
      icon={<BarChart3 className="h-3.5 w-3.5" />}
      selected={selected}
    >
      {opCount > 0 && (
        <div className="space-y-0.5">
          {data.operations!.slice(0, 3).map((op: any, i: number) => (
            <div key={i} className="flex items-center gap-1.5">
              <span className="rounded bg-violet-500/20 px-1 py-0.5 font-mono text-[9px] font-semibold text-violet-400">
                {op.function || op.operation}
              </span>
              <span>{op.field || op.sourceField}</span>
            </div>
          ))}
        </div>
      )}
    </CompactNodeShell>
  );
});

AggregateNode.displayName = "AggregateNode";