"use client";

import { useState, useEffect, useCallback } 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, Smartphone, Tablet, Eye } from "lucide-react";
import { PopDesigner } from "@/components/pop/designer";
import { ScreenRelationFlow } from "@/components/screen/ScreenRelationFlow";
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 CreateScreenModal from "@/components/screen/CreateScreenModal";
import { Badge } from "@/components/ui/badge";

// 단계별 진행을 위한 타입 정의
type Step = "list" | "design";
type ViewMode = "tree" | "table";
type DevicePreview = "mobile" | "tablet";

export default function PopScreenManagementPage() {
  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>("tree");
  const [screens, setScreens] = useState<ScreenDefinition[]>([]);
  const [loading, setLoading] = useState(true);
  const [searchTerm, setSearchTerm] = useState("");
  const [isCreateOpen, setIsCreateOpen] = useState(false);
  const [devicePreview, setDevicePreview] = useState<DevicePreview>("tablet");
  
  // POP 레이아웃 존재 화면 ID
  const [popLayoutScreenIds, setPopLayoutScreenIds] = useState<Set<number>>(new Set());

  // 화면 목록 및 POP 레이아웃 존재 여부 로드
  const loadScreens = useCallback(async () => {
    try {
      setLoading(true);
      const [result, popScreenIds] = await Promise.all([
        screenApi.getScreens({ page: 1, size: 1000, searchTerm: "" }),
        screenApi.getScreenIdsWithPopLayout(),
      ]);
      
      if (result.data && result.data.length > 0) {
        setScreens(result.data);
      }
      setPopLayoutScreenIds(new Set(popScreenIds));
    } catch (error) {
      console.error("POP 화면 목록 로드 실패:", error);
    } finally {
      setLoading(false);
    }
  }, []);

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

  // 화면 목록 새로고침 이벤트 리스너
  useEffect(() => {
    const handleScreenListRefresh = () => {
      console.log("🔄 POP 화면 목록 새로고침 이벤트 수신");
      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);
    setSelectedGroup(null);
  };

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

  // POP 화면 미리보기 (새 탭에서 열기)
  const handlePreviewScreen = (screen: ScreenDefinition) => {
    const previewUrl = `/pop/screens/${screen.screenId}?preview=true&device=${devicePreview}`;
    window.open(previewUrl, "_blank", "width=800,height=900");
  };

  // POP 화면만 필터링 (POP 레이아웃이 있는 화면만)
  const popScreens = screens.filter((screen) => popLayoutScreenIds.has(screen.screenId));
  
  // 검색어 필터링
  const searchKeywords = searchTerm.toLowerCase().trim().split(/\s+/).filter(Boolean);
  const filteredScreens = popScreens.filter((screen) => {
    if (searchKeywords.length > 1) {
      return true; // 폴더 계층 검색 시 화면 필터링 없음
    }
    if (!searchTerm) return true;
    return (
      screen.screenName.toLowerCase().includes(searchTerm.toLowerCase()) ||
      screen.screenCode.toLowerCase().includes(searchTerm.toLowerCase())
    );
  });
  
  // POP 화면 수
  const popScreenCount = popLayoutScreenIds.size;

  // 화면 설계 모드일 때는 POP 전용 디자이너 사용
  if (isDesignMode && selectedScreen) {
    return (
      <div className="fixed inset-0 z-50 bg-background">
        <PopDesigner 
          selectedScreen={selectedScreen} 
          onBackToList={() => goToStep("list")} 
          onScreenUpdate={(updatedFields) => {
            setSelectedScreen({
              ...selectedScreen,
              ...updatedFields,
            });
          }}
        />
      </div>
    );
  }

  return (
    <div className="flex h-screen flex-col bg-background overflow-hidden">
      {/* 페이지 헤더 */}
      <div className="shrink-0 border-b bg-background px-6 py-4">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div>
              <div className="flex items-center gap-2">
                <h1 className="text-2xl font-bold tracking-tight">POP 화면 관리</h1>
                <Badge variant="secondary" className="text-xs">
                  모바일/태블릿
                </Badge>
              </div>
              <p className="text-sm text-muted-foreground">POP 화면을 그룹별로 관리하고 모바일/태블릿에 최적화된 화면을 설계합니다</p>
            </div>
          </div>
          <div className="flex items-center gap-2">
            {/* 디바이스 미리보기 선택 */}
            <Tabs value={devicePreview} onValueChange={(v) => setDevicePreview(v as DevicePreview)}>
              <TabsList className="h-9">
                <TabsTrigger value="mobile" className="gap-1.5 px-3">
                  <Smartphone className="h-4 w-4" />
                  모바일
                </TabsTrigger>
                <TabsTrigger value="tablet" className="gap-1.5 px-3">
                  <Tablet className="h-4 w-4" />
                  태블릿
                </TabsTrigger>
              </TabsList>
            </Tabs>
            <div className="w-px h-6 bg-border mx-1" />
            {/* 뷰 모드 전환 */}
            <Tabs value={viewMode} onValueChange={(v) => setViewMode(v as ViewMode)}>
              <TabsList className="h-9">
                <TabsTrigger value="tree" className="gap-1.5 px-3">
                  <LayoutGrid className="h-4 w-4" />
                  트리
                </TabsTrigger>
                <TabsTrigger value="table" className="gap-1.5 px-3">
                  <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">
              <Plus className="h-4 w-4" />
              새 POP 화면
            </Button>
          </div>
        </div>
      </div>

      {/* 메인 콘텐츠 */}
      {popScreenCount === 0 ? (
        // POP 화면이 없을 때 빈 상태 표시
        <div className="flex-1 flex flex-col items-center justify-center text-center p-8">
          <div className="w-16 h-16 rounded-full bg-muted flex items-center justify-center mb-4">
            <Smartphone className="h-8 w-8 text-muted-foreground" />
          </div>
          <h3 className="text-lg font-semibold mb-2">POP 화면이 없습니다</h3>
          <p className="text-sm text-muted-foreground mb-6 max-w-md">
            아직 생성된 POP 화면이 없습니다.<br />
            "새 POP 화면" 버튼을 클릭하여 모바일/태블릿용 화면을 만들어보세요.
          </p>
          <Button onClick={() => setIsCreateOpen(true)} className="gap-2">
            <Plus className="h-4 w-4" />
            새 POP 화면 만들기
          </Button>
        </div>
      ) : viewMode === "tree" ? (
        <div className="flex-1 overflow-hidden flex">
          {/* 왼쪽: POP 화면 목록 */}
          <div className="w-[350px] min-w-[280px] max-w-[450px] flex flex-col border-r bg-background">
            {/* 검색 */}
            <div className="shrink-0 p-3 border-b">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                <Input
                  placeholder="POP 화면 검색..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="pl-9 h-9"
                />
              </div>
              {/* POP 화면 수 표시 */}
              <div className="flex items-center justify-between mt-2">
                <span className="text-xs text-muted-foreground">POP 화면</span>
                <Badge variant="outline" className="text-xs">
                  {popScreenCount}개
                </Badge>
              </div>
            </div>
            {/* POP 화면 리스트 */}
            <div className="flex-1 overflow-auto p-2">
              {filteredScreens.length === 0 ? (
                <div className="text-center text-sm text-muted-foreground py-8">
                  검색 결과가 없습니다
                </div>
              ) : (
                <div className="space-y-1">
                  {filteredScreens.map((screen) => (
                    <div
                      key={screen.screenId}
                      className={`flex items-center justify-between p-3 rounded-lg cursor-pointer transition-colors ${
                        selectedScreen?.screenId === screen.screenId
                          ? "bg-primary/10 border border-primary/20"
                          : "hover:bg-muted"
                      }`}
                      onClick={() => handleScreenSelect(screen)}
                      onDoubleClick={() => handleDesignScreen(screen)}
                    >
                      <div className="flex-1 min-w-0">
                        <div className="font-medium text-sm truncate">{screen.screenName}</div>
                        <div className="text-xs text-muted-foreground truncate">
                          {screen.screenCode} {screen.tableName && `| ${screen.tableName}`}
                        </div>
                      </div>
                      <div className="flex items-center gap-1 ml-2 shrink-0">
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={(e) => {
                            e.stopPropagation();
                            handlePreviewScreen(screen);
                          }}
                          title="POP 미리보기"
                        >
                          <Eye className="h-4 w-4" />
                        </Button>
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={(e) => {
                            e.stopPropagation();
                            handleDesignScreen(screen);
                          }}
                        >
                          설계
                        </Button>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>

          {/* 오른쪽: 관계 시각화 (React Flow) */}
          <div className="flex-1 overflow-hidden">
            <ScreenRelationFlow 
              screen={selectedScreen} 
              selectedGroup={selectedGroup}
              initialFocusedScreenId={focusedScreenIdInGroup}
              isPop={true}
            />
          </div>
        </div>
      ) : (
        // 테이블 뷰 - POP 화면만 표시
        <div className="flex-1 overflow-auto p-6">
          <div className="rounded-lg border">
            <table className="w-full">
              <thead className="bg-muted/50">
                <tr>
                  <th className="text-left p-3 font-medium text-sm">화면명</th>
                  <th className="text-left p-3 font-medium text-sm">화면코드</th>
                  <th className="text-left p-3 font-medium text-sm">테이블명</th>
                  <th className="text-left p-3 font-medium text-sm">생성일</th>
                  <th className="text-right p-3 font-medium text-sm">작업</th>
                </tr>
              </thead>
              <tbody>
                {filteredScreens.map((screen) => (
                  <tr
                    key={screen.screenId}
                    className={`border-t cursor-pointer transition-colors ${
                      selectedScreen?.screenId === screen.screenId
                        ? "bg-primary/5"
                        : "hover:bg-muted/50"
                    }`}
                    onClick={() => handleScreenSelect(screen)}
                  >
                    <td className="p-3 text-sm font-medium">{screen.screenName}</td>
                    <td className="p-3 text-sm text-muted-foreground">{screen.screenCode}</td>
                    <td className="p-3 text-sm text-muted-foreground">{screen.tableName || "-"}</td>
                    <td className="p-3 text-sm text-muted-foreground">
                      {screen.createdDate ? new Date(screen.createdDate).toLocaleDateString("ko-KR") : "-"}
                    </td>
                    <td className="p-3 text-right">
                      <div className="flex items-center justify-end gap-2">
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={(e) => {
                            e.stopPropagation();
                            handlePreviewScreen(screen);
                          }}
                          title="POP 미리보기"
                        >
                          <Eye className="h-4 w-4 mr-1" />
                          보기
                        </Button>
                        <Button
                          variant="outline"
                          size="sm"
                          onClick={(e) => {
                            e.stopPropagation();
                            handleDesignScreen(screen);
                          }}
                        >
                          설계
                        </Button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}

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

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