"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { ArrowLeft } from "lucide-react";
import ScreenList from "@/components/screen/ScreenList";
import ScreenDesigner from "@/components/screen/ScreenDesigner";
import TemplateManager from "@/components/screen/TemplateManager";
import { ScrollToTop } from "@/components/common/ScrollToTop";
import { ScreenDefinition } from "@/types/screen";

// 단계별 진행을 위한 타입 정의
type Step = "list" | "design" | "template";

export default function ScreenManagementPage() {
  const [currentStep, setCurrentStep] = useState<Step>("list");
  const [selectedScreen, setSelectedScreen] = useState<ScreenDefinition | null>(null);
  const [stepHistory, setStepHistory] = useState<Step[]>(["list"]);

  // 화면 설계 모드일 때는 전체 화면 사용
  const isDesignMode = currentStep === "design";

  // 단계별 제목과 설명
  const stepConfig = {
    list: {
      title: "화면 목록 관리",
      description: "생성된 화면들을 확인하고 관리하세요",
    },
    design: {
      title: "화면 설계",
      description: "드래그앤드롭으로 화면을 설계하세요",
    },
    template: {
      title: "템플릿 관리",
      description: "화면 템플릿을 관리하고 재사용하세요",
    },
  };

  // 다음 단계로 이동
  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));
    }
  };

  // 화면 설계 모드일 때는 레이아웃 없이 전체 화면 사용 (고정 높이)
  if (isDesignMode) {
    return (
      <div className="fixed inset-0 z-50 bg-background">
        <ScreenDesigner selectedScreen={selectedScreen} onBackToList={() => goToStep("list")} />
      </div>
    );
  }

  return (
    <div className="flex min-h-screen flex-col bg-background">
      <div className="space-y-6 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>

        {/* 단계별 내용 */}
        <div className="flex-1">
          {/* 화면 목록 단계 */}
          {currentStep === "list" && (
            <ScreenList
              onScreenSelect={setSelectedScreen}
              selectedScreen={selectedScreen}
              onDesignScreen={(screen) => {
                setSelectedScreen(screen);
                goToNextStep("design");
              }}
            />
          )}

          {/* 템플릿 관리 단계 */}
          {currentStep === "template" && (
            <div className="space-y-6">
              <div className="flex items-center justify-between rounded-lg border bg-card p-4 shadow-sm">
                <h2 className="text-xl font-semibold">{stepConfig.template.title}</h2>
                <div className="flex gap-2">
                  <Button 
                    variant="outline" 
                    onClick={goToPreviousStep}
                    className="h-10 gap-2 text-sm font-medium"
                  >
                    <ArrowLeft className="h-4 w-4" />
                    이전 단계
                  </Button>
                  <Button 
                    onClick={() => goToStep("list")}
                    className="h-10 gap-2 text-sm font-medium"
                  >
                    목록으로 돌아가기
                  </Button>
                </div>
              </div>
              <TemplateManager selectedScreen={selectedScreen} onBackToList={() => goToStep("list")} />
            </div>
          )}
        </div>
      </div>

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