'use client';

/**
 * 거래명세서 미리보기/인쇄 문서
 *
 * 공통 컴포넌트 사용:
 * - DocumentHeader: simple 레이아웃 (결재란 없음)
 */

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

interface TransactionStatementProps {
  data: ShipmentDetail;
}

export function TransactionStatement({ data }: TransactionStatementProps) {
  // 제품 합계 계산
  const totalAmount = data.products.reduce((sum, _product) => {
    // 실제로는 단가 * 수량
    return sum + 0;
  }, 0);

  return (
    <div className="bg-white p-8 max-w-3xl mx-auto text-sm print:p-0 print:max-w-none">
      {/* 문서 헤더 (공통 컴포넌트) */}
      <DocumentHeader
        title="거 래 명 세 서"
        subtitle="TRANSACTION STATEMENT"
        layout="simple"
        approval={null}
        className="mb-6"
      />

      {/* 공급받는자 / 공급자 정보 */}
      <div className="grid grid-cols-2 gap-6 mb-6">
        {/* 공급받는자 */}
        <div className="border p-4">
          <h2 className="font-bold mb-3 text-muted-foreground">공급받는자</h2>
          <table className="w-full text-xs">
            <tbody>
              <tr>
                <td className="py-1 w-16">상 호</td>
                <td className="py-1 font-medium">{data.customerName}</td>
              </tr>
              <tr>
                <td className="py-1">현장명</td>
                <td className="py-1">{data.siteName}</td>
              </tr>
              <tr>
                <td className="py-1">주 소</td>
                <td className="py-1">{data.deliveryAddress}</td>
              </tr>
            </tbody>
          </table>
        </div>

        {/* 공급자 */}
        <div className="border p-4">
          <h2 className="font-bold mb-3 text-muted-foreground">공급자</h2>
          <table className="w-full text-xs">
            <tbody>
              <tr>
                <td className="py-1 w-16">상 호</td>
                <td className="py-1 font-medium">경동기업</td>
              </tr>
              <tr>
                <td className="py-1">대표자</td>
                <td className="py-1">홍길동</td>
              </tr>
              <tr>
                <td className="py-1">주 소</td>
                <td className="py-1">경기도 화성시 팔탄면 산업로 123</td>
              </tr>
              <tr>
                <td className="py-1">연락처</td>
                <td className="py-1">031-123-4567</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      {/* 거래일자 / 출고번호 */}
      <div className="grid grid-cols-2 gap-6 mb-6 text-xs">
        <div className="flex">
          <span className="font-medium mr-4">거래일자</span>
          <span>{data.scheduledDate}</span>
        </div>
        <div className="flex">
          <span className="font-medium mr-4">출고번호</span>
          <span>{data.shipmentNo}</span>
        </div>
      </div>

      {/* 품목 테이블 */}
      <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-20">단가</th>
            <th className="border px-2 py-2 text-center w-20">금액</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">{product.quantity}</td>
              <td className="border px-2 py-2 text-right">0</td>
              <td className="border px-2 py-2 text-right">0</td>
              <td className="border px-2 py-2 text-center">{product.floorUnit}</td>
            </tr>
          ))}
          {/* 빈 행 채우기 */}
          {Array.from({ length: Math.max(0, 5 - data.products.length) }).map((_, i) => (
            <tr key={`empty-${i}`}>
              <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>
              <td className="border px-2 py-2"></td>
              <td className="border px-2 py-2"></td>
            </tr>
          ))}
        </tbody>
        <tfoot>
          <tr className="bg-muted">
            <td className="border px-2 py-2 text-center font-medium" colSpan={5}>
              합 계
            </td>
            <td className="border px-2 py-2 text-right font-medium">{totalAmount}</td>
            <td className="border px-2 py-2"></td>
          </tr>
        </tfoot>
      </table>

      {/* 확인 문구 */}
      <p className="text-center text-sm text-muted-foreground mb-4">
        위와 같이 거래하였음을 확인합니다.
      </p>

      {/* 회사명 */}
      <p className="text-center text-lg font-bold">경동기업</p>
    </div>
  );
}