ERP-node/frontend/components/dataflow/node-editor/ValidationNotification.tsx

"use client";

/**
 * 플로우 검증 결과 알림 (우측 상단 플로팅)
 */

import { memo, useState } from "react";
import { AlertTriangle, AlertCircle, Info, X, ChevronDown, ChevronUp } from "lucide-react";
import type { FlowValidation } from "@/lib/utils/flowValidation";
import { summarizeValidations } from "@/lib/utils/flowValidation";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";

interface ValidationNotificationProps {
  validations: FlowValidation[];
  onNodeClick?: (nodeId: string) => void;
  onClose?: () => void;
}

export const ValidationNotification = memo(
  ({ validations, onNodeClick, onClose }: ValidationNotificationProps) => {
    const [isExpanded, setIsExpanded] = useState(false);
    const summary = summarizeValidations(validations);

    if (validations.length === 0) {
      return null;
    }

    const getTypeLabel = (type: string): string => {
      const labels: Record<string, string> = {
        "parallel-conflict": "병렬 실행 충돌",
        "missing-where": "WHERE 조건 누락",
        "circular-reference": "순환 참조",
        "data-source-mismatch": "데이터 소스 불일치",
        "parallel-table-access": "병렬 테이블 접근",
      };
      return labels[type] || type;
    };

    // 타입별로 그룹화
    const groupedValidations = validations.reduce((acc, validation) => {
      if (!acc[validation.type]) {
        acc[validation.type] = [];
      }
      acc[validation.type].push(validation);
      return acc;
    }, {} as Record<string, FlowValidation[]>);

    return (
      <div className="fixed right-4 top-4 z-50 w-80 animate-in slide-in-from-right-5 duration-300">
        <div
          className={cn(
            "rounded-lg border-2 bg-white shadow-2xl",
            summary.hasBlockingIssues
              ? "border-red-500"
              : summary.warningCount > 0
                ? "border-yellow-500"
                : "border-blue-500"
          )}
        >
          {/* 헤더 */}
          <div
            className={cn(
              "flex cursor-pointer items-center justify-between p-3",
              summary.hasBlockingIssues
                ? "bg-red-50"
                : summary.warningCount > 0
                  ? "bg-yellow-50"
                  : "bg-blue-50"
            )}
            onClick={() => setIsExpanded(!isExpanded)}
          >
            <div className="flex items-center gap-2">
              {summary.hasBlockingIssues ? (
                <AlertCircle className="h-5 w-5 text-red-600" />
              ) : summary.warningCount > 0 ? (
                <AlertTriangle className="h-5 w-5 text-yellow-600" />
              ) : (
                <Info className="h-5 w-5 text-blue-600" />
              )}
              <span className="text-sm font-semibold text-gray-900">
                플로우 검증
              </span>
              <div className="flex items-center gap-1">
                {summary.errorCount > 0 && (
                  <Badge variant="destructive" className="h-5 text-[10px]">
                    {summary.errorCount}
                  </Badge>
                )}
                {summary.warningCount > 0 && (
                  <Badge className="h-5 bg-yellow-500 text-[10px] hover:bg-yellow-600">
                    {summary.warningCount}
                  </Badge>
                )}
                {summary.infoCount > 0 && (
                  <Badge variant="secondary" className="h-5 text-[10px]">
                    {summary.infoCount}
                  </Badge>
                )}
              </div>
            </div>
            <div className="flex items-center gap-1">
              {isExpanded ? (
                <ChevronUp className="h-4 w-4 text-gray-400" />
              ) : (
                <ChevronDown className="h-4 w-4 text-gray-400" />
              )}
              {onClose && (
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={(e) => {
                    e.stopPropagation();
                    onClose();
                  }}
                  className="h-6 w-6 p-0 hover:bg-white/50"
                >
                  <X className="h-3.5 w-3.5" />
                </Button>
              )}
            </div>
          </div>

          {/* 확장된 내용 */}
          {isExpanded && (
            <div className="max-h-[60vh] overflow-y-auto border-t">
              <div className="p-2 space-y-2">
                {Object.entries(groupedValidations).map(([type, typeValidations]) => {
                  const firstValidation = typeValidations[0];
                  const Icon =
                    firstValidation.severity === "error"
                      ? AlertCircle
                      : firstValidation.severity === "warning"
                        ? AlertTriangle
                        : Info;

                  return (
                    <div key={type}>
                      {/* 타입 헤더 */}
                      <div
                        className={cn(
                          "mb-1 flex items-center gap-2 rounded-md px-2 py-1 text-xs font-medium",
                          firstValidation.severity === "error"
                            ? "bg-red-100 text-red-700"
                            : firstValidation.severity === "warning"
                              ? "bg-yellow-100 text-yellow-700"
                              : "bg-blue-100 text-blue-700"
                        )}
                      >
                        <Icon className="h-3 w-3" />
                        {getTypeLabel(type)}
                        <span className="ml-auto">
                          {typeValidations.length}개
                        </span>
                      </div>

                      {/* 검증 항목들 */}
                      <div className="space-y-1 pl-5">
                        {typeValidations.map((validation, index) => (
                          <div
                            key={index}
                            className="group cursor-pointer rounded-md border border-gray-200 bg-gray-50 p-2 text-xs transition-all hover:border-gray-300 hover:bg-white hover:shadow-sm"
                            onClick={() => onNodeClick?.(validation.nodeId)}
                          >
                            <p className="text-gray-700 leading-relaxed">
                              {validation.message}
                            </p>
                            {validation.affectedNodes && validation.affectedNodes.length > 1 && (
                              <div className="mt-1 text-[10px] text-gray-500">
                                영향받는 노드: {validation.affectedNodes.length}개
                              </div>
                            )}
                            <div className="mt-1 text-[10px] text-blue-600 opacity-0 transition-opacity group-hover:opacity-100">
                              클릭하여 노드 보기 →
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          )}

          {/* 요약 메시지 (닫혀있을 때) */}
          {!isExpanded && (
            <div className="border-t px-3 py-2">
              <p className="text-xs text-gray-600">
                {summary.hasBlockingIssues
                  ? "⛔ 오류를 해결해야 저장할 수 있습니다"
                  : summary.warningCount > 0
                    ? "⚠️ 경고 사항을 확인하세요"
                    : "ℹ️ 정보를 확인하세요"}
              </p>
            </div>
          )}
        </div>
      </div>
    );
  }
);

ValidationNotification.displayName = "ValidationNotification";