'use client';

/**
 * 납품확인서 미리보기/인쇄 문서
 *
 * 공통 컴포넌트 사용:
 * - DocumentHeader: default 레이아웃 + 4col 결재란
 */

import type { ShipmentDetail } from '../types';
import { DocumentHeader } from '@/components/document-system';

interface DeliveryConfirmationProps {
  data: ShipmentDetail;
}

export function DeliveryConfirmation({ data }: DeliveryConfirmationProps) {
  return (
    <div className="bg-white p-8 max-w-3xl mx-auto text-sm print:p-0 print:max-w-none">
      {/* 문서 헤더 (공통 컴포넌트) */}
      <DocumentHeader
        title="납 품 확 인 서"
        logo={{ text: 'KD', subtext: '경동기업' }}
        layout="default"
        approval={{
          type: '4col',
          showDepartment: true,
          departmentLabels: { writer: '판매/전산', reviewer: '출하', approver: '품질' },
        }}
        className="mb-6"
      />

      {/* 출하 관리부서 */}
      <div className="text-xs text-muted-foreground mb-2">출하 관리부서</div>

      {/* 연락처 */}
      <div className="text-xs mb-4">
        전화 : 031-938-5130 | 팩스 : 02-6911-6315 | 이메일 : kd5130@naver.com
      </div>

      {/* 발주정보 / 납품정보 */}
      <div className="grid grid-cols-2 gap-0 mb-6">
        <div className="border">
          <div className="bg-muted px-3 py-2 font-medium text-center border-b">발주정보</div>
          <table className="w-full text-xs">
            <tbody>
              <tr>
                <td className="border-r border-b px-3 py-2 bg-muted w-24">발주일</td>
                <td className="border-b px-3 py-2">-</td>
              </tr>
              <tr>
                <td className="border-r border-b px-3 py-2 bg-muted">발주처</td>
                <td className="border-b px-3 py-2">{data.customerName}</td>
              </tr>
              <tr>
                <td className="border-r border-b px-3 py-2 bg-muted">담당자</td>
                <td className="border-b px-3 py-2">-</td>
              </tr>
              <tr>
                <td className="border-r border-b px-3 py-2 bg-muted">연락처</td>
                <td className="border-b px-3 py-2">-</td>
              </tr>
              <tr>
                <td className="border-r px-3 py-2 bg-muted">제품 LOT NO.</td>
                <td className="px-3 py-2">{data.lotNo}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div className="border border-l-0">
          <div className="bg-muted px-3 py-2 font-medium text-center border-b">납품정보</div>
          <table className="w-full text-xs">
            <tbody>
              <tr>
                <td className="border-r border-b px-3 py-2 bg-muted w-24">납품일</td>
                <td className="border-b px-3 py-2">{data.scheduledDate}</td>
              </tr>
              <tr>
                <td className="border-r border-b px-3 py-2 bg-muted">현장명</td>
                <td className="border-b px-3 py-2">{data.siteName}</td>
              </tr>
              <tr>
                <td className="border-r border-b px-3 py-2 bg-muted">인수업체명</td>
                <td className="border-b px-3 py-2">현판업</td>
              </tr>
              <tr>
                <td className="border-r border-b px-3 py-2 bg-muted">인수자연락처</td>
                <td className="border-b px-3 py-2">{data.receiverContact}</td>
              </tr>
              <tr>
                <td className="border-r px-3 py-2 bg-muted">납품지 주소</td>
                <td className="px-3 py-2">{data.deliveryAddress}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      {/* 납품 품목 */}
      <h3 className="font-medium mb-2">납품 품목</h3>
      <table className="w-full border-collapse mb-6 text-xs">
        <thead>
          <tr className="bg-muted">
            <th className="border px-2 py-2 text-center w-12">No</th>
            <th className="border px-2 py-2 text-left">품 명</th>
            <th className="border px-2 py-2 text-center w-24">규 격</th>
            <th className="border px-2 py-2 text-center w-16">단위</th>
            <th className="border px-2 py-2 text-center w-16">수량</th>
            <th className="border px-2 py-2 text-center w-20">비고</th>
          </tr>
        </thead>
        <tbody>
          {data.products.map((product, index) => (
            <tr key={product.id}>
              <td className="border px-2 py-2 text-center">{product.no}</td>
              <td className="border px-2 py-2">{product.itemName}</td>
              <td className="border px-2 py-2 text-center">{product.specification}</td>
              <td className="border px-2 py-2 text-center">SET</td>
              <td className="border px-2 py-2 text-center">{product.quantity}</td>
              <td className="border px-2 py-2 text-center">{product.floorUnit}</td>
            </tr>
          ))}
          {/* 빈 행 채우기 (최소 10행) */}
          {Array.from({ length: Math.max(0, 10 - data.products.length) }).map((_, i) => (
            <tr key={`empty-${i}`}>
              <td className="border px-2 py-2 text-center">{data.products.length + i + 1}</td>
              <td className="border px-2 py-2">&nbsp;</td>
              <td className="border px-2 py-2"></td>
              <td className="border px-2 py-2"></td>
              <td className="border px-2 py-2"></td>
              <td className="border px-2 py-2"></td>
            </tr>
          ))}
        </tbody>
      </table>

      {/* 특기사항 */}
      <div className="border p-4 mb-6">
        <h3 className="font-medium mb-2">특기사항</h3>
        <div className="min-h-16 text-xs">
          위 물품을 상기와 같이 납품합니다.
        </div>
      </div>

      {/* 서명 영역 */}
      <div className="grid grid-cols-2 gap-6">
        {/* 납품자 */}
        <div className="border p-4">
          <h3 className="font-medium mb-3 text-center">납 품 자</h3>
          <table className="w-full text-xs">
            <tbody>
              <tr>
                <td className="py-2 w-20">회 사 명</td>
                <td className="py-2 font-medium">경동기업</td>
              </tr>
              <tr>
                <td className="py-2">담 당 자</td>
                <td className="py-2">전진</td>
              </tr>
              <tr>
                <td className="py-2">서명/날인</td>
                <td className="py-2"></td>
              </tr>
            </tbody>
          </table>
        </div>

        {/* 인수자 */}
        <div className="border p-4">
          <h3 className="font-medium mb-3 text-center">인 수 자</h3>
          <table className="w-full text-xs">
            <tbody>
              <tr>
                <td className="py-2 w-20">회 사 명</td>
                <td className="py-2"></td>
              </tr>
              <tr>
                <td className="py-2">담 당 자</td>
                <td className="py-2"></td>
              </tr>
              <tr>
                <td className="py-2">서명/날인</td>
                <td className="py-2"></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      {/* 확인 문구 */}
      <p className="text-center text-xs text-muted-foreground mt-6">
        상기 물품을 정히 인수하였음을 확인합니다.
      </p>
    </div>
  );
}