"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import DataFlowList from "@/components/dataflow/DataFlowList";
import { FlowEditor } from "@/components/dataflow/node-editor/FlowEditor";
import { useAuth } from "@/hooks/useAuth";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { ScrollToTop } from "@/components/common/ScrollToTop";
import { ArrowLeft } from "lucide-react";

type Step = "list" | "editor";

export default function DataFlowPage() {
  const { user } = useAuth();
  const router = useRouter();
  const [currentStep, setCurrentStep] = useState<Step>("list");
  const [loadingFlowId, setLoadingFlowId] = useState<number | null>(null);

  // 플로우 불러오기 핸들러
  const handleLoadFlow = async (flowId: number | null) => {
    if (flowId === null) {
      // 새 플로우 생성
      setLoadingFlowId(null);
      setCurrentStep("editor");
      return;
    }

    try {
      // 기존 플로우 불러오기
      setLoadingFlowId(flowId);
      setCurrentStep("editor");

      toast.success("플로우를 불러왔습니다.");
    } catch (error: any) {
      console.error("❌ 플로우 불러오기 실패:", error);
      toast.error(error.message || "플로우를 불러오는데 실패했습니다.");
    }
  };

  // 목록으로 돌아가기
  const handleBackToList = () => {
    setCurrentStep("list");
    setLoadingFlowId(null);
  };

  // 에디터 모드일 때는 전체 화면 사용
  const isEditorMode = currentStep === "editor";

  // 에디터 모드일 때는 레이아웃 없이 전체 화면 사용
  if (isEditorMode) {
    return (
      <div className="fixed inset-0 z-50 bg-background">
        <div className="flex h-full flex-col">
          {/* 에디터 헤더 */}
          <div className="flex items-center gap-4 border-b bg-background p-4">
            <Button variant="outline" size="sm" onClick={handleBackToList} className="flex items-center gap-2">
              <ArrowLeft className="h-4 w-4" />
              목록으로
            </Button>
            <div>
              <h1 className="text-2xl font-bold tracking-tight">노드 플로우 에디터</h1>
              <p className="mt-1 text-sm text-muted-foreground">
                드래그 앤 드롭으로 데이터 제어 플로우를 시각적으로 설계합니다
              </p>
            </div>
          </div>

          {/* 플로우 에디터 */}
          <div className="flex-1 overflow-hidden">
            <FlowEditor key={loadingFlowId || "new"} initialFlowId={loadingFlowId} />
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="flex min-h-screen flex-col bg-background">
      <div className="space-y-6 p-4 sm:p-6">
        {/* 페이지 헤더 */}
        <div className="space-y-2 border-b pb-4">
          <h1 className="text-3xl font-bold tracking-tight">제어 관리</h1>
          <p className="text-sm text-muted-foreground">노드 기반 데이터 플로우를 시각적으로 설계하고 관리합니다</p>
        </div>

        {/* 플로우 목록 */}
        <DataFlowList onLoadFlow={handleLoadFlow} />
      </div>

      {/* Scroll to Top 버튼 */}
      <ScrollToTop />
    </div>
  );
}