"use client";

import { useState, useEffect, useMemo } from "react";
import { Loader2, Search, Filter, X } from "lucide-react";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import dynamic from "next/dynamic";
import { useToast } from "@/hooks/use-toast";
import type { PlacedObject, MaterialData } from "@/types/digitalTwin";
import { getLayoutById, getMaterials } from "@/lib/api/digitalTwin";

const Yard3DCanvas = dynamic(() => import("./Yard3DCanvas"), {
  ssr: false,
  loading: () => (
    <div className="bg-muted flex h-full items-center justify-center">
      <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
    </div>
  ),
});

interface DigitalTwinViewerProps {
  layoutId: number;
}

export default function DigitalTwinViewer({ layoutId }: DigitalTwinViewerProps) {
  const { toast } = useToast();
  const [placedObjects, setPlacedObjects] = useState<PlacedObject[]>([]);
  const [selectedObject, setSelectedObject] = useState<PlacedObject | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [materials, setMaterials] = useState<MaterialData[]>([]);
  const [loadingMaterials, setLoadingMaterials] = useState(false);
  const [showInfoPanel, setShowInfoPanel] = useState(false);
  const [externalDbConnectionId, setExternalDbConnectionId] = useState<number | null>(null);
  const [layoutName, setLayoutName] = useState<string>("");
  
  // 검색 및 필터
  const [searchQuery, setSearchQuery] = useState("");
  const [filterType, setFilterType] = useState<string>("all");

  // 레이아웃 데이터 로드
  useEffect(() => {
    const loadLayout = async () => {
      try {
        setIsLoading(true);
        const response = await getLayoutById(layoutId);

        if (response.success && response.data) {
          const { layout, objects } = response.data;

          // 레이아웃 정보 저장
          setLayoutName(layout.layoutName);
          setExternalDbConnectionId(layout.externalDbConnectionId);

          // 객체 데이터 변환
          const loadedObjects: PlacedObject[] = objects.map((obj: any) => ({
            id: obj.id,
            type: obj.object_type,
            name: obj.object_name,
            position: {
              x: parseFloat(obj.position_x),
              y: parseFloat(obj.position_y),
              z: parseFloat(obj.position_z),
            },
            size: {
              x: parseFloat(obj.size_x),
              y: parseFloat(obj.size_y),
              z: parseFloat(obj.size_z),
            },
            rotation: obj.rotation ? parseFloat(obj.rotation) : 0,
            color: obj.color,
            areaKey: obj.area_key,
            locaKey: obj.loca_key,
            locType: obj.loc_type,
            materialCount: obj.material_count,
            materialPreview: obj.material_preview_height
              ? { height: parseFloat(obj.material_preview_height) }
              : undefined,
            parentId: obj.parent_id,
            displayOrder: obj.display_order,
            locked: obj.locked,
            visible: obj.visible !== false,
          }));

          setPlacedObjects(loadedObjects);
        } else {
          throw new Error(response.error || "레이아웃 조회 실패");
        }
      } catch (error) {
        console.error("레이아웃 로드 실패:", error);
        const errorMessage = error instanceof Error ? error.message : "레이아웃을 불러오는데 실패했습니다.";
        toast({
          variant: "destructive",
          title: "오류",
          description: errorMessage,
        });
      } finally {
        setIsLoading(false);
      }
    };

    loadLayout();
  }, [layoutId, toast]);

  // Location의 자재 목록 로드
  const loadMaterialsForLocation = async (locaKey: string, externalDbConnectionId: number) => {
    try {
      setLoadingMaterials(true);
      setShowInfoPanel(true);
      const response = await getMaterials(externalDbConnectionId, locaKey);
      if (response.success && response.data) {
        const sortedMaterials = response.data.sort((a, b) => a.LOLAYER - b.LOLAYER);
        setMaterials(sortedMaterials);
      } else {
        setMaterials([]);
      }
    } catch (error) {
      console.error("자재 로드 실패:", error);
      setMaterials([]);
    } finally {
      setLoadingMaterials(false);
    }
  };

  // 객체 클릭
  const handleObjectClick = (objectId: number | null) => {
    if (objectId === null) {
      setSelectedObject(null);
      setShowInfoPanel(false);
      return;
    }

    const obj = placedObjects.find((o) => o.id === objectId);
    setSelectedObject(obj || null);

    // Location을 클릭한 경우, 자재 정보 표시
    if (
      obj &&
      (obj.type === "location-bed" ||
        obj.type === "location-stp" ||
        obj.type === "location-temp" ||
        obj.type === "location-dest") &&
      obj.locaKey &&
      externalDbConnectionId
    ) {
      setShowInfoPanel(true);
      loadMaterialsForLocation(obj.locaKey, externalDbConnectionId);
    } else {
      setShowInfoPanel(true);
      setMaterials([]);
    }
  };

  // 타입별 개수 계산 (useMemo로 최적화)
  const typeCounts = useMemo(() => {
    const counts: Record<string, number> = {
      all: placedObjects.length,
      area: 0,
      "location-bed": 0,
      "location-stp": 0,
      "location-temp": 0,
      "location-dest": 0,
      "crane-mobile": 0,
      rack: 0,
    };

    placedObjects.forEach((obj) => {
      if (counts[obj.type] !== undefined) {
        counts[obj.type]++;
      }
    });

    return counts;
  }, [placedObjects]);

  // 필터링된 객체 목록 (useMemo로 최적화)
  const filteredObjects = useMemo(() => {
    return placedObjects.filter((obj) => {
      // 타입 필터
      if (filterType !== "all" && obj.type !== filterType) {
        return false;
      }

      // 검색 쿼리
      if (searchQuery) {
        const query = searchQuery.toLowerCase();
        return (
          obj.name.toLowerCase().includes(query) ||
          obj.areaKey?.toLowerCase().includes(query) ||
          obj.locaKey?.toLowerCase().includes(query)
        );
      }

      return true;
    });
  }, [placedObjects, filterType, searchQuery]);

  if (isLoading) {
    return (
      <div className="flex h-full items-center justify-center">
        <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
      </div>
    );
  }

  return (
    <div className="bg-background flex h-full flex-col">
      {/* 상단 헤더 */}
      <div className="flex items-center justify-between border-b p-4">
        <div>
          <h2 className="text-lg font-semibold">{layoutName || "디지털 트윈 야드"}</h2>
          <p className="text-muted-foreground text-sm">읽기 전용 뷰</p>
        </div>
      </div>

      {/* 메인 영역 */}
      <div className="flex flex-1 overflow-hidden">
        {/* 좌측: 검색/필터 */}
        <div className="flex h-full w-[20%] flex-col border-r">
          <div className="space-y-4 p-4">
            {/* 검색 */}
            <div>
              <Label className="mb-2 block text-sm font-semibold">검색</Label>
              <div className="relative">
                <Search className="text-muted-foreground absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2" />
                <Input
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  placeholder="이름, Area, Location 검색..."
                  className="h-10 pl-9 text-sm"
                />
                {searchQuery && (
                  <Button
                    variant="ghost"
                    size="sm"
                    className="absolute right-1 top-1/2 h-7 w-7 -translate-y-1/2 p-0"
                    onClick={() => setSearchQuery("")}
                  >
                    <X className="h-3 w-3" />
                  </Button>
                )}
              </div>
            </div>

            {/* 타입 필터 */}
            <div>
              <Label className="mb-2 block text-sm font-semibold">타입 필터</Label>
              <Select value={filterType} onValueChange={setFilterType}>
                <SelectTrigger className="h-10 text-sm">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">전체 ({typeCounts.all})</SelectItem>
                  <SelectItem value="area">Area ({typeCounts.area})</SelectItem>
                  <SelectItem value="location-bed">베드(BED) ({typeCounts["location-bed"]})</SelectItem>
                  <SelectItem value="location-stp">정차포인트(STP) ({typeCounts["location-stp"]})</SelectItem>
                  <SelectItem value="location-temp">임시베드(TMP) ({typeCounts["location-temp"]})</SelectItem>
                  <SelectItem value="location-dest">지정착지(DES) ({typeCounts["location-dest"]})</SelectItem>
                  <SelectItem value="crane-mobile">크레인 ({typeCounts["crane-mobile"]})</SelectItem>
                  <SelectItem value="rack">랙 ({typeCounts.rack})</SelectItem>
                </SelectContent>
              </Select>
            </div>

            {/* 필터 초기화 */}
            {(searchQuery || filterType !== "all") && (
              <Button
                variant="outline"
                size="sm"
                className="h-9 w-full text-sm"
                onClick={() => {
                  setSearchQuery("");
                  setFilterType("all");
                }}
              >
                필터 초기화
              </Button>
            )}
          </div>

          {/* 객체 목록 */}
          <div className="flex-1 overflow-y-auto border-t p-4">
            <Label className="mb-2 block text-sm font-semibold">
              객체 목록 ({filteredObjects.length})
            </Label>
            {filteredObjects.length === 0 ? (
              <div className="text-muted-foreground flex h-32 items-center justify-center text-center text-sm">
                {searchQuery ? "검색 결과가 없습니다" : "객체가 없습니다"}
              </div>
            ) : (
              <div className="space-y-2">
                {filteredObjects.map((obj) => {
                  // 타입별 레이블
                  let typeLabel = obj.type;
                  if (obj.type === "location-bed") typeLabel = "베드(BED)";
                  else if (obj.type === "location-stp") typeLabel = "정차포인트(STP)";
                  else if (obj.type === "location-temp") typeLabel = "임시베드(TMP)";
                  else if (obj.type === "location-dest") typeLabel = "지정착지(DES)";
                  else if (obj.type === "crane-mobile") typeLabel = "크레인";
                  else if (obj.type === "area") typeLabel = "Area";
                  else if (obj.type === "rack") typeLabel = "랙";

                  return (
                    <div
                      key={obj.id}
                      onClick={() => handleObjectClick(obj.id)}
                      className={`bg-background hover:bg-accent cursor-pointer rounded-lg border p-3 transition-all ${
                        selectedObject?.id === obj.id
                          ? "ring-primary bg-primary/5 ring-2"
                          : "hover:shadow-sm"
                      }`}
                    >
                      <div className="flex items-start justify-between">
                        <div className="flex-1">
                          <p className="text-sm font-medium">{obj.name}</p>
                          <div className="text-muted-foreground mt-1 flex items-center gap-2 text-xs">
                            <span
                              className="inline-block h-2 w-2 rounded-full"
                              style={{ backgroundColor: obj.color }}
                            />
                            <span>{typeLabel}</span>
                          </div>
                        </div>
                      </div>
                      
                      {/* 추가 정보 */}
                      <div className="mt-2 space-y-1">
                        {obj.areaKey && (
                          <p className="text-muted-foreground text-xs">
                            Area: <span className="font-medium">{obj.areaKey}</span>
                          </p>
                        )}
                        {obj.locaKey && (
                          <p className="text-muted-foreground text-xs">
                            Location: <span className="font-medium">{obj.locaKey}</span>
                          </p>
                        )}
                        {obj.materialCount !== undefined && obj.materialCount > 0 && (
                          <p className="text-xs text-yellow-600">
                            자재: <span className="font-semibold">{obj.materialCount}개</span>
                          </p>
                        )}
                      </div>
                    </div>
                  );
                })}
              </div>
            )}
          </div>
        </div>

        {/* 중앙: 3D 캔버스 */}
        <div className="relative flex-1">
          {!isLoading && (
            <Yard3DCanvas
              placements={useMemo(
                () =>
                  placedObjects.map((obj) => ({
                    id: obj.id,
                    name: obj.name,
                    position_x: obj.position.x,
                    position_y: obj.position.y,
                    position_z: obj.position.z,
                    size_x: obj.size.x,
                    size_y: obj.size.y,
                    size_z: obj.size.z,
                    color: obj.color,
                    data_source_type: obj.type,
                    material_count: obj.materialCount,
                    material_preview_height: obj.materialPreview?.height,
                    yard_layout_id: undefined,
                    material_code: null,
                    material_name: null,
                    quantity: null,
                    unit: null,
                    data_source_config: undefined,
                    data_binding: undefined,
                    created_at: new Date().toISOString(),
                    updated_at: new Date().toISOString(),
                  })),
                [placedObjects],
              )}
              selectedPlacementId={selectedObject?.id || null}
              onPlacementClick={(placement) => handleObjectClick(placement?.id || null)}
              focusOnPlacementId={null}
              onCollisionDetected={() => {}}
            />
          )}
        </div>

        {/* 우측: 정보 패널 */}
        {showInfoPanel && selectedObject && (
          <div className="h-full w-[25%] overflow-y-auto border-l">
            <div className="p-4">
              <div className="mb-4 flex items-center justify-between">
                <div>
                  <h3 className="text-lg font-semibold">상세 정보</h3>
                  <p className="text-muted-foreground text-xs">{selectedObject.name}</p>
                </div>
                <Button variant="ghost" size="sm" onClick={() => setShowInfoPanel(false)}>
                  <X className="h-4 w-4" />
                </Button>
              </div>

              {/* 기본 정보 */}
              <div className="bg-muted space-y-3 rounded-lg p-3">
                <div>
                  <Label className="text-muted-foreground text-xs">타입</Label>
                  <p className="text-sm font-medium">{selectedObject.type}</p>
                </div>
                {selectedObject.areaKey && (
                  <div>
                    <Label className="text-muted-foreground text-xs">Area Key</Label>
                    <p className="text-sm font-medium">{selectedObject.areaKey}</p>
                  </div>
                )}
                {selectedObject.locaKey && (
                  <div>
                    <Label className="text-muted-foreground text-xs">Location Key</Label>
                    <p className="text-sm font-medium">{selectedObject.locaKey}</p>
                  </div>
                )}
                {selectedObject.materialCount !== undefined && selectedObject.materialCount > 0 && (
                  <div>
                    <Label className="text-muted-foreground text-xs">자재 개수</Label>
                    <p className="text-sm font-medium">{selectedObject.materialCount}개</p>
                  </div>
                )}
              </div>

              {/* 자재 목록 (Location인 경우) */}
              {(selectedObject.type === "location-bed" ||
                selectedObject.type === "location-stp" ||
                selectedObject.type === "location-temp" ||
                selectedObject.type === "location-dest") && (
                <div className="mt-4">
                  <Label className="mb-2 block text-sm font-semibold">자재 목록</Label>
                  {loadingMaterials ? (
                    <div className="flex h-32 items-center justify-center">
                      <Loader2 className="text-muted-foreground h-6 w-6 animate-spin" />
                    </div>
                  ) : materials.length === 0 ? (
                    <div className="text-muted-foreground flex h-32 items-center justify-center text-center text-sm">
                      {externalDbConnectionId
                        ? "자재가 없습니다"
                        : "외부 DB 연결이 설정되지 않았습니다"}
                    </div>
                  ) : (
                    <div className="space-y-2">
                      {materials.map((material, index) => (
                        <div
                          key={`${material.STKKEY}-${index}`}
                          className="bg-muted hover:bg-accent rounded-lg border p-3 transition-colors"
                        >
                          <div className="mb-2 flex items-start justify-between">
                            <div className="flex-1">
                              <p className="text-sm font-medium">{material.STKKEY}</p>
                              <p className="text-muted-foreground mt-0.5 text-xs">
                                층: {material.LOLAYER} | Area: {material.AREAKEY}
                              </p>
                            </div>
                          </div>
                          <div className="text-muted-foreground grid grid-cols-2 gap-2 text-xs">
                            {material.STKWIDT && (
                              <div>
                                폭: <span className="font-medium">{material.STKWIDT}</span>
                              </div>
                            )}
                            {material.STKLENG && (
                              <div>
                                길이: <span className="font-medium">{material.STKLENG}</span>
                              </div>
                            )}
                            {material.STKHEIG && (
                              <div>
                                높이: <span className="font-medium">{material.STKHEIG}</span>
                              </div>
                            )}
                            {material.STKWEIG && (
                              <div>
                                무게: <span className="font-medium">{material.STKWEIG}</span>
                              </div>
                            )}
                          </div>
                          {material.STKRMKS && (
                            <p className="text-muted-foreground mt-2 text-xs italic">{material.STKRMKS}</p>
                          )}
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              )}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}