/**
 * 발주서 (Purchase Order Document)
 * 
 * 첨부 이미지 기반으로 제작
 * - 경동기업 로고 및 헤더
 * - 결재란 (작성/검토/승인: 전진, 회계 담당, 생산관리)
 * - 신청업체 정보
 * - 신청내용
 * - 부자재 목록
 * - 발주량 체크박스
 */

import type { Quote } from "./contexts/DataContext";

interface PurchaseOrderDocumentProps {
  quote: Quote;
}

export function PurchaseOrderDocument({ quote }: 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.quoteNumber?.replace('QT', 'KD-BE') + '-01' || 'KD-BE-XXXXXX-01';

  // BOM에서 부자재 목록 추출
  const materialItems = quote.bomCalculations?.map((bom, index) => ({
    no: index + 1,
    name: bom.itemName,
    spec: bom.note || bom.formula || '-',
    length: bom.calculatedQuantity || 0,
    quantity: Math.ceil(Number(bom.calculatedQuantity) || 0),
    note: ''
  })) || [];

  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-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 20px;
          padding-bottom: 15px;
          border-bottom: 2px solid #000;
        }
        
        .po-logo-box {
          width: 120px;
          height: 100px;
          border: 2px solid #000;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          background: linear-gradient(135deg, #0066cc 0%, #003d99 100%);
          color: white;
        }
        
        .po-logo-text {
          font-size: 28px;
          font-weight: 700;
          letter-spacing: 2px;
        }
        
        .po-logo-sub {
          font-size: 11px;
          margin-top: 5px;
          letter-spacing: 3px;
        }
        
        .po-title {
          flex: 1;
          text-align: center;
        }
        
        .po-title h1 {
          font-size: 36px;
          font-weight: 700;
          letter-spacing: 8px;
          margin: 0;
        }
        
        .po-approval-section {
          border: 2px solid #000;
          background: white;
        }
        
        .po-lot-number-row {
          display: grid;
          grid-template-columns: 100px 1fr;
          border-bottom: 2px solid #000;
        }
        
        .po-lot-label {
          background: #e8e8e8;
          border-right: 2px solid #000;
          padding: 8px;
          text-align: center;
          font-weight: 700;
          font-size: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        
        .po-lot-value {
          background: white;
          padding: 8px;
          text-align: center;
          font-weight: 700;
          font-size: 14px;
          color: #000;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        
        .po-approval-box {
          width: 100%;
          border: none;
          display: grid;
          grid-template-columns: 60px 1fr;
          grid-template-rows: auto auto auto;
        }
        
        .po-approval-merged-vertical-cell {
          border-right: 1px solid #000;
          padding: 4px;
          text-align: center;
          font-weight: 600;
          font-size: 11px;
          background: white;
          display: flex;
          align-items: center;
          justify-content: center;
          grid-row: 1 / 4;
        }
        
        .po-approval-header {
          display: grid;
          grid-template-columns: 1fr 1fr 1fr;
          border-bottom: 1px solid #000;
        }
        
        .po-approval-header-cell {
          border-right: 1px solid #000;
          padding: 8px;
          text-align: center;
          font-weight: 600;
          font-size: 12px;
          background: white;
        }
        
        .po-approval-header-cell:last-child {
          border-right: none;
        }
        
        .po-approval-content-row {
          display: grid;
          grid-template-columns: 1fr 1fr 1fr;
          border-bottom: 1px solid #000;
        }
        
        .po-approval-name-row {
          display: grid;
          grid-template-columns: 1fr 1fr 1fr;
        }
        
        .po-approval-vertical-cell {
          border-right: 1px solid #000;
          padding: 4px;
          text-align: center;
          font-weight: 600;
          font-size: 11px;
          background: white;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        
        .po-approval-signature-cell {
          border-right: 1px solid #000;
          padding: 8px;
          text-align: center;
          font-size: 11px;
          height: 50px;
          background: white;
        }
        
        .po-approval-signature-cell:last-child {
          border-right: none;
        }
        
        .po-approval-name-cell {
          border-right: 1px solid #000;
          padding: 6px;
          text-align: center;
          font-weight: 600;
          font-size: 11px;
          background: white;
        }
        
        .po-approval-name-cell:last-child {
          border-right: none;
        }
        
        .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-footer-checkboxes {
          border: 2px dashed #999;
          padding: 15px;
          background: #fffef0;
        }
        
        .po-checkbox-row {
          display: flex;
          align-items: center;
          gap: 30px;
          justify-content: center;
          flex-wrap: wrap;
        }
        
        .po-checkbox-item {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 8px 15px;
          border: 1px solid #ccc;
          background: white;
          border-radius: 4px;
        }
        
        .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">

        {/* 헤더: 로고 + 제목 + 결재란 */}
        <div className="po-header">
          {/* 제목 */}
          <div className="po-title">
            <h1>발   주   서</h1>
          </div>

          {/* 로트번호 + 결재란 */}
          <div className="po-approval-section">
            {/* 로트번호 */}
            <div className="po-lot-number-row">
              <div className="po-lot-label">
                로트번호
              </div>
              <div className="po-lot-value">
                {purchaseOrderNumber}
              </div>
            </div>
            
            {/* 결재란 */}
            <div className="po-approval-box">
              <div className="po-approval-merged-vertical-cell">결<br/>재</div>
              {/* 결재란 헤더 */}
              <div className="po-approval-header">
                <div className="po-approval-header-cell">작성</div>
                <div className="po-approval-header-cell">검토</div>
                <div className="po-approval-header-cell">승인</div>
              </div>
              {/* 결재+서명란 */}
              <div className="po-approval-content-row">
                <div className="po-approval-signature-cell">전진</div>
                <div className="po-approval-signature-cell"></div>
                <div className="po-approval-signature-cell"></div>
              </div>
              {/* 이름란 */}
              <div className="po-approval-name-row">
                <div className="po-approval-name-cell">판매/전진</div>
                <div className="po-approval-name-cell">회계</div>
                <div className="po-approval-name-cell">생산</div>
              </div>
            </div>
          </div>
        </div>

        {/* 신청업체 */}
        <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.customerName || quote.client || '주원'}</td>
              <th className="po-section-header" style={{ width: '100px' }}>발주일</th>
              <td className="po-section-content">{formatDate(quote.registrationDate || quote.quoteDate || '')}</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.contactPhone || 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">{'23개소'}</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.projectName || quote.site || '안성대사동특급동창고1동 부재(목감생1층 부자재)'}</td>
            </tr>
            <tr>
              <th className="po-section-header">납기요청일</th>
              <td className="po-section-content" colSpan={3}>{quote.validUntil || '2025년 12월 2일 화요일'}</td>
            </tr>
            <tr>
              <th className="po-section-header">출고일</th>
              <td className="po-section-content">{formatDate(quote.registrationDate || quote.quoteDate || '')}</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">{'정제용방'}</td>
              <th className="po-section-header" style={{ width: '100px' }}>연락처</th>
              <td className="po-section-content">{'010-2293-8700'}</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' }}>{'18개소'}</td>
              <th className="po-section-header" style={{ width: '120px' }}>금번발주개소</th>
              <td className="po-section-content">{'5개소'}</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.length > 0 ? (
              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.toLocaleString()}</td>
                  <td style={{ textAlign: 'center', fontWeight: '600' }}>{item.quantity}</td>
                  <td>{item.note}</td>
                </tr>
              ))
            ) : (
              <>
                <tr>
                  <td style={{ textAlign: 'center' }}>1</td>
                  <td>아연도각파이프</td>
                  <td>100-50-2T</td>
                  <td style={{ textAlign: 'right' }}>3,000</td>
                  <td style={{ textAlign: 'center', fontWeight: '600' }}>6</td>
                  <td></td>
                </tr>
                <tr>
                  <td style={{ textAlign: 'center' }}>2</td>
                  <td>아연도각파이프</td>
                  <td>100-100-2T</td>
                  <td style={{ textAlign: 'right' }}>3,000</td>
                  <td style={{ textAlign: 'center', fontWeight: '600' }}>6</td>
                  <td></td>
                </tr>
                <tr>
                  <td style={{ textAlign: 'center' }}>3</td>
                  <td>아연도앵글</td>
                  <td>50-50-4T</td>
                  <td style={{ textAlign: 'right' }}>2,500</td>
                  <td style={{ textAlign: 'center', fontWeight: '600' }}>10</td>
                  <td></td>
                </tr>
                <tr>
                  <td style={{ textAlign: 'center' }}>4</td>
                  <td>외주 발주 코팅 비비그레스</td>
                  <td></td>
                  <td style={{ textAlign: 'right' }}></td>
                  <td style={{ textAlign: 'center', fontWeight: '600' }}>1</td>
                  <td></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.memo || quote.remarks || quote.notes || '해당 없음'}
          </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' }}>
            문의: {quote.manager || quote.author || '담당자'} | {quote.contact || '031-983-5130'}
          </p>
        </div>
      </div>
    </>
  );
}
