"use client";

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

import { formatAmount, formatNumber } from "@/lib/utils/amount";
import { OrderItem } from "../actions";
import { DocumentHeader } from "@/components/document-system";

/**
 * 수량 포맷 함수
 * - EA, SET, PCS 등 개수 단위: 정수로 표시
 * - M, M2, KG, L 등 측정 단위: 소수점 이하 불필요한 0 제거
 */
function formatQuantity(quantity: number, unit?: string): string {
  const countableUnits = ["EA", "SET", "PCS", "개", "세트", "BOX", "ROLL"];
  const upperUnit = (unit || "").toUpperCase();

  if (countableUnits.includes(upperUnit)) {
    return formatNumber(Math.round(quantity));
  }

  const rounded = Math.round(quantity * 10000) / 10000;
  return rounded.toLocaleString(undefined, {
    minimumFractionDigits: 0,
    maximumFractionDigits: 4
  });
}

interface TransactionDocumentProps {
  orderNumber: string;
  orderDate: string;
  client: string;
  clientBusinessNumber?: string;
  clientCeo?: string;
  clientContact?: string;
  clientAddress?: string;
  clientSiteName?: string;
  companyName?: string;
  companyCeo?: string;
  companyBusinessNumber?: string;
  companyContact?: string;
  companyAddress?: string;
  items?: OrderItem[];
  subtotal?: number;
  discountRate?: number;
  totalAmount?: number;
}

export function TransactionDocument({
  orderNumber,
  orderDate,
  client,
  clientBusinessNumber: _clientBusinessNumber = "123-45-67890",
  clientCeo = "대표자",
  clientContact = "010-0123-4567",
  clientAddress: _clientAddress = "서울시 강남구",
  clientSiteName = "-",
  companyName = "(주)케이디산업",
  companyCeo = "홍길동",
  companyBusinessNumber = "123-45-67890",
  companyContact: _companyContact = "02-1234-5678",
  companyAddress = "서울 강남구 테헤란로 123",
  items = [],
  subtotal = 0,
  discountRate = 0,
  totalAmount: _totalAmount = 0,
}: TransactionDocumentProps) {
  const discountAmount = Math.round(subtotal * (discountRate / 100));
  const afterDiscount = subtotal - discountAmount;
  const vat = Math.round(afterDiscount * 0.1);
  const finalTotal = afterDiscount + vat;

  return (
    <div className="bg-white p-8 min-h-full">
      {/* 문서 헤더 (공통 컴포넌트) */}
      <DocumentHeader
        title="거 래 명 세 서"
        subtitle={`수주번호: ${orderNumber} | 발행일: ${orderDate}`}
        layout="simple"
        approval={null}
        className="mb-6"
      />

      {/* 공급자/공급받는자 정보 */}
      <div className="grid grid-cols-2 gap-4 mb-4">
        <div className="border border-gray-300">
          <div className="bg-gray-800 text-white p-2 text-sm font-medium text-center">
            공급자
          </div>
          <div className="p-3 space-y-1 text-sm">
            <div className="flex">
              <span className="w-20 text-gray-600">상호</span>
              <span>{companyName}</span>
            </div>
            <div className="flex">
              <span className="w-20 text-gray-600">대표자</span>
              <span>{companyCeo}</span>
            </div>
            <div className="flex">
              <span className="w-20 text-gray-600">사업자번호</span>
              <span>{companyBusinessNumber}</span>
            </div>
            <div className="flex">
              <span className="w-20 text-gray-600">주소</span>
              <span>{companyAddress}</span>
            </div>
          </div>
        </div>
        <div className="border border-gray-300">
          <div className="bg-gray-800 text-white p-2 text-sm font-medium text-center">
            공급받는자
          </div>
          <div className="p-3 space-y-1 text-sm">
            <div className="flex">
              <span className="w-20 text-gray-600">상호</span>
              <span>{client}</span>
            </div>
            <div className="flex">
              <span className="w-20 text-gray-600">담당자</span>
              <span>{clientCeo}</span>
            </div>
            <div className="flex">
              <span className="w-20 text-gray-600">연락처</span>
              <span>{clientContact}</span>
            </div>
            <div className="flex">
              <span className="w-20 text-gray-600">현장명</span>
              <span>{clientSiteName}</span>
            </div>
          </div>
        </div>
      </div>

      {/* 품목내역 */}
      <div className="border border-gray-300 mb-4">
        <div className="bg-gray-800 text-white p-2 text-sm font-medium text-center">
          품목내역
        </div>
        <table className="w-full text-sm">
          <thead>
            <tr className="bg-gray-100 border-b border-gray-300">
              <th className="p-2 text-center font-medium border-r border-gray-300 w-12">순번</th>
              <th className="p-2 text-center font-medium border-r border-gray-300 w-28">품목코드</th>
              <th className="p-2 text-left font-medium border-r border-gray-300">품명</th>
              <th className="p-2 text-center font-medium border-r border-gray-300 w-24">규격</th>
              <th className="p-2 text-center font-medium border-r border-gray-300 w-12">수량</th>
              <th className="p-2 text-center font-medium border-r border-gray-300 w-12">단위</th>
              <th className="p-2 text-right font-medium border-r border-gray-300 w-24">단가</th>
              <th className="p-2 text-right font-medium w-24">공급가액</th>
            </tr>
          </thead>
          <tbody>
            {items.length > 0 ? (
              items.map((item, index) => (
                <tr key={item.id} className="border-b border-gray-300">
                  <td className="p-2 text-center border-r border-gray-300">{index + 1}</td>
                  <td className="p-2 text-center border-r border-gray-300">{item.itemCode}</td>
                  <td className="p-2 border-r border-gray-300">{item.itemName}</td>
                  <td className="p-2 text-center border-r border-gray-300">{item.spec}</td>
                  <td className="p-2 text-center border-r border-gray-300">{formatQuantity(item.quantity, item.unit)}</td>
                  <td className="p-2 text-center border-r border-gray-300">{item.unit}</td>
                  <td className="p-2 text-right border-r border-gray-300">{formatAmount(item.unitPrice)}</td>
                  <td className="p-2 text-right">{formatAmount(item.amount ?? 0)}</td>
                </tr>
              ))
            ) : (
              <tr className="border-b border-gray-300">
                <td colSpan={8} className="p-4 text-center text-gray-400">
                  등록된 품목이 없습니다
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>

      {/* 금액 계산 */}
      <div className="border border-gray-300 mb-6">
        <table className="w-full text-sm">
          <tbody>
            <tr className="border-b border-gray-300">
              <td className="p-2 bg-gray-100 border-r border-gray-300 w-32">공급가액</td>
              <td className="p-2 text-right">{formatAmount(subtotal)}</td>
            </tr>
            <tr className="border-b border-gray-300">
              <td className="p-2 bg-gray-100 border-r border-gray-300">할인율</td>
              <td className="p-2 text-right">{Number.isInteger(discountRate) ? discountRate : Math.round(discountRate)}%</td>
            </tr>
            <tr className="border-b border-gray-300">
              <td className="p-2 bg-gray-100 border-r border-gray-300">할인액</td>
              <td className="p-2 text-right text-red-600">{discountAmount > 0 ? `-${formatAmount(discountAmount)}` : formatAmount(discountAmount)}</td>
            </tr>
            <tr className="border-b border-gray-300">
              <td className="p-2 bg-gray-100 border-r border-gray-300">할인 후 공급가액</td>
              <td className="p-2 text-right">{formatAmount(afterDiscount)}</td>
            </tr>
            <tr className="border-b border-gray-300">
              <td className="p-2 bg-gray-100 border-r border-gray-300">부가세 (10%)</td>
              <td className="p-2 text-right">{formatAmount(vat)}</td>
            </tr>
            <tr>
              <td className="p-2 bg-gray-100 border-r border-gray-300 font-medium">합계 금액</td>
              <td className="p-2 text-right font-bold text-lg">₩ {formatAmount(finalTotal)}</td>
            </tr>
          </tbody>
        </table>
      </div>

      {/* 증명 문구 */}
      <div className="text-center py-6 border-t border-gray-300">
        <p className="text-sm mb-4">위 금액을 거래하였음을 증명합니다.</p>
        <p className="text-sm text-gray-600 mb-4">{orderDate}</p>
        <div className="flex justify-center">
          <div className="w-12 h-12 border-2 border-red-400 rounded-full flex items-center justify-center text-red-400 text-xs">
            印
          </div>
        </div>
      </div>
    </div>
  );
}