"use client";

/**
 * 스크립트 실행 액션 노드
 * Python, Shell, PowerShell 등 외부 스크립트를 실행하는 노드
 */

import { memo } from "react";
import { Handle, Position, NodeProps } from "reactflow";
import { Terminal, FileCode, Play } from "lucide-react";
import type { ScriptActionNodeData } from "@/types/node-editor";

// 스크립트 타입별 아이콘 색상
const SCRIPT_TYPE_COLORS: Record<string, { bg: string; text: string; label: string }> = {
  python: { bg: "bg-yellow-100", text: "text-yellow-700", label: "Python" },
  shell: { bg: "bg-green-100", text: "text-green-700", label: "Shell" },
  powershell: { bg: "bg-blue-100", text: "text-blue-700", label: "PowerShell" },
  node: { bg: "bg-emerald-100", text: "text-emerald-700", label: "Node.js" },
  executable: { bg: "bg-gray-100", text: "text-gray-700", label: "실행파일" },
};

export const ScriptActionNode = memo(({ data, selected }: NodeProps<ScriptActionNodeData>) => {
  const scriptTypeInfo = SCRIPT_TYPE_COLORS[data.scriptType] || SCRIPT_TYPE_COLORS.executable;
  const hasScript = data.executionMode === "inline" ? !!data.inlineScript : !!data.scriptPath;

  return (
    <div
      className={`min-w-[250px] rounded-lg border-2 bg-white shadow-md transition-all ${
        selected ? "border-emerald-500 shadow-lg" : "border-gray-200"
      }`}
    >
      {/* 입력 핸들 */}
      <Handle
        type="target"
        position={Position.Left}
        className="!h-3 !w-3 !border-2 !border-white !bg-emerald-500"
      />

      {/* 헤더 */}
      <div className="flex items-center gap-2 rounded-t-lg bg-emerald-500 px-3 py-2 text-white">
        <Terminal className="h-4 w-4" />
        <div className="flex-1">
          <div className="text-sm font-semibold">{data.displayName || "스크립트 실행"}</div>
        </div>
      </div>

      {/* 본문 */}
      <div className="space-y-2 p-3">
        {/* 스크립트 타입 */}
        <div className="flex items-center gap-2">
          <span className={`rounded px-2 py-0.5 text-xs font-medium ${scriptTypeInfo.bg} ${scriptTypeInfo.text}`}>
            {scriptTypeInfo.label}
          </span>
          <span className="rounded bg-gray-100 px-2 py-0.5 text-xs text-gray-600">
            {data.executionMode === "inline" ? "인라인" : "파일"}
          </span>
        </div>

        {/* 스크립트 정보 */}
        <div className="flex items-center gap-2 text-xs">
          {data.executionMode === "inline" ? (
            <>
              <FileCode className="h-3 w-3 text-gray-400" />
              <span className="text-gray-600">
                {hasScript ? (
                  <span className="text-green-600">
                    {data.inlineScript!.split("\n").length}줄 스크립트
                  </span>
                ) : (
                  <span className="text-orange-500">스크립트 입력 필요</span>
                )}
              </span>
            </>
          ) : (
            <>
              <Play className="h-3 w-3 text-gray-400" />
              <span className="text-gray-600">
                {hasScript ? (
                  <span className="truncate text-green-600">{data.scriptPath}</span>
                ) : (
                  <span className="text-orange-500">파일 경로 필요</span>
                )}
              </span>
            </>
          )}
        </div>

        {/* 입력 방식 */}
        <div className="text-xs">
          <span className="text-gray-500">입력: </span>
          <span className="text-gray-700">
            {data.inputMethod === "stdin" && "표준입력 (stdin)"}
            {data.inputMethod === "args" && "명령줄 인자"}
            {data.inputMethod === "env" && "환경변수"}
            {data.inputMethod === "file" && "파일"}
          </span>
        </div>

        {/* 타임아웃 */}
        {data.options?.timeout && (
          <div className="text-xs text-gray-500">
            타임아웃: {Math.round(data.options.timeout / 1000)}초
          </div>
        )}
      </div>

      {/* 출력 핸들 */}
      <Handle
        type="source"
        position={Position.Right}
        className="!h-3 !w-3 !border-2 !border-white !bg-emerald-500"
      />
    </div>
  );
});

ScriptActionNode.displayName = "ScriptActionNode";