/**
 * 테이블 선택 패널
 * 선택된 커넥션에서 FROM/TO 테이블을 선택할 수 있는 컴포넌트
 */

import React, { useState, useEffect } from "react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Badge } from "@/components/ui/badge";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Table, AlertCircle, Info, Search } from "lucide-react";
import { Input } from "@/components/ui/input";
import { getTablesFromConnection, MultiConnectionTableInfo } from "@/lib/api/multiConnection";
import { useToast } from "@/hooks/use-toast";

export interface TableSelectionPanelProps {
  fromConnectionId?: number;
  toConnectionId?: number;
  selectedFromTable?: string;
  selectedToTable?: string;
  onFromTableChange: (tableName: string) => void;
  onToTableChange: (tableName: string) => void;
  actionType: "insert" | "update" | "delete";
  // 🆕 자기 자신 테이블 작업 지원
  allowSameTable?: boolean;
  showSameTableWarning?: boolean;
  disabled?: boolean;
}

export const TableSelectionPanel: React.FC<TableSelectionPanelProps> = ({
  fromConnectionId,
  toConnectionId,
  selectedFromTable,
  selectedToTable,
  onFromTableChange,
  onToTableChange,
  actionType,
  allowSameTable = true,
  showSameTableWarning = true,
  disabled = false,
}) => {
  const { toast } = useToast();
  const [fromTables, setFromTables] = useState<MultiConnectionTableInfo[]>([]);
  const [toTables, setToTables] = useState<MultiConnectionTableInfo[]>([]);
  const [fromLoading, setFromLoading] = useState(false);
  const [toLoading, setToLoading] = useState(false);
  const [fromSearchTerm, setFromSearchTerm] = useState("");
  const [toSearchTerm, setToSearchTerm] = useState("");

  // FROM 커넥션 변경 시 테이블 목록 로딩
  useEffect(() => {
    if (fromConnectionId !== undefined && fromConnectionId !== null) {
      console.log(`🔍 FROM 테이블 로딩 시작: connectionId=${fromConnectionId}`);
      loadTablesFromConnection(fromConnectionId, setFromTables, setFromLoading, "FROM");
    } else {
      setFromTables([]);
    }
  }, [fromConnectionId]);

  // TO 커넥션 변경 시 테이블 목록 로딩
  useEffect(() => {
    if (toConnectionId !== undefined && toConnectionId !== null) {
      console.log(`🔍 TO 테이블 로딩 시작: connectionId=${toConnectionId}`);
      loadTablesFromConnection(toConnectionId, setToTables, setToLoading, "TO");
    } else {
      setToTables([]);
    }
  }, [toConnectionId]);

  // 테이블 목록 로딩 함수
  const loadTablesFromConnection = async (
    connectionId: number,
    setTables: React.Dispatch<React.SetStateAction<MultiConnectionTableInfo[]>>,
    setLoading: React.Dispatch<React.SetStateAction<boolean>>,
    type: "FROM" | "TO",
  ) => {
    try {
      setLoading(true);
      console.log(`🔍 ${type} 테이블 API 호출 시작: connectionId=${connectionId}`);
      const tables = await getTablesFromConnection(connectionId);
      console.log(`✅ ${type} 테이블 로딩 성공: ${tables.length}개`);
      setTables(tables);
    } catch (error) {
      console.error(`❌ ${type} 테이블 목록 로드 실패:`, error);
      toast({
        title: "테이블 로드 실패",
        description: `${type} 테이블 목록을 불러오는데 실패했습니다. ${error instanceof Error ? error.message : String(error)}`,
        variant: "destructive",
      });
      setTables([]); // 에러 시 빈 배열로 설정
    } finally {
      setLoading(false);
    }
  };

  // 테이블 필터링
  const getFilteredTables = (tables: MultiConnectionTableInfo[], searchTerm: string) => {
    if (!searchTerm.trim()) return tables;

    const term = searchTerm.toLowerCase();
    return tables.filter(
      (table) => table.tableName.toLowerCase().includes(term) || table.displayName?.toLowerCase().includes(term),
    );
  };

  // 액션 타입별 라벨 정의
  const getTableLabels = () => {
    switch (actionType) {
      case "insert":
        return {
          from: {
            title: "소스 테이블",
            desc: "데이터를 가져올 테이블을 선택하세요",
          },
          to: {
            title: "대상 테이블",
            desc: "데이터를 저장할 테이블을 선택하세요",
          },
        };
      case "update":
        return {
          from: {
            title: "조건 확인 테이블",
            desc: "업데이트 조건을 확인할 테이블을 선택하세요",
          },
          to: {
            title: "업데이트 대상 테이블",
            desc: "데이터를 업데이트할 테이블을 선택하세요",
          },
        };
      case "delete":
        return {
          from: {
            title: "조건 확인 테이블",
            desc: "삭제 조건을 확인할 테이블을 선택하세요",
          },
          to: {
            title: "삭제 대상 테이블",
            desc: "데이터를 삭제할 테이블을 선택하세요",
          },
        };
    }
  };

  // 자기 자신 테이블 작업 경고
  const getSameTableWarning = () => {
    if (
      showSameTableWarning &&
      fromConnectionId === toConnectionId &&
      selectedFromTable === selectedToTable &&
      selectedFromTable
    ) {
      switch (actionType) {
        case "update":
          return "⚠️ 같은 테이블에서 UPDATE 작업을 수행합니다. 무한 루프에 주의하세요.";
        case "delete":
          return "🚨 같은 테이블에서 DELETE 작업을 수행합니다. 매우 위험할 수 있습니다.";
      }
    }
    return null;
  };

  const labels = getTableLabels();
  const warningMessage = getSameTableWarning();
  const filteredFromTables = getFilteredTables(fromTables, fromSearchTerm);
  const filteredToTables = getFilteredTables(toTables, toSearchTerm);

  // 테이블 아이템 렌더링
  const renderTableItem = (table: MultiConnectionTableInfo) => (
    <SelectItem key={table.tableName} value={table.tableName}>
      <div className="flex w-full items-center justify-between">
        <div className="flex items-center gap-2">
          <Table className="h-3 w-3" />
          <span className="font-medium">
            {table.displayName && table.displayName !== table.tableName ? table.displayName : table.tableName}
          </span>
        </div>
        <Badge variant="outline" className="text-xs">
          {table.columnCount}개 컬럼
        </Badge>
      </div>
    </SelectItem>
  );

  // 로딩 상태 렌더링
  const renderLoadingState = (title: string) => (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <div className="h-4 w-4 animate-pulse rounded bg-gray-300" />
          {title}
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-2">
          <div className="h-9 w-full animate-pulse rounded bg-gray-200" />
          <div className="h-10 w-full animate-pulse rounded bg-gray-200" />
        </div>
      </CardContent>
    </Card>
  );

  return (
    <div className="space-y-4">
      <div className="grid grid-cols-2 gap-6">
        {/* FROM 테이블 선택 */}
        {fromLoading ? (
          renderLoadingState(labels.from.title)
        ) : (
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Table className="h-4 w-4" />
                {labels.from.title}
              </CardTitle>
              <CardDescription>{labels.from.desc}</CardDescription>
            </CardHeader>
            <CardContent className="space-y-3">
              {/* 검색 필드 */}
              <div className="relative">
                <Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform" />
                <Input
                  placeholder="테이블 검색..."
                  value={fromSearchTerm}
                  onChange={(e) => setFromSearchTerm(e.target.value)}
                  className="pl-9"
                  disabled={disabled || fromConnectionId === undefined || fromConnectionId === null}
                />
              </div>

              {/* 테이블 선택 */}
              <Select
                value={selectedFromTable || ""}
                onValueChange={onFromTableChange}
                disabled={disabled || fromConnectionId === undefined || fromConnectionId === null}
              >
                <SelectTrigger>
                  <SelectValue placeholder="테이블을 선택하세요" />
                </SelectTrigger>
                <SelectContent>
                  {filteredFromTables.length > 0 ? (
                    filteredFromTables.map(renderTableItem)
                  ) : (
                    <div className="text-muted-foreground p-2 text-center text-sm">
                      {fromSearchTerm ? "검색 결과가 없습니다" : "테이블이 없습니다"}
                    </div>
                  )}
                </SelectContent>
              </Select>

              {/* 테이블 정보 */}
              {selectedFromTable && fromTables.find((t) => t.tableName === selectedFromTable) && (
                <div className="text-muted-foreground text-xs">
                  <div className="flex items-center gap-1">
                    <Info className="h-3 w-3" />
                    <span>
                      {fromTables.find((t) => t.tableName === selectedFromTable)?.columnCount}개 컬럼, 커넥션:{" "}
                      {fromTables.find((t) => t.tableName === selectedFromTable)?.connectionName}
                    </span>
                  </div>
                </div>
              )}
            </CardContent>
          </Card>
        )}

        {/* TO 테이블 선택 */}
        {toLoading ? (
          renderLoadingState(labels.to.title)
        ) : (
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Table className="h-4 w-4" />
                {labels.to.title}
              </CardTitle>
              <CardDescription>{labels.to.desc}</CardDescription>
            </CardHeader>
            <CardContent className="space-y-3">
              {/* 검색 필드 */}
              <div className="relative">
                <Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform" />
                <Input
                  placeholder="테이블 검색..."
                  value={toSearchTerm}
                  onChange={(e) => setToSearchTerm(e.target.value)}
                  className="pl-9"
                  disabled={disabled || toConnectionId === undefined || toConnectionId === null}
                />
              </div>

              {/* 테이블 선택 */}
              <Select
                value={selectedToTable || ""}
                onValueChange={onToTableChange}
                disabled={disabled || toConnectionId === undefined || toConnectionId === null}
              >
                <SelectTrigger>
                  <SelectValue placeholder="테이블을 선택하세요" />
                </SelectTrigger>
                <SelectContent>
                  {filteredToTables.length > 0 ? (
                    filteredToTables.map(renderTableItem)
                  ) : (
                    <div className="text-muted-foreground p-2 text-center text-sm">
                      {toSearchTerm ? "검색 결과가 없습니다" : "테이블이 없습니다"}
                    </div>
                  )}
                </SelectContent>
              </Select>

              {/* 테이블 정보 */}
              {selectedToTable && toTables.find((t) => t.tableName === selectedToTable) && (
                <div className="text-muted-foreground text-xs">
                  <div className="flex items-center gap-1">
                    <Info className="h-3 w-3" />
                    <span>
                      {toTables.find((t) => t.tableName === selectedToTable)?.columnCount}개 컬럼, 커넥션:{" "}
                      {toTables.find((t) => t.tableName === selectedToTable)?.connectionName}
                    </span>
                  </div>
                </div>
              )}
            </CardContent>
          </Card>
        )}
      </div>

      {/* 🆕 자기 자신 테이블 작업 시 경고 */}
      {warningMessage && (
        <Alert variant={actionType === "delete" ? "destructive" : "default"}>
          <AlertCircle className="h-4 w-4" />
          <AlertDescription>{warningMessage}</AlertDescription>
        </Alert>
      )}

      {/* 선택 상태 표시 */}
      {selectedFromTable && selectedToTable && (
        <div className="text-muted-foreground text-sm">
          <div className="flex items-center gap-2">
            <span>테이블 매핑:</span>
            <Badge variant="secondary" className="font-mono">
              {(() => {
                const fromTable = fromTables.find((t) => t.tableName === selectedFromTable);
                return fromTable?.displayName && fromTable.displayName !== fromTable.tableName
                  ? fromTable.displayName
                  : selectedFromTable;
              })()}
            </Badge>
            <span>→</span>
            <Badge variant="secondary" className="font-mono">
              {(() => {
                const toTable = toTables.find((t) => t.tableName === selectedToTable);
                return toTable?.displayName && toTable.displayName !== toTable.tableName
                  ? toTable.displayName
                  : selectedToTable;
              })()}
            </Badge>
            {selectedFromTable === selectedToTable && (
              <Badge variant="outline" className="text-orange-600">
                자기 자신
              </Badge>
            )}
          </div>
        </div>
      )}
    </div>
  );
};