sam-react-prod/src/components/quotes/PurchaseOrderDocument.tsx

/**
 * 발주서 (Purchase Order Document)
 *
 * 공통 컴포넌트 사용:
 * - DocumentHeader: quote 레이아웃 + LotApprovalTable
 */

import { QuoteFormData } from "./types";
import type { CompanyFormData } from "@/components/settings/CompanyInfoManagement/types";
import { DocumentHeader, LotApprovalTable } from "@/components/document-system";

interface PurchaseOrderDocumentProps {
  quote: QuoteFormData;
  companyInfo?: CompanyFormData | null;
}

export function PurchaseOrderDocument({ quote, companyInfo }: PurchaseOrderDocumentProps) {
  const formatDate = (dateStr: string) => {
    if (!dateStr) return '';
    const date = new Date(dateStr);
    return `${date.getFullYear()}년 ${String(date.getMonth() + 1).padStart(2, '0')}월 ${String(date.getDate()).padStart(2, '0')}일`;
  };

  // 발주번호 생성 (견적번호 기반)
  const purchaseOrderNumber = quote.id?.replace('Q', 'KQ#-SC-') + '-01' || 'KQ#-SC-XXXXXX-01';

  // BOM에서 부자재 목록 추출 (견적 품목 데이터 기반)
  const materialItems = quote.items?.length > 0
    ? quote.items.map((item, index) => ({
        no: index + 1,
        name: item.productName || '스크린셔터',
        spec: `${item.openWidth || 0}×${item.openHeight || 0}mm`,
        length: Number(item.openHeight) || 0,
        quantity: item.quantity || 1,
        note: item.guideRailType ? `레일: ${item.guideRailType}` : ''
      }))
    : [];

  return (
    <>
      <style>{`
        @media print {
          @page {
            size: A4 portrait;
            margin: 10mm;
          }

          body {
            background: white !important;
          }

          #purchase-order-content {
            background: white !important;
            padding: 0 !important;
          }
        }

        /* 발주서 공문서 스타일 */
        .purchase-order {
          font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
          background: white;
          color: #000;
          line-height: 1.4;
        }

        /* 헤더 스타일은 공통 컴포넌트 사용 */

        .po-section-table {
          width: 100%;
          border-collapse: collapse;
          border: 2px solid #000;
          margin-bottom: 15px;
        }

        .po-section-header {
          background: #e8e8e8;
          border: 1px solid #666;
          padding: 8px;
          text-align: center;
          font-weight: 700;
          font-size: 13px;
          width: 120px;
        }

        .po-section-content {
          border: 1px solid #999;
          padding: 8px;
          font-size: 12px;
        }

        .po-materials-table {
          width: 100%;
          border-collapse: collapse;
          border: 2px solid #000;
          margin-bottom: 20px;
        }

        .po-materials-table th {
          background: #e8e8e8;
          border: 1px solid #666;
          padding: 8px;
          text-align: center;
          font-weight: 700;
          font-size: 12px;
        }

        .po-materials-table td {
          border: 1px solid #999;
          padding: 8px;
          font-size: 12px;
        }

        .po-notes {
          margin-top: 20px;
          padding: 15px;
          background: #f9f9f9;
          border: 1px solid #ddd;
          font-size: 11px;
          line-height: 1.6;
        }
      `}</style>

      {/* 발주서 내용 */}
      <div id="purchase-order-content" className="purchase-order p-12 print:p-8">

        {/* 헤더: 제목 + 로트번호/결재란 (공통 컴포넌트) */}
        <DocumentHeader
          title="발   주   서"
          layout="quote"
          customApproval={
            <LotApprovalTable
              lotNumber={purchaseOrderNumber}
              approvers={{
                writer: { name: '전진', department: '판매/전진' },
                reviewer: { name: '', department: '회계' },
                approver: { name: '', department: '생산' },
              }}
            />
          }
        />

        {/* 신청업체 */}
        <table className="po-section-table">
          <tbody>
            <tr>
              <th className="po-section-header" rowSpan={3}>신 청 업 체</th>
              <th className="po-section-header" style={{ width: '100px' }}>발주처</th>
              <td className="po-section-content">{quote.clientName || '-'}</td>
              <th className="po-section-header" style={{ width: '100px' }}>발주일</th>
              <td className="po-section-content">{formatDate(quote.registrationDate || '')}</td>
            </tr>
            <tr>
              <th className="po-section-header">담당자</th>
              <td className="po-section-content">{quote.manager || '-'}</td>
              <th className="po-section-header">연락처</th>
              <td className="po-section-content">{quote.contact || '-'}</td>
            </tr>
            <tr>
              <th className="po-section-header">F A X</th>
              <td className="po-section-content">-</td>
              <th className="po-section-header">설치개소(총)</th>
              <td className="po-section-content">{quote.items?.reduce((sum, item) => sum + (item.quantity || 0), 0) || 0}개소</td>
            </tr>
          </tbody>
        </table>

        {/* 신청내용 */}
        <table className="po-section-table">
          <tbody>
            <tr>
              <th className="po-section-header" rowSpan={5}>신 청 내 용</th>
              <th className="po-section-header" style={{ width: '100px' }}>현장명</th>
              <td className="po-section-content" colSpan={3}>{quote.siteName || '-'}</td>
            </tr>
            <tr>
              <th className="po-section-header">납기요청일</th>
              <td className="po-section-content" colSpan={3}>{formatDate(quote.dueDate || '')}</td>
            </tr>
            <tr>
              <th className="po-section-header">출고일</th>
              <td className="po-section-content">{formatDate(quote.registrationDate || '')}</td>
              <th className="po-section-header" style={{ width: '100px' }}>배송방법</th>
              <td className="po-section-content">상차</td>
            </tr>
            <tr>
              <th className="po-section-header">납품주소</th>
              <td className="po-section-content" colSpan={3}>경기도 안성시 서운면 서운신기 16-180</td>
            </tr>
            <tr>
              <th className="po-section-header">수신자</th>
              <td className="po-section-content">{quote.manager || '-'}</td>
              <th className="po-section-header" style={{ width: '100px' }}>연락처</th>
              <td className="po-section-content">{quote.contact || '-'}</td>
            </tr>
          </tbody>
        </table>

        {/* 발주개소 정보 */}
        <table className="po-section-table">
          <tbody>
            <tr>
              <th className="po-section-header" style={{ width: '120px' }}>누적발주개소</th>
              <td className="po-section-content" style={{ width: '200px' }}>-</td>
              <th className="po-section-header" style={{ width: '120px' }}>금번발주개소</th>
              <td className="po-section-content">{quote.items?.reduce((sum, item) => sum + (item.quantity || 0), 0) || 0}개소</td>
            </tr>
          </tbody>
        </table>

        {/* 유의사항 */}
        <div style={{ marginBottom: '10px', fontSize: '11px', lineHeight: '1.6' }}>
          <p>1. 귀사의 일익번영을 기원합니다.</p>
          <p>2. 아래와 같이 주문하오니 품질 및 납기일을 준수하여 주시기 바랍니다.</p>
        </div>

        {/* 부자재 테이블 */}
        <div style={{ fontWeight: '700', marginBottom: '10px', fontSize: '14px' }}>■ 부자재</div>
        <table className="po-materials-table">
          <thead>
            <tr>
              <th style={{ width: '50px' }}>구분</th>
              <th>품명</th>
              <th style={{ width: '200px' }}>규격</th>
              <th style={{ width: '100px' }}>길이(mm)</th>
              <th style={{ width: '80px' }}>수량</th>
              <th style={{ width: '150px' }}>비고</th>
            </tr>
          </thead>
          <tbody>
            {materialItems.map((item) => (
              <tr key={item.no}>
                <td style={{ textAlign: 'center' }}>{item.no}</td>
                <td>{item.name}</td>
                <td>{item.spec}</td>
                <td style={{ textAlign: 'right' }}>{item.length > 0 ? item.length.toLocaleString() : ''}</td>
                <td style={{ textAlign: 'center', fontWeight: '600' }}>{item.quantity}</td>
                <td>{item.note}</td>
              </tr>
            ))}
          </tbody>
        </table>

        {/* 특이사항 */}
        <div style={{ marginBottom: '20px', padding: '10px', border: '1px solid #ddd', background: '#fafafa' }}>
          <strong style={{ fontSize: '12px' }}>【특이사항】</strong>
          <div style={{ fontSize: '11px', marginTop: '5px', lineHeight: '1.6' }}>
            {quote.remarks || '스크린 셔터 부품구성표 기반 자동 견적'}
          </div>
        </div>

        {/* 하단 안내사항 */}
        <div className="po-notes">
          <p style={{ fontWeight: '600', marginBottom: '5px' }}>【 유의사항 】</p>
          <p>• 발주서 승인 완료 후 작업을 진행해주시기 바랍니다.</p>
          <p>• 납기 엄수 부탁드리며, 품질 기준에 맞춰 납품해주시기 바랍니다.</p>
          <p>• 기타 문의사항은 담당자에게 연락 부탁드립니다.</p>
          <p style={{ marginTop: '10px', textAlign: 'center', fontWeight: '600' }}>
            문의: {companyInfo?.managerName || quote.writer || '담당자'} | {companyInfo?.managerPhone || '-'}
          </p>
        </div>
      </div>
    </>
  );
}