"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { DataFlowDesigner } from "@/components/dataflow/DataFlowDesigner";
import DataFlowList from "@/components/dataflow/DataFlowList";
// 🎨 새로운 UI 컴포넌트 import
import DataConnectionDesigner from "@/components/dataflow/connection/redesigned/DataConnectionDesigner";
import { TableRelationship, DataFlowDiagram } from "@/lib/api/dataflow";
import { useAuth } from "@/hooks/useAuth";
import { loadDataflowRelationship } from "@/lib/api/dataflowSave";
import { toast } from "sonner";

type Step = "list" | "design";

export default function DataFlowPage() {
  const { user } = useAuth();
  const router = useRouter();
  const [currentStep, setCurrentStep] = useState<Step>("list");
  const [stepHistory, setStepHistory] = useState<Step[]>(["list"]);
  const [editingDiagram, setEditingDiagram] = useState<DataFlowDiagram | null>(null);
  const [loadedRelationshipData, setLoadedRelationshipData] = useState<any>(null);

  // 단계별 제목과 설명
  const stepConfig = {
    list: {
      title: "데이터 흐름 관계도 관리",
      description: "생성된 관계도들을 확인하고 관리하세요",
      icon: "📊",
    },
    design: {
      title: "새 관계도 설계",
      description: "테이블 간 데이터 관계를 시각적으로 설계하세요",
      icon: "🎨",
    },
  };

  // 다음 단계로 이동
  const goToNextStep = (nextStep: Step) => {
    setStepHistory((prev) => [...prev, nextStep]);
    setCurrentStep(nextStep);
  };

  // 이전 단계로 이동
  const goToPreviousStep = () => {
    if (stepHistory.length > 1) {
      const newHistory = stepHistory.slice(0, -1);
      const previousStep = newHistory[newHistory.length - 1];
      setStepHistory(newHistory);
      setCurrentStep(previousStep);
    }
  };

  // 특정 단계로 이동
  const goToStep = (step: Step) => {
    setCurrentStep(step);
    // 해당 단계까지의 히스토리만 유지
    const stepIndex = stepHistory.findIndex((s) => s === step);
    if (stepIndex !== -1) {
      setStepHistory(stepHistory.slice(0, stepIndex + 1));
    }
  };

  const handleSave = (relationships: TableRelationship[]) => {
    console.log("저장된 관계:", relationships);
    // 저장 후 목록으로 돌아가기 - 다음 렌더링 사이클로 지연
    setTimeout(() => {
      goToStep("list");
      setEditingDiagram(null);
      setLoadedRelationshipData(null);
    }, 0);
  };

  // 관계도 수정 핸들러
  const handleDesignDiagram = async (diagram: DataFlowDiagram | null) => {
    if (diagram) {
      // 기존 관계도 수정 - 저장된 관계 정보 로드
      try {
        console.log("📖 관계도 수정 모드:", diagram);

        // 저장된 관계 정보 로드
        const relationshipData = await loadDataflowRelationship(diagram.diagramId);
        console.log("✅ 관계 정보 로드 완료:", relationshipData);

        setEditingDiagram(diagram);
        setLoadedRelationshipData(relationshipData);
        goToNextStep("design");

        toast.success(`"${diagram.diagramName}" 관계를 불러왔습니다.`);
      } catch (error: any) {
        console.error("❌ 관계 정보 로드 실패:", error);
        toast.error(error.message || "관계 정보를 불러오는데 실패했습니다.");
      }
    } else {
      // 새 관계도 생성 - 현재 페이지에서 처리
      setEditingDiagram(null);
      setLoadedRelationshipData(null);
      goToNextStep("design");
    }
  };

  return (
    <div className="min-h-screen bg-gray-50">
      <div className="container mx-auto space-y-4 p-4">
        {/* 페이지 제목 */}
        <div className="flex items-center justify-between rounded-lg border bg-white p-4 shadow-sm">
          <div>
            <h1 className="text-3xl font-bold text-gray-900">데이터 흐름 관리</h1>
            <p className="mt-2 text-gray-600">테이블 간 데이터 관계를 시각적으로 설계하고 관리합니다</p>
          </div>
        </div>

        {/* 단계별 내용 */}
        <div className="space-y-6">
          {/* 관계도 목록 단계 */}
          {currentStep === "list" && <DataFlowList onDesignDiagram={handleDesignDiagram} />}

          {/* 관계도 설계 단계 - 🎨 새로운 UI 사용 */}
          {currentStep === "design" && (
            <DataConnectionDesigner
              onClose={() => {
                goToStep("list");
                setEditingDiagram(null);
                setLoadedRelationshipData(null);
              }}
              initialData={
                loadedRelationshipData || {
                  connectionType: "data_save",
                }
              }
              showBackButton={true}
            />
          )}
        </div>
      </div>
    </div>
  );
}