"use client";

import { useRef, useState, useEffect } from "react";
import { ComponentConfig } from "@/types/report";
import { useReportDesigner } from "@/contexts/ReportDesignerContext";
import { getFullImageUrl } from "@/lib/api/client";

interface CanvasComponentProps {
  component: ComponentConfig;
}

export function CanvasComponent({ component }: CanvasComponentProps) {
  const {
    components,
    selectedComponentId,
    selectedComponentIds,
    selectComponent,
    updateComponent,
    getQueryResult,
    snapValueToGrid,
    calculateAlignmentGuides,
    clearAlignmentGuides,
    canvasWidth,
    canvasHeight,
    margins,
  } = useReportDesigner();
  const [isDragging, setIsDragging] = useState(false);
  const [isResizing, setIsResizing] = useState(false);
  const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
  const [resizeStart, setResizeStart] = useState({ x: 0, y: 0, width: 0, height: 0 });
  const componentRef = useRef<HTMLDivElement>(null);

  const isSelected = selectedComponentId === component.id;
  const isMultiSelected = selectedComponentIds.includes(component.id);
  const isLocked = component.locked === true;
  const isGrouped = !!component.groupId;

  // 드래그 시작
  const handleMouseDown = (e: React.MouseEvent) => {
    if ((e.target as HTMLElement).classList.contains("resize-handle")) {
      return;
    }

    // 잠긴 컴포넌트는 드래그 불가
    if (isLocked) {
      e.stopPropagation();
      // Ctrl/Cmd 키 감지 (다중 선택)
      const isMultiSelect = e.ctrlKey || e.metaKey;
      selectComponent(component.id, isMultiSelect);
      return;
    }

    e.stopPropagation();

    // Ctrl/Cmd 키 감지 (다중 선택)
    const isMultiSelect = e.ctrlKey || e.metaKey;

    // 그룹화된 컴포넌트 클릭 시: 같은 그룹의 모든 컴포넌트 선택
    if (isGrouped && !isMultiSelect) {
      const groupMembers = components.filter((c) => c.groupId === component.groupId);
      const groupMemberIds = groupMembers.map((c) => c.id);
      // 첫 번째 컴포넌트를 선택하고, 나머지를 다중 선택에 추가
      selectComponent(groupMemberIds[0], false);
      groupMemberIds.slice(1).forEach((id) => selectComponent(id, true));
    } else {
      selectComponent(component.id, isMultiSelect);
    }

    setIsDragging(true);
    setDragStart({
      x: e.clientX - component.x,
      y: e.clientY - component.y,
    });
  };

  // 리사이즈 시작
  const handleResizeStart = (e: React.MouseEvent) => {
    // 잠긴 컴포넌트는 리사이즈 불가
    if (isLocked) {
      e.stopPropagation();
      return;
    }

    e.stopPropagation();
    setIsResizing(true);
    setResizeStart({
      x: e.clientX,
      y: e.clientY,
      width: component.width,
      height: component.height,
    });
  };

  // 마우스 이동 핸들러 (전역)
  useEffect(() => {
    if (!isDragging && !isResizing) return;

    const handleMouseMove = (e: MouseEvent) => {
      if (isDragging) {
        const newX = Math.max(0, e.clientX - dragStart.x);
        const newY = Math.max(0, e.clientY - dragStart.y);

        // 여백을 px로 변환 (1mm ≈ 3.7795px)
        const marginTopPx = margins.top * 3.7795;
        const marginBottomPx = margins.bottom * 3.7795;
        const marginLeftPx = margins.left * 3.7795;
        const marginRightPx = margins.right * 3.7795;

        // 캔버스 경계 체크 (mm를 px로 변환)
        const canvasWidthPx = canvasWidth * 3.7795;
        const canvasHeightPx = canvasHeight * 3.7795;

        // 컴포넌트가 여백 안에 있도록 제한
        const minX = marginLeftPx;
        const minY = marginTopPx;
        const maxX = canvasWidthPx - marginRightPx - component.width;
        const maxY = canvasHeightPx - marginBottomPx - component.height;

        const boundedX = Math.min(Math.max(minX, newX), maxX);
        const boundedY = Math.min(Math.max(minY, newY), maxY);

        const snappedX = snapValueToGrid(boundedX);
        const snappedY = snapValueToGrid(boundedY);

        // 정렬 가이드라인 계산
        calculateAlignmentGuides(component.id, snappedX, snappedY, component.width, component.height);

        // 이동 거리 계산
        const deltaX = snappedX - component.x;
        const deltaY = snappedY - component.y;

        // 현재 컴포넌트 이동
        updateComponent(component.id, {
          x: snappedX,
          y: snappedY,
        });

        // 그룹화된 경우: 같은 그룹의 다른 컴포넌트도 함께 이동
        if (isGrouped) {
          components.forEach((c) => {
            if (c.groupId === component.groupId && c.id !== component.id) {
              const newGroupX = c.x + deltaX;
              const newGroupY = c.y + deltaY;

              // 그룹 컴포넌트도 경계 체크
              const groupMaxX = canvasWidthPx - c.width;
              const groupMaxY = canvasHeightPx - c.height;

              updateComponent(c.id, {
                x: Math.min(Math.max(0, newGroupX), groupMaxX),
                y: Math.min(Math.max(0, newGroupY), groupMaxY),
              });
            }
          });
        }
      } else if (isResizing) {
        const deltaX = e.clientX - resizeStart.x;
        const deltaY = e.clientY - resizeStart.y;
        const newWidth = Math.max(50, resizeStart.width + deltaX);
        const newHeight = Math.max(30, resizeStart.height + deltaY);

        // 여백을 px로 변환
        const marginRightPx = margins.right * 3.7795;
        const marginBottomPx = margins.bottom * 3.7795;

        // 캔버스 경계 체크
        const canvasWidthPx = canvasWidth * 3.7795;
        const canvasHeightPx = canvasHeight * 3.7795;

        // 컴포넌트가 여백을 벗어나지 않도록 최대 크기 제한
        const maxWidth = canvasWidthPx - marginRightPx - component.x;
        const maxHeight = canvasHeightPx - marginBottomPx - component.y;

        const boundedWidth = Math.min(newWidth, maxWidth);
        const boundedHeight = Math.min(newHeight, maxHeight);

        // Grid Snap 적용
        updateComponent(component.id, {
          width: snapValueToGrid(boundedWidth),
          height: snapValueToGrid(boundedHeight),
        });
      }
    };

    const handleMouseUp = () => {
      setIsDragging(false);
      setIsResizing(false);
      // 가이드라인 초기화
      clearAlignmentGuides();
    };

    document.addEventListener("mousemove", handleMouseMove);
    document.addEventListener("mouseup", handleMouseUp);

    return () => {
      document.removeEventListener("mousemove", handleMouseMove);
      document.removeEventListener("mouseup", handleMouseUp);
    };
  }, [
    isDragging,
    isResizing,
    dragStart.x,
    dragStart.y,
    resizeStart.x,
    resizeStart.y,
    resizeStart.width,
    resizeStart.height,
    component.id,
    component.x,
    component.y,
    component.width,
    component.height,
    component.groupId,
    isGrouped,
    components,
    updateComponent,
    snapValueToGrid,
    calculateAlignmentGuides,
    clearAlignmentGuides,
    canvasWidth,
    canvasHeight,
  ]);

  // 표시할 값 결정
  const getDisplayValue = (): string => {
    // 쿼리와 필드가 연결되어 있으면 실제 데이터 조회
    if (component.queryId && component.fieldName) {
      const queryResult = getQueryResult(component.queryId);

      // 실행 결과가 있으면 첫 번째 행의 해당 필드 값 표시
      if (queryResult && queryResult.rows.length > 0) {
        const firstRow = queryResult.rows[0];
        const value = firstRow[component.fieldName];

        // 값이 있으면 문자열로 변환하여 반환
        if (value !== null && value !== undefined) {
          return String(value);
        }
      }

      // 실행 결과가 없거나 값이 없으면 필드명 표시
      return `{${component.fieldName}}`;
    }

    // 기본값이 있으면 기본값 표시
    if (component.defaultValue) {
      return component.defaultValue;
    }

    // 둘 다 없으면 타입에 따라 기본 텍스트
    return component.type === "text" ? "텍스트 입력" : "레이블 텍스트";
  };

  // 컴포넌트 타입별 렌더링
  const renderContent = () => {
    const displayValue = getDisplayValue();
    const hasBinding = component.queryId && component.fieldName;

    switch (component.type) {
      case "text":
        return (
          <div className="h-full w-full">
            <div className="mb-1 flex items-center justify-between text-xs text-gray-500">
              <span>텍스트 필드</span>
              {hasBinding && <span className="text-blue-600">● 연결됨</span>}
            </div>
            <div
              style={{
                fontSize: `${component.fontSize}px`,
                color: component.fontColor,
                fontWeight: component.fontWeight,
                textAlign: component.textAlign as "left" | "center" | "right",
              }}
              className="w-full"
            >
              {displayValue}
            </div>
          </div>
        );

      case "label":
        return (
          <div className="h-full w-full">
            <div className="mb-1 flex items-center justify-between text-xs text-gray-500">
              <span>레이블</span>
              {hasBinding && <span className="text-blue-600">● 연결됨</span>}
            </div>
            <div
              style={{
                fontSize: `${component.fontSize}px`,
                color: component.fontColor,
                fontWeight: component.fontWeight,
                textAlign: component.textAlign as "left" | "center" | "right",
              }}
            >
              {displayValue}
            </div>
          </div>
        );

      case "table":
        // 테이블은 쿼리 결과의 모든 행과 필드를 표시
        if (component.queryId) {
          const queryResult = getQueryResult(component.queryId);

          if (queryResult && queryResult.rows.length > 0) {
            // tableColumns가 없으면 자동 생성
            const columns =
              component.tableColumns && component.tableColumns.length > 0
                ? component.tableColumns
                : queryResult.fields.map((field) => ({
                    field,
                    header: field,
                    width: undefined,
                    align: "left" as const,
                  }));

            return (
              <div className="h-full w-full overflow-auto">
                <div className="mb-1 flex items-center justify-between text-xs text-gray-500">
                  <span>테이블</span>
                  <span className="text-blue-600">● 연결됨 ({queryResult.rows.length}행)</span>
                </div>
                <table
                  className="w-full border-collapse text-xs"
                  style={{
                    borderCollapse: component.showBorder !== false ? "collapse" : "separate",
                  }}
                >
                  <thead>
                    <tr
                      style={{
                        backgroundColor: component.headerBackgroundColor || "#f3f4f6",
                        color: component.headerTextColor || "#111827",
                      }}
                    >
                      {columns.map((col) => (
                        <th
                          key={col.field}
                          className={component.showBorder !== false ? "border border-gray-300" : ""}
                          style={{
                            padding: "6px 8px",
                            textAlign: col.align || "left",
                            width: col.width ? `${col.width}px` : "auto",
                            fontWeight: "600",
                          }}
                        >
                          {col.header}
                        </th>
                      ))}
                    </tr>
                  </thead>
                  <tbody>
                    {queryResult.rows.map((row, idx) => (
                      <tr key={idx}>
                        {columns.map((col) => (
                          <td
                            key={col.field}
                            className={component.showBorder !== false ? "border border-gray-300" : ""}
                            style={{
                              padding: "6px 8px",
                              textAlign: col.align || "left",
                              height: component.rowHeight ? `${component.rowHeight}px` : "auto",
                            }}
                          >
                            {String(row[col.field] ?? "")}
                          </td>
                        ))}
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            );
          }
        }

        // 기본 테이블 (데이터 없을 때)
        return (
          <div className="h-full w-full">
            <div className="mb-1 text-xs text-gray-500">테이블</div>
            <div className="flex h-[calc(100%-20px)] items-center justify-center border-2 border-dashed border-gray-300 bg-gray-50 text-xs text-gray-400">
              쿼리를 연결하세요
            </div>
          </div>
        );

      case "image":
        return (
          <div className="h-full w-full overflow-hidden">
            <div className="mb-1 text-xs text-gray-500">이미지</div>
            {component.imageUrl ? (
              <img
                src={getFullImageUrl(component.imageUrl)}
                alt="이미지"
                style={{
                  width: "100%",
                  height: "calc(100% - 20px)",
                  objectFit: component.objectFit || "contain",
                }}
              />
            ) : (
              <div className="flex h-[calc(100%-20px)] w-full items-center justify-center border border-dashed border-gray-300 bg-gray-50 text-xs text-gray-400">
                이미지를 업로드하세요
              </div>
            )}
          </div>
        );

      case "divider":
        const lineWidth = component.lineWidth || 1;
        const lineColor = component.lineColor || "#000000";

        return (
          <div className="flex h-full w-full items-center justify-center">
            <div
              style={{
                width: component.orientation === "horizontal" ? "100%" : `${lineWidth}px`,
                height: component.orientation === "vertical" ? "100%" : `${lineWidth}px`,
                backgroundColor: lineColor,
                ...(component.lineStyle === "dashed" && {
                  backgroundImage: `repeating-linear-gradient(
                    ${component.orientation === "horizontal" ? "90deg" : "0deg"},
                    ${lineColor} 0px,
                    ${lineColor} 10px,
                    transparent 10px,
                    transparent 20px
                  )`,
                  backgroundColor: "transparent",
                }),
                ...(component.lineStyle === "dotted" && {
                  backgroundImage: `repeating-linear-gradient(
                    ${component.orientation === "horizontal" ? "90deg" : "0deg"},
                    ${lineColor} 0px,
                    ${lineColor} 3px,
                    transparent 3px,
                    transparent 10px
                  )`,
                  backgroundColor: "transparent",
                }),
                ...(component.lineStyle === "double" && {
                  boxShadow:
                    component.orientation === "horizontal"
                      ? `0 ${lineWidth * 2}px 0 0 ${lineColor}`
                      : `${lineWidth * 2}px 0 0 0 ${lineColor}`,
                }),
              }}
            />
          </div>
        );

      case "signature":
        const sigLabelPos = component.labelPosition || "left";
        const sigShowLabel = component.showLabel !== false;
        const sigLabelText = component.labelText || "서명:";
        const sigShowUnderline = component.showUnderline !== false;

        return (
          <div className="h-full w-full">
            <div className="mb-1 text-xs text-gray-500">서명란</div>
            <div
              className={`flex h-[calc(100%-20px)] gap-2 ${
                sigLabelPos === "top"
                  ? "flex-col"
                  : sigLabelPos === "bottom"
                    ? "flex-col-reverse"
                    : sigLabelPos === "right"
                      ? "flex-row-reverse"
                      : "flex-row"
              }`}
            >
              {sigShowLabel && (
                <div
                  className="flex items-center justify-center text-xs font-medium"
                  style={{
                    width: sigLabelPos === "left" || sigLabelPos === "right" ? "auto" : "100%",
                    minWidth: sigLabelPos === "left" || sigLabelPos === "right" ? "40px" : "auto",
                  }}
                >
                  {sigLabelText}
                </div>
              )}
              <div className="relative flex-1">
                {component.imageUrl ? (
                  <img
                    src={getFullImageUrl(component.imageUrl)}
                    alt="서명"
                    style={{
                      width: "100%",
                      height: "100%",
                      objectFit: component.objectFit || "contain",
                    }}
                  />
                ) : (
                  <div
                    className="flex h-full w-full items-center justify-center border-2 border-dashed bg-gray-50 text-xs text-gray-400"
                    style={{
                      borderColor: component.borderColor || "#cccccc",
                    }}
                  >
                    서명 이미지
                  </div>
                )}
                {sigShowUnderline && (
                  <div
                    className="absolute right-0 bottom-0 left-0"
                    style={{
                      borderBottom: "2px solid #000000",
                    }}
                  />
                )}
              </div>
            </div>
          </div>
        );

      case "stamp":
        const stampShowLabel = component.showLabel !== false;
        const stampLabelText = component.labelText || "(인)";
        const stampPersonName = component.personName || "";

        return (
          <div className="h-full w-full">
            <div className="mb-1 text-xs text-gray-500">도장란</div>
            <div className="flex h-[calc(100%-20px)] gap-2">
              {stampPersonName && <div className="flex items-center text-xs font-medium">{stampPersonName}</div>}
              <div className="relative flex-1">
                {component.imageUrl ? (
                  <img
                    src={getFullImageUrl(component.imageUrl)}
                    alt="도장"
                    style={{
                      width: "100%",
                      height: "100%",
                      objectFit: component.objectFit || "contain",
                    }}
                  />
                ) : (
                  <div
                    className="flex h-full w-full items-center justify-center border-2 border-dashed bg-gray-50 text-xs text-gray-400"
                    style={{
                      borderColor: component.borderColor || "#cccccc",
                      borderRadius: "50%",
                    }}
                  >
                    도장 이미지
                  </div>
                )}
                {stampShowLabel && (
                  <div
                    className="absolute inset-0 flex items-center justify-center text-xs font-medium"
                    style={{
                      pointerEvents: "none",
                    }}
                  >
                    {stampLabelText}
                  </div>
                )}
              </div>
            </div>
          </div>
        );

      default:
        return <div>알 수 없는 컴포넌트</div>;
    }
  };

  return (
    <div
      ref={componentRef}
      className={`absolute p-2 shadow-sm ${isLocked ? "cursor-not-allowed opacity-80" : "cursor-move"} ${
        isSelected
          ? isLocked
            ? "ring-2 ring-red-500"
            : "ring-2 ring-blue-500"
          : isMultiSelected
            ? isLocked
              ? "ring-2 ring-red-300"
              : "ring-2 ring-blue-300"
            : ""
      }`}
      style={{
        left: `${component.x}px`,
        top: `${component.y}px`,
        width: `${component.width}px`,
        height: `${component.height}px`,
        zIndex: component.zIndex,
        backgroundColor: component.backgroundColor,
        border: component.borderWidth
          ? `${component.borderWidth}px solid ${component.borderColor}`
          : "1px solid #e5e7eb",
      }}
      onMouseDown={handleMouseDown}
    >
      {renderContent()}

      {/* 잠금 표시 */}
      {isLocked && (
        <div className="absolute top-1 right-1 rounded bg-red-500 px-1 py-0.5 text-[10px] text-white">🔒</div>
      )}

      {/* 그룹화 표시 */}
      {isGrouped && !isLocked && (
        <div className="absolute top-1 left-1 rounded bg-purple-500 px-1 py-0.5 text-[10px] text-white">👥</div>
      )}

      {/* 리사이즈 핸들 (선택된 경우만, 잠금 안 된 경우만) */}
      {isSelected && !isLocked && (
        <div
          className="resize-handle absolute right-0 bottom-0 h-3 w-3 cursor-se-resize rounded-full bg-blue-500"
          style={{ transform: "translate(50%, 50%)" }}
          onMouseDown={handleResizeStart}
        />
      )}
    </div>
  );
}