// POP 블록 그리드 레이아웃 타입 정의

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

/**
 * 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" | "pop-work-detail";

/**
 * 데이터 흐름 정의
 */
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[];
}

// ========================================
// v6 정사각형 블록 그리드 시스템
// ========================================
// 핵심: 균일한 정사각형 블록 (24px x 24px)
// - 열/행 좌표로 배치 (col, row) - 블록 단위
// - 뷰포트 너비에 따라 칸 수 동적 계산
// - 단일 좌표계 (모드별 변환 불필요)

/**
 * V6 블록 상수
 */
export const BLOCK_SIZE = 24;   // 블록 크기 (px, 정사각형)
export const BLOCK_GAP = 2;     // 블록 간격 (px)
export const BLOCK_PADDING = 8; // 캔버스 패딩 (px)

/**
 * 뷰포트 너비에서 블록 칸 수 계산
 */
export function getBlockColumns(viewportWidth: number): number {
  const available = viewportWidth - BLOCK_PADDING * 2;
  return Math.max(1, Math.floor((available + BLOCK_GAP) / (BLOCK_SIZE + BLOCK_GAP)));
}

/**
 * 뷰포트 프리셋 (디자이너 해상도 전환용)
 */
export type GridMode = 
  | "mobile_portrait"
  | "mobile_landscape"
  | "tablet_portrait"
  | "tablet_landscape";

/**
 * 뷰포트 프리셋 설정
 */
export interface GridBreakpoint {
  minWidth?: number;
  maxWidth?: number;
  columns: number;
  rowHeight: number;
  gap: number;
  padding: number;
  label: string;
}

/**
 * V6 브레이크포인트 (블록 기반 동적 칸 수)
 * columns는 각 뷰포트 너비에서의 블록 수
 */
export const GRID_BREAKPOINTS: Record<GridMode, GridBreakpoint> = {
  mobile_portrait: {
    maxWidth: 479,
    columns: getBlockColumns(375),
    rowHeight: BLOCK_SIZE,
    gap: BLOCK_GAP,
    padding: BLOCK_PADDING,
    label: `모바일 세로 (${getBlockColumns(375)}칸)`,
  },
  mobile_landscape: {
    minWidth: 480,
    maxWidth: 767,
    columns: getBlockColumns(600),
    rowHeight: BLOCK_SIZE,
    gap: BLOCK_GAP,
    padding: BLOCK_PADDING,
    label: `모바일 가로 (${getBlockColumns(600)}칸)`,
  },
  tablet_portrait: {
    minWidth: 768,
    maxWidth: 1023,
    columns: getBlockColumns(820),
    rowHeight: BLOCK_SIZE,
    gap: BLOCK_GAP,
    padding: BLOCK_PADDING,
    label: `태블릿 세로 (${getBlockColumns(820)}칸)`,
  },
  tablet_landscape: {
    minWidth: 1024,
    columns: getBlockColumns(1024),
    rowHeight: BLOCK_SIZE,
    gap: BLOCK_GAP,
    padding: BLOCK_PADDING,
    label: `태블릿 가로 (${getBlockColumns(1024)}칸)`,
  },
} as const;

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

/**
 * 뷰포트 너비로 모드 감지
 */
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";
}

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

/**
 * 그리드 설정 (V6: 블록 단위)
 */
export interface PopGridConfig {
  // 행 높이 = 블록 크기 (px)
  rowHeight: number;  // V6 기본 24px (= BLOCK_SIZE)
  
  // 간격 (px)
  gap: number;        // V6 기본 2px (= BLOCK_GAP)
  
  // 패딩 (px)
  padding: number;    // V6 기본 8px (= BLOCK_PADDING)
}

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

/**
 * POP 컴포넌트 정의
 */
export interface PopComponentDefinition {
  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 프리셋 타입 (V6: 단일 간격이므로 medium만 유효, 하위 호환용 유지)
 */
export type GapPreset = "narrow" | "medium" | "wide";

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

/**
 * Gap 프리셋 상수 (V6: 모두 동일 - 블록 간격 고정)
 */
export const GAP_PRESETS: Record<GapPreset, GapPresetConfig> = {
  narrow: { multiplier: 1.0, label: "기본" },
  medium: { multiplier: 1.0, label: "기본" },
  wide: { multiplier: 1.0, label: "기본" },
};

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

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

// ========================================
// 레이아웃 유틸리티 함수
// ========================================

/**
 * 빈 POP 레이아웃 생성
 */
export const createEmptyLayout = (): PopLayoutData => ({
  version: "pop-5.0",
  gridConfig: {
    rowHeight: BLOCK_SIZE,
    gap: BLOCK_GAP,
    padding: BLOCK_PADDING,
  },
  components: {},
  dataFlow: { connections: [] },
  settings: {
    touchTargetMin: 48,
    mode: "normal",
    gapPreset: "medium",
  },
});

/**
 * POP 레이아웃 데이터인지 확인
 */
export const isPopLayout = (layout: any): layout is PopLayoutData => {
  return layout?.version === "pop-5.0";
};

/**
 * 컴포넌트 타입별 기본 크기 (블록 단위, V6)
 *
 * 소형 (2x2) : 최소 단위. 아이콘, 프로필, 스캐너 등 단일 요소
 * 중형 (8x4) : 검색, 버튼, 텍스트 등 한 줄 입력/표시
 * 대형 (8x6) : 샘플, 상태바, 필드 등 여러 줄 컨텐츠
 * 초대형 (19x8~) : 카드, 리스트, 대시보드 등 메인 영역
 */
export const DEFAULT_COMPONENT_GRID_SIZE: Record<PopComponentType, { colSpan: number; rowSpan: number }> = {
  "pop-sample": { colSpan: 8, rowSpan: 6 },
  "pop-text": { colSpan: 8, rowSpan: 4 },
  "pop-icon": { colSpan: 2, rowSpan: 2 },
  "pop-dashboard": { colSpan: 19, rowSpan: 10 },
  "pop-card-list": { colSpan: 19, rowSpan: 10 },
  "pop-card-list-v2": { colSpan: 19, rowSpan: 10 },
  "pop-button": { colSpan: 8, rowSpan: 4 },
  "pop-string-list": { colSpan: 19, rowSpan: 10 },
  "pop-search": { colSpan: 8, rowSpan: 4 },
  "pop-status-bar": { colSpan: 19, rowSpan: 4 },
  "pop-field": { colSpan: 19, rowSpan: 6 },
  "pop-scanner": { colSpan: 2, rowSpan: 2 },
  "pop-profile": { colSpan: 2, rowSpan: 2 },
  "pop-work-detail": { colSpan: 38, rowSpan: 26 },
};

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

/**
 * POP 레이아웃에 컴포넌트 추가
 */
export const addComponentToLayout = (
  layout: PopLayoutData,
  componentId: string,
  type: PopComponentType,
  position: PopGridPosition,
  label?: string
): PopLayoutData => {
  const newLayout = { ...layout };
  
  // 컴포넌트 정의 추가
  newLayout.components = {
    ...newLayout.components,
    [componentId]: createComponentDefinition(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, PopComponentDefinition>;
  /** 모드별 오버라이드 */
  overrides?: {
    mobile_portrait?: PopModeOverride;
    mobile_landscape?: PopModeOverride;
    tablet_portrait?: PopModeOverride;
  };
  /** 모달 프레임 설정 (닫기 방식) */
  frameConfig?: {
    /** 닫기(X) 버튼 표시 여부 (기본 true) */
    showCloseButton?: boolean;
    /** 오버레이 클릭으로 닫기 (기본 true) */
    closeOnOverlay?: boolean;
    /** ESC 키로 닫기 (기본 true) */
    closeOnEsc?: boolean;
  };
  /** 모달 사이즈 설정 (미설정 시 md 기본) */
  sizeConfig?: ModalSizeConfig;
}

// ========================================
// 레거시 타입 별칭 (이전 코드 호환용)
// ========================================

/** @deprecated PopLayoutData 사용 */
export type PopLayoutDataV5 = PopLayoutData;

/** @deprecated PopComponentDefinition 사용 */
export type PopComponentDefinitionV5 = PopComponentDefinition;

/** @deprecated PopGlobalSettings 사용 */
export type PopGlobalSettingsV5 = PopGlobalSettings;

/** @deprecated PopModeOverride 사용 */
export type PopModeOverrideV5 = PopModeOverride;

/** @deprecated createEmptyLayout 사용 */
export const createEmptyPopLayoutV5 = createEmptyLayout;

/** @deprecated isPopLayout 사용 */
export const isV5Layout = isPopLayout;

/** @deprecated addComponentToLayout 사용 */
export const addComponentToV5Layout = addComponentToLayout;

/** @deprecated createComponentDefinition 사용 */
export const createComponentDefinitionV5 = createComponentDefinition;
