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

"use client";

import React from "react";
import { Card } from "@/components/ui/card";

// 타입 import
import { RightPanelProps } from "../types/redesigned";

// 컴포넌트 import
import StepProgress from "./StepProgress";
import ConnectionStep from "./ConnectionStep";
import TableStep from "./TableStep";
import FieldMappingStep from "./FieldMappingStep";
import ControlConditionStep from "./ControlConditionStep";
import ActionConfigStep from "./ActionConfigStep";
import MultiActionConfigStep from "./MultiActionConfigStep";

/**
 * 🎯 우측 패널 (70% 너비)
 * - 단계별 진행 UI
 * - 연결 → 테이블 → 필드 매핑
 * - 시각적 매핑 영역
 */
const RightPanel: React.FC<RightPanelProps> = ({ state, actions }) => {
  // 완료된 단계 계산
  const completedSteps: number[] = [];

  if (state.fromConnection && state.toConnection) {
    completedSteps.push(1);
  }

  if (state.fromTable && state.toTable) {
    completedSteps.push(2);
  }

  // 새로운 단계 순서에 따른 완료 조건
  const needsFieldMapping = state.actionType === "insert" || state.actionType === "upsert";

  // 3단계: 제어 조건 (테이블 선택 후 바로 접근 가능)
  if (state.fromTable && state.toTable) {
    completedSteps.push(3);
  }

  // 4단계: 액션 설정
  if (state.actionType) {
    completedSteps.push(4);
  }

  // 5단계: 컬럼 매핑 (INSERT/UPSERT인 경우에만)
  if (needsFieldMapping && state.fieldMappings.length > 0) {
    completedSteps.push(5);
  }

  const renderCurrentStep = () => {
    switch (state.currentStep) {
      case 1:
        return (
          <ConnectionStep
            connectionType={state.connectionType}
            fromConnection={state.fromConnection}
            toConnection={state.toConnection}
            relationshipName={state.relationshipName}
            description={state.description}
            diagramId={state.diagramId} // 🔧 수정 모드 감지용
            onSelectConnection={actions.selectConnection}
            onSetRelationshipName={actions.setRelationshipName}
            onSetDescription={actions.setDescription}
            onNext={() => actions.goToStep(2)}
          />
        );

      case 2:
        return (
          <TableStep
            fromConnection={state.fromConnection}
            toConnection={state.toConnection}
            fromTable={state.fromTable}
            toTable={state.toTable}
            onSelectTable={actions.selectTable}
            onNext={() => actions.goToStep(3)} // 3단계(제어 조건)로
            onBack={() => actions.goToStep(1)}
          />
        );

      case 3:
        // 3단계: 제어 조건
        return (
          <ControlConditionStep
            state={state}
            actions={actions}
            onBack={() => actions.goToStep(2)}
            onNext={() => {
              // 4단계로 넘어가기 전에 컬럼 로드
              actions.loadColumns();
              actions.goToStep(4);
            }}
          />
        );

      case 4:
        // 4단계: 통합된 멀티 액션 설정 (제어 조건 + 액션 설정 + 컬럼 매핑)
        return (
          <MultiActionConfigStep
            fromTable={state.fromTable}
            toTable={state.toTable}
            fromConnection={state.fromConnection}
            toConnection={state.toConnection}
            fromColumns={state.fromColumns} // 🔧 중앙에서 관리되는 컬럼 정보
            toColumns={state.toColumns} // 🔧 중앙에서 관리되는 컬럼 정보
            controlConditions={state.controlConditions}
            onUpdateControlCondition={actions.updateControlCondition}
            onDeleteControlCondition={actions.deleteControlCondition}
            onAddControlCondition={actions.addControlCondition}
            actionGroups={state.actionGroups}
            groupsLogicalOperator={state.groupsLogicalOperator}
            onUpdateActionGroup={actions.updateActionGroup}
            onDeleteActionGroup={actions.deleteActionGroup}
            onAddActionGroup={actions.addActionGroup}
            onAddActionToGroup={actions.addActionToGroup}
            onUpdateActionInGroup={actions.updateActionInGroup}
            onDeleteActionFromGroup={actions.deleteActionFromGroup}
            onSetGroupsLogicalOperator={actions.setGroupsLogicalOperator}
            fieldMappings={state.fieldMappings}
            onCreateMapping={actions.createMapping}
            onDeleteMapping={actions.deleteMapping}
            onLoadColumns={actions.loadColumns}
            onNext={() => {
              // 완료 처리 - 저장 및 상위 컴포넌트 알림
              actions.saveMappings();
            }}
            onBack={() => actions.goToStep(3)}
          />
        );

      default:
        return null;
    }
  };

  return (
    <div className="flex h-full flex-col">
      {/* 단계 진행 표시 */}
      <div className="bg-card/50 border-b p-3">
        <StepProgress currentStep={state.currentStep} completedSteps={completedSteps} onStepClick={actions.goToStep} />
      </div>

      {/* 현재 단계 컨텐츠 */}
      <div className="min-h-0 flex-1 p-3">
        <Card className="flex h-full flex-col overflow-hidden">{renderCurrentStep()}</Card>
      </div>
    </div>
  );
};

export default RightPanel;