"use client";

import React from "react";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Separator } from "@/components/ui/separator";

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

// 컴포넌트 import
import ConnectionTypeSelector from "./ConnectionTypeSelector";
import MappingDetailList from "./MappingDetailList";
import ActionSummaryPanel from "./ActionSummaryPanel";
import AdvancedSettings from "./AdvancedSettings";
import ActionButtons from "./ActionButtons";

/**
 * 📋 좌측 패널 (30% 너비)
 * - 연결 타입 선택
 * - 매핑 정보 모니터링
 * - 상세 설정 목록
 * - 액션 버튼들
 */
const LeftPanel: React.FC<LeftPanelProps> = ({ state, actions }) => {
  return (
    <div className="flex h-full flex-col overflow-hidden">
      <ScrollArea className="flex-1 p-3 pb-0">
        <div className="space-y-3 pb-3">
          {/* 0단계: 연결 타입 선택 */}
          <div>
            <h3 className="text-muted-foreground mb-2 text-sm font-medium">0단계: 연결 타입</h3>
            <ConnectionTypeSelector selectedType={state.connectionType} onTypeChange={actions.setConnectionType} />
          </div>

          <Separator />

          {/* 매핑 상세 목록 */}
          {state.fieldMappings.length > 0 && (
            <>
              <div>
                <h3 className="text-muted-foreground mb-2 text-sm font-medium">매핑 상세 목록</h3>
                <MappingDetailList
                  mappings={state.fieldMappings}
                  selectedMapping={state.selectedMapping}
                  onSelectMapping={(mappingId) => {
                    // TODO: 선택된 매핑 상태 업데이트
                  }}
                  onUpdateMapping={actions.updateMapping}
                  onDeleteMapping={actions.deleteMapping}
                />
              </div>

              <Separator />
            </>
          )}

          {/* 액션 설정 요약 */}
          <div>
            <h3 className="text-muted-foreground mb-2 text-sm font-medium">액션 설정</h3>
            <ActionSummaryPanel state={state} />
          </div>

          <Separator />

          {/* 고급 설정 */}
          <div>
            <h3 className="text-muted-foreground mb-2 text-sm font-medium">고급 설정</h3>
            <AdvancedSettings connectionType={state.connectionType} />
          </div>
        </div>
      </ScrollArea>

      {/* 하단 액션 버튼들 - 고정 위치 */}
      <div className="flex-shrink-0 border-t bg-white p-3 shadow-sm">
        <ActionButtons state={state} actions={actions} />
      </div>
    </div>
  );
};

export default LeftPanel;