"use client";

import React, { useState } from "react";
import { ConnectionTypeSelector } from "./LeftPanel/ConnectionTypeSelector";
import { MappingInfoPanel } from "./LeftPanel/MappingInfoPanel";
import { StepProgress } from "./RightPanel/StepProgress";
import { ConnectionStep } from "./RightPanel/ConnectionStep";
import { TableStep } from "./RightPanel/TableStep";
import { FieldMappingStep } from "./RightPanel/FieldMappingStep";
import { DataConnectionState } from "./types/redesigned";
import { ResponsiveContainer, ResponsiveGrid } from "@/components/layout/ResponsiveContainer";
import { useResponsive } from "@/lib/hooks/useResponsive";

const initialState: DataConnectionState = {
    connectionType: "data_save",
    currentStep: 1,
    fieldMappings: [],
    mappingStats: {
      totalMappings: 0,
      validMappings: 0,
      invalidMappings: 0,
      missingRequiredFields: 0,
      estimatedRows: 0,
      actionType: "INSERT",
    },
    isLoading: false,
    validationErrors: [],
};

export const DataConnectionDesigner: React.FC = () => {
  const [state, setState] = useState<DataConnectionState>(initialState);
  const { isMobile, isTablet } = useResponsive();

  return (
    <div className="h-screen bg-gradient-to-br from-slate-50 to-gray-100">
      <div className="bg-white border-b border-gray-200 px-6 py-4">
        <h1 className="text-2xl font-bold text-gray-900">
          🎨 제어관리 - 데이터 연결 설정
        </h1>
        <p className="text-gray-600 mt-1">
          시각적 필드 매핑으로 데이터 연결을 쉽게 설정하세요
                </p>
              </div>

      <div className="flex h-[calc(100vh-80px)]">
        <div className="w-[30%] bg-white border-r border-gray-200 flex flex-col">
          <ConnectionTypeSelector
            connectionType={state.connectionType}
            onConnectionTypeChange={(type) => setState(prev => ({ ...prev, connectionType: type }))}
          />
          
          <div className="flex-1 overflow-y-auto">
            <MappingInfoPanel
              mappingStats={state.mappingStats}
              fieldMappings={state.fieldMappings}
              selectedMapping={state.selectedMapping}
              onMappingSelect={(mappingId) => setState(prev => ({ ...prev, selectedMapping: mappingId }))}
            />
          </div>
        </div>

        <div className="w-[70%] bg-gray-50 flex flex-col">
          <StepProgress
            currentStep={state.currentStep}
            onStepChange={(step) => setState(prev => ({ ...prev, currentStep: step }))}
          />
          
          <div className="flex-1 p-6">
            {state.currentStep === 1 && (
              <ConnectionStep
                fromConnection={state.fromConnection}
                toConnection={state.toConnection}
                onFromConnectionChange={(conn) => setState(prev => ({ ...prev, fromConnection: conn }))}
                onToConnectionChange={(conn) => setState(prev => ({ ...prev, toConnection: conn }))}
                onNext={() => setState(prev => ({ ...prev, currentStep: 2 }))}
              />
            )}
            
            {state.currentStep === 2 && (
              <TableStep
                fromConnection={state.fromConnection}
                toConnection={state.toConnection}
                fromTable={state.fromTable}
                toTable={state.toTable}
                onFromTableChange={(table) => setState(prev => ({ ...prev, fromTable: table }))}
                onToTableChange={(table) => setState(prev => ({ ...prev, toTable: table }))}
                onNext={() => setState(prev => ({ ...prev, currentStep: 3 }))}
                onBack={() => setState(prev => ({ ...prev, currentStep: 1 }))}
              />
            )}
            
            {state.currentStep === 3 && (
              <FieldMappingStep
                fromTable={state.fromTable}
                toTable={state.toTable}
                fieldMappings={state.fieldMappings}
                onMappingsChange={(mappings) => setState(prev => ({ ...prev, fieldMappings: mappings }))}
                onBack={() => setState(prev => ({ ...prev, currentStep: 2 }))}
                onSave={() => {
                  // 저장 로직
                  console.log("저장:", state);
                  alert("데이터 연결 설정이 저장되었습니다!");
                }}
              />
            )}
        </div>
        </div>
      </div>
    </div>
  );
};

export default DataConnectionDesigner;