import { ComponentConfig } from "@/types/component";

/**
 * 리피터 컨테이너 데이터 소스 타입
 */
export type DataSourceType = "table-list" | "v2-repeater" | "externalData" | "manual";

/**
 * 리피터 컨테이너 레이아웃 타입
 */
export type LayoutType = "vertical" | "horizontal" | "grid";

/**
 * 슬롯에 배치된 컴포넌트 설정
 * 화면 디자이너에서 리피터 컨테이너 내부에 배치한 컴포넌트 정보
 */
export interface SlotComponentConfig {
  id: string;
  /** 컴포넌트 타입 (예: "text-input", "text-display") */
  componentType: string;
  /** 컴포넌트 라벨 */
  label?: string;
  /** 바인딩할 데이터 필드명 */
  fieldName?: string;
  /** 컴포넌트 위치 (슬롯 내부 상대 좌표) */
  position?: { x: number; y: number };
  /** 컴포넌트 크기 */
  size?: { width: number; height: number };
  /** 컴포넌트 상세 설정 */
  componentConfig?: Record<string, any>;
  /** 스타일 설정 */
  style?: Record<string, any>;
}

/**
 * 리피터 컨테이너 설정
 * 데이터 수만큼 내부 컴포넌트 또는 컨텐츠를 반복 렌더링하는 컨테이너
 */
export interface RepeatContainerConfig extends ComponentConfig {
  // ========================
  // 1. 데이터 소스 설정
  // ========================
  /** 데이터 소스 타입 */
  dataSourceType: DataSourceType;
  /** 연결할 테이블 리스트 또는 리피터 컴포넌트 ID */
  dataSourceComponentId?: string;
  
  // 컴포넌트별 테이블 설정 (개발 가이드 준수)
  /** 사용할 테이블명 */
  tableName?: string;
  /** 커스텀 테이블명 */
  customTableName?: string;
  /** true: customTableName 사용 */
  useCustomTable?: boolean;
  /** true: 조회만, 저장 안 함 */
  isReadOnly?: boolean;

  // ========================
  // 2. 레이아웃 설정
  // ========================
  /** 배치 방향 */
  layout: LayoutType;
  /** grid일 때 컬럼 수 */
  gridColumns?: number;
  /** 아이템 간 간격 */
  gap?: string;
  /** 아이템 최소 너비 */
  itemMinWidth?: string;
  /** 아이템 최대 너비 */
  itemMaxWidth?: string;
  /** 아이템 높이 */
  itemHeight?: string;

  // ========================
  // 3. 아이템 카드 설정
  // ========================
  /** 카드 테두리 표시 */
  showBorder?: boolean;
  /** 카드 그림자 표시 */
  showShadow?: boolean;
  /** 카드 둥근 모서리 */
  borderRadius?: string;
  /** 카드 배경색 */
  backgroundColor?: string;
  /** 카드 내부 패딩 */
  padding?: string;

  // ========================
  // 4. 제목/설명 설정 (각 아이템)
  // ========================
  /** 아이템 제목 표시 */
  showItemTitle?: boolean;
  /** 아이템 제목 템플릿 (예: "{order_no} - {item_code}") - 레거시 */
  itemTitleTemplate?: string;
  /** 제목으로 사용할 컬럼명 */
  titleColumn?: string;
  /** 설명으로 사용할 컬럼명 */
  descriptionColumn?: string;
  /** 제목 폰트 크기 */
  titleFontSize?: string;
  /** 제목 색상 */
  titleColor?: string;
  /** 제목 폰트 굵기 */
  titleFontWeight?: string;
  /** 설명 폰트 크기 */
  descriptionFontSize?: string;
  /** 설명 색상 */
  descriptionColor?: string;

  // ========================
  // 5. 데이터 필터링 (선택사항)
  // ========================
  /** 필터 필드 (formData에서 가져올 키) */
  filterField?: string;
  /** 필터 컬럼 (테이블에서 필터링할 컬럼) */
  filterColumn?: string;

  // ========================
  // 6. 그룹핑 설정 (선택사항)
  // ========================
  /** 그룹핑 사용 여부 */
  useGrouping?: boolean;
  /** 그룹핑 기준 필드 */
  groupByField?: string;

  // ========================
  // 7. 슬롯 컨텐츠 설정 (children 직접 배치)
  // ========================
  /** 
   * 슬롯에 배치된 자식 컴포넌트들 
   * 화면 디자이너에서 리피터 컨테이너 내부에 드래그앤드롭으로 배치된 컴포넌트들
   * 각 데이터 아이템마다 이 컴포넌트들이 반복 렌더링됨
   */
  children?: SlotComponentConfig[];

  // ========================
  // 8. 빈 상태 설정
  // ========================
  /** 데이터 없을 때 표시 메시지 */
  emptyMessage?: string;
  /** 빈 상태 아이콘 */
  emptyIcon?: string;

  // ========================
  // 9. 페이징 설정 (선택사항)
  // ========================
  /** 페이징 사용 여부 */
  usePaging?: boolean;
  /** 페이지당 아이템 수 */
  pageSize?: number;

  // ========================
  // 10. 이벤트 설정
  // ========================
  /** 아이템 클릭 이벤트 활성화 */
  clickable?: boolean;
  /** 클릭 시 선택 상태 표시 */
  showSelectedState?: boolean;
  /** 선택 모드 (단일/다중) */
  selectionMode?: "single" | "multiple";
}

/**
 * 리피터 컨테이너 값 타입
 * 현재 렌더링 중인 데이터 배열
 */
export interface RepeatContainerValue {
  /** 원본 데이터 배열 */
  data: Record<string, any>[];
  /** 선택된 아이템 인덱스들 */
  selectedIndices?: number[];
  /** 현재 페이지 (페이징 사용 시) */
  currentPage?: number;
}

/**
 * 리피터 컨텍스트 (각 반복 아이템에서 사용)
 */
export interface RepeatItemContext {
  /** 현재 아이템 인덱스 */
  index: number;
  /** 현재 아이템 데이터 */
  data: Record<string, any>;
  /** 전체 데이터 수 */
  totalCount: number;
  /** 첫 번째 아이템인지 */
  isFirst: boolean;
  /** 마지막 아이템인지 */
  isLast: boolean;
  /** 그룹 키 (그룹핑 사용 시) */
  groupKey?: string;
  /** 그룹 내 인덱스 (그룹핑 사용 시) */
  groupIndex?: number;
}

