'use client';

/**
 * 건설 문서용 결재란 컴포넌트
 *
 * @example
 * // 4열 결재란 (작성 + 승인 3개)
 * <ConstructionApprovalTable
 *   approvers={{
 *     writer: { name: '홍길동', department: '영업부' },
 *     approver1: { name: '김부장', department: '기획부' },
 *     approver2: { name: '이이사', department: '개발부' },
 *     approver3: { name: '박대표', department: '경영부' },
 *   }}
 * />
 */

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

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

export interface ConstructionApprovalTableProps {
  /** 결재자 정보 */
  approvers?: {
    writer?: ConstructionApprover;
    approver1?: ConstructionApprover;
    approver2?: ConstructionApprover;
    approver3?: ConstructionApprover;
  };
  /** 컬럼 헤더 라벨 커스텀 */
  columnLabels?: {
    writer?: string;
    approver1?: string;
    approver2?: string;
    approver3?: string;
  };
  /** 추가 className */
  className?: string;
}

export function ConstructionApprovalTable({
  approvers = {},
  columnLabels = {},
  className,
}: ConstructionApprovalTableProps) {
  const labels = {
    writer: columnLabels.writer ?? '작성',
    approver1: columnLabels.approver1 ?? '승인',
    approver2: columnLabels.approver2 ?? '승인',
    approver3: columnLabels.approver3 ?? '승인',
  };

  return (
    <table className={cn('border-collapse border border-gray-400 text-sm', className)}>
      <tbody>
        {/* 헤더 행 */}
        <tr>
          <th
            rowSpan={3}
            className="border border-gray-400 px-2 py-1 bg-gray-50 text-center w-8 align-middle"
          >
            <span className="writing-vertical">결<br />재</span>
          </th>
          <th className="border border-gray-400 px-3 py-1 bg-gray-50 text-center w-16">
            {labels.writer}
          </th>
          <th className="border border-gray-400 px-3 py-1 bg-gray-50 text-center w-16">
            {labels.approver1}
          </th>
          <th className="border border-gray-400 px-3 py-1 bg-gray-50 text-center w-16">
            {labels.approver2}
          </th>
          <th className="border border-gray-400 px-3 py-1 bg-gray-50 text-center w-16">
            {labels.approver3}
          </th>
        </tr>

        {/* 이름 행 */}
        <tr>
          <td className="border border-gray-400 px-3 py-2 text-center h-10">
            {approvers.writer?.name || ''}
          </td>
          <td className="border border-gray-400 px-3 py-2 text-center h-10">
            {approvers.approver1?.name || ''}
          </td>
          <td className="border border-gray-400 px-3 py-2 text-center h-10">
            {approvers.approver2?.name || ''}
          </td>
          <td className="border border-gray-400 px-3 py-2 text-center h-10">
            {approvers.approver3?.name || ''}
          </td>
        </tr>

        {/* 부서 행 */}
        <tr>
          <td className="border border-gray-400 px-3 py-1 text-center text-xs text-gray-500 whitespace-nowrap">
            {approvers.writer?.department || '부서명'}
          </td>
          <td className="border border-gray-400 px-3 py-1 text-center text-xs text-gray-500 whitespace-nowrap">
            {approvers.approver1?.department || '부서명'}
          </td>
          <td className="border border-gray-400 px-3 py-1 text-center text-xs text-gray-500 whitespace-nowrap">
            {approvers.approver2?.department || '부서명'}
          </td>
          <td className="border border-gray-400 px-3 py-1 text-center text-xs text-gray-500 whitespace-nowrap">
            {approvers.approver3?.department || '부서명'}
          </td>
        </tr>
      </tbody>
    </table>
  );
}
