'use client';

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

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

interface ShippingSlipProps {
  data: ShipmentDetail;
}

export function ShippingSlip({ data }: ShippingSlipProps) {
  return (
    <div className="bg-white p-8 max-w-4xl mx-auto text-sm print:p-0 print:max-w-none">
      {/* 문서 헤더 (공통 컴포넌트) */}
      <DocumentHeader
        title="출 고 증"
        logo={{ text: 'KD', subtext: '경동기업' }}
        layout="default"
        approval={{
          type: '4col',
          writer: { name: '판매1팀 임', date: '12-20' },
          showDepartment: true,
          departmentLabels: { writer: '판매/전진', reviewer: '출하', approver: '생산관리' },
        }}
        className="mb-6 border-b pb-4"
      />

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

      {/* LOT 및 연락처 정보 */}
      <div className="grid grid-cols-5 gap-2 mb-4 text-xs">
        <div className="border px-2 py-1 bg-muted font-medium">제품 LOT NO.</div>
        <div className="border px-2 py-1">{data.lotNo}</div>
        <div className="border px-2 py-1 col-span-3">
          전화 : 031-938-5130 | 팩스 : 02-6911-6315 | 이메일 : kd5130@naver.com
        </div>
      </div>

      {/* 품목 정보 */}
      <div className="grid grid-cols-5 gap-0 mb-4 text-xs border">
        <div className="border px-2 py-1 bg-muted font-medium">상품명</div>
        <div className="border px-2 py-1">국산철물스크린폴리스페서</div>
        <div className="border px-2 py-1 bg-muted font-medium">제품코드</div>
        <div className="border px-2 py-1">KWE01</div>
        <div className="border px-2 py-1 bg-muted font-medium">단발호</div>
        <div className="border px-2 py-1 col-span-4">FDS-0T523-0117-4</div>
      </div>

      {/* 신청업체 / 신청내용 / 납품정보 */}
      <table className="w-full border-collapse mb-6 text-xs">
        <thead>
          <tr>
            <th className="border px-2 py-1 bg-muted text-center" colSpan={2}>신청업체</th>
            <th className="border px-2 py-1 bg-muted text-center" colSpan={2}>신청내용</th>
            <th className="border px-2 py-1 bg-muted text-center" colSpan={2}>납품정보</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td className="border px-2 py-1 bg-muted">발주일</td>
            <td className="border px-2 py-1">-</td>
            <td className="border px-2 py-1 bg-muted">현장</td>
            <td className="border px-2 py-1">위브 청라</td>
            <td className="border px-2 py-1 bg-muted">인수업체</td>
            <td className="border px-2 py-1">{data.customerName}</td>
          </tr>
          <tr>
            <td className="border px-2 py-1 bg-muted">발주처</td>
            <td className="border px-2 py-1">{data.customerName}</td>
            <td className="border px-2 py-1 bg-muted">납기일정일</td>
            <td className="border px-2 py-1">-</td>
            <td className="border px-2 py-1 bg-muted">인수자연락처</td>
            <td className="border px-2 py-1">{data.receiverContact}</td>
          </tr>
          <tr>
            <td className="border px-2 py-1 bg-muted">발주 담당자</td>
            <td className="border px-2 py-1">-</td>
            <td className="border px-2 py-1 bg-muted">출고일</td>
            <td className="border px-2 py-1">{data.scheduledDate}</td>
            <td className="border px-2 py-1 bg-muted">인수자</td>
            <td className="border px-2 py-1">{data.receiver || '-'}</td>
          </tr>
          <tr>
            <td className="border px-2 py-1 bg-muted">담당자 연락처</td>
            <td className="border px-2 py-1">-</td>
            <td className="border px-2 py-1 bg-muted">세미물류수</td>
            <td className="border px-2 py-1">-</td>
            <td className="border px-2 py-1 bg-muted">출고 방법</td>
            <td className="border px-2 py-1">직접배차 직접</td>
          </tr>
          <tr>
            <td className="border px-2 py-1 bg-muted" colSpan={2}>배송지 주소</td>
            <td className="border px-2 py-1" colSpan={4}>{data.deliveryAddress}</td>
          </tr>
        </tbody>
      </table>

      {/* 1. 부자재 */}
      <div className="mb-4">
        <h3 className="font-medium mb-2">1. 부자재 - 강기샤프트, 라파이프, 앵글</h3>
        <table className="w-full border-collapse text-xs">
          <thead>
            <tr>
              <th className="border px-2 py-1 bg-muted">강기샤프트</th>
              <th className="border px-2 py-1 bg-muted">수량</th>
              <th className="border px-2 py-1 bg-muted">강기샤프트</th>
              <th className="border px-2 py-1 bg-muted">수량</th>
              <th className="border px-2 py-1 bg-muted">라파이프</th>
              <th className="border px-2 py-1 bg-muted">수량</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td className="border px-2 py-1">4인치<br />L : 3,000<br />L : 4,500</td>
              <td className="border px-2 py-1 text-center">1</td>
              <td className="border px-2 py-1">5인치<br />L : 6,000<br />L : 7,000</td>
              <td className="border px-2 py-1 text-center">0</td>
              <td className="border px-2 py-1">(50*30*1.4T)<br />L : 6,000</td>
              <td className="border px-2 py-1 text-center">5</td>
            </tr>
            <tr>
              <td className="border px-2 py-1" colSpan={4}>※ 별도 추가사항 - 부자재</td>
              <td className="border px-2 py-1 bg-muted">앵글<br />(40*40*3T)</td>
              <td className="border px-2 py-1 text-center">4</td>
            </tr>
          </tbody>
        </table>
      </div>

      {/* 2. 모터 */}
      <div className="mb-6">
        <h3 className="font-medium mb-2">2. 모터</h3>
        <div className="grid grid-cols-2 gap-4">
          <table className="w-full border-collapse text-xs">
            <thead>
              <tr>
                <th className="border px-2 py-1 bg-muted" colSpan={3}>2-1. 모터(220V 단상)</th>
              </tr>
              <tr>
                <th className="border px-2 py-1 bg-muted">모터 용량</th>
                <th className="border px-2 py-1 bg-muted">수량</th>
                <th className="border px-2 py-1 bg-muted">입고 LOT NO.</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td className="border px-2 py-1">KD-300K</td>
                <td className="border px-2 py-1 text-center">0</td>
                <td className="border px-2 py-1"></td>
              </tr>
            </tbody>
          </table>
          <table className="w-full border-collapse text-xs">
            <thead>
              <tr>
                <th className="border px-2 py-1 bg-muted" colSpan={3}>2-2. 모터(380V 삼상)</th>
              </tr>
              <tr>
                <th className="border px-2 py-1 bg-muted">모터 용량</th>
                <th className="border px-2 py-1 bg-muted">수량</th>
                <th className="border px-2 py-1 bg-muted">입고 LOT NO.</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td className="border px-2 py-1">KD-300K<br />KD-400K</td>
                <td className="border px-2 py-1 text-center">0</td>
                <td className="border px-2 py-1"></td>
              </tr>
            </tbody>
          </table>
        </div>
        <div className="grid grid-cols-2 gap-4 mt-4">
          <table className="w-full border-collapse text-xs">
            <thead>
              <tr>
                <th className="border px-2 py-1 bg-muted" colSpan={2}>2-3. 브라켓트</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td className="border px-2 py-1">380*180 (2-4")</td>
                <td className="border px-2 py-1 text-center">0</td>
              </tr>
              <tr>
                <td className="border px-2 py-1">380*180 (2-5")</td>
                <td className="border px-2 py-1 text-center">0</td>
              </tr>
            </tbody>
          </table>
          <table className="w-full border-collapse text-xs">
            <thead>
              <tr>
                <th className="border px-2 py-1 bg-muted" colSpan={2}>2-4. 연동파이프</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td className="border px-2 py-1">매립형</td>
                <td className="border px-2 py-1 text-center">1</td>
              </tr>
              <tr>
                <td className="border px-2 py-1">노출형</td>
                <td className="border px-2 py-1 text-center">0</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      {/* 버튼 */}
      <div className="flex justify-end gap-2 print:hidden">
        <button className="px-4 py-1 border rounded text-sm">출고 담당</button>
        <button className="px-4 py-1 border rounded text-sm">인수 확인</button>
      </div>
    </div>
  );
}