"use client";

/**
 * 수주서 문서 컴포넌트
 * - 스크린샷 기반 디자인
 * - 제목 좌측, 결재란 우측
 * - 신청업체/신청내용/납품정보 3열 구조
 * - 스크린, 모터, 절곡물 테이블
 */

import { getTodayString } from "@/utils/date";
import { OrderItem } from "../actions";
import { ProductInfo } from "./OrderDocumentModal";
import { ConstructionApprovalTable } from "@/components/document-system";

interface SalesOrderDocumentProps {
  documentNumber?: string;
  orderNumber: string;  // 로트번호
  certificationNumber?: string;  // 인정번호
  orderDate?: string;
  client: string;
  siteName?: string;
  manager?: string;
  managerContact?: string;
  deliveryRequestDate?: string;
  expectedShipDate?: string;
  deliveryMethod?: string;
  address?: string;
  recipientName?: string;
  recipientContact?: string;
  shutterCount?: number;
  fee?: number;
  items?: OrderItem[];
  products?: ProductInfo[];
  remarks?: string;
}

/**
 * 수량 포맷 함수
 */
function formatQuantity(quantity: number, unit?: string): string {
  const countableUnits = ["EA", "SET", "PCS", "개", "세트", "BOX", "ROLL"];
  const upperUnit = (unit || "").toUpperCase();

  if (countableUnits.includes(upperUnit)) {
    return Math.round(quantity).toLocaleString();
  }

  const rounded = Math.round(quantity * 10000) / 10000;
  return rounded.toLocaleString(undefined, {
    minimumFractionDigits: 0,
    maximumFractionDigits: 4
  });
}

export function SalesOrderDocument({
  documentNumber = "ABC123",
  orderNumber,
  certificationNumber = "-",
  orderDate = getTodayString(),
  client,
  siteName = "-",
  manager = "-",
  managerContact = "-",
  deliveryRequestDate = "-",
  expectedShipDate = "-",
  deliveryMethod = "상차",
  address = "-",
  recipientName = "-",
  recipientContact = "-",
  shutterCount = 0,
  items = [],
  products = [],
  remarks,
}: SalesOrderDocumentProps) {
  // 스크린 제품만 필터링
  const screenProducts = products.filter(p =>
    p.productCategory?.includes("스크린") ||
    p.productName?.includes("스크린") ||
    p.productName?.includes("방화") ||
    p.productName?.includes("셔터")
  );

  // 모터 아이템 필터링
  const motorItems = items.filter(item =>
    item.itemName?.toLowerCase().includes("모터") ||
    item.type?.includes("모터") ||
    item.itemCode?.startsWith("MT")
  );

  // 브라켓 아이템 필터링
  const bracketItems = items.filter(item =>
    item.itemName?.includes("브라켓") ||
    item.type?.includes("브라켓")
  );

  // 가이드레일 아이템 필터링
  const guideRailItems = items.filter(item =>
    item.itemName?.includes("가이드") ||
    item.itemName?.includes("레일") ||
    item.type?.includes("가이드")
  );

  // 케이스 아이템 필터링
  const caseItems = items.filter(item =>
    item.itemName?.includes("케이스") ||
    item.itemName?.includes("셔터박스") ||
    item.type?.includes("케이스")
  );

  // 하단마감재 아이템 필터링
  const bottomFinishItems = items.filter(item =>
    item.itemName?.includes("하단") ||
    item.itemName?.includes("마감") ||
    item.type?.includes("하단마감")
  );

  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">수 주 서</h1>
          <div className="text-[10px] space-y-1">
            <div className="flex gap-4">
              <span>문서번호: <strong>{documentNumber}</strong></span>
              <span>작성일자: <strong>{orderDate}</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">{products[0]?.productCategory || "-"}</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">{products[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">{orderNumber}</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">{certificationNumber}</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">{orderDate}</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">{client}</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">{manager}</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">{managerContact}</td>
                </tr>
                <tr>
                  <td className="bg-gray-100 px-2 py-1 font-medium">배송지 주소</td>
                  <td className="px-2 py-1">{address}</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">{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">{deliveryRequestDate}</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">{expectedShipDate}</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">{shutterCount}개소</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">{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">{recipientName}</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">{recipientContact}</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">{deliveryMethod}</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>

      <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((product, index) => (
                  <tr key={index} 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">{product.productCategory || "-"}</td>
                    <td className="border-r border-gray-300 px-1 py-1 text-center">{product.code || "-"}</td>
                    <td className="border-r border-gray-300 px-1 py-1 text-center">{product.openWidth || "-"}</td>
                    <td className="border-r border-gray-300 px-1 py-1 text-center">{product.openHeight || "-"}</td>
                    <td className="border-r border-gray-300 px-1 py-1 text-center">{product.openWidth || "-"}</td>
                    <td className="border-r border-gray-300 px-1 py-1 text-center">{product.openHeight || "-"}</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]?.spec || "KD-150K"}</td>
                    <td className="border-r border-gray-300 px-2 py-1 text-center">{motorItems[0] ? formatQuantity(motorItems[0].quantity, motorItems[0].unit) : "6"}</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]?.spec || "KD-150K"}</td>
                    <td className="px-2 py-1 text-center">{motorItems[1] ? formatQuantity(motorItems[1].quantity, motorItems[1].unit) : "6"}</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]?.spec || "380X180 [2-4\"]"}</td>
                    <td className="border-r border-gray-300 px-2 py-1 text-center">{bracketItems[0] ? formatQuantity(bracketItems[0].quantity, bracketItems[0].unit) : "6"}</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]?.spec || "380X180 [2-4\"]"}</td>
                    <td className="px-2 py-1 text-center">{bracketItems[1] ? formatQuantity(bracketItems[1].quantity, bracketItems[1].unit) : "6"}</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]?.spec || "∠40-40 L380"}</td>
                    <td className="border-r border-gray-300 px-2 py-1 text-center">{bracketItems[2] ? formatQuantity(bracketItems[2].quantity, bracketItems[2].unit) : "44"}</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 ? (
                  <>
                    {/* 1행: L: 3,000 / 22 */}
                    <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">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">22</td>
                    </tr>
                    {/* 2행: 하부BASE */}
                    <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>
                    {/* 3행: 빈 행 */}
                    <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>
                    {/* 4행: 제품명 */}
                    <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>

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