'use client';

/**
 * 결재란 공통 컴포넌트
 *
 * @example
 * // 3열 결재란 (작성/승인)
 * <ApprovalLine type="3col" writer="홍길동" writerDate="01/22" />
 *
 * // 4열 결재란 (작성/검토/승인)
 * <ApprovalLine type="4col" writer="홍길동" reviewer="김검토" />
 *
 * // 외부 송부 시 숨김
 * <ApprovalLine visible={false} />
 */

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

export interface ApprovalPerson {
  name?: string;
  date?: string;
  department?: string;
}

export interface ApprovalLineProps {
  /** 결재란 유형: 2열(담당/부서장), 3열(작성/승인), 4열(작성/검토/승인) */
  type?: '2col' | '3col' | '4col';
  /** 외부 송부 시 숨김 */
  visible?: boolean;
  /** 문서 모드: internal(내부), external(외부송부) */
  mode?: 'internal' | 'external';
  /** 작성자 정보 */
  writer?: ApprovalPerson;
  /** 검토자 정보 (4col에서만 사용) */
  reviewer?: ApprovalPerson;
  /** 승인자 정보 */
  approver?: ApprovalPerson;
  /** 부서명 표시 여부 */
  showDepartment?: boolean;
  /** 부서 라벨 (기본값: 작성/검토/승인에 따라 다름) */
  departmentLabels?: {
    writer?: string;
    reviewer?: string;
    approver?: string;
  };
  /** 컬럼 헤더 라벨 커스텀 (기본값: 작성/검토/승인) */
  columnLabels?: {
    writer?: string;
    reviewer?: string;
    approver?: string;
  };
  /** 추가 className */
  className?: string;
}

export function ApprovalLine({
  type = '3col',
  visible = true,
  mode = 'internal',
  writer,
  reviewer,
  approver,
  showDepartment = true,
  departmentLabels = {
    writer: '판매/전진',
    reviewer: '생산',
    approver: '품질',
  },
  columnLabels,
  className,
}: ApprovalLineProps) {
  // 외부 송부 모드이거나 visible이 false면 렌더링 안함
  if (!visible || mode === 'external') {
    return null;
  }

  const is4Col = type === '4col';
  const is2Col = type === '2col';

  // 기본 컬럼 라벨
  const labels = {
    writer: columnLabels?.writer ?? (is2Col ? '담당' : '작성'),
    reviewer: columnLabels?.reviewer ?? '검토',
    approver: columnLabels?.approver ?? (is2Col ? '부서장' : '승인'),
  };

  return (
    <table className={cn('border-collapse text-xs', className)}>
      <tbody>
        {/* 헤더 행: 결재 + 작성/검토/승인 */}
        <tr>
          <td
            rowSpan={showDepartment ? 3 : 2}
            className="w-8 text-center font-medium bg-gray-100 border border-gray-300 align-middle"
          >
            <div className="flex flex-col items-center px-1">
              <span>결</span>
              <span>재</span>
            </div>
          </td>
          <td className="w-16 p-2 text-center font-medium bg-gray-100 border border-gray-300">
            {labels.writer}
          </td>
          {is4Col && (
            <td className="w-16 p-2 text-center font-medium bg-gray-100 border border-gray-300">
              {labels.reviewer}
            </td>
          )}
          <td className="w-16 p-2 text-center font-medium bg-gray-100 border border-gray-300">
            {labels.approver}
          </td>
        </tr>

        {/* 서명 행: 이름 + 날짜 */}
        <tr>
          <td className="w-16 p-2 text-center border border-gray-300 h-10">
            {writer?.name && (
              <>
                <div>{writer.name}</div>
                {writer.date && (
                  <div className="text-[10px] text-gray-500">{writer.date}</div>
                )}
              </>
            )}
          </td>
          {is4Col && (
            <td className="w-16 p-2 text-center border border-gray-300 h-10">
              {reviewer?.name && (
                <>
                  <div>{reviewer.name}</div>
                  {reviewer.date && (
                    <div className="text-[10px] text-gray-500">{reviewer.date}</div>
                  )}
                </>
              )}
            </td>
          )}
          <td className="w-16 p-2 text-center border border-gray-300 h-10">
            {approver?.name && (
              <>
                <div>{approver.name}</div>
                {approver.date && (
                  <div className="text-[10px] text-gray-500">{approver.date}</div>
                )}
              </>
            )}
          </td>
        </tr>

        {/* 부서 행 (선택적) */}
        {showDepartment && (
          <tr>
            <td className="w-16 p-2 text-center bg-gray-50 border border-gray-300 text-[10px] whitespace-nowrap">
              {departmentLabels.writer}
            </td>
            {is4Col && (
              <td className="w-16 p-2 text-center bg-gray-50 border border-gray-300 text-[10px] whitespace-nowrap">
                {departmentLabels.reviewer}
              </td>
            )}
            <td className="w-16 p-2 text-center bg-gray-50 border border-gray-300 text-[10px] whitespace-nowrap">
              {departmentLabels.approver}
            </td>
          </tr>
        )}
      </tbody>
    </table>
  );
}
