/**
 * UPDATE 필드 매핑 패널
 * UPDATE 액션용 조건 설정 및 필드 매핑 컴포넌트
 */

import React, { useState, useEffect } from "react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Badge } from "@/components/ui/badge";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Plus, X, Search, AlertCircle, ArrowRight } from "lucide-react";
import { Separator } from "@/components/ui/separator";
import { ColumnInfo, getColumnsFromConnection } from "@/lib/api/multiConnection";
import { useToast } from "@/hooks/use-toast";

export interface UpdateCondition {
  id: string;
  fromColumn: string;
  operator: "=" | "!=" | ">" | "<" | ">=" | "<=" | "LIKE" | "IN" | "NOT IN";
  value: string | string[];
  logicalOperator?: "AND" | "OR";
}

export interface UpdateFieldMapping {
  id: string;
  fromColumn: string;
  toColumn: string;
  transformFunction?: string;
  defaultValue?: string;
}

export interface WhereCondition {
  id: string;
  toColumn: string;
  operator: "=" | "!=" | ">" | "<" | ">=" | "<=" | "LIKE" | "IN" | "NOT IN";
  valueSource: "from_column" | "static" | "current_timestamp";
  fromColumn?: string;
  staticValue?: string;
  logicalOperator?: "AND" | "OR";
}

export interface UpdateFieldMappingPanelProps {
  action: any;
  actionIndex: number;
  settings: any;
  onSettingsChange: (settings: any) => void;
  fromConnectionId?: number;
  toConnectionId?: number;
  fromTableName?: string;
  toTableName?: string;
  disabled?: boolean;
}

export const UpdateFieldMappingPanel: React.FC<UpdateFieldMappingPanelProps> = ({
  action,
  actionIndex,
  settings,
  onSettingsChange,
  fromConnectionId,
  toConnectionId,
  fromTableName,
  toTableName,
  disabled = false,
}) => {
  const { toast } = useToast();

  // 상태 관리
  const [fromTableColumns, setFromTableColumns] = useState<ColumnInfo[]>([]);
  const [toTableColumns, setToTableColumns] = useState<ColumnInfo[]>([]);
  const [updateConditions, setUpdateConditions] = useState<UpdateCondition[]>([]);
  const [updateFields, setUpdateFields] = useState<UpdateFieldMapping[]>([]);
  const [whereConditions, setWhereConditions] = useState<WhereCondition[]>([]);
  const [loading, setLoading] = useState(false);

  // 검색 상태
  const [fromColumnSearch, setFromColumnSearch] = useState("");
  const [toColumnSearch, setToColumnSearch] = useState("");

  // 컬럼 정보 로드
  useEffect(() => {
    if (fromConnectionId !== undefined && fromTableName) {
      loadColumnInfo(fromConnectionId, fromTableName, setFromTableColumns, "FROM");
    }
  }, [fromConnectionId, fromTableName]);

  useEffect(() => {
    if (toConnectionId !== undefined && toTableName) {
      loadColumnInfo(toConnectionId, toTableName, setToTableColumns, "TO");
    }
  }, [toConnectionId, toTableName]);

  // 컬럼 정보 로드 함수
  const loadColumnInfo = async (
    connectionId: number,
    tableName: string,
    setColumns: React.Dispatch<React.SetStateAction<ColumnInfo[]>>,
    type: "FROM" | "TO",
  ) => {
    try {
      setLoading(true);
      const columns = await getColumnsFromConnection(connectionId, tableName);
      setColumns(columns);
    } catch (error) {
      console.error(`${type} 컬럼 정보 로드 실패:`, error);
      toast({
        title: "컬럼 로드 실패",
        description: `${type} 테이블의 컬럼 정보를 불러오는데 실패했습니다.`,
        variant: "destructive",
      });
    } finally {
      setLoading(false);
    }
  };

  // 컬럼 필터링
  const getFilteredColumns = (columns: ColumnInfo[], searchTerm: string) => {
    if (!searchTerm.trim()) return columns;

    const term = searchTerm.toLowerCase();
    return columns.filter(
      (col) => col.columnName.toLowerCase().includes(term) || col.displayName.toLowerCase().includes(term),
    );
  };

  // UPDATE 조건 추가
  const addUpdateCondition = () => {
    const newCondition: UpdateCondition = {
      id: `condition_${Date.now()}`,
      fromColumn: "",
      operator: "=",
      value: "",
      logicalOperator: updateConditions.length > 0 ? "AND" : undefined,
    };
    setUpdateConditions([...updateConditions, newCondition]);
  };

  // UPDATE 조건 제거
  const removeUpdateCondition = (id: string) => {
    setUpdateConditions(updateConditions.filter((c) => c.id !== id));
  };

  // UPDATE 조건 수정
  const updateCondition = (id: string, field: keyof UpdateCondition, value: any) => {
    setUpdateConditions(updateConditions.map((c) => (c.id === id ? { ...c, [field]: value } : c)));
  };

  // UPDATE 필드 매핑 추가
  const addUpdateFieldMapping = () => {
    const newMapping: UpdateFieldMapping = {
      id: `mapping_${Date.now()}`,
      fromColumn: "",
      toColumn: "",
      transformFunction: "",
      defaultValue: "",
    };
    setUpdateFields([...updateFields, newMapping]);
  };

  // UPDATE 필드 매핑 제거
  const removeUpdateFieldMapping = (id: string) => {
    setUpdateFields(updateFields.filter((m) => m.id !== id));
  };

  // UPDATE 필드 매핑 수정
  const updateFieldMapping = (id: string, field: keyof UpdateFieldMapping, value: any) => {
    setUpdateFields(updateFields.map((m) => (m.id === id ? { ...m, [field]: value } : m)));
  };

  // WHERE 조건 추가
  const addWhereCondition = () => {
    const newCondition: WhereCondition = {
      id: `where_${Date.now()}`,
      toColumn: "",
      operator: "=",
      valueSource: "from_column",
      fromColumn: "",
      staticValue: "",
      logicalOperator: whereConditions.length > 0 ? "AND" : undefined,
    };
    setWhereConditions([...whereConditions, newCondition]);
  };

  // WHERE 조건 제거
  const removeWhereCondition = (id: string) => {
    setWhereConditions(whereConditions.filter((c) => c.id !== id));
  };

  // WHERE 조건 수정
  const updateWhereCondition = (id: string, field: keyof WhereCondition, value: any) => {
    setWhereConditions(whereConditions.map((c) => (c.id === id ? { ...c, [field]: value } : c)));
  };

  // 자기 자신 테이블 작업 경고
  const getSelfTableWarning = () => {
    if (fromConnectionId === toConnectionId && fromTableName === toTableName) {
      return "⚠️ 자기 자신 테이블 UPDATE 작업입니다. 무한 루프 및 데이터 손상에 주의하세요.";
    }
    return null;
  };

  const warningMessage = getSelfTableWarning();
  const filteredFromColumns = getFilteredColumns(fromTableColumns, fromColumnSearch);
  const filteredToColumns = getFilteredColumns(toTableColumns, toColumnSearch);

  return (
    <div className="space-y-6">
      {/* 경고 메시지 */}
      {warningMessage && (
        <Alert variant="default">
          <AlertCircle className="h-4 w-4" />
          <AlertDescription>{warningMessage}</AlertDescription>
        </Alert>
      )}

      {/* UPDATE 조건 설정 */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">🔍 업데이트 조건 설정</CardTitle>
          <CardDescription>
            FROM 테이블에서 어떤 조건을 만족하는 데이터가 있을 때 TO 테이블을 업데이트할지 설정하세요
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          {/* 검색 필드 */}
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="text-sm font-medium">FROM 컬럼 검색</label>
              <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={fromColumnSearch}
                  onChange={(e) => setFromColumnSearch(e.target.value)}
                  className="pl-9"
                />
              </div>
            </div>
          </div>

          {/* 업데이트 조건 리스트 */}
          <div className="space-y-3">
            {updateConditions.map((condition, index) => (
              <div key={condition.id} className="flex items-center gap-2 rounded-lg border p-3">
                {index > 0 && (
                  <Select
                    value={condition.logicalOperator || "AND"}
                    onValueChange={(value) => updateCondition(condition.id, "logicalOperator", value)}
                  >
                    <SelectTrigger className="w-20">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="AND">AND</SelectItem>
                      <SelectItem value="OR">OR</SelectItem>
                    </SelectContent>
                  </Select>
                )}

                <Select
                  value={condition.fromColumn}
                  onValueChange={(value) => updateCondition(condition.id, "fromColumn", value)}
                >
                  <SelectTrigger className="w-48">
                    <SelectValue placeholder="FROM 컬럼" />
                  </SelectTrigger>
                  <SelectContent>
                    {filteredFromColumns.map((col) => (
                      <SelectItem key={col.columnName} value={col.columnName}>
                        <div className="flex items-center gap-2">
                          <span>{col.columnName}</span>
                          <Badge variant="outline" className="text-xs">
                            {col.dataType}
                          </Badge>
                        </div>
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>

                <Select
                  value={condition.operator}
                  onValueChange={(value) => updateCondition(condition.id, "operator", value)}
                >
                  <SelectTrigger className="w-20">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="=">=</SelectItem>
                    <SelectItem value="!=">!=</SelectItem>
                    <SelectItem value=">">&gt;</SelectItem>
                    <SelectItem value="<">&lt;</SelectItem>
                    <SelectItem value=">=">&gt;=</SelectItem>
                    <SelectItem value="<=">&lt;=</SelectItem>
                    <SelectItem value="LIKE">LIKE</SelectItem>
                    <SelectItem value="IN">IN</SelectItem>
                    <SelectItem value="NOT IN">NOT IN</SelectItem>
                  </SelectContent>
                </Select>

                <Input
                  placeholder="값"
                  value={condition.value as string}
                  onChange={(e) => updateCondition(condition.id, "value", e.target.value)}
                  className="flex-1"
                />

                <Button variant="outline" size="sm" onClick={() => removeUpdateCondition(condition.id)}>
                  <X className="h-4 w-4" />
                </Button>
              </div>
            ))}

            <Button variant="outline" onClick={addUpdateCondition} className="w-full" disabled={disabled}>
              <Plus className="mr-2 h-4 w-4" />
              업데이트 조건 추가
            </Button>
          </div>
        </CardContent>
      </Card>

      <Separator />

      {/* UPDATE 필드 매핑 */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">📝 업데이트 필드 매핑</CardTitle>
          <CardDescription>FROM 테이블의 값을 TO 테이블의 어떤 필드에 업데이트할지 설정하세요</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          {/* 검색 필드 */}
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="text-sm font-medium">FROM 컬럼 검색</label>
              <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={fromColumnSearch}
                  onChange={(e) => setFromColumnSearch(e.target.value)}
                  className="pl-9"
                />
              </div>
            </div>
            <div>
              <label className="text-sm font-medium">TO 컬럼 검색</label>
              <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={toColumnSearch}
                  onChange={(e) => setToColumnSearch(e.target.value)}
                  className="pl-9"
                />
              </div>
            </div>
          </div>

          {/* 필드 매핑 리스트 */}
          <div className="space-y-3">
            {updateFields.map((mapping) => (
              <div key={mapping.id} className="flex items-center gap-2 rounded-lg border p-3">
                <Select
                  value={mapping.fromColumn}
                  onValueChange={(value) => updateFieldMapping(mapping.id, "fromColumn", value)}
                >
                  <SelectTrigger className="w-48">
                    <SelectValue placeholder="FROM 컬럼" />
                  </SelectTrigger>
                  <SelectContent>
                    {filteredFromColumns.map((col) => (
                      <SelectItem key={col.columnName} value={col.columnName}>
                        <div className="flex items-center gap-2">
                          <span>{col.columnName}</span>
                          <Badge variant="outline" className="text-xs">
                            {col.dataType}
                          </Badge>
                        </div>
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>

                <ArrowRight className="text-muted-foreground h-4 w-4" />

                <Select
                  value={mapping.toColumn}
                  onValueChange={(value) => updateFieldMapping(mapping.id, "toColumn", value)}
                >
                  <SelectTrigger className="w-48">
                    <SelectValue placeholder="TO 컬럼" />
                  </SelectTrigger>
                  <SelectContent>
                    {filteredToColumns.map((col) => (
                      <SelectItem key={col.columnName} value={col.columnName}>
                        <div className="flex items-center gap-2">
                          <span>{col.columnName}</span>
                          <Badge variant="outline" className="text-xs">
                            {col.dataType}
                          </Badge>
                        </div>
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>

                <Input
                  placeholder="기본값 (선택사항)"
                  value={mapping.defaultValue || ""}
                  onChange={(e) => updateFieldMapping(mapping.id, "defaultValue", e.target.value)}
                  className="w-32"
                />

                <Button variant="outline" size="sm" onClick={() => removeUpdateFieldMapping(mapping.id)}>
                  <X className="h-4 w-4" />
                </Button>
              </div>
            ))}

            <Button variant="outline" onClick={addUpdateFieldMapping} className="w-full" disabled={disabled}>
              <Plus className="mr-2 h-4 w-4" />
              필드 매핑 추가
            </Button>
          </div>
        </CardContent>
      </Card>

      <Separator />

      {/* WHERE 조건 설정 */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">🎯 업데이트 대상 조건</CardTitle>
          <CardDescription>TO 테이블에서 어떤 레코드를 업데이트할지 WHERE 조건을 설정하세요</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          {/* WHERE 조건 리스트 */}
          <div className="space-y-3">
            {whereConditions.map((condition, index) => (
              <div key={condition.id} className="flex items-center gap-2 rounded-lg border p-3">
                {index > 0 && (
                  <Select
                    value={condition.logicalOperator || "AND"}
                    onValueChange={(value) => updateWhereCondition(condition.id, "logicalOperator", value)}
                  >
                    <SelectTrigger className="w-20">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="AND">AND</SelectItem>
                      <SelectItem value="OR">OR</SelectItem>
                    </SelectContent>
                  </Select>
                )}

                <Select
                  value={condition.toColumn}
                  onValueChange={(value) => updateWhereCondition(condition.id, "toColumn", value)}
                >
                  <SelectTrigger className="w-48">
                    <SelectValue placeholder="TO 컬럼" />
                  </SelectTrigger>
                  <SelectContent>
                    {filteredToColumns.map((col) => (
                      <SelectItem key={col.columnName} value={col.columnName}>
                        <div className="flex items-center gap-2">
                          <span>{col.columnName}</span>
                          <Badge variant="outline" className="text-xs">
                            {col.dataType}
                          </Badge>
                        </div>
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>

                <Select
                  value={condition.operator}
                  onValueChange={(value) => updateWhereCondition(condition.id, "operator", value)}
                >
                  <SelectTrigger className="w-20">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="=">=</SelectItem>
                    <SelectItem value="!=">!=</SelectItem>
                    <SelectItem value=">">&gt;</SelectItem>
                    <SelectItem value="<">&lt;</SelectItem>
                    <SelectItem value=">=">&gt;=</SelectItem>
                    <SelectItem value="<=">&lt;=</SelectItem>
                    <SelectItem value="LIKE">LIKE</SelectItem>
                    <SelectItem value="IN">IN</SelectItem>
                    <SelectItem value="NOT IN">NOT IN</SelectItem>
                  </SelectContent>
                </Select>

                <Select
                  value={condition.valueSource}
                  onValueChange={(value) => updateWhereCondition(condition.id, "valueSource", value)}
                >
                  <SelectTrigger className="w-32">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="from_column">FROM 컬럼</SelectItem>
                    <SelectItem value="static">고정값</SelectItem>
                    <SelectItem value="current_timestamp">현재 시간</SelectItem>
                  </SelectContent>
                </Select>

                {condition.valueSource === "from_column" && (
                  <Select
                    value={condition.fromColumn || ""}
                    onValueChange={(value) => updateWhereCondition(condition.id, "fromColumn", value)}
                  >
                    <SelectTrigger className="w-48">
                      <SelectValue placeholder="FROM 컬럼 선택" />
                    </SelectTrigger>
                    <SelectContent>
                      {filteredFromColumns.map((col) => (
                        <SelectItem key={col.columnName} value={col.columnName}>
                          {col.columnName}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                )}

                {condition.valueSource === "static" && (
                  <Input
                    placeholder="고정값"
                    value={condition.staticValue || ""}
                    onChange={(e) => updateWhereCondition(condition.id, "staticValue", e.target.value)}
                    className="w-32"
                  />
                )}

                <Button variant="outline" size="sm" onClick={() => removeWhereCondition(condition.id)}>
                  <X className="h-4 w-4" />
                </Button>
              </div>
            ))}

            <Button variant="outline" onClick={addWhereCondition} className="w-full" disabled={disabled}>
              <Plus className="mr-2 h-4 w-4" />
              WHERE 조건 추가
            </Button>
          </div>

          {whereConditions.length === 0 && (
            <Alert variant="destructive">
              <AlertCircle className="h-4 w-4" />
              <AlertDescription>안전을 위해 UPDATE 작업에는 최소 하나 이상의 WHERE 조건이 필요합니다.</AlertDescription>
            </Alert>
          )}
        </CardContent>
      </Card>
    </div>
  );
};