"use client";

import React, { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Trash2, Plus, ArrowRight, Save, RefreshCw, Globe, Database, Eye } from "lucide-react";
import { toast } from "sonner";
import { BatchManagementAPI } from "@/lib/api/batchManagement";

// 타입 정의
type BatchType = 'db-to-restapi' | 'restapi-to-db' | 'restapi-to-restapi';

interface BatchTypeOption {
  value: BatchType;
  label: string;
  description: string;
}

interface BatchConnectionInfo {
  id: number;
  name: string;
  type: string;
}

interface BatchColumnInfo {
  column_name: string;
  data_type: string;
  is_nullable: string;
}

export default function BatchManagementNewPage() {
  const router = useRouter();
  
  // 기본 상태
  const [batchName, setBatchName] = useState("");
  const [cronSchedule, setCronSchedule] = useState("0 12 * * *");
  const [description, setDescription] = useState("");

  // 연결 정보
  const [connections, setConnections] = useState<BatchConnectionInfo[]>([]);
  const [toConnection, setToConnection] = useState<BatchConnectionInfo | null>(null);
  const [toTables, setToTables] = useState<string[]>([]);
  const [toTable, setToTable] = useState("");
  const [toColumns, setToColumns] = useState<BatchColumnInfo[]>([]);

  // REST API 설정 (REST API → DB용)
  const [fromApiUrl, setFromApiUrl] = useState("");
  const [fromApiKey, setFromApiKey] = useState("");
  const [fromEndpoint, setFromEndpoint] = useState("");
  const [fromApiMethod, setFromApiMethod] = useState<'GET'>('GET'); // GET만 지원

  // DB → REST API용 상태
  const [fromConnection, setFromConnection] = useState<BatchConnectionInfo | null>(null);
  const [fromTables, setFromTables] = useState<string[]>([]);
  const [fromTable, setFromTable] = useState("");
  const [fromColumns, setFromColumns] = useState<BatchColumnInfo[]>([]);
  const [selectedColumns, setSelectedColumns] = useState<string[]>([]); // 선택된 컬럼들
  const [dbToApiFieldMapping, setDbToApiFieldMapping] = useState<Record<string, string>>({}); // DB 컬럼 → API 필드 매핑
  
  // REST API 대상 설정 (DB → REST API용)
  const [toApiUrl, setToApiUrl] = useState("");
  const [toApiKey, setToApiKey] = useState("");
  const [toEndpoint, setToEndpoint] = useState("");
  const [toApiMethod, setToApiMethod] = useState<'POST' | 'PUT' | 'DELETE'>('POST');
  const [toApiBody, setToApiBody] = useState<string>(''); // Request Body 템플릿
  const [toApiFields, setToApiFields] = useState<string[]>([]); // TO API 필드 목록
  const [urlPathColumn, setUrlPathColumn] = useState(""); // URL 경로에 사용할 컬럼 (PUT/DELETE용)

  // API 데이터 미리보기
  const [fromApiData, setFromApiData] = useState<any[]>([]);
  const [fromApiFields, setFromApiFields] = useState<string[]>([]);

  // API 필드 → DB 컬럼 매핑
  const [apiFieldMappings, setApiFieldMappings] = useState<Record<string, string>>({});

  // 배치 타입 상태
  const [batchType, setBatchType] = useState<BatchType>('restapi-to-db');

  // 배치 타입 옵션
  const batchTypeOptions: BatchTypeOption[] = [
    {
      value: 'restapi-to-db',
      label: 'REST API → DB',
      description: 'REST API에서 데이터베이스로 데이터 수집'
    },
    {
      value: 'db-to-restapi',
      label: 'DB → REST API',
      description: '데이터베이스에서 REST API로 데이터 전송'
    }
  ];

  // 초기 데이터 로드
  useEffect(() => {
    loadConnections();
  }, []);

  // 배치 타입 변경 시 상태 초기화
  useEffect(() => {
    // 공통 초기화
    setApiFieldMappings({});
    
    // REST API → DB 관련 초기화
    setToConnection(null);
    setToTables([]);
    setToTable("");
    setToColumns([]);
    setFromApiUrl("");
    setFromApiKey("");
    setFromEndpoint("");
    setFromApiData([]);
    setFromApiFields([]);
    
    // DB → REST API 관련 초기화
    setFromConnection(null);
    setFromTables([]);
    setFromTable("");
    setFromColumns([]);
    setSelectedColumns([]);
    setDbToApiFieldMapping({});
    setToApiUrl("");
    setToApiKey("");
    setToEndpoint("");
    setToApiBody("");
    setToApiFields([]);
  }, [batchType]);


  // 연결 목록 로드
  const loadConnections = async () => {
    try {
      const result = await BatchManagementAPI.getAvailableConnections();
      setConnections(result || []);
    } catch (error) {
      console.error("연결 목록 로드 오류:", error);
      toast.error("연결 목록을 불러오는데 실패했습니다.");
    }
  };

  // TO 연결 변경 핸들러
  const handleToConnectionChange = async (connectionValue: string) => {
    let connection: BatchConnectionInfo | null = null;
    
    if (connectionValue === 'internal') {
      // 내부 데이터베이스 선택
      connection = connections.find(conn => conn.type === 'internal') || null;
    } else {
      // 외부 데이터베이스 선택
      const connectionId = parseInt(connectionValue);
      connection = connections.find(conn => conn.id === connectionId) || null;
    }
    
    setToConnection(connection);
    setToTable("");
    setToColumns([]);

    if (connection) {
      try {
        const connectionType = connection.type === 'internal' ? 'internal' : 'external';
        const result = await BatchManagementAPI.getTablesFromConnection(connectionType, connection.id);
        const tableNames = Array.isArray(result) 
          ? result.map((table: any) => typeof table === 'string' ? table : table.table_name || String(table))
          : [];
        setToTables(tableNames);
      } catch (error) {
        console.error("테이블 목록 로드 오류:", error);
        toast.error("테이블 목록을 불러오는데 실패했습니다.");
      }
    }
  };

  // TO 테이블 변경 핸들러
  const handleToTableChange = async (tableName: string) => {
    console.log("🔍 테이블 변경:", { tableName, toConnection });
    setToTable(tableName);
    setToColumns([]);

    if (toConnection && tableName) {
      try {
        const connectionType = toConnection.type === 'internal' ? 'internal' : 'external';
        console.log("🔍 컬럼 조회 시작:", { connectionType, connectionId: toConnection.id, tableName });
        
        const result = await BatchManagementAPI.getTableColumns(connectionType, tableName, toConnection.id);
        console.log("🔍 컬럼 조회 결과:", result);
        
        if (result && result.length > 0) {
          setToColumns(result);
          console.log("✅ 컬럼 설정 완료:", result.length, "개");
        } else {
          setToColumns([]);
          console.log("⚠️ 컬럼이 없음");
        }
      } catch (error) {
        console.error("❌ 컬럼 목록 로드 오류:", error);
        toast.error("컬럼 목록을 불러오는데 실패했습니다.");
        setToColumns([]);
      }
    }
  };

  // FROM 연결 변경 핸들러 (DB → REST API용)
  const handleFromConnectionChange = async (connectionValue: string) => {
    let connection: BatchConnectionInfo | null = null;
    if (connectionValue === 'internal') {
      connection = connections.find(conn => conn.type === 'internal') || null;
    } else {
      const connectionId = parseInt(connectionValue);
      connection = connections.find(conn => conn.id === connectionId) || null;
    }
    setFromConnection(connection);
    setFromTable("");
    setFromColumns([]);

    if (connection) {
      try {
        const connectionType = connection.type === 'internal' ? 'internal' : 'external';
        const result = await BatchManagementAPI.getTablesFromConnection(connectionType, connection.id);
        const tableNames = Array.isArray(result)
          ? result.map((table: any) => typeof table === 'string' ? table : table.table_name || String(table))
          : [];
        setFromTables(tableNames);
      } catch (error) {
        console.error("테이블 목록 로드 오류:", error);
        toast.error("테이블 목록을 불러오는데 실패했습니다.");
      }
    }
  };

  // FROM 테이블 변경 핸들러 (DB → REST API용)
  const handleFromTableChange = async (tableName: string) => {
    console.log("🔍 FROM 테이블 변경:", { tableName, fromConnection });
    setFromTable(tableName);
    setFromColumns([]);
    setSelectedColumns([]); // 선택된 컬럼도 초기화
    setDbToApiFieldMapping({}); // 매핑도 초기화

    if (fromConnection && tableName) {
      try {
        const connectionType = fromConnection.type === 'internal' ? 'internal' : 'external';
        console.log("🔍 FROM 컬럼 조회 시작:", { connectionType, connectionId: fromConnection.id, tableName });
        
        const result = await BatchManagementAPI.getTableColumns(connectionType, tableName, fromConnection.id);
        console.log("🔍 FROM 컬럼 조회 결과:", result);
        
        if (result && result.length > 0) {
          setFromColumns(result);
          console.log("✅ FROM 컬럼 설정 완료:", result.length, "개");
        } else {
          setFromColumns([]);
          console.log("⚠️ FROM 컬럼이 없음");
        }
      } catch (error) {
        console.error("❌ FROM 컬럼 목록 로드 오류:", error);
        toast.error("컬럼 목록을 불러오는데 실패했습니다.");
        setFromColumns([]);
      }
    }
  };

  // TO API 미리보기 (DB → REST API용)
  const previewToApiData = async () => {
    if (!toApiUrl || !toApiKey || !toEndpoint) {
      toast.error("API URL, API Key, 엔드포인트를 모두 입력해주세요.");
      return;
    }

    try {
      console.log("🔍 TO API 미리보기 시작:", { toApiUrl, toApiKey, toEndpoint, toApiMethod });
      
      const result = await BatchManagementAPI.previewRestApiData(
        toApiUrl,
        toApiKey,
        toEndpoint,
        'GET' // 미리보기는 항상 GET으로
      );

      console.log("🔍 TO API 미리보기 결과:", result);
      
      if (result.fields && result.fields.length > 0) {
        setToApiFields(result.fields);
        toast.success(`TO API 필드 ${result.fields.length}개를 조회했습니다.`);
      } else {
        setToApiFields([]);
        toast.warning("TO API에서 필드를 찾을 수 없습니다.");
      }
    } catch (error) {
      console.error("❌ TO API 미리보기 오류:", error);
      toast.error("TO API 미리보기에 실패했습니다.");
      setToApiFields([]);
    }
  };

  // REST API 데이터 미리보기
  const previewRestApiData = async () => {
    if (!fromApiUrl || !fromApiKey || !fromEndpoint) {
      toast.error("API URL, API Key, 엔드포인트를 모두 입력해주세요.");
      return;
    }

    try {
      console.log("REST API 데이터 미리보기 시작...");
      
      const result = await BatchManagementAPI.previewRestApiData(
        fromApiUrl,
        fromApiKey,
        fromEndpoint,
        fromApiMethod
      );

      console.log("API 미리보기 결과:", result);
      console.log("result.fields:", result.fields);
      console.log("result.samples:", result.samples);
      console.log("result.totalCount:", result.totalCount);

      if (result.fields && result.fields.length > 0) {
        console.log("✅ 백엔드에서 fields 제공됨:", result.fields);
        setFromApiFields(result.fields);
        setFromApiData(result.samples);
        
        console.log("추출된 필드:", result.fields);
        toast.success(`API 데이터 미리보기 완료! ${result.fields.length}개 필드, ${result.totalCount}개 레코드`);
      } else if (result.samples && result.samples.length > 0) {
        // 백엔드에서 fields를 제대로 보내지 않은 경우, 프론트엔드에서 직접 추출
        console.log("⚠️ 백엔드에서 fields가 없어서 프론트엔드에서 추출");
        const extractedFields = Object.keys(result.samples[0]);
        console.log("프론트엔드에서 추출한 필드:", extractedFields);
        
        setFromApiFields(extractedFields);
        setFromApiData(result.samples);
        
        toast.success(`API 데이터 미리보기 완료! ${extractedFields.length}개 필드, ${result.samples.length}개 레코드`);
      } else {
        console.log("❌ 데이터가 없음");
        setFromApiFields([]);
        setFromApiData([]);
        toast.warning("API에서 데이터를 가져올 수 없습니다.");
      }
    } catch (error) {
      console.error("REST API 미리보기 오류:", error);
      toast.error("API 데이터 미리보기에 실패했습니다.");
      setFromApiFields([]);
      setFromApiData([]);
    }
  };

  // 배치 설정 저장
  const handleSave = async () => {
    if (!batchName.trim()) {
      toast.error("배치명을 입력해주세요.");
      return;
    }

    // 배치 타입별 검증 및 저장
    if (batchType === 'restapi-to-db') {
      const mappedFields = Object.keys(apiFieldMappings).filter(field => apiFieldMappings[field]);
      if (mappedFields.length === 0) {
        toast.error("최소 하나의 API 필드를 DB 컬럼에 매핑해주세요.");
        return;
      }
      
      // API 필드 매핑을 배치 매핑 형태로 변환
      const apiMappings = mappedFields.map(apiField => ({
        from_connection_type: 'restapi' as const,
        from_table_name: fromEndpoint, // API 엔드포인트
        from_column_name: apiField, // API 필드명
        from_api_url: fromApiUrl,
        from_api_key: fromApiKey,
        from_api_method: fromApiMethod,
        to_connection_type: toConnection?.type === 'internal' ? 'internal' : 'external',
        to_connection_id: toConnection?.type === 'internal' ? undefined : toConnection?.id,
        to_table_name: toTable,
        to_column_name: apiFieldMappings[apiField], // 매핑된 DB 컬럼
        mapping_type: 'direct' as const
      }));

      console.log("REST API 배치 설정 저장:", {
        batchName,
        batchType,
        cronSchedule,
        description,
        apiMappings
      });

      // 실제 API 호출
      try {
        const result = await BatchManagementAPI.saveRestApiBatch({
          batchName,
          batchType,
          cronSchedule,
          description,
          apiMappings
        });

        if (result.success) {
          toast.success(result.message || "REST API 배치 설정이 저장되었습니다.");
          setTimeout(() => {
            router.push('/admin/batchmng');
          }, 1000);
        } else {
          toast.error(result.message || "배치 저장에 실패했습니다.");
        }
      } catch (error) {
        console.error("배치 저장 오류:", error);
        toast.error("배치 저장 중 오류가 발생했습니다.");
      }
      return;
    } else if (batchType === 'db-to-restapi') {
      // DB → REST API 배치 검증
      if (!fromConnection || !fromTable || selectedColumns.length === 0) {
        toast.error("소스 데이터베이스, 테이블, 컬럼을 선택해주세요.");
        return;
      }
      
      if (!toApiUrl || !toApiKey || !toEndpoint) {
        toast.error("대상 API URL, API Key, 엔드포인트를 입력해주세요.");
        return;
      }

      if ((toApiMethod === 'POST' || toApiMethod === 'PUT') && !toApiBody) {
        toast.error("POST/PUT 메서드의 경우 Request Body 템플릿을 입력해주세요.");
        return;
      }

      // DELETE의 경우 빈 Request Body라도 템플릿 로직을 위해 "{}" 설정
      let finalToApiBody = toApiBody;
      if (toApiMethod === 'DELETE' && !finalToApiBody.trim()) {
        finalToApiBody = '{}';
      }

      // DB → REST API 매핑 생성 (선택된 컬럼만)
      const selectedColumnObjects = fromColumns.filter(column => selectedColumns.includes(column.column_name));
      const dbMappings = selectedColumnObjects.map((column, index) => ({
        from_connection_type: fromConnection.type === 'internal' ? 'internal' : 'external',
        from_connection_id: fromConnection.type === 'internal' ? undefined : fromConnection.id,
        from_table_name: fromTable,
        from_column_name: column.column_name,
        from_column_type: column.data_type,
        to_connection_type: 'restapi' as const,
        to_table_name: toEndpoint, // API 엔드포인트
        to_column_name: dbToApiFieldMapping[column.column_name] || column.column_name, // 매핑된 API 필드명
        to_api_url: toApiUrl,
        to_api_key: toApiKey,
        to_api_method: toApiMethod,
        to_api_body: finalToApiBody, // Request Body 템플릿
        mapping_type: 'template' as const,
        mapping_order: index + 1
      }));

      // URL 경로 파라미터 매핑 추가 (PUT/DELETE용)
      if ((toApiMethod === 'PUT' || toApiMethod === 'DELETE') && urlPathColumn) {
        const urlPathColumnObject = fromColumns.find(col => col.column_name === urlPathColumn);
        if (urlPathColumnObject) {
          dbMappings.push({
            from_connection_type: fromConnection.type === 'internal' ? 'internal' : 'external',
            from_connection_id: fromConnection.type === 'internal' ? undefined : fromConnection.id,
            from_table_name: fromTable,
            from_column_name: urlPathColumn,
            from_column_type: urlPathColumnObject.data_type,
            to_connection_type: 'restapi' as const,
            to_table_name: toEndpoint,
            to_column_name: 'URL_PATH_PARAM', // 특별한 식별자
            to_api_url: toApiUrl,
            to_api_key: toApiKey,
            to_api_method: toApiMethod,
            to_api_body: finalToApiBody,
            mapping_type: 'url_path' as const,
            mapping_order: 999 // 마지막 순서
          });
        }
      }

      console.log("DB → REST API 배치 설정 저장:", {
        batchName,
        batchType,
        cronSchedule,
        description,
        dbMappings
      });

      // 실제 API 호출 (기존 saveRestApiBatch 재사용)
      try {
        const result = await BatchManagementAPI.saveRestApiBatch({
          batchName,
          batchType,
          cronSchedule,
          description,
          apiMappings: dbMappings
        });

        if (result.success) {
          toast.success(result.message || "DB → REST API 배치 설정이 저장되었습니다.");
          setTimeout(() => {
            router.push('/admin/batchmng');
          }, 1000);
        } else {
          toast.error(result.message || "배치 저장에 실패했습니다.");
        }
      } catch (error) {
        console.error("배치 저장 오류:", error);
        toast.error("배치 저장 중 오류가 발생했습니다.");
      }
      return;
    }

    toast.error("지원하지 않는 배치 타입입니다.");
  };

  return (
    <div className="container mx-auto p-6 space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-3xl font-bold">고급 배치 생성</h1>
        <div className="flex space-x-2">
          <Button onClick={loadConnections} variant="outline">
            <RefreshCw className="w-4 h-4 mr-2" />
            새로고침
          </Button>
          <Button onClick={handleSave}>
            <Save className="w-4 h-4 mr-2" />
            저장
          </Button>
        </div>
      </div>

      {/* 기본 정보 */}
      <Card>
        <CardHeader>
          <CardTitle>기본 정보</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          {/* 배치 타입 선택 */}
          <div>
            <Label>배치 타입 *</Label>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-3 mt-2">
              {batchTypeOptions.map((option) => (
                <div
                  key={option.value}
                  className={`p-3 border rounded-lg cursor-pointer transition-all ${
                    batchType === option.value
                      ? 'border-blue-500 bg-blue-50'
                      : 'border-gray-200 hover:border-gray-300'
                  }`}
                  onClick={() => setBatchType(option.value)}
                >
                  <div className="flex items-center space-x-2">
                    {option.value === 'restapi-to-db' ? (
                      <Globe className="w-4 h-4 text-blue-600" />
                    ) : (
                      <Database className="w-4 h-4 text-green-600" />
                    )}
                    <div>
                      <div className="font-medium text-sm">{option.label}</div>
                      <div className="text-xs text-gray-500 mt-1">{option.description}</div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <Label htmlFor="batchName">배치명 *</Label>
              <Input
                id="batchName"
                value={batchName}
                onChange={(e) => setBatchName(e.target.value)}
                placeholder="배치명을 입력하세요"
              />
            </div>
            <div>
              <Label htmlFor="cronSchedule">실행 스케줄 *</Label>
              <Input
                id="cronSchedule"
                value={cronSchedule}
                onChange={(e) => setCronSchedule(e.target.value)}
                placeholder="0 12 * * *"
              />
            </div>
          </div>

          <div>
            <Label htmlFor="description">설명</Label>
            <Textarea
              id="description"
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              placeholder="배치에 대한 설명을 입력하세요"
            />
          </div>
        </CardContent>
      </Card>

      {/* FROM 설정 */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center">
            {batchType === 'restapi-to-db' ? (
              <>
                <Globe className="w-5 h-5 mr-2" />
                FROM: REST API (소스)
              </>
            ) : (
              <>
                <Database className="w-5 h-5 mr-2" />
                FROM: 데이터베이스 (소스)
              </>
            )}
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          {/* REST API 설정 (REST API → DB) */}
          {batchType === 'restapi-to-db' && (
            <div className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <Label htmlFor="fromApiUrl">API 서버 URL *</Label>
                  <Input
                    id="fromApiUrl"
                    value={fromApiUrl}
                    onChange={(e) => setFromApiUrl(e.target.value)}
                    placeholder="https://api.example.com"
                  />
                </div>
                <div>
                  <Label htmlFor="fromApiKey">API 키 *</Label>
                  <Input
                    id="fromApiKey"
                    value={fromApiKey}
                    onChange={(e) => setFromApiKey(e.target.value)}
                    placeholder="ak_your_api_key_here"
                  />
                </div>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <Label htmlFor="fromEndpoint">엔드포인트 *</Label>
                  <Input
                    id="fromEndpoint"
                    value={fromEndpoint}
                    onChange={(e) => setFromEndpoint(e.target.value)}
                    placeholder="/api/users"
                  />
                </div>
                <div>
                  <Label>HTTP 메서드</Label>
                  <Select value={fromApiMethod} onValueChange={(value: any) => setFromApiMethod(value)}>
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="GET">GET (데이터 조회)</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

              </div>

              {fromApiUrl && fromApiKey && fromEndpoint && (
                <div className="space-y-3">
                  <div className="p-3 bg-gray-50 rounded-lg">
                    <div className="text-sm font-medium text-gray-700">API 호출 미리보기</div>
                    <div className="text-sm text-gray-600 mt-1">
                      {fromApiMethod} {fromApiUrl}{fromEndpoint}
                    </div>
                    <div className="text-xs text-gray-500 mt-1">Headers: X-API-Key: {fromApiKey.substring(0, 10)}...</div>
                  </div>
                  <Button onClick={previewRestApiData} variant="outline" className="w-full">
                    <RefreshCw className="w-4 h-4 mr-2" />
                    API 데이터 미리보기
                  </Button>
                </div>
              )}
            </div>
          )}

          {/* DB 설정 (DB → REST API) */}
          {batchType === 'db-to-restapi' && (
            <div className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <Label>소스 연결 *</Label>
                  <Select value={fromConnection?.id?.toString() || fromConnection?.type || ""} onValueChange={handleFromConnectionChange}>
                    <SelectTrigger>
                      <SelectValue placeholder="연결을 선택하세요" />
                    </SelectTrigger>
                    <SelectContent>
                      {connections.map((connection) => (
                        <SelectItem 
                          key={connection.id || 'internal'} 
                          value={connection.id ? connection.id.toString() : 'internal'}
                        >
                          {connection.name} ({connection.type === 'internal' ? '내부 DB' : connection.db_type})
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
                <div>
                  <Label>소스 테이블 *</Label>
                  <Select value={fromTable} onValueChange={handleFromTableChange}>
                    <SelectTrigger>
                      <SelectValue placeholder="테이블을 선택하세요" />
                    </SelectTrigger>
                    <SelectContent>
                      {Array.isArray(fromTables) && fromTables.map((table: string) => (
                        <SelectItem key={table} value={table}>
                          {table.toUpperCase()}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </div>

              {/* 컬럼 선택 UI */}
              {fromColumns.length > 0 && (
                <div>
                  <Label>컬럼 선택 (선택된 컬럼이 API로 전송됩니다)</Label>
                  <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2 mt-2 max-h-60 overflow-y-auto border rounded-lg p-3">
                    {fromColumns.map((column) => (
                      <div key={column.column_name} className="flex items-center space-x-2">
                        <input
                          type="checkbox"
                          id={`col-${column.column_name}`}
                          checked={selectedColumns.includes(column.column_name)}
                          onChange={(e) => {
                            if (e.target.checked) {
                              setSelectedColumns([...selectedColumns, column.column_name]);
                            } else {
                              setSelectedColumns(selectedColumns.filter(col => col !== column.column_name));
                            }
                          }}
                          className="rounded border-gray-300"
                        />
                        <label 
                          htmlFor={`col-${column.column_name}`}
                          className="text-sm cursor-pointer flex-1"
                          title={`타입: ${column.data_type} | NULL: ${column.is_nullable ? 'Y' : 'N'}`}
                        >
                          {column.column_name}
                        </label>
                      </div>
                    ))}
                  </div>
                  
                  {/* 선택된 컬럼 개수 표시 */}
                  <div className="text-xs text-gray-500 mt-2">
                    선택된 컬럼: {selectedColumns.length}개 / 전체: {fromColumns.length}개
                  </div>

                  {/* 빠른 매핑 버튼들 */}
                  {selectedColumns.length > 0 && toApiFields.length > 0 && (
                    <div className="mt-3 p-3 bg-green-50 border border-green-200 rounded-lg">
                      <div className="text-sm font-medium text-green-800 mb-2">빠른 매핑</div>
                      <div className="flex flex-wrap gap-2">
                        <button
                          type="button"
                          onClick={() => {
                            const mapping: Record<string, string> = {};
                            selectedColumns.forEach(col => {
                              // 스마트 매핑 로직
                              const matchingApiField = toApiFields.find(apiField => {
                                const colLower = col.toLowerCase();
                                const apiLower = apiField.toLowerCase();
                                
                                // 정확한 매치
                                if (colLower === apiLower) return true;
                                
                                // 언더스코어 무시 매치
                                if (colLower.replace(/_/g, '') === apiLower.replace(/_/g, '')) return true;
                                
                                // 의미적 매핑
                                if ((colLower.includes('created') || colLower.includes('reg')) && 
                                    (apiLower.includes('date') || apiLower.includes('time'))) return true;
                                if ((colLower.includes('updated') || colLower.includes('mod')) && 
                                    (apiLower.includes('date') || apiLower.includes('time'))) return true;
                                if (colLower.includes('id') && apiLower.includes('id')) return true;
                                if (colLower.includes('name') && apiLower.includes('name')) return true;
                                if (colLower.includes('code') && apiLower.includes('code')) return true;
                                
                                return false;
                              });
                              
                              if (matchingApiField) {
                                mapping[col] = matchingApiField;
                              }
                            });
                            setDbToApiFieldMapping(mapping);
                            toast.success(`${Object.keys(mapping).length}개 컬럼이 자동 매핑되었습니다.`);
                          }}
                          className="px-3 py-1 bg-blue-600 text-white text-xs rounded hover:bg-blue-700"
                        >
                          스마트 자동 매핑
                        </button>
                        <button
                          type="button"
                          onClick={() => {
                            setDbToApiFieldMapping({});
                            toast.success("매핑이 초기화되었습니다.");
                          }}
                          className="px-3 py-1 bg-gray-600 text-white text-xs rounded hover:bg-gray-700"
                        >
                          매핑 초기화
                        </button>
                      </div>
                    </div>
                  )}

                  {/* 자동 생성된 JSON 미리보기 */}
                  {selectedColumns.length > 0 && (
                    <div className="mt-3 p-3 bg-blue-50 border border-blue-200 rounded-lg">
                      <div className="text-sm font-medium text-blue-800 mb-2">자동 생성된 JSON 구조</div>
                      <pre className="text-xs text-blue-600 font-mono overflow-x-auto">
{JSON.stringify(
  selectedColumns.reduce((obj, col) => {
    const apiField = dbToApiFieldMapping[col] || col; // 매핑된 API 필드명 또는 원본 컬럼명
    obj[apiField] = `{{${col}}}`;
    return obj;
  }, {} as Record<string, string>),
  null,
  2
)}
                      </pre>
                      <button
                        type="button"
                        onClick={() => {
                          const autoJson = JSON.stringify(
                            selectedColumns.reduce((obj, col) => {
                              const apiField = dbToApiFieldMapping[col] || col; // 매핑된 API 필드명 또는 원본 컬럼명
                              obj[apiField] = `{{${col}}}`;
                              return obj;
                            }, {} as Record<string, string>),
                            null,
                            2
                          );
                          setToApiBody(autoJson);
                          toast.success("Request Body에 자동 생성된 JSON이 적용되었습니다.");
                        }}
                        className="mt-2 px-3 py-1 bg-blue-600 text-white text-xs rounded hover:bg-blue-700"
                      >
                        Request Body에 적용
                      </button>
                    </div>
                  )}
                </div>
              )}
            </div>
          )}
        </CardContent>
      </Card>

      {/* 매핑 UI - 배치 타입별 동적 렌더링 */}
      {/* REST API → DB 매핑 */}
      {batchType === 'restapi-to-db' && fromApiFields.length > 0 && toColumns.length > 0 && (
        <Card>
          <CardHeader>
            <CardTitle>API 필드 → DB 컬럼 매핑</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-3 max-h-96 overflow-y-auto border rounded-lg p-4">
              {fromApiFields.map((apiField) => (
                <div key={apiField} className="flex items-center space-x-4 p-3 bg-gray-50 rounded-lg">
                  {/* API 필드 정보 */}
                  <div className="flex-1">
                    <div className="font-medium text-sm">{apiField}</div>
                    <div className="text-xs text-gray-500">
                      {fromApiData.length > 0 && fromApiData[0][apiField] !== undefined 
                        ? `예: ${String(fromApiData[0][apiField]).substring(0, 30)}${String(fromApiData[0][apiField]).length > 30 ? '...' : ''}`
                        : 'API 필드'
                      }
                    </div>
                  </div>
                  
                  {/* 화살표 */}
                  <div className="text-gray-400">
                    <ArrowRight className="w-4 h-4" />
                  </div>
                  
                  {/* DB 컬럼 선택 */}
                  <div className="flex-1">
                    <Select
                      value={apiFieldMappings[apiField] || "none"}
                      onValueChange={(value) => {
                        setApiFieldMappings(prev => ({
                          ...prev,
                          [apiField]: value === "none" ? "" : value
                        }));
                      }}
                    >
                      <SelectTrigger className="w-full">
                        <SelectValue placeholder="DB 컬럼 선택" />
                      </SelectTrigger>
                     <SelectContent>
                       <SelectItem value="none">선택 안함</SelectItem>
                       {toColumns.map((column) => (
                         <SelectItem key={column.column_name} value={column.column_name}>
                           <div className="flex flex-col">
                             <span className="font-medium">{column.column_name.toUpperCase()}</span>
                             <span className="text-xs text-gray-500">{column.data_type}</span>
                           </div>
                         </SelectItem>
                       ))}
                     </SelectContent>
                    </Select>
                  </div>
                </div>
              ))}
            </div>
            
            {fromApiData.length > 0 && (
              <div className="mt-3 p-3 bg-gray-50 rounded-lg">
                <div className="text-sm font-medium text-gray-700 mb-2">샘플 데이터 (최대 3개)</div>
                <div className="space-y-2 max-h-40 overflow-y-auto">
                  {fromApiData.slice(0, 3).map((item, index) => (
                    <div key={index} className="text-xs bg-white p-2 rounded border">
                      <pre className="whitespace-pre-wrap">{JSON.stringify(item, null, 2)}</pre>
                    </div>
                  ))}
                </div>
              </div>
            )}
          </CardContent>
        </Card>
      )}

      {/* DB → REST API 매핑 */}
      {batchType === 'db-to-restapi' && selectedColumns.length > 0 && toApiFields.length > 0 && (
        <Card>
          <CardHeader>
            <CardTitle>DB 컬럼 → API 필드 매핑</CardTitle>
            <CardDescription>
              DB 컬럼 값을 REST API Request Body에 매핑하세요. Request Body 템플릿에서 {`{{컬럼명}}`} 형태로 사용됩니다.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-3 max-h-96 overflow-y-auto border rounded-lg p-4">
              {fromColumns.filter(column => selectedColumns.includes(column.column_name)).map((column) => (
                <div key={column.column_name} className="flex items-center space-x-4 p-3 bg-gray-50 rounded-lg">
                  {/* DB 컬럼 정보 */}
                  <div className="flex-1">
                    <div className="font-medium text-sm">{column.column_name}</div>
                    <div className="text-xs text-gray-500">
                      타입: {column.data_type} | NULL: {column.is_nullable ? 'Y' : 'N'}
                    </div>
                  </div>
                  
                  {/* 화살표 */}
                  <div className="text-gray-400">→</div>
                  
                  {/* API 필드 선택 드롭다운 */}
                  <div className="flex-1">
                    <Select 
                      value={dbToApiFieldMapping[column.column_name] || ''} 
                      onValueChange={(value) => {
                        setDbToApiFieldMapping(prev => ({
                          ...prev,
                          [column.column_name]: value === 'none' ? '' : value
                        }));
                      }}
                    >
                      <SelectTrigger className="w-full">
                        <SelectValue placeholder="API 필드 선택" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="none">선택 안함</SelectItem>
                        {toApiFields.map((apiField) => (
                          <SelectItem key={apiField} value={apiField}>
                            {apiField}
                          </SelectItem>
                        ))}
                        <SelectItem value="custom">직접 입력...</SelectItem>
                      </SelectContent>
                    </Select>
                    
                    {/* 직접 입력 모드 */}
                    {dbToApiFieldMapping[column.column_name] === 'custom' && (
                      <input
                        type="text"
                        placeholder="API 필드명을 직접 입력하세요"
                        className="w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 mt-2"
                        onChange={(e) => {
                          setDbToApiFieldMapping(prev => ({
                            ...prev,
                            [column.column_name]: e.target.value
                          }));
                        }}
                      />
                    )}
                    
                    <div className="text-xs text-gray-500 mt-1">
                      {dbToApiFieldMapping[column.column_name] 
                        ? `매핑: ${column.column_name} → ${dbToApiFieldMapping[column.column_name]}`
                        : `기본값: ${column.column_name} (DB 컬럼명 사용)`
                      }
                    </div>
                  </div>
                  
                  {/* 템플릿 미리보기 */}
                  <div className="flex-1">
                    <div className="text-sm font-mono bg-white p-2 rounded border">
                      {`{{${column.column_name}}}`}
                    </div>
                    <div className="text-xs text-gray-500 mt-1">
                      실제 DB 값으로 치환됩니다
                    </div>
                  </div>
                </div>
              ))}
            </div>
            
            <div className="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg">
              <div className="text-sm font-medium text-blue-800">매핑 사용 예시</div>
              <div className="text-xs text-blue-600 mt-1 font-mono">
                {`{"id": "{{id}}", "name": "{{user_name}}", "email": "{{email}}"}`}
              </div>
            </div>
          </CardContent>
        </Card>
      )}

      {/* TO 설정 */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center">
            {batchType === 'restapi-to-db' ? (
              <>
                <Database className="w-5 h-5 mr-2" />
                TO: 데이터베이스 (대상)
              </>
            ) : (
              <>
                <Globe className="w-5 h-5 mr-2" />
                TO: REST API (대상)
              </>
            )}
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          {/* DB 설정 (REST API → DB) */}
          {batchType === 'restapi-to-db' && (
            <>
              <div>
                <Label>데이터베이스 커넥션 선택</Label>
                <Select onValueChange={handleToConnectionChange}>
                  <SelectTrigger>
                    <SelectValue placeholder="커넥션을 선택하세요" />
                  </SelectTrigger>
                  <SelectContent>
                    {connections.map((connection, index) => (
                      <SelectItem 
                        key={connection.id || `internal-${index}`} 
                        value={connection.id ? connection.id.toString() : 'internal'}
                      >
                        {connection.name}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            </>
          )}

          {/* REST API 설정 (DB → REST API) */}
          {batchType === 'db-to-restapi' && (
            <div className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <Label htmlFor="toApiUrl">API 서버 URL *</Label>
                  <Input
                    id="toApiUrl"
                    value={toApiUrl}
                    onChange={(e) => setToApiUrl(e.target.value)}
                    placeholder="https://api.example.com"
                  />
                </div>
                <div>
                  <Label htmlFor="toApiKey">API 키 *</Label>
                  <Input
                    id="toApiKey"
                    value={toApiKey}
                    onChange={(e) => setToApiKey(e.target.value)}
                    placeholder="ak_your_api_key_here"
                  />
                </div>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <Label htmlFor="toEndpoint">엔드포인트 *</Label>
                  <Input
                    id="toEndpoint"
                    value={toEndpoint}
                    onChange={(e) => setToEndpoint(e.target.value)}
                    placeholder="/api/users"
                  />
                  {(toApiMethod === 'PUT' || toApiMethod === 'DELETE') && (
                    <p className="text-xs text-gray-500 mt-1">
                      💡 실제 URL: {toEndpoint}/{urlPathColumn ? `{${urlPathColumn}}` : '{ID}'}
                    </p>
                  )}
                </div>
                <div>
                  <Label>HTTP 메서드</Label>
                  <Select value={toApiMethod} onValueChange={(value: any) => setToApiMethod(value)}>
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="POST">POST (데이터 생성)</SelectItem>
                      <SelectItem value="PUT">PUT (데이터 업데이트)</SelectItem>
                      <SelectItem value="DELETE">DELETE (데이터 삭제)</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>

              {/* URL 경로 파라미터 설정 (PUT/DELETE용) */}
              {(toApiMethod === 'PUT' || toApiMethod === 'DELETE') && (
                <div>
                  <Label>URL 경로 파라미터 컬럼 *</Label>
                  <Select value={urlPathColumn} onValueChange={setUrlPathColumn}>
                    <SelectTrigger>
                      <SelectValue placeholder="URL 경로에 사용할 컬럼을 선택하세요" />
                    </SelectTrigger>
                    <SelectContent>
                      {selectedColumns.map((column) => (
                        <SelectItem key={column} value={column}>
                          {column} (예: /api/users/{`{${column}}`})
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                  <p className="text-xs text-gray-500 mt-1">
                    PUT/DELETE 요청 시 URL 경로에 포함될 컬럼을 선택하세요. (예: USER_ID → /api/users/user123)
                  </p>
                </div>
              )}

              {/* TO API 미리보기 버튼 */}
              <div className="flex justify-center">
                <button
                  type="button"
                  onClick={previewToApiData}
                  className="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 flex items-center space-x-2"
                >
                  <Eye className="w-4 h-4" />
                  <span>API 필드 미리보기</span>
                </button>
              </div>

              {/* TO API 필드 표시 */}
              {toApiFields.length > 0 && (
                <div className="p-3 bg-green-50 border border-green-200 rounded-lg">
                  <div className="text-sm font-medium text-green-800 mb-2">
                    API 필드 목록 ({toApiFields.length}개)
                  </div>
                  <div className="flex flex-wrap gap-2">
                    {toApiFields.map((field) => (
                      <span key={field} className="px-2 py-1 bg-green-100 text-green-700 text-xs rounded">
                        {field}
                      </span>
                    ))}
                  </div>
                </div>
              )}

              {/* Request Body 템플릿 */}
              {(toApiMethod === 'POST' || toApiMethod === 'PUT') && (
                <div>
                  <Label htmlFor="toApiBody">Request Body 템플릿 (JSON)</Label>
                  <textarea
                    id="toApiBody"
                    value={toApiBody}
                    onChange={(e) => setToApiBody(e.target.value)}
                    placeholder='{"id": "{{id}}", "name": "{{name}}", "email": "{{email}}"}'
                    className="w-full p-2 border rounded-md h-24 font-mono text-sm"
                  />
                  <div className="text-xs text-gray-500 mt-1">
                    DB 컬럼 값을 {`{{컬럼명}}`} 형태로 매핑하세요. 예: {`{{user_id}}, {{user_name}}`}
                  </div>
                </div>
              )}

              {toApiUrl && toApiKey && toEndpoint && (
                <div className="p-3 bg-gray-50 rounded-lg">
                  <div className="text-sm font-medium text-gray-700">API 호출 미리보기</div>
                  <div className="text-sm text-gray-600 mt-1">
                    {toApiMethod} {toApiUrl}{toEndpoint}
                  </div>
                  <div className="text-xs text-gray-500 mt-1">Headers: X-API-Key: {toApiKey.substring(0, 10)}...</div>
                  {toApiBody && (
                    <div className="text-xs text-blue-600 mt-1">Body: {toApiBody.substring(0, 50)}...</div>
                  )}
                </div>
              )}
            </div>
          )}

          {/* 테이블/컬럼 선택 (REST API → DB만) */}
          {batchType === 'restapi-to-db' && toTables.length > 0 && (
            <div>
              <Label>테이블 선택</Label>
              <Select onValueChange={handleToTableChange}>
                <SelectTrigger>
                  <SelectValue placeholder="테이블을 선택하세요" />
                </SelectTrigger>
                <SelectContent>
                  {toTables.map((table: string) => (
                    <SelectItem key={table} value={table}>
                      {table.toUpperCase()}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          )}

        </CardContent>
      </Card>
    </div>
  );
}