"use client";

import { useState, useEffect } from "react";
import Yard3DCanvas from "./Yard3DCanvas";
import { yardLayoutApi } from "@/lib/api/yardLayoutApi";
import { Loader2 } from "lucide-react";

interface YardPlacement {
  id: number;
  yard_layout_id: number;
  external_material_id: string;
  material_code: string;
  material_name: string;
  quantity: number;
  unit: string;
  position_x: number;
  position_y: number;
  position_z: number;
  size_x: number;
  size_y: number;
  size_z: number;
  color: string;
  status?: string;
  memo?: string;
}

interface Yard3DViewerProps {
  layoutId: number;
}

export default function Yard3DViewer({ layoutId }: Yard3DViewerProps) {
  const [placements, setPlacements] = useState<YardPlacement[]>([]);
  const [selectedPlacement, setSelectedPlacement] = useState<YardPlacement | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  // 선택 변경 로그
  const handlePlacementClick = (placement: YardPlacement | null) => {
    console.log("Yard3DViewer - Placement clicked:", placement?.material_name);
    setSelectedPlacement(placement);
  };

  // 선택 상태 변경 감지
  useEffect(() => {
    console.log("selectedPlacement changed:", selectedPlacement?.material_name);
  }, [selectedPlacement]);

  // 배치 데이터 로드
  useEffect(() => {
    const loadPlacements = async () => {
      try {
        setIsLoading(true);
        setError(null);
        const response = await yardLayoutApi.getPlacementsByLayoutId(layoutId);
        if (response.success) {
          setPlacements(response.data);
        } else {
          setError("배치 데이터를 불러올 수 없습니다.");
        }
      } catch (err) {
        console.error("배치 데이터 로드 실패:", err);
        setError("배치 데이터를 불러오는 중 오류가 발생했습니다.");
      } finally {
        setIsLoading(false);
      }
    };

    loadPlacements();
  }, [layoutId]);

  if (isLoading) {
    return (
      <div className="flex h-full w-full items-center justify-center bg-gray-50">
        <div className="text-center">
          <Loader2 className="mx-auto h-8 w-8 animate-spin text-blue-600" />
          <div className="mt-2 text-sm text-gray-600">3D 장면 로딩 중...</div>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="flex h-full w-full items-center justify-center bg-gray-50">
        <div className="text-center">
          <div className="mb-2 text-4xl">⚠️</div>
          <div className="text-sm font-medium text-gray-600">{error}</div>
        </div>
      </div>
    );
  }

  if (placements.length === 0) {
    return (
      <div className="flex h-full w-full items-center justify-center bg-gray-50">
        <div className="text-center">
          <div className="mb-2 text-4xl">📦</div>
          <div className="text-sm font-medium text-gray-600">배치된 자재가 없습니다</div>
        </div>
      </div>
    );
  }

  return (
    <div className="relative h-full w-full">
      {/* 3D 캔버스 */}
      <Yard3DCanvas
        placements={placements}
        selectedPlacementId={selectedPlacement?.id || null}
        onPlacementClick={handlePlacementClick}
      />

      {/* 선택된 자재 정보 패널 (오버레이) */}
      {selectedPlacement && (
        <div className="absolute top-4 right-4 z-50 w-64 rounded-lg border border-gray-300 bg-white p-4 shadow-xl">
          <div className="mb-3 flex items-center justify-between">
            <h3 className="text-sm font-semibold text-gray-800">자재 정보</h3>
            <button
              onClick={() => {
                console.log("Close button clicked");
                setSelectedPlacement(null);
              }}
              className="rounded-full p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-600"
            >
              ✕
            </button>
          </div>

          <div className="space-y-2">
            <div>
              <label className="text-xs font-medium text-gray-500">자재명</label>
              <div className="mt-1 text-sm font-semibold text-gray-900">{selectedPlacement.material_name}</div>
            </div>

            <div>
              <label className="text-xs font-medium text-gray-500">수량</label>
              <div className="mt-1 text-sm font-semibold text-gray-900">
                {selectedPlacement.quantity} {selectedPlacement.unit}
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}