"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { DataFlowDesigner } from "@/components/dataflow/DataFlowDesigner";
import DataFlowList from "@/components/dataflow/DataFlowList";
import { TableRelationship, DataFlowDiagram } from "@/lib/api/dataflow";
import { useAuth } from "@/hooks/useAuth";
import { ArrowLeft } from "lucide-react";
import { Button } from "@/components/ui/button";

type Step = "list" | "design";

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

  // 단계별 제목과 설명
  const stepConfig = {
    list: {
      title: "데이터 흐름 관계도 관리",
      description: "생성된 관계도들을 확인하고 관리하세요",
      icon: "📊",
    },
    design: {
      title: selectedDiagram ? `${selectedDiagram.diagramName} 관계도 설계` : "새 관계도 설계",
      description: selectedDiagram
        ? "기존 관계도를 수정하거나 새로운 관계를 추가하세요"
        : "테이블 간 데이터 관계를 시각적으로 설계하세요",
      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);

      // list로 돌아갈 때 선택된 관계도 초기화
      if (previousStep === "list") {
        setSelectedDiagram(null);
      }
    }
  };

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

    // list로 이동할 때 선택된 관계도 초기화
    if (step === "list") {
      setSelectedDiagram(null);
    }
  };

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

  const handleDiagramSelect = (diagram: DataFlowDiagram) => {
    setSelectedDiagram(diagram);
  };

  const handleDesignDiagram = (diagram: DataFlowDiagram | null) => {
    if (diagram) {
      // 기존 관계도 편집 - 새로운 URL로 이동
      router.push(`/admin/dataflow/edit/${diagram.diagramId}`);
    } else {
      // 새 관계도 생성 - 현재 페이지에서 처리
      setSelectedDiagram(null);
      goToNextStep("design");
    }
  };

  return (
    <div className="flex h-full w-full flex-col">
      {/* 헤더 */}
      <div className="border-b border-gray-200 bg-white px-6 py-4">
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-4">
            {currentStep !== "list" && (
              <Button variant="outline" size="sm" onClick={goToPreviousStep} className="flex items-center">
                <ArrowLeft className="mr-1 h-4 w-4" />
                이전
              </Button>
            )}
            <div>
              <h1 className="flex items-center text-2xl font-bold text-gray-900">
                <span className="mr-2">{stepConfig[currentStep].icon}</span>
                {stepConfig[currentStep].title}
              </h1>
              <p className="mt-1 text-sm text-gray-600">{stepConfig[currentStep].description}</p>
            </div>
          </div>
        </div>
      </div>

      {/* 단계별 내용 */}
      <div className="flex-1 overflow-hidden">
        {/* 관계도 목록 단계 */}
        {currentStep === "list" && (
          <div className="h-full p-6">
            <DataFlowList
              onDiagramSelect={handleDiagramSelect}
              selectedDiagram={selectedDiagram}
              onDesignDiagram={handleDesignDiagram}
            />
          </div>
        )}

        {/* 관계도 설계 단계 */}
        {currentStep === "design" && (
          <div className="h-full">
            <DataFlowDesigner
              companyCode={user?.company_code || "COMP001"}
              onSave={handleSave}
              selectedDiagram={selectedDiagram}
              onBackToList={() => goToStep("list")}
            />
          </div>
        )}
      </div>
    </div>
  );
}
