'use client';

/**
 * 로트번호 + 결재란 통합 컴포넌트
 *
 * @example
 * <LotApprovalTable
 *   lotNumber="KQ#-SC-250122-01"
 *   approvers={{
 *     writer: { name: '전진', department: '판매/전진' },
 *     reviewer: { name: '', department: '회계' },
 *     approver: { name: '', department: '생산' },
 *   }}
 * />
 */

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

export interface LotApprover {
  name?: string;
  department?: string;
}

export interface LotApprovalTableProps {
  /** 로트번호 */
  lotNumber: string;
  /** 로트번호 라벨 (기본값: '로트번호') */
  lotLabel?: string;
  /** 결재자 정보 */
  approvers?: {
    writer?: LotApprover;
    reviewer?: LotApprover;
    approver?: LotApprover;
  };
  /** 컬럼 헤더 라벨 커스텀 */
  columnLabels?: {
    writer?: string;
    reviewer?: string;
    approver?: string;
  };
  /** 추가 className */
  className?: string;
}

export function LotApprovalTable({
  lotNumber,
  lotLabel = '로트번호',
  approvers = {},
  columnLabels = {},
  className,
}: LotApprovalTableProps) {
  const labels = {
    writer: columnLabels.writer ?? '작성',
    reviewer: columnLabels.reviewer ?? '검토',
    approver: columnLabels.approver ?? '승인',
  };

  return (
    <div className={cn('border-2 border-black bg-white', className)}>
      {/* 로트번호 행 */}
      <div className="grid grid-cols-[100px_1fr] border-b-2 border-black">
        <div className="bg-gray-200 border-r-2 border-black px-2 py-2 text-center font-bold text-xs flex items-center justify-center">
          {lotLabel}
        </div>
        <div className="bg-white px-2 py-2 text-center font-bold text-sm flex items-center justify-center">
          {lotNumber}
        </div>
      </div>

      {/* 결재란 */}
      <div className="grid grid-cols-[60px_1fr]">
        {/* 결재 세로 셀 */}
        <div className="border-r border-black flex items-center justify-center bg-white row-span-3">
          <span className="text-xs font-semibold">결<br />재</span>
        </div>

        {/* 결재 내용 */}
        <div>
          {/* 헤더 행 */}
          <div className="grid grid-cols-3 border-b border-black">
            <div className="border-r border-black px-3 py-2 text-center font-semibold text-xs bg-white">
              {labels.writer}
            </div>
            <div className="border-r border-black px-3 py-2 text-center font-semibold text-xs bg-white">
              {labels.reviewer}
            </div>
            <div className="px-3 py-2 text-center font-semibold text-xs bg-white">
              {labels.approver}
            </div>
          </div>

          {/* 서명 행 */}
          <div className="grid grid-cols-3 border-b border-black">
            <div className="border-r border-black px-3 py-2 text-center text-xs h-12 flex items-center justify-center bg-white">
              {approvers.writer?.name || ''}
            </div>
            <div className="border-r border-black px-3 py-2 text-center text-xs h-12 flex items-center justify-center bg-white">
              {approvers.reviewer?.name || ''}
            </div>
            <div className="px-3 py-2 text-center text-xs h-12 flex items-center justify-center bg-white">
              {approvers.approver?.name || ''}
            </div>
          </div>

          {/* 부서 행 */}
          <div className="grid grid-cols-3">
            <div className="border-r border-black px-2 py-1 text-center text-xs font-semibold bg-white">
              {approvers.writer?.department || ''}
            </div>
            <div className="border-r border-black px-2 py-1 text-center text-xs font-semibold bg-white">
              {approvers.reviewer?.department || ''}
            </div>
            <div className="px-2 py-1 text-center text-xs font-semibold bg-white">
              {approvers.approver?.department || ''}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
