"use client";

import React, { useState, useEffect } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Badge } from "@/components/ui/badge";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { ArrowLeft, Settings, CheckCircle, Eye } from "lucide-react";

// 타입 import
import { DataConnectionState, DataConnectionActions } from "../types/redesigned";
import { ColumnInfo } from "@/lib/types/multiConnection";
import { getColumnsFromConnection } from "@/lib/api/multiConnection";

// 컴포넌트 import
import ActionConditionBuilder from "./ActionConfig/ActionConditionBuilder";
import { DataflowVisualization } from "./DataflowVisualization";

interface ActionConfigStepProps {
  state: DataConnectionState;
  actions: DataConnectionActions;
  onBack: () => void;
  onComplete: () => void;
  onSave?: () => void; // UPDATE/DELETE인 경우 저장 버튼
  showSaveButton?: boolean; // 저장 버튼 표시 여부
}

/**
 * 🎯 4단계: 액션 설정
 * - 액션 타입 선택 (INSERT/UPDATE/DELETE/UPSERT)
 * - 실행 조건 설정
 * - 액션별 상세 설정
 */
const ActionConfigStep: React.FC<ActionConfigStepProps> = ({
  state,
  actions,
  onBack,
  onComplete,
  onSave,
  showSaveButton = false,
}) => {
  const { actionType, actionConditions, fromTable, toTable, fromConnection, toConnection } = state;

  const [fromColumns, setFromColumns] = useState<ColumnInfo[]>([]);
  const [toColumns, setToColumns] = useState<ColumnInfo[]>([]);
  const [fieldMappings, setFieldMappings] = useState<any[]>([]);
  const [isLoading, setIsLoading] = useState(false);

  const actionTypes = [
    { value: "insert", label: "INSERT", description: "새 데이터 삽입" },
    { value: "update", label: "UPDATE", description: "기존 데이터 수정" },
    { value: "delete", label: "DELETE", description: "데이터 삭제" },
    { value: "upsert", label: "UPSERT", description: "있으면 수정, 없으면 삽입" },
  ];

  // 컬럼 정보 로드
  useEffect(() => {
    const loadColumns = async () => {
      if (!fromConnection || !toConnection || !fromTable || !toTable) return;

      setIsLoading(true);
      try {
        const [fromCols, toCols] = await Promise.all([
          getColumnsFromConnection(fromConnection.id, fromTable.tableName),
          getColumnsFromConnection(toConnection.id, toTable.tableName),
        ]);

        setFromColumns(fromCols);
        setToColumns(toCols);
      } catch (error) {
        console.error("컬럼 정보 로드 실패:", error);
      } finally {
        setIsLoading(false);
      }
    };

    loadColumns();
  }, [fromConnection, toConnection, fromTable, toTable]);

  const canComplete =
    actionType &&
    (actionType === "insert" ||
      ((actionConditions || []).length > 0 && (actionType === "delete" || fieldMappings.length > 0)));

  return (
    <>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Settings className="h-5 w-5" />
          4단계: 액션 설정
        </CardTitle>
      </CardHeader>

      <CardContent className="flex h-full flex-col overflow-hidden p-0">
        <Tabs defaultValue="config" className="flex h-full flex-col">
          <div className="flex-shrink-0 border-b px-3 pt-3 sm:px-4 sm:pt-4">
            <TabsList className="grid w-full grid-cols-2">
              <TabsTrigger value="config" className="flex items-center gap-1 text-xs sm:gap-2 sm:text-sm">
                <Settings className="h-3 w-3 sm:h-4 sm:w-4" />
                <span className="hidden sm:inline">액션 설정</span>
                <span className="sm:hidden">설정</span>
              </TabsTrigger>
              <TabsTrigger value="visualization" className="flex items-center gap-1 text-xs sm:gap-2 sm:text-sm">
                <Eye className="h-3 w-3 sm:h-4 sm:w-4" />
                <span className="hidden sm:inline">흐름 미리보기</span>
                <span className="sm:hidden">미리보기</span>
              </TabsTrigger>
            </TabsList>
          </div>

          {/* 액션 설정 탭 */}
          <TabsContent value="config" className="mt-0 flex-1 overflow-y-auto p-3 sm:p-4">
            <div className="space-y-4 sm:space-y-6">
              {/* 액션 타입 선택 */}
              <div className="space-y-2 sm:space-y-3">
                <h3 className="text-base font-semibold sm:text-lg">액션 타입</h3>
                <Select value={actionType} onValueChange={actions.setActionType}>
                  <SelectTrigger>
                    <SelectValue placeholder="액션 타입을 선택하세요" />
                  </SelectTrigger>
                  <SelectContent>
                    {actionTypes.map((type) => (
                      <SelectItem key={type.value} value={type.value}>
                        <div className="flex w-full items-center justify-between">
                          <div>
                            <span className="font-medium">{type.label}</span>
                            <p className="text-muted-foreground text-xs">{type.description}</p>
                          </div>
                        </div>
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>

                {actionType && (
                  <div className="bg-primary/5 border-primary/20 rounded-lg border p-3">
                    <div className="flex items-center gap-2">
                      <Badge variant="outline" className="text-primary">
                        {actionTypes.find((t) => t.value === actionType)?.label}
                      </Badge>
                      <span className="text-sm">{actionTypes.find((t) => t.value === actionType)?.description}</span>
                    </div>
                  </div>
                )}
              </div>

              {/* 상세 조건 설정 */}
              {actionType && !isLoading && fromColumns.length > 0 && toColumns.length > 0 && (
                <ActionConditionBuilder
                  actionType={actionType}
                  fromColumns={fromColumns}
                  toColumns={toColumns}
                  conditions={actionConditions || []}
                  fieldMappings={fieldMappings}
                  onConditionsChange={(conditions) => {
                    // 액션 조건 배열 전체 업데이트
                    actions.setActionConditions(conditions);
                  }}
                  onFieldMappingsChange={setFieldMappings}
                />
              )}

              {/* 로딩 상태 */}
              {isLoading && (
                <div className="flex items-center justify-center py-8">
                  <div className="text-muted-foreground">컬럼 정보를 불러오는 중...</div>
                </div>
              )}

              {/* INSERT 액션 안내 */}
              {actionType === "insert" && (
                <div className="rounded-lg border border-success/20 bg-success/10 p-4">
                  <h4 className="mb-2 text-sm font-medium text-success">INSERT 액션</h4>
                  <p className="text-sm text-success/80">
                    INSERT 액션은 별도의 실행 조건이 필요하지 않습니다. 매핑된 모든 데이터가 새로운 레코드로 삽입됩니다.
                  </p>
                </div>
              )}

              {/* 액션 요약 */}
              {actionType && (
                <div className="bg-muted/50 rounded-lg p-4">
                  <h4 className="mb-3 text-sm font-medium">설정 요약</h4>
                  <div className="space-y-2">
                    <div className="flex justify-between text-sm">
                      <span>액션 타입:</span>
                      <Badge variant="outline">{actionType.toUpperCase()}</Badge>
                    </div>
                    {actionType !== "insert" && (
                      <>
                        <div className="flex justify-between text-sm">
                          <span>실행 조건:</span>
                          <span className="text-muted-foreground">
                            {actionConditions.length > 0 ? `${actionConditions.length}개 조건` : "조건 없음"}
                          </span>
                        </div>
                        {actionType !== "delete" && (
                          <div className="flex justify-between text-sm">
                            <span>필드 매핑:</span>
                            <span className="text-muted-foreground">
                              {fieldMappings.length > 0 ? `${fieldMappings.length}개 필드` : "필드 없음"}
                            </span>
                          </div>
                        )}
                      </>
                    )}
                  </div>
                </div>
              )}
            </div>
          </TabsContent>

          {/* 흐름 미리보기 탭 */}
          <TabsContent value="visualization" className="mt-0 flex-1 overflow-y-auto">
            <DataflowVisualization
              state={state}
              onEdit={(step) => {
                // 편집 버튼 클릭 시 해당 단계로 이동하는 로직 추가 가능
                console.log(`편집 요청: ${step}`);
              }}
            />
          </TabsContent>
        </Tabs>

        {/* 하단 네비게이션 */}
        <div className="flex-shrink-0 border-t bg-background p-3 sm:p-4">
          <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
            <Button variant="outline" onClick={onBack} className="flex items-center gap-2 w-full sm:w-auto">
              <ArrowLeft className="h-4 w-4" />
              <span className="text-xs sm:text-sm">이전: 제어 조건</span>
            </Button>

            <div className="flex gap-2">
              {showSaveButton && onSave && (
                <Button onClick={onSave} disabled={!canComplete} className="flex items-center gap-2">
                  <CheckCircle className="h-4 w-4" />
                  저장
                </Button>
              )}

              {!showSaveButton && (
                <Button onClick={onComplete} disabled={!canComplete} className="flex items-center gap-2">
                  다음: 컬럼 매핑
                  <ArrowLeft className="h-4 w-4 rotate-180" />
                </Button>
              )}
            </div>
          </div>

          {!canComplete && (
            <p className="text-muted-foreground mt-2 text-center text-sm">
              {!actionType ? "액션 타입을 선택해주세요" : "실행 조건을 추가해주세요"}
            </p>
          )}
        </div>
      </CardContent>
    </>
  );
};

export default ActionConfigStep;