'use client';

/**
 * 하단마감재 섹션
 *
 * ①하단마감재: 3000mm, 4000mm 수량
 * ④별도마감재: SUS마감 시에만 표시
 */

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

interface BottomBarSectionProps {
  bendingInfo: BendingInfoExtended;
  mapping: MaterialMapping;
  lotNoMap?: Record<string, string>;
  bendingImages?: Record<string, string>;
}

export function BottomBarSection({ bendingInfo, mapping, lotNoMap, bendingImages }: BottomBarSectionProps) {
  const rows = buildBottomBarRows(bendingInfo.bottomBar, mapping, bendingInfo.productCode);
  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">
        2. 하단마감재
      </div>

      <div className="flex gap-3">
        {/* 좌측: 이미지 */}
        <div className="flex-shrink-0 w-48">
          <img
            src={getBendingImageUrl('bottombar', bendingInfo.productCode, 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">
                    {lookupLotNo(lotNoMap, row.lotPrefix, 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>
  );
}
