sam-react-prod/src/components/outbound/ShipmentManagement/documents/ShipmentOrderDocument.tsx

'use client';

/**
 * 출고 문서 공통 컴포넌트 (수주서 레이아웃 기반)
 * - 출고증, 납품확인서에서 제목만 변경하여 사용
 * - 수주서(SalesOrderDocument)와 동일한 레이아웃
 */

import type { ShipmentDetail } from '../types';
import { DELIVERY_METHOD_LABELS } from '../types';
import { ConstructionApprovalTable } from '@/components/document-system';

interface ShipmentOrderDocumentProps {
  title: string;
  data: ShipmentDetail;
  showDispatchInfo?: boolean;
}

export function ShipmentOrderDocument({ title, data, showDispatchInfo = false }: ShipmentOrderDocumentProps) {
  // 스크린 제품 필터링 (productGroups 기반)
  const screenProducts = data.productGroups.filter(g =>
    g.productName?.includes('스크린') ||
    g.productName?.includes('방화') ||
    g.productName?.includes('셔터')
  );

  // 전체 부품 목록
  const allParts = [
    ...data.productGroups.flatMap(g => g.parts),
    ...data.otherParts,
  ];

  // 모터 아이템 필터링
  const motorItems = allParts.filter(part =>
    part.itemName?.includes('모터')
  );

  // 브라켓 아이템 필터링
  const bracketItems = allParts.filter(part =>
    part.itemName?.includes('브라켓')
  );

  // 가이드레일 아이템 필터링
  const guideRailItems = allParts.filter(part =>
    part.itemName?.includes('가이드') ||
    part.itemName?.includes('레일')
  );

  // 케이스 아이템 필터링
  const caseItems = allParts.filter(part =>
    part.itemName?.includes('케이스') ||
    part.itemName?.includes('셔터박스')
  );

  // 하단마감재 아이템 필터링
  const bottomFinishItems = allParts.filter(part =>
    part.itemName?.includes('하단') ||
    part.itemName?.includes('마감')
  );

  const deliveryMethodLabel = DELIVERY_METHOD_LABELS[data.deliveryMethod] || '-';
  const fullAddress = [data.address, data.addressDetail].filter(Boolean).join(' ') || data.deliveryAddress || '-';

  return (
    <div className="bg-white p-8 min-h-full text-[11px]">
      {/* 헤더: 제목 (좌측) + 결재란 (우측) */}
      <div className="flex justify-between items-start mb-4">
        <div>
          <h1 className="text-2xl font-bold tracking-widest mb-2">{title}</h1>
          <div className="text-[10px] space-y-1">
            <div className="flex gap-4">
              <span>문서번호: <strong>{data.shipmentNo}</strong></span>
              <span>작성일자: <strong>{data.scheduledDate}</strong></span>
            </div>
          </div>
        </div>

        {/* 결재란 (우측) */}
        <ConstructionApprovalTable
          approvers={{ writer: { name: '홍길동' } }}
        />
      </div>

      {/* 상품명 / 제품명 / 로트번호 / 인정번호 */}
      <table className="border border-gray-400 w-full mb-3 text-[10px]">
        <tbody>
          <tr>
            <td className="bg-gray-100 px-2 py-1 font-medium border-r border-gray-400 whitespace-nowrap">상품명</td>
            <td className="px-2 py-1 border-r border-gray-400">{data.productGroups[0]?.productName || '-'}</td>
            <td className="bg-gray-100 px-2 py-1 font-medium border-r border-gray-400 whitespace-nowrap">제품명</td>
            <td className="px-2 py-1 border-r border-gray-400">{data.products[0]?.itemName || '-'}</td>
            <td className="bg-gray-100 px-2 py-1 font-medium border-r border-gray-400 whitespace-nowrap">로트번호</td>
            <td className="px-2 py-1 border-r border-gray-400">{data.lotNo}</td>
            <td className="bg-gray-100 px-2 py-1 font-medium border-r border-gray-400 whitespace-nowrap">인정번호</td>
            <td className="px-2 py-1">-</td>
          </tr>
        </tbody>
      </table>

      {/* 3열 섹션: 신청업체 | 신청내용 | 납품정보 */}
      <div className="border border-gray-400 mb-4">
        <div className="grid grid-cols-3">
          {/* 신청업체 */}
          <div className="border-r border-gray-400">
            <div className="bg-gray-200 text-center py-1 font-bold border-b border-gray-400">신청업체</div>
            <table className="w-full">
              <tbody>
                <tr className="border-b border-gray-300">
                  <td className="bg-gray-100 px-2 py-1 w-20 font-medium">수주일</td>
                  <td className="px-2 py-1">{data.scheduledDate}</td>
                </tr>
                <tr className="border-b border-gray-300">
                  <td className="bg-gray-100 px-2 py-1 font-medium">업체명</td>
                  <td className="px-2 py-1">{data.customerName}</td>
                </tr>
                <tr className="border-b border-gray-300">
                  <td className="bg-gray-100 px-2 py-1 font-medium">수주 담당자</td>
                  <td className="px-2 py-1">{data.registrant || '-'}</td>
                </tr>
                <tr className="border-b border-gray-300">
                  <td className="bg-gray-100 px-2 py-1 font-medium">담당자 연락처</td>
                  <td className="px-2 py-1">{data.driverContact || '-'}</td>
                </tr>
                <tr>
                  <td className="bg-gray-100 px-2 py-1 font-medium">배송지 주소</td>
                  <td className="px-2 py-1">{fullAddress}</td>
                </tr>
              </tbody>
            </table>
          </div>

          {/* 신청내용 */}
          <div className="border-r border-gray-400">
            <div className="bg-gray-200 text-center py-1 font-bold border-b border-gray-400">신청내용</div>
            <table className="w-full">
              <tbody>
                <tr className="border-b border-gray-300">
                  <td className="bg-gray-100 px-2 py-1 w-20 font-medium">현장명</td>
                  <td className="px-2 py-1">{data.siteName}</td>
                </tr>
                <tr className="border-b border-gray-300">
                  <td className="bg-gray-100 px-2 py-1 font-medium">납기요청일</td>
                  <td className="px-2 py-1">{data.scheduledDate}</td>
                </tr>
                <tr className="border-b border-gray-300">
                  <td className="bg-gray-100 px-2 py-1 font-medium">출고일</td>
                  <td className="px-2 py-1">{data.shipmentDate || data.scheduledDate}</td>
                </tr>
                <tr className="border-b border-gray-300">
                  <td className="bg-gray-100 px-2 py-1 font-medium">셔터출수량</td>
                  <td className="px-2 py-1">{data.productGroups.length}개소</td>
                </tr>
                <tr>
                  <td className="bg-gray-100 px-2 py-1 font-medium">&nbsp;</td>
                  <td className="px-2 py-1">&nbsp;</td>
                </tr>
              </tbody>
            </table>
          </div>

          {/* 납품정보 */}
          <div>
            <div className="bg-gray-200 text-center py-1 font-bold border-b border-gray-400">납품정보</div>
            <table className="w-full">
              <tbody>
                <tr className="border-b border-gray-300">
                  <td className="bg-gray-100 px-2 py-1 w-20 font-medium">현장명</td>
                  <td className="px-2 py-1">{data.siteName}</td>
                </tr>
                <tr className="border-b border-gray-300">
                  <td className="bg-gray-100 px-2 py-1 font-medium">인수담당자</td>
                  <td className="px-2 py-1">{data.receiver || '-'}</td>
                </tr>
                <tr className="border-b border-gray-300">
                  <td className="bg-gray-100 px-2 py-1 font-medium">인수자연락처</td>
                  <td className="px-2 py-1">{data.receiverContact || '-'}</td>
                </tr>
                <tr className="border-b border-gray-300">
                  <td className="bg-gray-100 px-2 py-1 font-medium">배송방법</td>
                  <td className="px-2 py-1">{deliveryMethodLabel}</td>
                </tr>
                <tr>
                  <td className="bg-gray-100 px-2 py-1 font-medium">&nbsp;</td>
                  <td className="px-2 py-1">&nbsp;</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>

      {/* 배차정보 (출고증에서만 표시) */}
      {showDispatchInfo && (() => {
        const dispatch = data.vehicleDispatches[0];
        return (
          <div className="border border-gray-400 mb-4">
            <div className="bg-gray-200 text-center py-1 font-bold border-b border-gray-400">배차정보</div>
            <table className="w-full">
              <tbody>
                <tr className="border-b border-gray-300">
                  <td className="bg-gray-100 px-1 py-1 w-[1%] font-medium border-r border-gray-300 whitespace-nowrap">물류업체</td>
                  <td className="px-2 py-1 border-r border-gray-300">{dispatch?.logisticsCompany || data.logisticsCompany || '-'}</td>
                  <td className="bg-gray-100 px-1 py-1 w-[1%] font-medium border-r border-gray-300 whitespace-nowrap">입차일시</td>
                  <td className="px-2 py-1" colSpan={3}>{dispatch?.arrivalDateTime || '-'}</td>
                </tr>
                <tr className="border-b border-gray-300">
                  <td className="bg-gray-100 px-1 py-1 w-[1%] font-medium border-r border-gray-300 whitespace-nowrap">톤수</td>
                  <td className="px-2 py-1 border-r border-gray-300">{dispatch?.tonnage || data.vehicleTonnage || '-'}</td>
                  <td className="bg-gray-100 px-1 py-1 w-[1%] font-medium border-r border-gray-300 whitespace-nowrap">차량번호</td>
                  <td className="px-2 py-1 border-r border-gray-300">{dispatch?.vehicleNo || data.vehicleNo || '-'}</td>
                  <td className="bg-gray-100 px-1 py-1 w-[1%] font-medium border-r border-gray-300 whitespace-nowrap">기사연락처</td>
                  <td className="px-2 py-1 whitespace-nowrap">{dispatch?.driverContact || data.driverContact || '-'}</td>
                </tr>
                <tr>
                  <td className="bg-gray-100 px-1 py-1 w-[1%] font-medium border-r border-gray-300 whitespace-nowrap">비고</td>
                  <td className="px-2 py-1" colSpan={5}>{dispatch?.remarks || '-'}</td>
                </tr>
              </tbody>
            </table>
          </div>
        );
      })()}

      <p className="text-[10px] mb-4">아래와 같이 주문하오니 품질 및 납기일을 준수하여 주시기 바랍니다.</p>

      {/* 1. 스크린 테이블 */}
      <div className="mb-4">
        <p className="font-bold mb-2">1. 스크린</p>
        <div className="border border-gray-400">
          <table className="w-full">
            <thead>
              <tr className="bg-gray-100 border-b border-gray-400">
                <th className="border-r border-gray-400 px-1 py-1 w-8" rowSpan={2}>No</th>
                <th className="border-r border-gray-400 px-1 py-1 w-16" rowSpan={2}>품류</th>
                <th className="border-r border-gray-400 px-1 py-1 w-14" rowSpan={2}>부호</th>
                <th className="border-r border-gray-400 px-1 py-1" colSpan={2}>오픈사이즈</th>
                <th className="border-r border-gray-400 px-1 py-1" colSpan={2}>제작사이즈</th>
                <th className="border-r border-gray-400 px-1 py-1 w-24" rowSpan={2}>가이드레일<br/>유형</th>
                <th className="border-r border-gray-400 px-1 py-1 w-14" rowSpan={2}>샤프트<br/>(인치)</th>
                <th className="border-r border-gray-400 px-1 py-1 w-14" rowSpan={2}>케이스<br/>(인치)</th>
                <th className="border-r border-gray-400 px-1 py-1" colSpan={2}>모터</th>
                <th className="px-1 py-1 w-16" rowSpan={2}>마감</th>
              </tr>
              <tr className="bg-gray-50 border-b border-gray-400 text-[9px]">
                <th className="border-r border-gray-400 px-1">가로</th>
                <th className="border-r border-gray-400 px-1">세로</th>
                <th className="border-r border-gray-400 px-1">가로</th>
                <th className="border-r border-gray-400 px-1">세로</th>
                <th className="border-r border-gray-400 px-1">브라켓트</th>
                <th className="border-r border-gray-400 px-1">용량Kg</th>
              </tr>
            </thead>
            <tbody>
              {screenProducts.length > 0 ? (
                screenProducts.map((group, index) => {
                  // specification에서 가로x세로 파싱 (예: "2000 x 2500 mm")
                  const specMatch = group.specification?.match(/(\d+)\s*[xX×]\s*(\d+)/);
                  const width = specMatch ? specMatch[1] : '-';
                  const height = specMatch ? specMatch[2] : '-';

                  return (
                    <tr key={group.id} className="border-b border-gray-300">
                      <td className="border-r border-gray-300 px-1 py-1 text-center">{index + 1}</td>
                      <td className="border-r border-gray-300 px-1 py-1 text-center">{group.productName || '-'}</td>
                      <td className="border-r border-gray-300 px-1 py-1 text-center">-</td>
                      <td className="border-r border-gray-300 px-1 py-1 text-center">{width}</td>
                      <td className="border-r border-gray-300 px-1 py-1 text-center">{height}</td>
                      <td className="border-r border-gray-300 px-1 py-1 text-center">{width}</td>
                      <td className="border-r border-gray-300 px-1 py-1 text-center">{height}</td>
                      <td className="border-r border-gray-300 px-1 py-1 text-center text-[9px]">백면형<br/>(120X70)</td>
                      <td className="border-r border-gray-300 px-1 py-1 text-center">5</td>
                      <td className="border-r border-gray-300 px-1 py-1 text-center">5</td>
                      <td className="border-r border-gray-300 px-1 py-1 text-center">380X180</td>
                      <td className="border-r border-gray-300 px-1 py-1 text-center">300</td>
                      <td className="px-1 py-1 text-center">SUS마감</td>
                    </tr>
                  );
                })
              ) : (
                <tr>
                  <td colSpan={13} className="px-2 py-3 text-center text-gray-400">
                    등록된 스크린 제품이 없습니다
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>

      {/* 2. 모터 테이블 */}
      <div className="mb-4">
        <p className="font-bold mb-2">2. 모터</p>
        <div className="border border-gray-400">
          <table className="w-full">
            <thead>
              <tr className="bg-gray-100 border-b border-gray-400">
                <th className="border-r border-gray-400 px-2 py-1 w-28">항목</th>
                <th className="border-r border-gray-400 px-2 py-1 w-20">구분</th>
                <th className="border-r border-gray-400 px-2 py-1 w-28">규격</th>
                <th className="border-r border-gray-400 px-2 py-1 w-14">수량</th>
                <th className="border-r border-gray-400 px-2 py-1 w-28">항목</th>
                <th className="border-r border-gray-400 px-2 py-1 w-20">구분</th>
                <th className="border-r border-gray-400 px-2 py-1 w-28">규격</th>
                <th className="px-2 py-1 w-14">수량</th>
              </tr>
            </thead>
            <tbody>
              {(motorItems.length > 0 || bracketItems.length > 0) ? (
                <>
                  {/* 모터 행 */}
                  <tr className="border-b border-gray-300">
                    <td className="border-r border-gray-300 px-2 py-1">모터(380V 단상)</td>
                    <td className="border-r border-gray-300 px-2 py-1">모터 용량</td>
                    <td className="border-r border-gray-300 px-2 py-1">{motorItems[0]?.specification || 'KD-150K'}</td>
                    <td className="border-r border-gray-300 px-2 py-1 text-center">{motorItems[0]?.quantity ?? '-'}</td>
                    <td className="border-r border-gray-300 px-2 py-1">모터(380V 단상)</td>
                    <td className="border-r border-gray-300 px-2 py-1">모터 용량</td>
                    <td className="border-r border-gray-300 px-2 py-1">{motorItems[1]?.specification || 'KD-150K'}</td>
                    <td className="px-2 py-1 text-center">{motorItems[1]?.quantity ?? '-'}</td>
                  </tr>
                  {/* 브라켓트 행 */}
                  <tr className="border-b border-gray-300">
                    <td className="border-r border-gray-300 px-2 py-1">브라켓트</td>
                    <td className="border-r border-gray-300 px-2 py-1">브라켓트</td>
                    <td className="border-r border-gray-300 px-2 py-1">{bracketItems[0]?.specification || '380X180 [2-4"]'}</td>
                    <td className="border-r border-gray-300 px-2 py-1 text-center">{bracketItems[0]?.quantity ?? '-'}</td>
                    <td className="border-r border-gray-300 px-2 py-1">브라켓트</td>
                    <td className="border-r border-gray-300 px-2 py-1">브라켓트</td>
                    <td className="border-r border-gray-300 px-2 py-1">{bracketItems[1]?.specification || '380X180 [2-4"]'}</td>
                    <td className="px-2 py-1 text-center">{bracketItems[1]?.quantity ?? '-'}</td>
                  </tr>
                  {/* 브라켓트 추가 행 */}
                  <tr className="border-b border-gray-300">
                    <td className="border-r border-gray-300 px-2 py-1">브라켓트</td>
                    <td className="border-r border-gray-300 px-2 py-1">밑침통 영금</td>
                    <td className="border-r border-gray-300 px-2 py-1">{bracketItems[2]?.specification || '∠40-40 L380'}</td>
                    <td className="border-r border-gray-300 px-2 py-1 text-center">{bracketItems[2]?.quantity ?? '-'}</td>
                    <td className="border-r border-gray-300 px-2 py-1"></td>
                    <td className="border-r border-gray-300 px-2 py-1"></td>
                    <td className="border-r border-gray-300 px-2 py-1"></td>
                    <td className="px-2 py-1 text-center"></td>
                  </tr>
                </>
              ) : (
                <tr>
                  <td colSpan={8} className="px-2 py-3 text-center text-gray-400">
                    등록된 모터/브라켓 품목이 없습니다
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>

      {/* 3. 절곡물 */}
      <div className="mb-4">
        <p className="font-bold mb-2">3. 절곡물</p>

        {/* 3-1. 가이드레일 */}
        <div className="mb-3">
          <p className="text-[10px] font-medium mb-1">3-1. 가이드레일 - EGI 1.5ST + 마감재 EGI 1.1ST + 별도마감재 SUS 1.1ST</p>
          <div className="border border-gray-400">
            <table className="w-full">
              <thead>
                <tr className="bg-gray-100 border-b border-gray-400">
                  <th className="border-r border-gray-400 px-2 py-1 w-24">백면형 (120X70)</th>
                  <th className="border-r border-gray-400 px-2 py-1 w-16">길이</th>
                  <th className="border-r border-gray-400 px-2 py-1 w-12">수량</th>
                  <th className="border-r border-gray-400 px-2 py-1 w-24">측면형 (120X120)</th>
                  <th className="border-r border-gray-400 px-2 py-1 w-16">길이</th>
                  <th className="px-2 py-1 w-12">수량</th>
                </tr>
              </thead>
              <tbody>
                {guideRailItems.length > 0 ? (
                  <>
                    <tr className="border-b border-gray-300">
                      <td className="border-r border-gray-300 px-2 py-1 text-center text-gray-400" rowSpan={4}>
                        <div className="flex items-center justify-center h-20 border border-dashed border-gray-300">
                          IMG
                        </div>
                      </td>
                      <td className="border-r border-gray-300 px-2 py-1 text-center">L: 3,000</td>
                      <td className="border-r border-gray-300 px-2 py-1 text-center">{guideRailItems[0]?.quantity ?? 22}</td>
                      <td className="border-r border-gray-300 px-2 py-1 text-center text-gray-400" rowSpan={4}>
                        <div className="flex items-center justify-center h-20 border border-dashed border-gray-300">
                          IMG
                        </div>
                      </td>
                      <td className="border-r border-gray-300 px-2 py-1 text-center">L: 3,000</td>
                      <td className="px-2 py-1 text-center">{guideRailItems[1]?.quantity ?? 22}</td>
                    </tr>
                    <tr className="border-b border-gray-300">
                      <td className="border-r border-gray-300 px-2 py-1 text-center text-[9px]">하부BASE<br/>[130X80]</td>
                      <td className="border-r border-gray-300 px-2 py-1 text-center">22</td>
                      <td className="border-r border-gray-300 px-2 py-1 text-center"></td>
                      <td className="px-2 py-1 text-center"></td>
                    </tr>
                    <tr className="border-b border-gray-300">
                      <td className="border-r border-gray-300 px-2 py-1 text-center"></td>
                      <td className="border-r border-gray-300 px-2 py-1 text-center"></td>
                      <td className="border-r border-gray-300 px-2 py-1 text-center"></td>
                      <td className="px-2 py-1 text-center"></td>
                    </tr>
                    <tr className="border-b border-gray-300">
                      <td className="border-r border-gray-300 px-2 py-1 text-center bg-gray-100">제품명</td>
                      <td className="border-r border-gray-300 px-2 py-1 text-center">KSS01</td>
                      <td className="border-r border-gray-300 px-2 py-1 text-center bg-gray-100">제품명</td>
                      <td className="px-2 py-1 text-center">KSS01</td>
                    </tr>
                  </>
                ) : (
                  <tr>
                    <td colSpan={6} className="px-2 py-2 text-center text-gray-400">
                      등록된 가이드레일이 없습니다
                    </td>
                  </tr>
                )}
              </tbody>
            </table>
          </div>

          {/* 연기차단재 정보 */}
          <div className="mt-2 border border-gray-400">
            <table className="w-full text-[10px]">
              <tbody>
                <tr>
                  <td className="border-r border-gray-300 px-2 py-1 w-32" rowSpan={2}>
                    <div className="font-medium">연기차단재(W50)</div>
                    <div>• 가이드레일 마감재</div>
                    <div className="text-red-600 font-medium">양측에 설치</div>
                  </td>
                  <td className="border-r border-gray-300 px-2 py-1 w-32" rowSpan={2}>
                    <div>EGI 0.8T +</div>
                    <div>화이버글라스코팅직물</div>
                  </td>
                  <td className="border-r border-gray-300 px-2 py-1 text-center text-gray-400 w-20" rowSpan={2}>
                    <div className="flex items-center justify-center h-10 border border-dashed border-gray-300">
                      IMG
                    </div>
                  </td>
                  <td className="border-r border-gray-300 px-2 py-1 bg-gray-100">규격</td>
                  <td className="border-r border-gray-300 px-2 py-1 text-center">3,000</td>
                  <td className="px-2 py-1 text-center">4,000</td>
                </tr>
                <tr>
                  <td className="border-r border-gray-300 px-2 py-1 bg-gray-100">수량</td>
                  <td className="border-r border-gray-300 px-2 py-1 text-center">44</td>
                  <td className="px-2 py-1 text-center">1</td>
                </tr>
              </tbody>
            </table>
          </div>

          <div className="mt-2 text-[10px]">
            <span className="font-medium">• 별도 추가사항</span>
          </div>
        </div>

        {/* 3-2. 케이스(셔터박스) */}
        <div className="mb-3">
          <p className="text-[10px] font-medium mb-1">3-2. 케이스(셔터박스) - EGI 1.5ST</p>
          <div className="border border-gray-400">
            <table className="w-full">
              <thead>
                <tr className="bg-gray-100 border-b border-gray-400">
                  <th className="border-r border-gray-400 px-2 py-1 w-24">&nbsp;</th>
                  <th className="border-r border-gray-400 px-2 py-1 w-24">규격</th>
                  <th className="border-r border-gray-400 px-2 py-1 w-20">길이</th>
                  <th className="border-r border-gray-400 px-2 py-1 w-12">수량</th>
                  <th className="border-r border-gray-400 px-2 py-1 w-20">측면부</th>
                  <th className="px-2 py-1 w-12">수량</th>
                </tr>
              </thead>
              <tbody>
                {caseItems.length > 0 ? (
                  <tr className="border-b border-gray-300">
                    <td className="border-r border-gray-300 px-2 py-1 text-center text-gray-400" rowSpan={3}>
                      <div className="flex items-center justify-center h-16 border border-dashed border-gray-300">
                        IMG
                      </div>
                    </td>
                    <td className="border-r border-gray-300 px-2 py-1 text-center text-[9px]">
                      500X330<br/>(150X300,<br/>400K원)
                    </td>
                    <td className="border-r border-gray-300 px-2 py-1 text-center text-[9px]">
                      L: 4,000<br/>L: 5,000<br/>상부덮개<br/>(1219X389)
                    </td>
                    <td className="border-r border-gray-300 px-2 py-1 text-center text-[9px]">
                      3<br/>4<br/>55
                    </td>
                    <td className="border-r border-gray-300 px-2 py-1 text-center">500X355</td>
                    <td className="px-2 py-1 text-center">22</td>
                  </tr>
                ) : (
                  <tr>
                    <td colSpan={6} className="px-2 py-2 text-center text-gray-400">
                      등록된 케이스가 없습니다
                    </td>
                  </tr>
                )}
              </tbody>
            </table>
          </div>

          {/* 연기차단재 정보 */}
          <div className="mt-2 border border-gray-400">
            <table className="w-full text-[10px]">
              <tbody>
                <tr>
                  <td className="border-r border-gray-300 px-2 py-1 w-32" rowSpan={2}>
                    <div className="font-medium">연기차단재(W50)</div>
                    <div>• 판넬부, 전면부</div>
                    <div className="text-red-600 font-medium">감싸에 설치</div>
                  </td>
                  <td className="border-r border-gray-300 px-2 py-1 w-32" rowSpan={2}>
                    <div>EGI 0.8T +</div>
                    <div>화이버글라스코팅직물</div>
                  </td>
                  <td className="border-r border-gray-300 px-2 py-1 text-center text-gray-400 w-20" rowSpan={2}>
                    <div className="flex items-center justify-center h-10 border border-dashed border-gray-300">
                      IMG
                    </div>
                  </td>
                  <td className="border-r border-gray-300 px-2 py-1 bg-gray-100">규격</td>
                  <td className="px-2 py-1 text-center">3,000</td>
                </tr>
                <tr>
                  <td className="border-r border-gray-300 px-2 py-1 bg-gray-100">수량</td>
                  <td className="px-2 py-1 text-center">44</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        {/* 3-3. 하단마감재 */}
        <div className="mb-3">
          <p className="text-[10px] font-medium mb-1">3-3. 하단마감재 - 하단마감재(EGI 1.5ST) + 하단보강앨비(EGI 1.5ST) + 하단 보강철(EGI 1.1ST) + 하단 무게형 철(50X12T)</p>
          <div className="border border-gray-400">
            <table className="w-full">
              <thead>
                <tr className="bg-gray-100 border-b border-gray-400">
                  <th className="border-r border-gray-400 px-2 py-1 w-20">구성품</th>
                  <th className="border-r border-gray-400 px-2 py-1 w-16">길이</th>
                  <th className="border-r border-gray-400 px-2 py-1 w-12">수량</th>
                  <th className="border-r border-gray-400 px-2 py-1 w-20">구성품</th>
                  <th className="border-r border-gray-400 px-2 py-1 w-16">길이</th>
                  <th className="border-r border-gray-400 px-2 py-1 w-12">수량</th>
                  <th className="border-r border-gray-400 px-2 py-1 w-20">구성품</th>
                  <th className="border-r border-gray-400 px-2 py-1 w-16">길이</th>
                  <th className="px-2 py-1 w-12">수량</th>
                </tr>
              </thead>
              <tbody>
                {bottomFinishItems.length > 0 ? (
                  <tr className="border-b border-gray-300">
                    <td className="border-r border-gray-300 px-2 py-1 text-[9px]">하단마감재<br/>(60X40)</td>
                    <td className="border-r border-gray-300 px-2 py-1 text-center">L: 4,000</td>
                    <td className="border-r border-gray-300 px-2 py-1 text-center">11</td>
                    <td className="border-r border-gray-300 px-2 py-1 text-[9px]">하단보강<br/>(60X17)</td>
                    <td className="border-r border-gray-300 px-2 py-1 text-center">L: 4,000</td>
                    <td className="border-r border-gray-300 px-2 py-1 text-center">11</td>
                    <td className="border-r border-gray-300 px-2 py-1 text-[9px]">하단무게<br/>[50X12T]</td>
                    <td className="border-r border-gray-300 px-2 py-1 text-center">L: 4,000</td>
                    <td className="px-2 py-1 text-center">11</td>
                  </tr>
                ) : (
                  <tr>
                    <td colSpan={9} className="px-2 py-2 text-center text-gray-400">
                      등록된 하단마감재가 없습니다
                    </td>
                  </tr>
                )}
              </tbody>
            </table>
          </div>
        </div>
      </div>

      {/* 특이사항 */}
      {data.remarks && (
        <div className="mb-4">
          <p className="font-bold mb-2">【 특이사항 】</p>
          <div className="border border-gray-400 p-3 min-h-[40px]">
            {data.remarks}
          </div>
        </div>
      )}
    </div>
  );
}