/**
 * 🎨 그리드 시스템 - 컬럼 스팬 상수 정의
 *
 * Tailwind CSS 12컬럼 그리드 시스템을 위한 프리셋 정의
 */

/**
 * 컬럼 스팬 프리셋 타입
 */
export type ColumnSpanPreset =
  | "full" // 12 컬럼 (100%)
  | "half" // 6 컬럼 (50%)
  | "third" // 4 컬럼 (33%)
  | "twoThirds" // 8 컬럼 (67%)
  | "quarter" // 3 컬럼 (25%)
  | "threeQuarters" // 9 컬럼 (75%)
  | "label" // 3 컬럼 (25%) - 폼 라벨 전용
  | "input" // 9 컬럼 (75%) - 폼 입력 전용
  | "small" // 2 컬럼 (17%)
  | "medium" // 4 컬럼 (33%)
  | "large" // 8 컬럼 (67%)
  | "auto"; // 자동 계산

/**
 * 컬럼 스팬 값 매핑
 */
export const COLUMN_SPAN_VALUES: Record<ColumnSpanPreset, number> = {
  full: 12,
  half: 6,
  third: 4,
  twoThirds: 8,
  quarter: 3,
  threeQuarters: 9,
  label: 3,
  input: 9,
  small: 2,
  medium: 4,
  large: 8,
  auto: 0, // 자동 계산 시 0
};

/**
 * 컬럼 스팬 프리셋 정보
 */
export interface ColumnSpanPresetInfo {
  value: number;
  label: string;
  percentage: string;
  class: string;
  description?: string;
}

/**
 * 컬럼 스팬 프리셋 상세 정보
 */
export const COLUMN_SPAN_PRESETS: Record<ColumnSpanPreset, ColumnSpanPresetInfo> = {
  full: {
    value: 12,
    label: "전체",
    percentage: "100%",
    class: "col-span-12",
    description: "전체 너비 (테이블, 제목 등)",
  },
  half: {
    value: 6,
    label: "절반",
    percentage: "50%",
    class: "col-span-6",
    description: "2분할 레이아웃",
  },
  third: {
    value: 4,
    label: "1/3",
    percentage: "33%",
    class: "col-span-4",
    description: "3분할 레이아웃",
  },
  twoThirds: {
    value: 8,
    label: "2/3",
    percentage: "67%",
    class: "col-span-8",
    description: "큰 컴포넌트",
  },
  quarter: {
    value: 3,
    label: "1/4",
    percentage: "25%",
    class: "col-span-3",
    description: "4분할 레이아웃",
  },
  threeQuarters: {
    value: 9,
    label: "3/4",
    percentage: "75%",
    class: "col-span-9",
    description: "입력 필드",
  },
  label: {
    value: 3,
    label: "라벨용",
    percentage: "25%",
    class: "col-span-3",
    description: "폼 라벨 전용",
  },
  input: {
    value: 9,
    label: "입력용",
    percentage: "75%",
    class: "col-span-9",
    description: "폼 입력 전용",
  },
  small: {
    value: 2,
    label: "작게",
    percentage: "17%",
    class: "col-span-2",
    description: "아이콘, 체크박스",
  },
  medium: {
    value: 4,
    label: "보통",
    percentage: "33%",
    class: "col-span-4",
    description: "보통 크기 컴포넌트",
  },
  large: {
    value: 8,
    label: "크게",
    percentage: "67%",
    class: "col-span-8",
    description: "큰 컴포넌트",
  },
  auto: {
    value: 0,
    label: "자동",
    percentage: "auto",
    class: "",
    description: "자동 계산",
  },
};

/**
 * Gap/Spacing 프리셋 타입
 */
export type GapPreset = "none" | "xs" | "sm" | "md" | "lg" | "xl";

/**
 * Gap 프리셋 정보
 */
export interface GapPresetInfo {
  value: number;
  label: string;
  pixels: string;
  class: string;
}

/**
 * Gap 프리셋 상세 정보
 */
export const GAP_PRESETS: Record<GapPreset, GapPresetInfo> = {
  none: {
    value: 0,
    label: "없음",
    pixels: "0px",
    class: "gap-0",
  },
  xs: {
    value: 2,
    label: "매우 작게",
    pixels: "8px",
    class: "gap-2",
  },
  sm: {
    value: 4,
    label: "작게",
    pixels: "16px",
    class: "gap-4",
  },
  md: {
    value: 6,
    label: "보통",
    pixels: "24px",
    class: "gap-6",
  },
  lg: {
    value: 8,
    label: "크게",
    pixels: "32px",
    class: "gap-8",
  },
  xl: {
    value: 12,
    label: "매우 크게",
    pixels: "48px",
    class: "gap-12",
  },
};

/**
 * 컬럼 스팬 유효성 검사
 */
export function isValidColumnSpan(value: string): value is ColumnSpanPreset {
  return value in COLUMN_SPAN_VALUES;
}

/**
 * 컬럼 스팬 값 가져오기
 */
export function getColumnSpanValue(preset: ColumnSpanPreset): number {
  return COLUMN_SPAN_VALUES[preset];
}

/**
 * Tailwind 그리드 클래스 생성
 */
export function getColumnSpanClass(preset: ColumnSpanPreset): string {
  return COLUMN_SPAN_PRESETS[preset].class;
}

/**
 * 컬럼 시작 위치 클래스 생성
 */
export function getColumnStartClass(start: number): string {
  if (start < 1 || start > 12) {
    console.warn(`Invalid column start: ${start}. Must be between 1 and 12.`);
    return "";
  }
  return `col-start-${start}`;
}

/**
 * 전체 그리드 클래스 조합
 */
export function buildGridClasses(columnSpan: ColumnSpanPreset, columnStart?: number): string {
  const classes: string[] = [];

  // 컬럼 스팬
  const spanClass = getColumnSpanClass(columnSpan);
  if (spanClass) {
    classes.push(spanClass);
  }

  // 시작 위치
  if (columnStart !== undefined && columnStart > 0) {
    classes.push(getColumnStartClass(columnStart));
  }

  return classes.join(" ");
}

/**
 * Gap 클래스 생성
 */
export function getGapClass(preset: GapPreset): string {
  return GAP_PRESETS[preset].class;
}

/**
 * Padding 클래스 생성 (gap 클래스를 padding으로 변환)
 */
export function getPaddingClass(preset: GapPreset): string {
  return GAP_PRESETS[preset].class.replace("gap-", "p-");
}