'use client';

/**
 * 출고 문서 공통 컴포넌트 (기획서 D1.8 기준 리디자인)
 * - 출고증: showDispatchInfo + showLotColumn
 * - 납품확인서: 기본값 (배차정보 없음, LOT 컬럼 없음)
 */

import { useState } from 'react';
import type { ShipmentDetail } from '../types';
import { DELIVERY_METHOD_LABELS } from '../types';
import { ConstructionApprovalTable } from '@/components/document-system';
import { formatNumber } from '@/lib/utils/amount';

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

// ===== 문서 전용 목데이터 =====

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, lot: '123123' },
  { item: '브라켓트', type: '-', spec: '380X180', qty: 6, lot: '123123' },
  { item: '앵글', type: '밑침통 영금', spec: '40*40*380', qty: 4, lot: '123123' },
];

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

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 ShipmentOrderDocument({ title, data, showDispatchInfo = false, showLotColumn = false }: ShipmentOrderDocumentProps) {
  const [bottomFinishView, setBottomFinishView] = useState<'screen' | 'steel'>('screen');

  const deliveryMethodLabel = DELIVERY_METHOD_LABELS[data.deliveryMethod] || '-';
  const fullAddress = [data.address, data.addressDetail].filter(Boolean).join(' ') || data.deliveryAddress || '-';
  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">{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.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 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">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">ABC1234</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>
                  <td className="bg-gray-100 px-2 py-1 font-medium">담당자 연락처</td>
                  <td className="px-2 py-1">{data.driverContact || '-'}</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>
                  <td className="bg-gray-100 px-2 py-1 font-medium">셔터출수량</td>
                  <td className="px-2 py-1">{data.productGroups.length}개소</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>
                  <td className="bg-gray-100 px-2 py-1 font-medium">배송방법</td>
                  <td className="px-2 py-1">{deliveryMethodLabel}</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">{fullAddress}</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>
        );
      })()}

      {/* ========== 자재 및 철거 내역 헤더 ========== */}
      <div className="bg-gray-800 text-white text-center py-2 font-bold mb-4">
        자재 및 철거 내역
      </div>

      {/* ========== 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>
                {showLotColumn && <th className={`${thBase} w-16`}>입고 LOT</th>}
                <th className={`${thBase} w-20`}>항목</th>
                <th className={`${thBase} w-20`}>구분</th>
                <th className={`${thBase} w-20`}>규격</th>
                <th className={showLotColumn ? `${thBase} w-10` : 'px-1 py-1 w-10'}>수량</th>
                {showLotColumn && <th className="px-1 py-1 w-16">입고 LOT</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>
                    {showLotColumn && <td className={tdCenter}>{left?.lot || ''}</td>}
                    <td className={tdBase}>{right?.item || ''}</td>
                    <td className={tdBase}>{right?.type || ''}</td>
                    <td className={tdBase}>{right?.spec || ''}</td>
                    <td className={showLotColumn ? tdCenter : 'px-1 py-1 text-center'}>{right?.qty ?? ''}</td>
                    {showLotColumn && <td className="px-1 py-1 text-center">{right?.lot || ''}</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>

      {/* ========== 특이사항 ========== */}
      {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>
  );
}
