"use client";

/**
 * 콤팩트 노드 공통 쉘
 * 다크 캔버스에서 사용하는 공통 노드 래퍼
 */

import { memo, ReactNode } from "react";
import { Handle, Position } from "reactflow";

interface CompactNodeShellProps {
  color: string;
  label: string;
  summary?: string;
  icon: ReactNode;
  selected?: boolean;
  children?: ReactNode;
  hasInput?: boolean;
  hasOutput?: boolean;
  inputHandleId?: string;
  outputHandleId?: string;
  /** 커스텀 출력 핸들(ConditionNode 등)을 사용할 경우 true */
  customOutputHandles?: boolean;
  /** 커스텀 입력 핸들을 사용할 경우 true */
  customInputHandles?: boolean;
  minWidth?: string;
}

export const CompactNodeShell = memo(
  ({
    color,
    label,
    summary,
    icon,
    selected = false,
    children,
    hasInput = true,
    hasOutput = true,
    inputHandleId,
    outputHandleId,
    customOutputHandles = false,
    customInputHandles = false,
    minWidth = "260px",
  }: CompactNodeShellProps) => {
    return (
      <div
        className={`rounded-lg border bg-zinc-900 shadow-lg transition-all ${
          selected
            ? "border-violet-500 shadow-violet-500/20"
            : "border-zinc-700 hover:border-zinc-600"
        }`}
        style={{ minWidth, maxWidth: "320px" }}
      >
        {/* 기본 입력 핸들 */}
        {hasInput && !customInputHandles && (
          <Handle
            type="target"
            position={Position.Left}
            id={inputHandleId}
            className="!h-2.5 !w-2.5 !border-2 !bg-zinc-900"
            style={{ borderColor: color }}
          />
        )}

        {/* 컬러바 + 헤더 */}
        <div className="flex items-center gap-2.5 px-3 py-2.5">
          <div
            className="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-md"
            style={{ backgroundColor: `${color}20` }}
          >
            <div className="text-zinc-200" style={{ color }}>{icon}</div>
          </div>
          <div className="min-w-0 flex-1">
            <div className="text-xs font-semibold text-zinc-200">{label}</div>
            {summary && (
              <div className="line-clamp-2 text-[10px] leading-relaxed text-zinc-500">{summary}</div>
            )}
          </div>
        </div>

        {/* 바디 (옵셔널) */}
        {children && (
          <div className="border-t border-zinc-800 px-3 py-2 text-[10px] text-zinc-400">
            {children}
          </div>
        )}

        {/* 기본 출력 핸들 */}
        {hasOutput && !customOutputHandles && (
          <Handle
            type="source"
            position={Position.Right}
            id={outputHandleId}
            className="!h-2.5 !w-2.5 !border-2 !bg-zinc-900"
            style={{ borderColor: color }}
          />
        )}
      </div>
    );
  },
);

CompactNodeShell.displayName = "CompactNodeShell";