// POP 디자이너 레이아웃 타입 정의
// v5.0: CSS Grid 기반 그리드 시스템
// 2024-02 버전 통합: v1~v4 제거, v5 단일 버전

// ========================================
// 공통 타입
// ========================================

/**
 * POP 컴포넌트 타입
 */
export type PopComponentType = "pop-sample" | "pop-text" | "pop-icon" | "pop-dashboard" | "pop-card-list" | "pop-card-list-v2" | "pop-button" | "pop-string-list" | "pop-search" | "pop-status-bar" | "pop-field" | "pop-scanner" | "pop-profile";

/**
 * 데이터 흐름 정의
 */
export interface PopDataFlow {
  connections: PopDataConnection[];
}

export interface PopDataConnection {
  id: string;
  sourceComponent: string;
  sourceField: string;
  targetComponent: string;
  targetField: string;
  transformType?: "direct" | "calculate" | "lookup";

  // v2: 연결 시스템 전용
  sourceOutput?: string;
  targetInput?: string;
  filterConfig?: {
    targetColumn: string;
    targetColumns?: string[];
    filterMode: "equals" | "contains" | "starts_with" | "range";
    isSubTable?: boolean;
  };
  label?: string;
}

/**
 * 데이터 바인딩
 */
export interface PopDataBinding {
  entityField?: string;
  defaultValue?: any;
  format?: string;
  validation?: {
    required?: boolean;
    min?: number;
    max?: number;
    pattern?: string;
  };
}

/**
 * 스타일 프리셋
 */
export interface PopStylePreset {
  theme?: "default" | "primary" | "success" | "warning" | "danger";
  size?: "sm" | "md" | "lg";
  variant?: "solid" | "outline" | "ghost";
}

/**
 * 컴포넌트 설정
 */
export interface PopComponentConfig {
  // 필드 설정
  inputType?: "text" | "number" | "date" | "select" | "barcode";
  placeholder?: string;
  readonly?: boolean;
  
  // 버튼 설정
  action?: "submit" | "scan" | "navigate" | "custom";
  targetScreen?: string;
  
  // 리스트 설정
  columns?: { field: string; label: string; width?: number }[];
  selectable?: boolean;
  
  // 인디케이터 설정
  indicatorType?: "status" | "progress" | "count";
  
  // 스캐너 설정
  scanType?: "barcode" | "qr" | "both";
  autoSubmit?: boolean;
}

/**
 * 메타데이터
 */
export interface PopLayoutMetadata {
  createdAt?: string;
  updatedAt?: string;
  author?: string;
  description?: string;
  tags?: string[];
}

// ========================================
// v5 그리드 기반 레이아웃
// ========================================
// 핵심: CSS Grid로 정확한 위치 지정
// - 열/행 좌표로 배치 (col, row)
// - 칸 단위 크기 (colSpan, rowSpan)
// - Material Design 브레이크포인트 기반

/**
 * 그리드 모드 (4가지)
 */
export type GridMode = 
  | "mobile_portrait"   // 4칸
  | "mobile_landscape"  // 6칸
  | "tablet_portrait"   // 8칸
  | "tablet_landscape"; // 12칸 (기본)

/**
 * 그리드 브레이크포인트 설정
 */
export interface GridBreakpoint {
  minWidth?: number;
  maxWidth?: number;
  columns: number;
  rowHeight: number;
  gap: number;
  padding: number;
  label: string;
}

/**
 * 브레이크포인트 상수
 * 업계 표준 (768px, 1024px) + 실제 기기 커버리지 기반
 */
export const GRID_BREAKPOINTS: Record<GridMode, GridBreakpoint> = {
  // 스마트폰 세로 (iPhone SE ~ Galaxy S25 Ultra)
  mobile_portrait: {
    maxWidth: 479,
    columns: 4,
    rowHeight: 40,
    gap: 8,
    padding: 12,
    label: "모바일 세로 (4칸)",
  },
  
  // 스마트폰 가로 + 소형 태블릿
  mobile_landscape: {
    minWidth: 480,
    maxWidth: 767,
    columns: 6,
    rowHeight: 44,
    gap: 8,
    padding: 16,
    label: "모바일 가로 (6칸)",
  },
  
  // 태블릿 세로 (iPad Mini ~ iPad Pro)
  tablet_portrait: {
    minWidth: 768,
    maxWidth: 1023,
    columns: 8,
    rowHeight: 48,
    gap: 12,
    padding: 16,
    label: "태블릿 세로 (8칸)",
  },
  
  // 태블릿 가로 + 데스크톱 (기본)
  tablet_landscape: {
    minWidth: 1024,
    columns: 12,
    rowHeight: 48,
    gap: 16,
    padding: 24,
    label: "태블릿 가로 (12칸)",
  },
} as const;

/**
 * 기본 그리드 모드
 */
export const DEFAULT_GRID_MODE: GridMode = "tablet_landscape";

/**
 * 뷰포트 너비로 모드 감지
 * GRID_BREAKPOINTS와 일치하는 브레이크포인트 사용
 */
export function detectGridMode(viewportWidth: number): GridMode {
  if (viewportWidth < 480) return "mobile_portrait";
  if (viewportWidth < 768) return "mobile_landscape";
  if (viewportWidth < 1024) return "tablet_portrait";
  return "tablet_landscape";
}

/**
 * v5 레이아웃 (그리드 기반)
 */
export interface PopLayoutDataV5 {
  version: "pop-5.0";
  
  // 그리드 설정
  gridConfig: PopGridConfig;
  
  // 컴포넌트 정의 (ID → 정의)
  components: Record<string, PopComponentDefinitionV5>;
  
  // 데이터 흐름
  dataFlow: PopDataFlow;
  
  // 전역 설정
  settings: PopGlobalSettingsV5;
  
  // 메타데이터
  metadata?: PopLayoutMetadata;
  
  // 모드별 오버라이드 (위치 변경용)
  overrides?: {
    mobile_portrait?: PopModeOverrideV5;
    mobile_landscape?: PopModeOverrideV5;
    tablet_portrait?: PopModeOverrideV5;
  };
  
  // 모달 캔버스 목록 (버튼의 "모달 열기" 액션으로 생성)
  modals?: PopModalDefinition[];
}

/**
 * 그리드 설정
 */
export interface PopGridConfig {
  // 행 높이 (px) - 1행의 기본 높이
  rowHeight: number;  // 기본 48px
  
  // 간격 (px)
  gap: number;        // 기본 8px
  
  // 패딩 (px)
  padding: number;    // 기본 16px
}

/**
 * 그리드 위치 (열/행 좌표)
 */
export interface PopGridPosition {
  col: number;      // 시작 열 (1부터, 최대 12)
  row: number;      // 시작 행 (1부터)
  colSpan: number;  // 차지할 열 수 (1~12)
  rowSpan: number;  // 차지할 행 수 (1~)
}

/**
 * v5 컴포넌트 정의
 */
export interface PopComponentDefinitionV5 {
  id: string;
  type: PopComponentType;
  label?: string;
  
  // 위치 (열/행 좌표) - 기본 모드(태블릿 가로 12칸) 기준
  position: PopGridPosition;
  
  // 모드별 표시/숨김
  visibility?: {
    tablet_landscape?: boolean;
    tablet_portrait?: boolean;
    mobile_landscape?: boolean;
    mobile_portrait?: boolean;
  };
  
  // 기존 속성
  dataBinding?: PopDataBinding;
  style?: PopStylePreset;
  config?: PopComponentConfig;
}

/**
 * Gap 프리셋 타입
 */
export type GapPreset = "narrow" | "medium" | "wide";

/**
 * Gap 프리셋 설정
 */
export interface GapPresetConfig {
  multiplier: number;
  label: string;
}

/**
 * Gap 프리셋 상수
 */
export const GAP_PRESETS: Record<GapPreset, GapPresetConfig> = {
  narrow: { multiplier: 0.5, label: "좁게" },
  medium: { multiplier: 1.0, label: "보통" },
  wide: { multiplier: 1.5, label: "넓게" },
};

/**
 * v5 전역 설정
 */
export interface PopGlobalSettingsV5 {
  // 터치 최소 크기 (px)
  touchTargetMin: number;  // 기본 48
  
  // 모드
  mode: "normal" | "industrial";
  
  // Gap 프리셋
  gapPreset: GapPreset;  // 기본 "medium"
}

/**
 * v5 모드별 오버라이드
 */
export interface PopModeOverrideV5 {
  // 컴포넌트별 위치 오버라이드
  positions?: Record<string, Partial<PopGridPosition>>;
  
  // 컴포넌트별 숨김
  hidden?: string[];
}

// ========================================
// v5 유틸리티 함수
// ========================================

/**
 * 빈 v5 레이아웃 생성
 */
export const createEmptyPopLayoutV5 = (): PopLayoutDataV5 => ({
  version: "pop-5.0",
  gridConfig: {
    rowHeight: 48,
    gap: 8,
    padding: 16,
  },
  components: {},
  dataFlow: { connections: [] },
  settings: {
    touchTargetMin: 48,
    mode: "normal",
    gapPreset: "medium",
  },
});

/**
 * v5 레이아웃 여부 확인
 */
export const isV5Layout = (layout: any): layout is PopLayoutDataV5 => {
  return layout?.version === "pop-5.0";
};

/**
 * 컴포넌트 타입별 기본 크기 (칸 단위)
 */
export const DEFAULT_COMPONENT_GRID_SIZE: Record<PopComponentType, { colSpan: number; rowSpan: number }> = {
  "pop-sample": { colSpan: 2, rowSpan: 1 },
  "pop-text": { colSpan: 3, rowSpan: 1 },
  "pop-icon": { colSpan: 1, rowSpan: 2 },
  "pop-dashboard": { colSpan: 6, rowSpan: 3 },
  "pop-card-list": { colSpan: 4, rowSpan: 3 },
  "pop-card-list-v2": { colSpan: 4, rowSpan: 3 },
  "pop-button": { colSpan: 2, rowSpan: 1 },
  "pop-string-list": { colSpan: 4, rowSpan: 3 },
  "pop-search": { colSpan: 2, rowSpan: 1 },
  "pop-status-bar": { colSpan: 6, rowSpan: 1 },
  "pop-field": { colSpan: 6, rowSpan: 2 },
  "pop-scanner": { colSpan: 1, rowSpan: 1 },
  "pop-profile": { colSpan: 1, rowSpan: 1 },
};

/**
 * v5 컴포넌트 정의 생성
 */
export const createComponentDefinitionV5 = (
  id: string,
  type: PopComponentType,
  position: PopGridPosition,
  label?: string
): PopComponentDefinitionV5 => ({
  id,
  type,
  label,
  position,
});

/**
 * v5 레이아웃에 컴포넌트 추가
 */
export const addComponentToV5Layout = (
  layout: PopLayoutDataV5,
  componentId: string,
  type: PopComponentType,
  position: PopGridPosition,
  label?: string
): PopLayoutDataV5 => {
  const newLayout = { ...layout };
  
  // 컴포넌트 정의 추가
  newLayout.components = {
    ...newLayout.components,
    [componentId]: createComponentDefinitionV5(componentId, type, position, label),
  };
  
  return newLayout;
};

// ========================================
// 모달 캔버스 정의
// ========================================

// ========================================
// 모달 사이즈 시스템
// ========================================

/** 모달 사이즈 프리셋 */
export type ModalSizePreset = "sm" | "md" | "lg" | "xl" | "full";

/** 모달 사이즈 프리셋별 픽셀 값 */
export const MODAL_SIZE_PRESETS: Record<ModalSizePreset, { width: number; label: string }> = {
  sm:   { width: 400,  label: "Small (400px)" },
  md:   { width: 600,  label: "Medium (600px)" },
  lg:   { width: 800,  label: "Large (800px)" },
  xl:   { width: 1000, label: "XLarge (1000px)" },
  full: { width: 9999, label: "Full (화면 꽉 참)" },
};

/** 모달 사이즈 설정 (모드별 독립 설정 가능) */
export interface ModalSizeConfig {
  /** 기본 사이즈 (모든 모드 공통, 기본값: "md") */
  default: ModalSizePreset;
  /** 모드별 오버라이드 (미설정 시 default 사용) */
  modeOverrides?: {
    mobile_portrait?: ModalSizePreset;
    mobile_landscape?: ModalSizePreset;
    tablet_portrait?: ModalSizePreset;
    tablet_landscape?: ModalSizePreset;
  };
}

/**
 * 주어진 모드에서 모달의 실제 픽셀 너비를 계산
 * - 뷰포트보다 모달이 크면 자동으로 뷰포트에 맞춤 (full 승격)
 */
export function resolveModalWidth(
  sizeConfig: ModalSizeConfig | undefined,
  mode: GridMode,
  viewportWidth: number,
): number {
  const preset = sizeConfig?.modeOverrides?.[mode] ?? sizeConfig?.default ?? "md";
  const presetEntry = MODAL_SIZE_PRESETS[preset] ?? MODAL_SIZE_PRESETS.md;
  const presetWidth = presetEntry.width;
  // full이면 뷰포트 전체, 아니면 프리셋과 뷰포트 중 작은 값
  if (preset === "full") return viewportWidth;
  return Math.min(presetWidth, viewportWidth);
}

/**
 * 모달 캔버스 정의
 * 
 * 버튼의 "모달 열기" 액션이 참조하는 모달 화면.
 * 메인 캔버스와 동일한 그리드 시스템을 사용.
 * 중첩 모달: parentId로 부모-자식 관계 표현.
 */
export interface PopModalDefinition {
  /** 모달 고유 ID (예: "modal-1", "modal-1-1") */
  id: string;
  /** 부모 모달 ID (최상위 모달은 undefined) */
  parentId?: string;
  /** 모달 제목 (다이얼로그 헤더에 표시) */
  title: string;
  /** 이 모달을 연 버튼의 컴포넌트 ID */
  sourceButtonId: string;
  /** 모달 내부 그리드 설정 */
  gridConfig: PopGridConfig;
  /** 모달 내부 컴포넌트 */
  components: Record<string, PopComponentDefinitionV5>;
  /** 모드별 오버라이드 */
  overrides?: {
    mobile_portrait?: PopModeOverrideV5;
    mobile_landscape?: PopModeOverrideV5;
    tablet_portrait?: PopModeOverrideV5;
  };
  /** 모달 프레임 설정 (닫기 방식) */
  frameConfig?: {
    /** 닫기(X) 버튼 표시 여부 (기본 true) */
    showCloseButton?: boolean;
    /** 오버레이 클릭으로 닫기 (기본 true) */
    closeOnOverlay?: boolean;
    /** ESC 키로 닫기 (기본 true) */
    closeOnEsc?: boolean;
  };
  /** 모달 사이즈 설정 (미설정 시 md 기본) */
  sizeConfig?: ModalSizeConfig;
}

// ========================================
// 레거시 타입 별칭 (하위 호환 - 추후 제거)
// ========================================
// 기존 코드에서 import 오류 방지용

/** @deprecated v5에서는 PopLayoutDataV5 사용 */
export type PopLayoutData = PopLayoutDataV5;

/** @deprecated v5에서는 PopComponentDefinitionV5 사용 */
export type PopComponentDefinition = PopComponentDefinitionV5;

/** @deprecated v5에서는 PopGridPosition 사용 */
export type GridPosition = PopGridPosition;
