ERP-node/frontend/components/dataflow/connection/redesigned/RightPanel/FieldMappingStep.tsx

"use client";

import React, { useState } from "react";
import { ArrowLeft, Save, CheckCircle, XCircle, AlertCircle } from "lucide-react";
import { TableInfo, FieldMapping, ColumnInfo } from "../types/redesigned";

interface FieldMappingStepProps {
  fromTable?: TableInfo;
  toTable?: TableInfo;
  fieldMappings: FieldMapping[];
  onMappingsChange: (mappings: FieldMapping[]) => void;
  onBack: () => void;
  onSave: () => void;
}

export const FieldMappingStep: React.FC<FieldMappingStepProps> = ({
  fromTable,
  toTable,
  fieldMappings,
  onMappingsChange,
  onBack,
  onSave,
}) => {
  const [draggedField, setDraggedField] = useState<ColumnInfo | null>(null);

  const createMapping = (fromField: ColumnInfo, toField: ColumnInfo) => {
    const mapping: FieldMapping = {
      id: `${fromField.name}-${toField.name}`,
      fromField,
      toField,
      isValid: fromField.type === toField.type,
      validationMessage: fromField.type !== toField.type ? "타입이 다릅니다" : undefined,
    };

    const newMappings = [...fieldMappings, mapping];
    onMappingsChange(newMappings);
  };

  const removeMapping = (mappingId: string) => {
    const newMappings = fieldMappings.filter((m) => m.id !== mappingId);
    onMappingsChange(newMappings);
  };

  const handleDragStart = (field: ColumnInfo) => {
    setDraggedField(field);
  };

  const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault();
  };

  const handleDrop = (e: React.DragEvent, toField: ColumnInfo) => {
    e.preventDefault();
    if (draggedField) {
      createMapping(draggedField, toField);
      setDraggedField(null);
    }
  };

  const getMappedFromField = (toFieldName: string) => {
    return fieldMappings.find((m) => m.toField.name === toFieldName)?.fromField;
  };

  const isFieldMapped = (fieldName: string) => {
    return fieldMappings.some((m) => m.fromField.name === fieldName || m.toField.name === fieldName);
  };

  return (
    <div className="space-y-8">
      <div className="text-center">
        <h2 className="mb-2 text-2xl font-bold text-gray-900">필드 매핑</h2>
        <p className="text-muted-foreground">소스 테이블의 필드를 대상 테이블의 필드에 드래그하여 매핑하세요</p>
      </div>

      {/* 매핑 통계 */}
      <div className="grid grid-cols-4 gap-4">
        <div className="bg-accent border-primary/20 rounded-lg border p-4">
          <div className="text-2xl font-bold text-blue-900">{fieldMappings.length}</div>
          <div className="text-sm text-blue-700">총 매핑</div>
        </div>
        <div className="rounded-lg border border-green-200 bg-green-50 p-4">
          <div className="text-2xl font-bold text-green-900">{fieldMappings.filter((m) => m.isValid).length}</div>
          <div className="text-sm text-green-700">유효한 매핑</div>
        </div>
        <div className="bg-destructive/10 border-destructive/20 rounded-lg border p-4">
          <div className="text-2xl font-bold text-red-900">{fieldMappings.filter((m) => !m.isValid).length}</div>
          <div className="text-sm text-red-700">오류 매핑</div>
        </div>
        <div className="rounded-lg border border-yellow-200 bg-yellow-50 p-4">
          <div className="text-2xl font-bold text-yellow-900">
            {(toTable?.columns.length || 0) - fieldMappings.length}
          </div>
          <div className="text-sm text-yellow-700">미매핑 필드</div>
        </div>
      </div>

      {/* 매핑 영역 */}
      <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
        {/* FROM 테이블 필드들 */}
        <div className="space-y-4">
          <h3 className="flex items-center gap-2 text-lg font-semibold text-gray-900">
            <div className="bg-primary/20 flex h-6 w-6 items-center justify-center rounded-full">
              <span className="text-primary text-sm font-bold">FROM</span>
            </div>
            {fromTable?.name} 필드들
          </h3>

          <div className="space-y-2">
            {fromTable?.columns.map((field) => (
              <div
                key={field.name}
                draggable
                onDragStart={() => handleDragStart(field)}
                className={`cursor-move rounded-lg border-2 p-3 transition-all duration-200 ${
                  isFieldMapped(field.name)
                    ? "border-green-300 bg-green-50 opacity-60"
                    : "border-primary/20 bg-accent hover:bg-primary/20 hover:border-blue-400"
                }`}
              >
                <div className="flex items-center justify-between">
                  <div>
                    <div className="font-medium text-gray-900">{field.name}</div>
                    <div className="text-muted-foreground text-sm">{field.type}</div>
                    {field.primaryKey && (
                      <span className="rounded bg-yellow-100 px-2 py-1 text-xs text-yellow-800">PK</span>
                    )}
                  </div>
                  {isFieldMapped(field.name) && <CheckCircle className="h-5 w-5 text-green-600" />}
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* TO 테이블 필드들 */}
        <div className="space-y-4">
          <h3 className="flex items-center gap-2 text-lg font-semibold text-gray-900">
            <div className="flex h-6 w-6 items-center justify-center rounded-full bg-green-100">
              <span className="text-sm font-bold text-green-600">TO</span>
            </div>
            {toTable?.name} 필드들
          </h3>

          <div className="space-y-2">
            {toTable?.columns.map((field) => {
              const mappedFromField = getMappedFromField(field.name);
              return (
                <div
                  key={field.name}
                  onDragOver={handleDragOver}
                  onDrop={(e) => handleDrop(e, field)}
                  className={`rounded-lg border-2 p-3 transition-all duration-200 ${
                    mappedFromField
                      ? "border-green-300 bg-green-50"
                      : "hover:bg-green-25 border-gray-200 bg-gray-50 hover:border-green-300"
                  }`}
                >
                  <div className="flex items-center justify-between">
                    <div>
                      <div className="font-medium text-gray-900">{field.name}</div>
                      <div className="text-muted-foreground text-sm">{field.type}</div>
                      {field.primaryKey && (
                        <span className="rounded bg-yellow-100 px-2 py-1 text-xs text-yellow-800">PK</span>
                      )}
                      {mappedFromField && (
                        <div className="mt-1 text-xs text-green-700">
                          ← {mappedFromField.name} ({mappedFromField.type})
                        </div>
                      )}
                    </div>
                    <div className="flex items-center gap-2">
                      {mappedFromField && (
                        <button
                          onClick={() => removeMapping(`${mappedFromField.name}-${field.name}`)}
                          className="text-red-500 hover:text-red-700"
                        >
                          <XCircle className="h-4 w-4" />
                        </button>
                      )}
                      {mappedFromField && (
                        <div>
                          {fieldMappings.find((m) => m.toField.name === field.name)?.isValid ? (
                            <CheckCircle className="h-5 w-5 text-green-600" />
                          ) : (
                            <AlertCircle className="text-destructive h-5 w-5" />
                          )}
                        </div>
                      )}
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>

      {/* 버튼들 */}
      <div className="flex justify-between">
        <button
          onClick={onBack}
          className="text-muted-foreground flex items-center gap-2 rounded-lg bg-gray-100 px-6 py-3 font-medium transition-all duration-200 hover:bg-gray-200"
        >
          <ArrowLeft className="h-4 w-4" />
          이전 단계
        </button>

        <button
          onClick={onSave}
          className="flex items-center gap-2 rounded-lg bg-orange-500 px-6 py-3 font-medium text-white shadow-md transition-all duration-200 hover:bg-orange-600 hover:shadow-lg"
        >
          <Save className="h-4 w-4" />
          연결 설정 저장
        </button>
      </div>
    </div>
  );
};