'use client';

/**
 * 품질검사 문서용 결재란 컴포넌트
 *
 * @example
 * // 2열 타입 (수입검사 성적서)
 * <QualityApprovalTable
 *   type="2col"
 *   approvers={{ writer: '노원호' }}
 *   reportDate="2025-07-15"
 * />
 *
 * // 4열 타입 (중간검사 성적서)
 * <QualityApprovalTable
 *   type="4col"
 *   approvers={{ writer: '전진', reviewer: '', approver: '' }}
 *   departments={{ writer: '판매/전진', reviewer: '생산', approver: '품질' }}
 * />
 */

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

export interface QualityApprovers {
  writer?: string;
  reviewer?: string;
  approver?: string;
}

export interface QualityDepartments {
  writer?: string;
  reviewer?: string;
  approver?: string;
}

export interface QualityApprovalTableProps {
  /** 결재란 타입: 2col(담당/부서장), 4col(결재/작성/검토/승인) */
  type?: '2col' | '4col';
  /** 결재자 정보 */
  approvers?: QualityApprovers;
  /** 부서 정보 (4col 전용) */
  departments?: QualityDepartments;
  /** 보고일자 (2col 전용) */
  reportDate?: string;
  /** 추가 className */
  className?: string;
}

export function QualityApprovalTable({
  type = '4col',
  approvers = {},
  departments = {
    writer: '판매/전진',
    reviewer: '생산',
    approver: '품질',
  },
  reportDate,
  className,
}: QualityApprovalTableProps) {
  // 2열 타입 (수입검사 성적서 - 담당/부서장)
  if (type === '2col') {
    return (
      <div className={cn('text-right', className)}>
        <table className="text-xs border-collapse">
          <tbody>
            <tr>
              <td className="border border-gray-400 px-2 py-1 bg-gray-100 w-12">담당</td>
              <td className="border border-gray-400 px-2 py-1 w-16">부서장</td>
            </tr>
            <tr>
              <td className="border border-gray-400 px-2 py-1 bg-gray-100">결재</td>
              <td className="border border-gray-400 px-2 py-1 h-8">{approvers.writer || ''}</td>
            </tr>
          </tbody>
        </table>
        {reportDate && (
          <div className="text-xs text-right mt-1 whitespace-nowrap">접고일자: {reportDate}</div>
        )}
      </div>
    );
  }

  // 4열 타입 (중간검사 성적서 - 결재/작성/검토/승인 + 부서)
  return (
    <table className={cn('text-xs border-collapse', className)}>
      <tbody>
        <tr>
          <td className="border border-gray-400 px-2 py-1 bg-gray-100 w-8 text-center" rowSpan={3}>
            <div className="flex flex-col items-center">
              <span>결</span><span>재</span>
            </div>
          </td>
          <td className="border border-gray-400 px-2 py-1 bg-gray-100 w-14 text-center">작성</td>
          <td className="border border-gray-400 px-2 py-1 bg-gray-100 w-14 text-center">검토</td>
          <td className="border border-gray-400 px-2 py-1 bg-gray-100 w-14 text-center">승인</td>
        </tr>
        <tr>
          <td className="border border-gray-400 px-2 py-1 h-8 text-center font-medium">
            {approvers.writer || ''}
          </td>
          <td className="border border-gray-400 px-2 py-1 h-8 text-center">
            {approvers.reviewer || ''}
          </td>
          <td className="border border-gray-400 px-2 py-1 h-8 text-center">
            {approvers.approver || ''}
          </td>
        </tr>
        <tr>
          <td className="border border-gray-400 px-2 py-1 text-center bg-gray-50">
            {departments.writer || '판매/전진'}
          </td>
          <td className="border border-gray-400 px-2 py-1 text-center bg-gray-50">
            {departments.reviewer || '생산'}
          </td>
          <td className="border border-gray-400 px-2 py-1 text-center bg-gray-50">
            {departments.approver || '품질'}
          </td>
        </tr>
      </tbody>
    </table>
  );
}
