"use client";

import React from "react";
import { cn } from "@/lib/utils";
import {
  PopLayoutDataV3,
  PopLayoutModeKey,
  PopModeLayoutV3,
  GridPosition,
  MODE_RESOLUTIONS,
  PopComponentDefinition,
} from "../types/pop-layout";

// ========================================
// Props 정의
// ========================================

interface PopLayoutRendererProps {
  /** 레이아웃 데이터 (v3.0) */
  layout: PopLayoutDataV3;
  /** 현재 모드 키 (tablet_landscape, tablet_portrait 등) */
  modeKey: PopLayoutModeKey;
  /** 디자인 모드 여부 (true: 편집 가능, false: 뷰어 모드) */
  isDesignMode?: boolean;
  /** 선택된 컴포넌트 ID */
  selectedComponentId?: string | null;
  /** 컴포넌트 클릭 시 호출 */
  onComponentClick?: (componentId: string) => void;
  /** 배경 클릭 시 호출 (선택 해제용) */
  onBackgroundClick?: () => void;
  /** 커스텀 모드 레이아웃 (fallback 등에서 변환된 레이아웃 사용 시) */
  customModeLayout?: PopModeLayoutV3;
  /** 추가 className */
  className?: string;
  /** 추가 style */
  style?: React.CSSProperties;
}

// ========================================
// 컴포넌트 타입별 라벨
// ========================================
const COMPONENT_TYPE_LABELS: Record<string, string> = {
  "pop-field": "필드",
  "pop-button": "버튼",
  "pop-list": "리스트",
  "pop-indicator": "인디케이터",
  "pop-scanner": "스캐너",
  "pop-numpad": "숫자패드",
};

// ========================================
// POP 레이아웃 렌더러 (v3)
//
// 핵심 역할:
// - 디자이너와 뷰어에서 **동일한** 렌더링 결과 보장
// - 컴포넌트가 캔버스에 직접 배치 (섹션 없음)
// - CSS Grid + 1fr 비율 기반
// ========================================

export function PopLayoutRenderer({
  layout,
  modeKey,
  isDesignMode = false,
  selectedComponentId,
  onComponentClick,
  onBackgroundClick,
  customModeLayout,
  className,
  style,
}: PopLayoutRendererProps) {
  const { components, layouts, settings } = layout;
  const canvasGrid = settings.canvasGrid;

  // 현재 모드의 레이아웃
  const modeLayout = customModeLayout || layouts[modeKey];

  // 컴포넌트가 없으면 빈 상태 표시
  if (!modeLayout || Object.keys(modeLayout.componentPositions).length === 0) {
    return (
      <div
        className={cn(
          "flex h-full w-full items-center justify-center bg-gray-50",
          className
        )}
        style={style}
        onClick={onBackgroundClick}
      >
        <div className="text-center text-sm text-gray-400">
          <p>레이아웃이 설정되지 않았습니다</p>
          {isDesignMode && <p className="mt-1">컴포넌트를 추가해주세요</p>}
        </div>
      </div>
    );
  }

  // 컴포넌트 ID 목록
  const componentIds = Object.keys(modeLayout.componentPositions);

  return (
    <div
      className={cn("relative w-full h-full bg-white", className)}
      style={{
        // CSS Grid: 디자이너와 동일
        display: "grid",
        gridTemplateColumns: `repeat(${canvasGrid.columns}, 1fr)`,
        gridTemplateRows: `repeat(${canvasGrid.rows || 24}, 1fr)`,
        gap: `${canvasGrid.gap}px`,
        padding: `${canvasGrid.gap}px`,
        ...style,
      }}
      onClick={(e) => {
        if (e.target === e.currentTarget) {
          onBackgroundClick?.();
        }
      }}
    >
      {/* 컴포넌트들 직접 렌더링 */}
      {componentIds.map((componentId) => {
        const compDef = components[componentId];
        const compPos = modeLayout.componentPositions[componentId];

        if (!compDef || !compPos) return null;

        return (
          <ComponentRenderer
            key={componentId}
            componentId={componentId}
            component={compDef}
            position={compPos}
            isDesignMode={isDesignMode}
            isSelected={selectedComponentId === componentId}
            onComponentClick={() => onComponentClick?.(componentId)}
          />
        );
      })}
    </div>
  );
}

// ========================================
// 컴포넌트 렌더러
// ========================================

interface ComponentRendererProps {
  componentId: string;
  component: PopComponentDefinition;
  position: GridPosition;
  isDesignMode?: boolean;
  isSelected?: boolean;
  onComponentClick?: () => void;
}

function ComponentRenderer({
  componentId,
  component,
  position,
  isDesignMode = false,
  isSelected = false,
  onComponentClick,
}: ComponentRendererProps) {
  const typeLabel = COMPONENT_TYPE_LABELS[component.type] || component.type;

  return (
    <div
      className={cn(
        "relative flex flex-col overflow-hidden rounded-lg border-2 bg-white transition-all",
        isSelected
          ? "border-primary ring-2 ring-primary/30 z-10"
          : "border-gray-200",
        isDesignMode && "cursor-pointer hover:border-gray-300"
      )}
      style={{
        gridColumn: `${position.col} / span ${position.colSpan}`,
        gridRow: `${position.row} / span ${position.rowSpan}`,
      }}
      onClick={(e) => {
        e.stopPropagation();
        onComponentClick?.();
      }}
    >
      {/* 컴포넌트 라벨 (디자인 모드에서만) */}
      {isDesignMode && (
        <div
          className={cn(
            "flex h-5 shrink-0 items-center border-b px-2",
            isSelected ? "bg-primary/10" : "bg-gray-50"
          )}
        >
          <span className="text-[10px] font-medium text-gray-600">
            {component.label || typeLabel}
          </span>
        </div>
      )}

      {/* 컴포넌트 내용 */}
      <div className="flex flex-1 items-center justify-center p-2">
        {renderComponentContent(component, isDesignMode)}
      </div>
    </div>
  );
}

// ========================================
// 컴포넌트별 렌더링
// ========================================

function renderComponentContent(
  component: PopComponentDefinition,
  isDesignMode: boolean
): React.ReactNode {
  const typeLabel = COMPONENT_TYPE_LABELS[component.type] || component.type;

  // 디자인 모드에서는 플레이스홀더 표시
  if (isDesignMode) {
    return (
      <div className="text-xs text-gray-400 text-center">
        {typeLabel}
      </div>
    );
  }

  // 뷰어 모드: 실제 컴포넌트 렌더링
  switch (component.type) {
    case "pop-field":
      return (
        <input
          type="text"
          placeholder={component.label || "입력하세요"}
          className="w-full h-full px-3 py-2 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
        />
      );

    case "pop-button":
      return (
        <button className="w-full h-full px-4 py-2 text-sm font-medium text-white bg-primary rounded-md hover:bg-primary/90 transition-colors">
          {component.label || "버튼"}
        </button>
      );

    case "pop-list":
      return (
        <div className="w-full h-full overflow-auto p-2">
          <div className="text-xs text-gray-500 text-center">
            리스트 (데이터 연결 필요)
          </div>
        </div>
      );

    case "pop-indicator":
      return (
        <div className="text-center">
          <div className="text-2xl font-bold text-primary">0</div>
          <div className="text-xs text-gray-500">{component.label || "지표"}</div>
        </div>
      );

    case "pop-scanner":
      return (
        <div className="text-center text-gray-500">
          <div className="text-xs">스캐너</div>
          <div className="text-[10px]">탭하여 스캔</div>
        </div>
      );

    case "pop-numpad":
      return (
        <div className="grid grid-cols-3 gap-1 p-1 w-full">
          {[1, 2, 3, 4, 5, 6, 7, 8, 9, "C", 0, "OK"].map((key) => (
            <button
              key={key}
              className="aspect-square text-xs font-medium bg-gray-100 rounded hover:bg-gray-200"
            >
              {key}
            </button>
          ))}
        </div>
      );

    default:
      return (
        <div className="text-xs text-gray-400">
          {typeLabel}
        </div>
      );
  }
}

// ========================================
// 헬퍼 함수들 (export)
// ========================================

/**
 * 특정 모드에 레이아웃이 설정되어 있는지 확인
 */
export function hasModeLayout(
  layout: PopLayoutDataV3,
  modeKey: PopLayoutModeKey
): boolean {
  const modeLayout = layout.layouts[modeKey];
  return modeLayout && Object.keys(modeLayout.componentPositions).length > 0;
}

/**
 * 태블릿 가로 모드(기준 모드)가 설정되어 있는지 확인
 */
export function hasBaseLayout(layout: PopLayoutDataV3): boolean {
  return hasModeLayout(layout, "tablet_landscape");
}

/**
 * 태블릿 가로 모드를 기준으로 다른 모드에 맞게 자동 변환
 */
export function autoConvertLayout(
  layout: PopLayoutDataV3,
  targetModeKey: PopLayoutModeKey
): PopModeLayoutV3 {
  const sourceKey: PopLayoutModeKey = "tablet_landscape";
  const sourceLayout = layout.layouts[sourceKey];
  const sourceRes = MODE_RESOLUTIONS[sourceKey];
  const targetRes = MODE_RESOLUTIONS[targetModeKey];

  // 비율 계산
  const widthRatio = targetRes.width / sourceRes.width;
  const heightRatio = targetRes.height / sourceRes.height;

  // 가로 → 세로 변환인지 확인
  const isOrientationChange =
    sourceRes.width > sourceRes.height !== targetRes.width > targetRes.height;

  // 컴포넌트 위치 변환
  const convertedPositions: Record<string, GridPosition> = {};
  let currentRow = 1;

  // 컴포넌트를 row, col 순으로 정렬
  const sortedComponentIds = Object.keys(sourceLayout.componentPositions).sort(
    (a, b) => {
      const posA = sourceLayout.componentPositions[a];
      const posB = sourceLayout.componentPositions[b];
      if (posA.row !== posB.row) return posA.row - posB.row;
      return posA.col - posB.col;
    }
  );

  for (const componentId of sortedComponentIds) {
    const sourcePos = sourceLayout.componentPositions[componentId];

    if (isOrientationChange) {
      // 가로 → 세로: 세로 스택 방식
      const canvasColumns = layout.settings.canvasGrid.columns;
      convertedPositions[componentId] = {
        col: 1,
        row: currentRow,
        colSpan: canvasColumns,
        rowSpan: Math.max(3, Math.round(sourcePos.rowSpan * 1.5)),
      };
      currentRow += convertedPositions[componentId].rowSpan + 1;
    } else {
      // 같은 방향: 비율 변환
      convertedPositions[componentId] = {
        col: Math.max(1, Math.round(sourcePos.col * widthRatio)),
        row: Math.max(1, Math.round(sourcePos.row * heightRatio)),
        colSpan: Math.max(1, Math.round(sourcePos.colSpan * widthRatio)),
        rowSpan: Math.max(1, Math.round(sourcePos.rowSpan * heightRatio)),
      };
    }
  }

  return {
    componentPositions: convertedPositions,
  };
}

/**
 * 현재 모드에 맞는 레이아웃 반환 (없으면 자동 변환)
 */
export function getEffectiveModeLayout(
  layout: PopLayoutDataV3,
  targetModeKey: PopLayoutModeKey
): {
  modeLayout: PopModeLayoutV3;
  isConverted: boolean;
  sourceModeKey: PopLayoutModeKey;
} {
  // 해당 모드에 레이아웃이 있으면 그대로 사용
  if (hasModeLayout(layout, targetModeKey)) {
    return {
      modeLayout: layout.layouts[targetModeKey],
      isConverted: false,
      sourceModeKey: targetModeKey,
    };
  }

  // 없으면 태블릿 가로 모드를 기준으로 자동 변환
  return {
    modeLayout: autoConvertLayout(layout, targetModeKey),
    isConverted: true,
    sourceModeKey: "tablet_landscape",
  };
}

export default PopLayoutRenderer;