import { ReactNode } from 'react';
import { cn } from '@/lib/utils';

export interface DocumentTableProps {
  children: ReactNode;
  /** 테이블 위 섹션 헤더 */
  header?: string;
  /** 헤더 배경색 (기본: dark) */
  headerVariant?: 'dark' | 'light' | 'primary';
  /** 하단 마진 (기본: mb-6) */
  spacing?: string;
  /** 추가 className (table 요소에 적용) */
  className?: string;
}

/**
 * 문서용 테이블 래퍼
 *
 * 일관된 border, collapse, text-size를 적용합니다.
 * 선택적으로 섹션 헤더를 포함할 수 있습니다.
 *
 * @example
 * // 기본 사용
 * <DocumentTable>
 *   <thead>
 *     <tr><th className={DOC_STYLES.th}>품목</th></tr>
 *   </thead>
 *   <tbody>
 *     <tr><td className={DOC_STYLES.td}>스크린</td></tr>
 *   </tbody>
 * </DocumentTable>
 *
 * @example
 * // 섹션 헤더 포함
 * <DocumentTable header="자재 내역">
 *   <tbody>...</tbody>
 * </DocumentTable>
 */
export function DocumentTable({
  children,
  header,
  headerVariant = 'dark',
  spacing = 'mb-6',
  className,
}: DocumentTableProps) {
  const headerClasses = {
    dark: 'bg-gray-800 text-white',
    light: 'bg-gray-100 text-gray-900',
    primary: 'bg-blue-600 text-white',
  };

  return (
    <div className={spacing}>
      {header && (
        <div className={cn('text-center py-1 font-bold border-b border-gray-400', headerClasses[headerVariant])}>
          {header}
        </div>
      )}
      <table className={cn('w-full border-collapse border border-gray-400', className)}>
        {children}
      </table>
    </div>
  );
}

/**
 * 문서 테이블 셀 스타일 상수
 *
 * 문서 내 <th>/<td>에 일관된 스타일을 적용하기 위한 유틸리티.
 * DocumentTable 내부에서 직접 className으로 사용합니다.
 *
 * @example
 * <tr>
 *   <th className={DOC_STYLES.th}>품목명</th>
 *   <td className={DOC_STYLES.td}>스크린</td>
 *   <td className={DOC_STYLES.tdCenter}>10</td>
 *   <td className={DOC_STYLES.tdRight}>1,000,000</td>
 * </tr>
 */
export const DOC_STYLES = {
  /** 헤더 셀 (회색 배경, 볼드) */
  th: 'bg-gray-100 border border-gray-400 px-2 py-1 font-medium text-center',
  /** 데이터 셀 (좌측 정렬) */
  td: 'border border-gray-300 px-2 py-1',
  /** 데이터 셀 (중앙 정렬) */
  tdCenter: 'border border-gray-300 px-2 py-1 text-center',
  /** 데이터 셀 (우측 정렬, 숫자용) */
  tdRight: 'border border-gray-300 px-2 py-1 text-right',
  /** 라벨 셀 (key-value 테이블의 라벨) */
  label: 'bg-gray-100 border border-gray-300 px-2 py-1 font-medium w-24',
  /** 값 셀 (key-value 테이블의 값) */
  value: 'border border-gray-300 px-2 py-1',
} as const;
