sam-react-prod/src/components/process-management/ProcessWorkLogContent.tsx

'use client';

/**
 * 공정 작업일지 문서 콘텐츠
 *
 * 공통 컴포넌트 사용:
 * - DocumentHeader: default 레이아웃 + 4col 결재란
 * - SectionHeader: 섹션 제목
 */

import type { Process } from '@/types/process';
import { DocumentHeader, SectionHeader } from '@/components/document-system';

const getDocumentCode = (processName: string): string => {
  if (processName.includes('스크린')) return 'WL-SCR';
  if (processName.includes('슬랫')) return 'WL-SLT';
  if (processName.includes('절곡') || processName.includes('포밍')) return 'WL-BEN';
  return 'WL-STK';
};

const getDepartmentName = (processName: string, department?: string): string => {
  if (processName.includes('스크린')) return '스크린 생산부서';
  if (processName.includes('슬랫')) return '슬랫 생산부서';
  if (processName.includes('절곡')) return '절곡 생산부서';
  if (processName.includes('포밍')) return '포밍 생산부서';
  return department || '생산부서';
};

interface ProcessWorkLogContentProps {
  data: Process;
}

export function ProcessWorkLogContent({ data: process }: ProcessWorkLogContentProps) {
  const documentCode = getDocumentCode(process.processName);
  const departmentName = getDepartmentName(process.processName, process.department);
  const today = new Date().toLocaleDateString('ko-KR', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
  }).replace(/\. /g, '-').replace('.', '');

  const workItems = [
    { no: 1, name: '원단 재단', spec: 'W2900 × H3900', qty: 9, unit: 'EA', worker: '이작업', note: '' },
    { no: 2, name: '미싱 작업', spec: 'W2800 × H3800', qty: 8, unit: 'EA', worker: '김작업', note: '' },
    { no: 3, name: '앤드락 조립', spec: 'W2700 × H3700', qty: 7, unit: 'EA', worker: '이작업', note: '' },
    { no: 4, name: '검수', spec: 'W2600 × H3600', qty: 6, unit: 'EA', worker: '김작업', note: '' },
    { no: 5, name: '포장', spec: 'W2500 × H3500', qty: 5, unit: 'EA', worker: '이작업', note: '' },
  ];

  return (
    <div className="p-6 bg-white">
      {/* 문서 헤더 (공통 컴포넌트) */}
      <DocumentHeader
        title="작 업 일 지"
        documentCode={documentCode}
        subtitle={departmentName}
        logo={{ text: 'KD', subtext: '정동기업' }}
        approval={{
          type: '4col',
          writer: { name: '홍길동', date: '12/17' },
          showDepartment: true,
          departmentLabels: {
            writer: '판매/전진',
            reviewer: '생산',
            approver: '품질',
          },
        }}
      />

      {/* 신청업체 / 신청내용 테이블 */}
      <table className="w-full border-collapse border border-gray-300 mb-6 text-sm">
        <thead>
          <tr>
            <th colSpan={2} className="bg-gray-800 text-white p-2.5 font-medium border-r border-gray-300">신 청 업 체</th>
            <th colSpan={2} className="bg-gray-800 text-white p-2.5 font-medium">신 청 내 용</th>
          </tr>
        </thead>
        <tbody>
          <tr className="border-b border-gray-300">
            <td className="w-24 bg-gray-100 p-3 font-medium border-r border-gray-300">발 주 일</td>
            <td className="p-3 border-r border-gray-300">{today}</td>
            <td className="w-24 bg-gray-100 p-3 font-medium border-r border-gray-300">현 장 명</td>
            <td className="p-3">송도 오피스텔 A동</td>
          </tr>
          <tr className="border-b border-gray-300">
            <td className="bg-gray-100 p-3 font-medium border-r border-gray-300">업 체 명</td>
            <td className="p-3 border-r border-gray-300">(주)인천건설</td>
            <td className="bg-gray-100 p-3 font-medium border-r border-gray-300">작업일자</td>
            <td className="p-3">{today}</td>
          </tr>
          <tr className="border-b border-gray-300">
            <td className="bg-gray-100 p-3 font-medium border-r border-gray-300">담 당 자</td>
            <td className="p-3 border-r border-gray-300">김담당</td>
            <td className="bg-gray-100 p-3 font-medium border-r border-gray-300">제품 LOT NO.</td>
            <td className="p-3">KD-TS-251217-01-01</td>
          </tr>
          <tr>
            <td className="bg-gray-100 p-3 font-medium border-r border-gray-300">제품명</td>
            <td className="p-3 border-r border-gray-300">SH3040 &nbsp; 방화셔터 W3000×H4000</td>
            <td className="bg-gray-100 p-3 font-medium border-r border-gray-300">마감유형</td>
            <td className="p-3">스크린 &nbsp; 그레이</td>
          </tr>
        </tbody>
      </table>

      {/* 작업항목 테이블 */}
      <table className="w-full border-collapse border border-gray-300 text-sm">
        <thead>
          <tr className="bg-gray-800 text-white">
            <th className="p-2.5 font-medium border-r border-gray-600 w-16">순번</th>
            <th className="p-2.5 font-medium border-r border-gray-600">작업항목</th>
            <th className="p-2.5 font-medium border-r border-gray-600 w-40">규격</th>
            <th className="p-2.5 font-medium border-r border-gray-600 w-20">수량</th>
            <th className="p-2.5 font-medium border-r border-gray-600 w-16">단위</th>
            <th className="p-2.5 font-medium border-r border-gray-600 w-20">작업자</th>
            <th className="p-2.5 font-medium w-24">비고</th>
          </tr>
        </thead>
        <tbody>
          {workItems.map((item, index) => (
            <tr key={item.no} className={index < workItems.length - 1 ? 'border-b border-gray-300' : ''}>
              <td className="p-3 text-center border-r border-gray-300">{item.no}</td>
              <td className="p-3 border-r border-gray-300">{item.name}</td>
              <td className="p-3 text-center border-r border-gray-300">{item.spec}</td>
              <td className="p-3 text-center border-r border-gray-300">{item.qty}</td>
              <td className="p-3 text-center border-r border-gray-300">{item.unit}</td>
              <td className="p-3 text-center border-r border-gray-300">{item.worker}</td>
              <td className="p-3 text-center">{item.note}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}