"use client";

import React, { forwardRef, useState, useCallback, useEffect } from "react";
import { DashboardElement, ElementType, ElementSubtype, DragData } from "./types";
import { CanvasElement } from "./CanvasElement";
import { GRID_CONFIG, snapToGrid } from "./gridUtils";

interface DashboardCanvasProps {
  elements: DashboardElement[];
  selectedElement: string | null;
  onCreateElement: (type: ElementType, subtype: ElementSubtype, x: number, y: number) => void;
  onUpdateElement: (id: string, updates: Partial<DashboardElement>) => void;
  onRemoveElement: (id: string) => void;
  onSelectElement: (id: string | null) => void;
  onConfigureElement?: (element: DashboardElement) => void;
}

/**
 * 대시보드 캔버스 컴포넌트
 * - 드래그 앤 드롭 영역
 * - 12 컬럼 그리드 배경
 * - 스냅 기능
 * - 요소 배치 및 관리
 */
export const DashboardCanvas = forwardRef<HTMLDivElement, DashboardCanvasProps>(
  (
    {
      elements,
      selectedElement,
      onCreateElement,
      onUpdateElement,
      onRemoveElement,
      onSelectElement,
      onConfigureElement,
    },
    ref,
  ) => {
    const [isDragOver, setIsDragOver] = useState(false);
    const [cellSize, setCellSize] = useState(60);

    // 화면 크기에 따라 셀 크기 동적 계산
    useEffect(() => {
      const updateCellSize = () => {
        if (!ref || typeof ref === "function" || !ref.current) return;

        const container = ref.current.parentElement;
        if (!container) return;

        // 컨테이너 너비에서 여백 제외
        const availableWidth = container.clientWidth - 32; // 좌우 패딩

        // 12 컬럼 + 11개 gap을 고려한 셀 크기 계산
        const calculatedCellSize = Math.floor((availableWidth - 11 * GRID_CONFIG.GAP) / GRID_CONFIG.COLUMNS);

        setCellSize(calculatedCellSize);
      };

      updateCellSize();
      window.addEventListener("resize", updateCellSize);

      return () => window.removeEventListener("resize", updateCellSize);
    }, [ref]);

    // 드래그 오버 처리
    const handleDragOver = useCallback((e: React.DragEvent) => {
      e.preventDefault();
      e.dataTransfer.dropEffect = "copy";
      setIsDragOver(true);
    }, []);

    // 드래그 리브 처리
    const handleDragLeave = useCallback((e: React.DragEvent) => {
      if (e.currentTarget === e.target) {
        setIsDragOver(false);
      }
    }, []);

    // 드롭 처리 (그리드 스냅 적용)
    const handleDrop = useCallback(
      (e: React.DragEvent) => {
        e.preventDefault();
        setIsDragOver(false);

        try {
          const dragData: DragData = JSON.parse(e.dataTransfer.getData("application/json"));

          if (!ref || typeof ref === "function") return;

          const rect = ref.current?.getBoundingClientRect();
          if (!rect) return;

          // 캔버스 스크롤을 고려한 정확한 위치 계산
          const rawX = e.clientX - rect.left + (ref.current?.scrollLeft || 0);
          const rawY = e.clientY - rect.top + (ref.current?.scrollTop || 0);

          // 그리드에 스냅 (동적 셀 크기 사용)
          const snappedX = snapToGrid(rawX, cellSize);
          const snappedY = snapToGrid(rawY, cellSize);

          onCreateElement(dragData.type, dragData.subtype, snappedX, snappedY);
        } catch (error) {
          // console.error('드롭 데이터 파싱 오류:', error);
        }
      },
      [ref, onCreateElement, cellSize],
    );

    // 캔버스 클릭 시 선택 해제
    const handleCanvasClick = useCallback(
      (e: React.MouseEvent) => {
        if (e.target === e.currentTarget) {
          onSelectElement(null);
        }
      },
      [onSelectElement],
    );

    // 그리드 크기 계산 (동적)
    const cellWithGap = cellSize + GRID_CONFIG.GAP;
    const gridSize = `${cellWithGap}px ${cellWithGap}px`;

    return (
      <div
        ref={ref}
        className={`relative min-h-full w-full bg-gray-50 ${isDragOver ? "bg-blue-50/50" : ""} `}
        style={{
          // 12 컬럼 그리드 배경 (동적 크기)
          backgroundImage: `
            linear-gradient(rgba(59, 130, 246, 0.1) 1px, transparent 1px),
            linear-gradient(90deg, rgba(59, 130, 246, 0.1) 1px, transparent 1px)
          `,
          backgroundSize: gridSize,
          backgroundPosition: "0 0",
          backgroundRepeat: "repeat",
        }}
        onDragOver={handleDragOver}
        onDragLeave={handleDragLeave}
        onDrop={handleDrop}
        onClick={handleCanvasClick}
      >
        {/* 배치된 요소들 렌더링 */}
        {elements.map((element) => (
          <CanvasElement
            key={element.id}
            element={element}
            isSelected={selectedElement === element.id}
            cellSize={cellSize}
            onUpdate={onUpdateElement}
            onRemove={onRemoveElement}
            onSelect={onSelectElement}
            onConfigure={onConfigureElement}
          />
        ))}
      </div>
    );
  },
);

DashboardCanvas.displayName = "DashboardCanvas";
