"use client";

/**
 * 수주서 문서 컴포넌트 (기획서 D1.8 기준 리디자인)
 * - 출고증(ShipmentOrderDocument)과 동일한 자재 섹션 구조
 * - 수주서 전용 헤더 (결재란, 로트번호, 제품코드, 인정번호)
 * - 배차정보/LOT 컬럼 없음
 */

import { useState } from "react";
import { getTodayString } from "@/lib/utils/date";
import { OrderItem } from "../actions";
import { ProductInfo } from "./OrderDocumentModal";
import { ConstructionApprovalTable } from "@/components/document-system";
import { formatNumber } from '@/lib/utils/amount';

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;
}

// ===== 문서 전용 목데이터 (출고증과 동일 구조) =====

const MOCK_SCREEN_ROWS = [
  { no: 1, type: '이(마)', code: 'FA123', openW: 4300, openH: 4300, madeW: 4300, madeH: 3000, guideRail: '백면형', shaft: 5, caseInch: 5, bracket: '500X300 380X180', capacity: 300, finish: 'SUS마감' },
  { no: 2, type: '이(마)', code: 'FA123', openW: 4300, openH: 4300, madeW: 4300, madeH: 3000, guideRail: '백면형', shaft: 5, caseInch: 5, bracket: '500X300 380X180', capacity: 300, finish: 'SUS마감' },
];

const MOCK_STEEL_ROWS = [
  { no: 1, code: 'FA123', openW: 4300, openH: 3000, madeW: 4300, madeH: 3000, guideRail: '백면형', shaft: 5, jointBar: 5, caseInch: 5, bracket: '500X300 380X180', capacity: 300, finish: 'SUS마감' },
  { no: 2, code: 'FA123', openW: 4300, openH: 3000, madeW: 4300, madeH: 3000, guideRail: '백면형', shaft: 5, jointBar: 5, caseInch: 5, bracket: '500X300 380X180', capacity: 300, finish: 'SUS마감' },
];

const MOCK_MOTOR_LEFT = [
  { item: '모터', type: '380V 단상', spec: 'KD-150K', qty: 6 },
  { item: '브라켓트', type: '-', spec: '380X180', qty: 6 },
  { item: '앵글', type: '밑침통 영금', spec: '40*40*380', qty: 4 },
];

const MOCK_MOTOR_RIGHT = [
  { item: '전동개폐기', type: '릴박스', spec: '-', qty: 1 },
  { item: '전동개폐기', type: '매입', spec: '-', qty: 1 },
];

const MOCK_GUIDE_RAIL_ITEMS = [
  { name: '항목명', spec: 'L: 3,000', qty: 22 },
  { name: '하부BASE', spec: '130X80', qty: 22 },
];

const MOCK_GUIDE_SMOKE = { name: '연기차단재(W50)', spec: '2,438', qty: 4 };

const MOCK_CASE_ITEMS = [
  { name: '500X330', spec: 'L: 4,000', qty: 3 },
  { name: '500X330', spec: 'L: 5,000', qty: 4 },
  { name: '상부덮개', spec: '1219X389', qty: 55 },
  { name: '측면부 (마구리)', spec: '500X355', qty: '500X355' },
];

const MOCK_CASE_SMOKE = { name: '연기차단재(W80)', spec: '3,000', qty: 4 };

const MOCK_BOTTOM_SCREEN = [
  { name: '하단마감재', spec: '60X40', l1: 'L: 3,000', q1: 6, name2: '하단마감재', spec2: '60X40', l2: 'L: 4,000', q2: 6 },
  { name: '하단보강엘비', spec: '60X17', l1: 'L: 3,000', q1: 6, name2: '하단보강엘비', spec2: '60X17', l2: 'L: 4,000', q2: 6 },
  { name: '하단보강평철', spec: '-', l1: 'L: 3,000', q1: 6, name2: '하단보강평철', spec2: '-', l2: 'L: 4,000', q2: 6 },
  { name: '하단무게평철', spec: '50X12T', l1: 'L: 3,000', q1: 6, name2: '하단무게평철', spec2: '50X12T', l2: 'L: 4,000', q2: 6 },
];

const MOCK_BOTTOM_STEEL = { spec: '60X40', length: 'L: 3,000', qty: 22 };

const MOCK_SUBSIDIARY = [
  { leftItem: '감기사프트', leftSpec: '4인치 4500', leftQty: 6, rightItem: '각파이프', rightSpec: '6000', rightQty: 4 },
  { leftItem: '조인트바', leftSpec: '300', leftQty: 6, rightItem: '환봉', rightSpec: '3000', rightQty: 5 },
];

// ===== 공통 스타일 =====
const thBase = 'border-r border-gray-400 px-1 py-1';
const tdBase = 'border-r border-gray-300 px-1 py-1';
const tdCenter = `${tdBase} text-center`;
const imgPlaceholder = 'flex items-center justify-center border border-dashed border-gray-300 text-gray-400';

export function SalesOrderDocument({
  documentNumber = "ABC123",
  orderNumber,
  certificationNumber = "-",
  orderDate = getTodayString(),
  client,
  siteName = "-",
  manager = "-",
  managerContact = "-",
  deliveryRequestDate = "-",
  expectedShipDate = "-",
  deliveryMethod = "상차",
  address = "-",
  recipientName = "-",
  recipientContact = "-",
  shutterCount = 0,
  items: _items = [],
  products = [],
  remarks,
}: SalesOrderDocumentProps) {
  const [bottomFinishView, setBottomFinishView] = useState<'screen' | 'steel'>('screen');

  const motorRows = Math.max(MOCK_MOTOR_LEFT.length, MOCK_MOTOR_RIGHT.length);

  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">{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 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">KWS01</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>
                  <td className="bg-gray-100 px-2 py-1 font-medium">담당자 연락처</td>
                  <td className="px-2 py-1">{managerContact}</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>
                  <td className="bg-gray-100 px-2 py-1 font-medium">셔터출수량</td>
                  <td className="px-2 py-1">{shutterCount}개소</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>
                  <td className="bg-gray-100 px-2 py-1 font-medium">배송방법</td>
                  <td className="px-2 py-1">{deliveryMethod}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        {/* 배송지 주소 - 한 줄 병합 */}
        <div className="border-t border-gray-400 flex">
          <div className="bg-gray-100 px-2 py-1 w-20 shrink-0 font-medium">배송지 주소</div>
          <div className="px-2 py-1 flex-1">{address}</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={`${thBase} w-8`} rowSpan={2}>No</th>
                <th className={`${thBase} w-14`} rowSpan={2}>품류</th>
                <th className={`${thBase} w-14`} rowSpan={2}>부호</th>
                <th className={thBase} colSpan={2}>오픈사이즈</th>
                <th className={thBase} colSpan={2}>제작사이즈</th>
                <th className={`${thBase} w-16`} rowSpan={2}>가이드<br />레일</th>
                <th className={`${thBase} w-14`} rowSpan={2}>사프트<br />(인치)</th>
                <th className={`${thBase} w-14`} rowSpan={2}>케이스<br />(인치)</th>
                <th className={thBase} 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={thBase}>가로</th>
                <th className={thBase}>세로</th>
                <th className={thBase}>가로</th>
                <th className={thBase}>세로</th>
                <th className={thBase}>브라켓트</th>
                <th className={thBase}>용량Kg</th>
              </tr>
            </thead>
            <tbody>
              {MOCK_SCREEN_ROWS.map((row) => (
                <tr key={row.no} className="border-b border-gray-300">
                  <td className={tdCenter}>{row.no}</td>
                  <td className={tdCenter}>{row.type}</td>
                  <td className={tdCenter}>{row.code}</td>
                  <td className={tdCenter}>{formatNumber(row.openW)}</td>
                  <td className={tdCenter}>{formatNumber(row.openH)}</td>
                  <td className={tdCenter}>{formatNumber(row.madeW)}</td>
                  <td className={tdCenter}>{formatNumber(row.madeH)}</td>
                  <td className={tdCenter}>{row.guideRail}</td>
                  <td className={tdCenter}>{row.shaft}</td>
                  <td className={tdCenter}>{row.caseInch}</td>
                  <td className={tdCenter}>{row.bracket}</td>
                  <td className={tdCenter}>{row.capacity}</td>
                  <td className="px-1 py-1 text-center">{row.finish}</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={`${thBase} w-8`} rowSpan={2}>No.</th>
                <th className={`${thBase} w-14`} rowSpan={2}>부호</th>
                <th className={thBase} colSpan={2}>오픈사이즈</th>
                <th className={thBase} colSpan={2}>제작사이즈</th>
                <th className={`${thBase} w-16`} rowSpan={2}>가이드<br />레일</th>
                <th className={`${thBase} w-14`} rowSpan={2}>사프트<br />(인치)</th>
                <th className={`${thBase} w-14`} rowSpan={2}>조인트바<br />(규격)</th>
                <th className={`${thBase} w-14`} rowSpan={2}>케이스<br />(인치)</th>
                <th className={thBase} 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={thBase}>가로</th>
                <th className={thBase}>세로</th>
                <th className={thBase}>가로</th>
                <th className={thBase}>세로</th>
                <th className={thBase}>브라켓트</th>
                <th className={thBase}>용량Kg</th>
              </tr>
            </thead>
            <tbody>
              {MOCK_STEEL_ROWS.map((row) => (
                <tr key={row.no} className="border-b border-gray-300">
                  <td className={tdCenter}>{row.no}</td>
                  <td className={tdCenter}>{row.code}</td>
                  <td className={tdCenter}>{formatNumber(row.openW)}</td>
                  <td className={tdCenter}>{formatNumber(row.openH)}</td>
                  <td className={tdCenter}>{formatNumber(row.madeW)}</td>
                  <td className={tdCenter}>{formatNumber(row.madeH)}</td>
                  <td className={tdCenter}>{row.guideRail}</td>
                  <td className={tdCenter}>{row.shaft}</td>
                  <td className={tdCenter}>{row.jointBar}</td>
                  <td className={tdCenter}>{row.caseInch}</td>
                  <td className={tdCenter}>{row.bracket}</td>
                  <td className={tdCenter}>{row.capacity}</td>
                  <td className="px-1 py-1 text-center">{row.finish}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {/* ========== 3. 모터 ========== */}
      <div className="mb-4">
        <p className="font-bold mb-2">3. 모터</p>
        <div className="border border-gray-400">
          <table className="w-full">
            <thead>
              <tr className="bg-gray-100 border-b border-gray-400">
                <th className={`${thBase} w-20`}>항목</th>
                <th className={`${thBase} w-20`}>구분</th>
                <th className={`${thBase} w-20`}>규격</th>
                <th className={`${thBase} w-10`}>수량</th>
                <th className={`${thBase} w-20`}>항목</th>
                <th className={`${thBase} w-20`}>구분</th>
                <th className={`${thBase} w-20`}>규격</th>
                <th className="px-1 py-1 w-10">수량</th>
              </tr>
            </thead>
            <tbody>
              {Array.from({ length: motorRows }).map((_, i) => {
                const left = MOCK_MOTOR_LEFT[i];
                const right = MOCK_MOTOR_RIGHT[i];
                return (
                  <tr key={i} className="border-b border-gray-300">
                    <td className={tdBase}>{left?.item || ''}</td>
                    <td className={tdBase}>{left?.type || ''}</td>
                    <td className={tdBase}>{left?.spec || ''}</td>
                    <td className={tdCenter}>{left?.qty ?? ''}</td>
                    <td className={tdBase}>{right?.item || ''}</td>
                    <td className={tdBase}>{right?.type || ''}</td>
                    <td className={tdBase}>{right?.spec || ''}</td>
                    <td className="px-1 py-1 text-center">{right?.qty ?? ''}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>

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

        {/* 4-1. 가이드레일 */}
        <div className="mb-3">
          <p className="text-[10px] font-medium mb-1">4-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={`${thBase} w-32`}>백면형 (120X70)</th>
                  <th className={`${thBase} w-24`}>항목</th>
                  <th className={`${thBase} w-20`}>규격</th>
                  <th className="px-1 py-1 w-14">수량</th>
                </tr>
              </thead>
              <tbody>
                {MOCK_GUIDE_RAIL_ITEMS.map((item, i) => (
                  <tr key={i} className="border-b border-gray-300">
                    {i === 0 && (
                      <td className={tdCenter} rowSpan={MOCK_GUIDE_RAIL_ITEMS.length}>
                        <div className={`${imgPlaceholder} h-20 w-full`}>IMG</div>
                      </td>
                    )}
                    <td className={tdCenter}>{item.name}</td>
                    <td className={tdCenter}>{item.spec}</td>
                    <td className="px-1 py-1 text-center">{item.qty}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          {/* 연기차단재 */}
          <div className="mt-1 border border-gray-400">
            <table className="w-full">
              <thead>
                <tr className="bg-gray-50 border-b border-gray-400 text-[10px]">
                  <th className={`${thBase} w-32`}>&nbsp;</th>
                  <th className={`${thBase} w-24`}>항목</th>
                  <th className={`${thBase} w-20`}>규격</th>
                  <th className="px-1 py-1 w-14">수량</th>
                </tr>
              </thead>
              <tbody>
                <tr className="border-b border-gray-300">
                  <td className={tdCenter}>
                    <div className={`${imgPlaceholder} h-14 w-full`}>IMG</div>
                  </td>
                  <td className={tdCenter}>{MOCK_GUIDE_SMOKE.name}</td>
                  <td className={tdCenter}>{MOCK_GUIDE_SMOKE.spec}</td>
                  <td className="px-1 py-1 text-center">{MOCK_GUIDE_SMOKE.qty}</td>
                </tr>
              </tbody>
            </table>
          </div>

          <p className="mt-1 text-[10px]">
            <span className="font-medium">* 가이드레일 마감재 <span className="text-red-600 font-bold">양측에</span> 설치</span> - EGI 0.8T + 화이버글라스코팅직물
          </p>
        </div>

        {/* 4-2. 케이스(셔터박스) */}
        <div className="mb-3">
          <p className="text-[10px] font-medium mb-1">4-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={`${thBase} w-32`}>&nbsp;</th>
                  <th className={`${thBase} w-24`}>항목</th>
                  <th className={`${thBase} w-20`}>규격</th>
                  <th className="px-1 py-1 w-14">수량</th>
                </tr>
              </thead>
              <tbody>
                {MOCK_CASE_ITEMS.map((item, i) => (
                  <tr key={i} className="border-b border-gray-300">
                    {i === 0 && (
                      <td className={tdCenter} rowSpan={MOCK_CASE_ITEMS.length}>
                        <div className={`${imgPlaceholder} h-24 w-full`}>IMG</div>
                      </td>
                    )}
                    <td className={tdCenter}>{item.name}</td>
                    <td className={tdCenter}>{item.spec}</td>
                    <td className="px-1 py-1 text-center">{item.qty}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          {/* 연기차단재 */}
          <div className="mt-1 border border-gray-400">
            <table className="w-full">
              <thead>
                <tr className="bg-gray-50 border-b border-gray-400 text-[10px]">
                  <th className={`${thBase} w-32`}>&nbsp;</th>
                  <th className={`${thBase} w-24`}>항목</th>
                  <th className={`${thBase} w-20`}>규격</th>
                  <th className="px-1 py-1 w-14">수량</th>
                </tr>
              </thead>
              <tbody>
                <tr className="border-b border-gray-300">
                  <td className={tdCenter}>
                    <div className={`${imgPlaceholder} h-14 w-full`}>IMG</div>
                  </td>
                  <td className={tdCenter}>{MOCK_CASE_SMOKE.name}</td>
                  <td className={tdCenter}>{MOCK_CASE_SMOKE.spec}</td>
                  <td className="px-1 py-1 text-center">{MOCK_CASE_SMOKE.qty}</td>
                </tr>
              </tbody>
            </table>
          </div>

          <p className="mt-1 text-[10px]">
            <span className="font-medium">* 전면부, 판넬부 <span className="text-red-600 font-bold">양측에</span> 설치</span> - EGI 0.8T + 화이버글라스코팅직물
          </p>
        </div>

        {/* 4-3. 하단마감재 (토글: 스크린 / 절재) */}
        <div className="mb-3">
          <div className="flex items-center gap-2 mb-2">
            <button
              onClick={() => setBottomFinishView('screen')}
              className={`px-3 py-1 text-[10px] font-bold border rounded ${
                bottomFinishView === 'screen'
                  ? 'bg-gray-800 text-white border-gray-800'
                  : 'bg-white text-gray-600 border-gray-400 hover:bg-gray-100'
              }`}
            >
              # 스크린의 경우
            </button>
            <button
              onClick={() => setBottomFinishView('steel')}
              className={`px-3 py-1 text-[10px] font-bold border rounded ${
                bottomFinishView === 'steel'
                  ? 'bg-gray-800 text-white border-gray-800'
                  : 'bg-white text-gray-600 border-gray-400 hover:bg-gray-100'
              }`}
            >
              # 절재의 경우
            </button>
          </div>

          {bottomFinishView === 'screen' ? (
            <>
              <p className="text-[10px] font-medium mb-1">
                4-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={`${thBase} w-20`}>항목</th>
                      <th className={`${thBase} w-14`}>규격</th>
                      <th className={`${thBase} w-16`}>길이</th>
                      <th className={`${thBase} w-10`}>수량</th>
                      <th className={`${thBase} w-20`}>항목</th>
                      <th className={`${thBase} w-14`}>규격</th>
                      <th className={`${thBase} w-16`}>길이</th>
                      <th className="px-1 py-1 w-10">수량</th>
                    </tr>
                  </thead>
                  <tbody>
                    {MOCK_BOTTOM_SCREEN.map((row, i) => (
                      <tr key={i} className="border-b border-gray-300">
                        <td className={tdBase}>{row.name}</td>
                        <td className={tdCenter}>{row.spec}</td>
                        <td className={tdCenter}>{row.l1}</td>
                        <td className={tdCenter}>{row.q1}</td>
                        <td className={tdBase}>{row.name2}</td>
                        <td className={tdCenter}>{row.spec2}</td>
                        <td className={tdCenter}>{row.l2}</td>
                        <td className="px-1 py-1 text-center">{row.q2}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </>
          ) : (
            <>
              <p className="text-[10px] font-medium mb-1">
                4-3. 하단마감재 -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={`${thBase} w-32`}>하단마감재</th>
                      <th className={`${thBase} w-14`}>규격</th>
                      <th className={`${thBase} w-16`}>길이</th>
                      <th className="px-1 py-1 w-10">수량</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr className="border-b border-gray-300">
                      <td className={tdCenter}>
                        <div className={`${imgPlaceholder} h-16 w-full`}>IMG</div>
                      </td>
                      <td className={tdCenter}>{MOCK_BOTTOM_STEEL.spec}</td>
                      <td className={tdCenter}>{MOCK_BOTTOM_STEEL.length}</td>
                      <td className="px-1 py-1 text-center">{MOCK_BOTTOM_STEEL.qty}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </>
          )}
        </div>
      </div>

      {/* ========== 5. 부자재 ========== */}
      <div className="mb-4">
        <p className="font-bold mb-2">5. 부자재</p>
        <div className="border border-gray-400">
          <table className="w-full">
            <thead>
              <tr className="bg-gray-100 border-b border-gray-400">
                <th className={`${thBase} w-24`}>항목</th>
                <th className={`${thBase} w-20`}>규격</th>
                <th className={`${thBase} w-10`}>수량</th>
                <th className={`${thBase} w-24`}>항목</th>
                <th className={`${thBase} w-20`}>규격</th>
                <th className="px-1 py-1 w-10">수량</th>
              </tr>
            </thead>
            <tbody>
              {MOCK_SUBSIDIARY.map((row, i) => (
                <tr key={i} className="border-b border-gray-300">
                  <td className={tdBase}>{row.leftItem}</td>
                  <td className={tdCenter}>{row.leftSpec}</td>
                  <td className={tdCenter}>{row.leftQty}</td>
                  <td className={tdBase}>{row.rightItem}</td>
                  <td className={tdCenter}>{row.rightSpec}</td>
                  <td className="px-1 py-1 text-center">{row.rightQty}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </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>
  );
}