"use client";

import { useState, useEffect, useCallback, useMemo } from "react";
import { useSearchParams } from "next/navigation";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Plus, RefreshCw, Search, LayoutGrid, LayoutList, TestTube2, Monitor, MoreHorizontal, PanelLeftClose, PanelLeftOpen } from "lucide-react";
import ScreenDesigner from "@/components/screen/ScreenDesigner";
import TemplateManager from "@/components/screen/TemplateManager";
import { ScreenGroupTreeView } from "@/components/screen/ScreenGroupTreeView";
import { ScreenRelationFlow } from "@/components/screen/ScreenRelationFlow";
import { V2ComponentsDemo } from "@/components/v2";
import { ScrollToTop } from "@/components/common/ScrollToTop";
import { ScreenDefinition } from "@/types/screen";
import { screenApi } from "@/lib/api/screen";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Badge } from "@/components/ui/badge";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import CreateScreenModal from "@/components/screen/CreateScreenModal";
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription } from "@/components/ui/sheet";

// 단계별 진행을 위한 타입 정의
type Step = "list" | "design" | "template" | "v2-test";
type ViewMode = "flow" | "card";

export default function ScreenManagementPage() {
  const searchParams = useSearchParams();
  const [currentStep, setCurrentStep] = useState<Step>("list");
  const [selectedScreen, setSelectedScreen] = useState<ScreenDefinition | null>(null);
  const [selectedGroup, setSelectedGroup] = useState<{ id: number; name: string; company_code?: string } | null>(null);
  const [focusedScreenIdInGroup, setFocusedScreenIdInGroup] = useState<number | null>(null);
  const [stepHistory, setStepHistory] = useState<Step[]>(["list"]);
  const [viewMode, setViewMode] = useState<ViewMode>("flow");
  const [screens, setScreens] = useState<ScreenDefinition[]>([]);
  const [loading, setLoading] = useState(true);
  const [searchTerm, setSearchTerm] = useState("");
  const [isCreateOpen, setIsCreateOpen] = useState(false);
  const [isDetailOpen, setIsDetailOpen] = useState(false);
  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);

  const tableCount = useMemo(() => new Set(screens.map((s) => s.tableName).filter(Boolean)).size, [screens]);

  // 화면 목록 로드
  const loadScreens = useCallback(async () => {
    try {
      setLoading(true);
      const result = await screenApi.getScreens({ page: 1, size: 1000, searchTerm: "", excludePop: true });
      // screenApi.getScreens는 { data: ScreenDefinition[], total, page, size, totalPages } 형태 반환
      if (result.data && result.data.length > 0) {
        setScreens(result.data);
      }
    } catch (error) {
      console.error("화면 목록 로드 실패:", error);
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    loadScreens();
  }, [loadScreens]);

  // 화면 목록 새로고침 이벤트 리스너
  useEffect(() => {
    const handleScreenListRefresh = () => {
      console.log("🔄 화면 목록 새로고침 이벤트 수신");
      loadScreens();
    };

    window.addEventListener("screen-list-refresh", handleScreenListRefresh);
    return () => {
      window.removeEventListener("screen-list-refresh", handleScreenListRefresh);
    };
  }, [loadScreens]);

  // URL 쿼리 파라미터로 화면 디자이너 자동 열기
  useEffect(() => {
    const openDesignerId = searchParams.get("openDesigner");
    if (openDesignerId && screens.length > 0) {
      const screenId = parseInt(openDesignerId, 10);
      const targetScreen = screens.find((s) => s.screenId === screenId);
      if (targetScreen) {
        setSelectedScreen(targetScreen);
        setCurrentStep("design");
        setStepHistory(["list", "design"]);
      }
    }
  }, [searchParams, screens]);

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

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

  // 특정 단계로 이동
  const goToStep = (step: Step) => {
    setCurrentStep(step);
    const stepIndex = stepHistory.findIndex((s) => s === step);
    if (stepIndex !== -1) {
      setStepHistory(stepHistory.slice(0, stepIndex + 1));
    }
  };

  // 화면 선택 핸들러 (개별 화면 선택 시 그룹 선택 해제)
  const handleScreenSelect = (screen: ScreenDefinition) => {
    setSelectedScreen(screen);
    setIsDetailOpen(true);
    setSelectedGroup(null); // 그룹 선택 해제
  };

  // 화면 디자인 핸들러
  const handleDesignScreen = (screen: ScreenDefinition) => {
    setSelectedScreen(screen);
    goToNextStep("design");
  };

  // 검색어로 필터링된 화면
  // 검색어가 여러 키워드(폴더 계층 검색)이면 화면 필터링 없이 모든 화면 표시
  // 단일 키워드면 해당 키워드로 화면 필터링
  const searchKeywords = searchTerm.toLowerCase().trim().split(/\s+/).filter(Boolean);
  const filteredScreens = searchKeywords.length > 1 
    ? screens  // 폴더 계층 검색 시에는 화면 필터링 없음 (폴더에서 이미 필터링됨)
    : screens.filter((screen) =>
        screen.screenName.toLowerCase().includes(searchTerm.toLowerCase()) ||
        screen.screenCode.toLowerCase().includes(searchTerm.toLowerCase())
      );

  // 화면 설계 모드일 때는 레이아웃 없이 전체 화면 사용
  if (isDesignMode) {
    return (
      <div className="fixed inset-0 z-50 bg-background">
        <ScreenDesigner 
          selectedScreen={selectedScreen} 
          onBackToList={() => goToStep("list")} 
          onScreenUpdate={(updatedFields) => {
            if (selectedScreen) {
              const updated = { ...selectedScreen, ...updatedFields };
              setSelectedScreen(updated);
              setScreens((prev) =>
                prev.map((s) =>
                  s.screenId === selectedScreen.screenId
                    ? { ...s, ...updatedFields }
                    : s
                )
              );
            }
          }}
        />
      </div>
    );
  }

  // V2 컴포넌트 테스트 모드
  if (currentStep === "v2-test") {
    return (
      <div className="fixed inset-0 z-50 bg-background">
        <V2ComponentsDemo onBack={() => goToStep("list")} />
      </div>
    );
  }

  return (
    <div className="flex h-screen flex-col bg-background overflow-hidden">
      {/* 페이지 헤더 */}
      <div className="flex-shrink-0 border-b border-border/50 bg-background/95 backdrop-blur-md px-6 py-3">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <h1 className="text-xl font-bold tracking-tight">화면 관리</h1>
            <Badge variant="secondary" className="text-xs">{screens.length}개 화면</Badge>
          </div>
          <div className="flex items-center gap-2">
            {/* 뷰 모드 전환 */}
            <Tabs value={viewMode} onValueChange={(v) => setViewMode(v as ViewMode)}>
              <TabsList className="h-9 bg-muted/50 border border-border/50">
                <TabsTrigger value="flow" className="gap-1.5 px-3 text-xs">
                  <LayoutGrid className="h-4 w-4" />
                  관계도
                </TabsTrigger>
                <TabsTrigger value="card" className="gap-1.5 px-3 text-xs">
                  <LayoutList className="h-4 w-4" />
                  카드
                </TabsTrigger>
              </TabsList>
            </Tabs>
            <Button variant="outline" size="icon" onClick={loadScreens}>
              <RefreshCw className="h-4 w-4" />
            </Button>
            <Button onClick={() => setIsCreateOpen(true)} className="gap-2 shadow-sm hover:shadow-md transition-shadow">
              <Plus className="h-4 w-4" />
              새 화면
            </Button>
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="outline" size="icon">
                  <MoreHorizontal className="h-4 w-4" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                <DropdownMenuItem onClick={() => goToNextStep("v2-test")}>
                  <TestTube2 className="h-4 w-4 mr-2" />
                  V2 테스트
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        </div>
      </div>

      {/* 메인 콘텐츠 */}
      {viewMode === "flow" ? (
        <div className="flex-1 overflow-hidden flex">
          {/* 왼쪽: 트리 구조 (접기/펼기 지원) */}
          <div className={`flex flex-col border-r border-border/50 bg-background/80 backdrop-blur-sm transition-all duration-300 ease-in-out ${
            sidebarCollapsed ? "w-[48px] min-w-[48px]" : "w-[320px] min-w-[280px] max-w-[400px]"
          }`}>
            {/* 사이드바 헤더 */}
            <div className="flex-shrink-0 flex items-center justify-between p-2 border-b border-border/50">
              {!sidebarCollapsed && <span className="text-xs font-medium text-muted-foreground px-1">탐색</span>}
              <Button
                variant="ghost"
                size="icon"
                className={`h-7 w-7 ${sidebarCollapsed ? "mx-auto" : "ml-auto"}`}
                onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
              >
                {sidebarCollapsed ? <PanelLeftOpen className="h-4 w-4" /> : <PanelLeftClose className="h-4 w-4" />}
              </Button>
            </div>
            {/* 사이드바 접힘 시 아이콘 컬럼 */}
            {sidebarCollapsed && (
              <div className="flex-1 flex flex-col items-center gap-2 py-3">
                <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => setSidebarCollapsed(false)}>
                  <Search className="h-4 w-4 text-muted-foreground" />
                </Button>
                <div className="mt-auto pb-2">
                  <Badge variant="secondary" className="text-[10px] px-1.5">{screens.length}</Badge>
                </div>
              </div>
            )}
            {/* 사이드바 펼침 시 전체 UI */}
            {!sidebarCollapsed && (
              <>
                {/* 검색 */}
                <div className="flex-shrink-0 p-3 border-b border-border/50">
                  <div className="relative">
                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                    <Input
                      placeholder="화면 검색..."
                      value={searchTerm}
                      onChange={(e) => setSearchTerm(e.target.value)}
                      className="pl-9 h-9 rounded-xl bg-muted/30 border-border/50 focus:bg-background focus:ring-2 focus:ring-primary/30 transition-colors"
                    />
                  </div>
                </div>
                {/* 트리 뷰 */}
                <div className="flex-1 overflow-hidden">
                  <ScreenGroupTreeView
                    screens={filteredScreens}
                    selectedScreen={selectedScreen}
                    onScreenSelect={handleScreenSelect}
                    onScreenDesign={handleDesignScreen}
                    searchTerm={searchTerm}
                    onGroupSelect={(group) => {
                      setSelectedGroup(group);
                      setSelectedScreen(null);
                      setFocusedScreenIdInGroup(null);
                    }}
                    onScreenSelectInGroup={(group, screenId) => {
                      const isNewGroup = selectedGroup?.id !== group.id;
                      if (isNewGroup) {
                        setSelectedGroup(group);
                        setFocusedScreenIdInGroup(null);
                      } else {
                        setFocusedScreenIdInGroup(screenId);
                      }
                      setSelectedScreen(null);
                    }}
                  />
                </div>
              </>
            )}
          </div>

          {/* 오른쪽: 관계 시각화 (React Flow) */}
          <div className="flex-1 overflow-hidden bg-muted/10">
            <ScreenRelationFlow 
              screen={selectedScreen} 
              selectedGroup={selectedGroup}
              initialFocusedScreenId={focusedScreenIdInGroup}
            />
          </div>
        </div>
      ) : (
        <div className="flex-1 overflow-auto p-6">
          <div className="grid grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-4">
            {filteredScreens.map((screen) => (
              <div
                key={screen.screenId}
                className={`group rounded-lg border bg-card hover:border-primary/50 hover:shadow-md transition-all cursor-pointer overflow-hidden ${
                  selectedScreen?.screenId === screen.screenId ? "border-primary ring-2 ring-primary/20" : "border-border/50"
                }`}
                onClick={() => handleScreenSelect(screen)}
                onDoubleClick={() => handleDesignScreen(screen)}
              >
                <div className="h-[100px] bg-gradient-to-br from-muted/30 to-muted/60 flex items-center justify-center">
                  <Monitor className="h-8 w-8 text-muted-foreground/40 group-hover:text-primary/40 transition-colors" />
                </div>
                <div className="p-3">
                  <div className="text-sm font-semibold truncate">{screen.screenName}</div>
                  <div className="text-xs font-mono text-muted-foreground truncate mt-0.5">{screen.screenCode}</div>
                  <div className="flex items-center justify-between mt-2 text-xs text-muted-foreground">
                    <span>{screen.tableName || "테이블 없음"}</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
          {filteredScreens.length === 0 && (
            <div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
              <Search className="h-8 w-8 mb-3 opacity-30" />
              <p className="text-sm">검색 결과가 없습니다</p>
            </div>
          )}
        </div>
      )}

      {/* 화면 디테일 Sheet */}
      <Sheet open={isDetailOpen} onOpenChange={setIsDetailOpen}>
        <SheetContent className="w-[420px] sm:max-w-[420px]">
          <SheetHeader>
            <SheetTitle className="text-base">{selectedScreen?.screenName || "화면 상세"}</SheetTitle>
            <SheetDescription className="text-xs font-mono">{selectedScreen?.screenCode}</SheetDescription>
          </SheetHeader>
          {selectedScreen && (
            <div className="mt-6 space-y-4">
              <div className="space-y-3">
                <div className="flex items-center justify-between">
                  <span className="text-xs text-muted-foreground">테이블</span>
                  <span className="text-xs font-mono">{selectedScreen.tableName || "없음"}</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-xs text-muted-foreground">화면 ID</span>
                  <span className="text-xs font-mono">{selectedScreen.screenId}</span>
                </div>
              </div>
              <div className="flex gap-2 pt-4 border-t border-border/50">
                <Button className="flex-1" onClick={() => { handleDesignScreen(selectedScreen); setIsDetailOpen(false); }}>
                  편집하기
                </Button>
                <Button variant="outline" onClick={() => setIsDetailOpen(false)}>
                  닫기
                </Button>
              </div>
            </div>
          )}
        </SheetContent>
      </Sheet>

      {/* 화면 생성 모달 */}
      <CreateScreenModal
        open={isCreateOpen}
        onOpenChange={setIsCreateOpen}
        onCreated={() => {
          setIsCreateOpen(false);
          loadScreens();
        }}
      />

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