/**
 * DetailField - 상세 페이지 필드 레이아웃 컴포넌트
 *
 * 라벨, 필수 마크, 에러 메시지, 설명을 포함한 필드 래퍼
 */

'use client';

import type { ReactNode } from 'react';
import { Label } from '@/components/ui/label';
import { cn } from '@/lib/utils';

export interface DetailFieldProps {
  /** 필드 라벨 */
  label: string;
  /** 필수 여부 (default: false) */
  required?: boolean;
  /** 에러 메시지 */
  error?: string;
  /** 설명 텍스트 */
  description?: string;
  /** 그리드 span (1~4) */
  colSpan?: 1 | 2 | 3 | 4;
  /** 필드 내용 (Input, Select 등) */
  children: ReactNode;
  /** 추가 클래스 */
  className?: string;
  /** 라벨 숨김 (시각적으로만) */
  hideLabel?: boolean;
  /** HTML for 속성 연결용 ID */
  htmlFor?: string;
  /** 모드 - view 모드에서는 필수마크/에러/description 숨김 */
  mode?: 'view' | 'edit' | 'create';
}

// colSpan에 따른 그리드 클래스
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 DetailField({
  label,
  required = false,
  error,
  description,
  colSpan = 1,
  children,
  className,
  hideLabel = false,
  htmlFor,
  mode,
}: DetailFieldProps) {
  const isViewMode = mode === 'view';

  return (
    <div className={cn('space-y-2', colSpanClasses[colSpan], className)}>
      {/* 라벨 영역 */}
      <Label
        htmlFor={htmlFor}
        className={cn(
          'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
          isViewMode && 'text-muted-foreground',
          hideLabel && 'sr-only'
        )}
      >
        {label}
        {/* View 모드에서는 필수마크 숨김 */}
        {required && !isViewMode && <span className="text-destructive ml-1">*</span>}
      </Label>

      {/* 필드 내용 */}
      {children}

      {/* 에러 메시지 - View 모드에서는 숨김 */}
      {error && !isViewMode && (
        <p className="text-sm text-destructive">{error}</p>
      )}

      {/* 설명 텍스트 - View 모드에서는 숨김 */}
      {description && !error && !isViewMode && (
        <p className="text-sm text-muted-foreground">{description}</p>
      )}
    </div>
  );
}

export default DetailField;
