/**
 * IntegratedDetailTemplate Skeleton Components
 *
 * 상세 페이지 로딩 스켈레톤 컴포넌트
 */

'use client';

import { Card, CardContent, CardHeader } from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';
import { cn } from '@/lib/utils';

// ============================================
// 1. 필드 스켈레톤
// ============================================
export interface DetailFieldSkeletonProps {
  /** 라벨 표시 여부 (default: true) */
  showLabel?: boolean;
  /** 그리드 span (1~4) */
  colSpan?: 1 | 2 | 3 | 4;
  /** 필드 타입에 따른 높이 조절 */
  type?: 'input' | 'textarea' | 'select';
  /** 추가 클래스 */
  className?: string;
}

const colSpanClasses = {
  1: '',
  2: 'md:col-span-2',
  3: 'md:col-span-2 lg:col-span-3',
  4: 'md:col-span-2 lg:col-span-4',
};

export function DetailFieldSkeleton({
  showLabel = true,
  colSpan = 1,
  type = 'input',
  className,
}: DetailFieldSkeletonProps) {
  return (
    <div className={cn('space-y-2 animate-pulse', colSpanClasses[colSpan], className)}>
      {/* 라벨 */}
      {showLabel && <Skeleton className="h-4 w-20" />}
      {/* 입력 필드 */}
      <Skeleton
        className={cn(
          'w-full rounded-md',
          type === 'textarea' ? 'h-24' : 'h-10'
        )}
      />
    </div>
  );
}

// ============================================
// 2. 그리드 스켈레톤
// ============================================
export interface DetailGridSkeletonProps {
  /** 그리드 열 수 (default: 2) */
  cols?: 1 | 2 | 3 | 4;
  /** 필드 개수 (default: 4) */
  fieldCount?: number;
  /** 그리드 간격 (default: 'md') */
  gap?: 'sm' | 'md' | 'lg';
  /** 추가 클래스 */
  className?: string;
}

const colsClasses = {
  1: 'grid-cols-1',
  2: 'grid-cols-1 md:grid-cols-2',
  3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
  4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
};

const gapClasses = {
  sm: 'gap-4',
  md: 'gap-6',
  lg: 'gap-8',
};

export function DetailGridSkeleton({
  cols = 2,
  fieldCount = 4,
  gap = 'md',
  className,
}: DetailGridSkeletonProps) {
  return (
    <div className={cn('grid', colsClasses[cols], gapClasses[gap], className)}>
      {Array.from({ length: fieldCount }).map((_, i) => (
        <DetailFieldSkeleton key={i} />
      ))}
    </div>
  );
}

// ============================================
// 3. 섹션 스켈레톤
// ============================================
export interface DetailSectionSkeletonProps {
  /** 제목 표시 여부 (default: true) */
  showTitle?: boolean;
  /** 그리드 열 수 (default: 2) */
  cols?: 1 | 2 | 3 | 4;
  /** 필드 개수 (default: 6) */
  fieldCount?: number;
  /** 추가 클래스 */
  className?: string;
}

export function DetailSectionSkeleton({
  showTitle = true,
  cols = 2,
  fieldCount = 6,
  className,
}: DetailSectionSkeletonProps) {
  return (
    <Card className={cn('animate-pulse', className)}>
      {showTitle && (
        <CardHeader className="pb-4">
          <Skeleton className="h-5 w-32" />
        </CardHeader>
      )}
      <CardContent className={showTitle ? 'pt-0' : undefined}>
        <DetailGridSkeleton cols={cols} fieldCount={fieldCount} />
      </CardContent>
    </Card>
  );
}

// ============================================
// 4. 전체 페이지 스켈레톤
// ============================================
export interface DetailPageSkeletonProps {
  /** 섹션 개수 (default: 1) */
  sections?: number;
  /** 섹션당 필드 개수 (default: 6) */
  fieldsPerSection?: number;
  /** 그리드 열 수 (default: 2) */
  cols?: 1 | 2 | 3 | 4;
  /** 헤더 표시 여부 (default: true) */
  showHeader?: boolean;
  /** 추가 클래스 */
  className?: string;
}

export function DetailPageSkeleton({
  sections = 1,
  fieldsPerSection = 6,
  cols = 2,
  showHeader = true,
  className,
}: DetailPageSkeletonProps) {
  return (
    <div className={cn('space-y-6 animate-pulse', className)}>
      {/* 페이지 헤더 */}
      {showHeader && (
        <div className="flex items-center justify-between">
          <div className="space-y-2">
            <Skeleton className="h-8 w-48" />
            <Skeleton className="h-4 w-64" />
          </div>
          <div className="flex gap-2">
            <Skeleton className="h-10 w-20 rounded-md" />
            <Skeleton className="h-10 w-20 rounded-md" />
          </div>
        </div>
      )}

      {/* 섹션들 */}
      {Array.from({ length: sections }).map((_, i) => (
        <DetailSectionSkeleton
          key={i}
          cols={cols}
          fieldCount={fieldsPerSection}
        />
      ))}
    </div>
  );
}

export default DetailSectionSkeleton;
