'use client';

/**
 * 연기차단재 섹션
 *
 * 레일용 [W50]: 길이별 수량 (2438, 3000, 3500, 4000, 4300mm)
 * 케이스용 [W80]: 3000mm 고정
 * 재질: 모두 EGI 0.8T, 폭 26mm
 */

import type { BendingInfoExtended } from './types';
import { buildSmokeBarrierRows, getBendingImageUrl, fmt, fmtWeight, lookupLotNo } from './utils';

interface SmokeBarrierSectionProps {
  bendingInfo: BendingInfoExtended;
  lotNoMap?: Record<string, string>;
  bendingImages?: Record<string, string>;
}

export function SmokeBarrierSection({ bendingInfo, lotNoMap, bendingImages }: SmokeBarrierSectionProps) {
  const rows = buildSmokeBarrierRows(bendingInfo.smokeBarrier);
  if (rows.length === 0) return null;

  return (
    <div className="mb-6">
      <div className="bg-gray-800 text-white text-xs font-bold px-3 py-1.5 mb-2">
        4. 연기차단재
      </div>

      <div className="flex gap-3">
        {/* 좌측: 이미지 */}
        <div className="flex-shrink-0 w-48">
          <img
            src={getBendingImageUrl('smokebarrier', '', undefined, bendingImages)}
            alt="연기차단재"
            className="w-full border border-gray-300"
          />
        </div>

        {/* 우측: 테이블 */}
        <div className="flex-1">
          <table className="w-full border-collapse text-xs">
            <thead>
              <tr className="bg-gray-100">
                <th className="border border-gray-400 px-1 py-0.5">파트</th>
                <th className="border border-gray-400 px-1 py-0.5">재질</th>
                <th className="border border-gray-400 px-1 py-0.5">길이</th>
                <th className="border border-gray-400 px-1 py-0.5">수량</th>
                <th className="border border-gray-400 px-1 py-0.5">LOT NO</th>
                <th className="border border-gray-400 px-1 py-0.5">무게(kg)</th>
              </tr>
            </thead>
            <tbody>
              {rows.map((row, idx) => (
                <tr key={idx}>
                  <td className="border border-gray-400 px-1 py-0.5">{row.partName}</td>
                  <td className="border border-gray-400 px-1 py-0.5 text-center">{row.material}</td>
                  <td className="border border-gray-400 px-1 py-0.5 text-center">{fmt(row.length)}</td>
                  <td className="border border-gray-400 px-1 py-0.5 text-center">{fmt(row.quantity)}</td>
                  <td className="border border-gray-400 px-1 py-0.5 text-center">
                    {(() => {
                      // 정확 매칭 (GI-83, GI-54 등)
                      const exact = lotNoMap?.[`BD-${row.lotCode}`];
                      if (exact) return exact;
                      // Fallback: GI prefix로 검색
                      const prefix = row.lotCode.split('-')[0];
                      return lookupLotNo(lotNoMap, prefix, row.length);
                    })()}
                  </td>
                  <td className="border border-gray-400 px-1 py-0.5 text-center">{fmtWeight(row.weight)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}
