"use client";

/**
 * 메일 발송 액션 노드
 * 등록된 메일 계정을 선택하여 이메일을 발송하는 노드
 */

import { memo } from "react";
import { Handle, Position, NodeProps } from "reactflow";
import { Mail, User, CheckCircle } from "lucide-react";
import type { EmailActionNodeData } from "@/types/node-editor";

export const EmailActionNode = memo(({ data, selected }: NodeProps<EmailActionNodeData>) => {
  const hasAccount = !!data.accountId;
  const hasRecipient = data.to && data.to.trim().length > 0;
  const hasSubject = data.subject && data.subject.trim().length > 0;

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

      {/* 헤더 */}
      <div className="flex items-center gap-2 rounded-t-lg bg-pink-500 px-3 py-2 text-white">
        <Mail 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 text-xs">
          <User className="h-3 w-3 text-gray-400" />
          <span className="text-gray-600">
            {hasAccount ? (
              <span className="flex items-center gap-1 text-green-600">
                <CheckCircle className="h-3 w-3" />
                계정 선택됨
              </span>
            ) : (
              <span className="text-orange-500">발송 계정 선택 필요</span>
            )}
          </span>
        </div>

        {/* 수신자 */}
        <div className="text-xs">
          <span className="text-gray-500">수신자: </span>
          {hasRecipient ? (
            <span className="text-gray-700">{data.to}</span>
          ) : (
            <span className="text-orange-500">미설정</span>
          )}
        </div>

        {/* 제목 */}
        <div className="text-xs">
          <span className="text-gray-500">제목: </span>
          {hasSubject ? (
            <span className="truncate text-gray-700">{data.subject}</span>
          ) : (
            <span className="text-orange-500">미설정</span>
          )}
        </div>

        {/* 본문 형식 */}
        <div className="flex items-center gap-2">
          <span
            className={`rounded px-1.5 py-0.5 text-xs ${
              data.bodyType === "html" ? "bg-blue-100 text-blue-700" : "bg-gray-100 text-gray-700"
            }`}
          >
            {data.bodyType === "html" ? "HTML" : "TEXT"}
          </span>
          {data.attachments && data.attachments.length > 0 && (
            <span className="rounded bg-purple-100 px-1.5 py-0.5 text-xs text-purple-700">
              첨부 {data.attachments.length}개
            </span>
          )}
        </div>
      </div>

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

EmailActionNode.displayName = "EmailActionNode";