"use client";

/**
 * 계약서 문서 컴포넌트
 * - 스크린샷 형식 + 지출결의서 디자인 스타일
 */

import { formatAmount } from "@/utils/formatAmount";
import { OrderItem } from "@/components/orders";

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

export function ContractDocument({
  orderNumber,
  orderDate,
  client,
  clientBusinessNumber = "123-45-67890",
  clientCeo = "대표자",
  clientContact = "02-1234-5678",
  clientAddress = "서울시 강남구",
  companyName = "(주)케이디산업",
  companyCeo = "김대표",
  companyBusinessNumber = "111-22-33333",
  companyContact = "02-9999-8888",
  companyAddress = "경기도 화성시 케이디로 123",
  items,
  subtotal,
  discountRate,
  totalAmount,
  remarks,
}: ContractDocumentProps) {
  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">
      {/* 제목 */}
      <div className="text-center mb-6">
        <h1 className="text-2xl font-bold tracking-widest mb-2">계 약 서</h1>
        <p className="text-sm text-gray-600">
          수주번호: {orderNumber} | 계약일자: {orderDate}
        </p>
      </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>
        <div className="p-3 text-center text-sm">
          스크린 세터 (표준형)
        </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-24">품목코드</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-28">규격</th>
              <th className="p-2 text-center font-medium border-r border-gray-300 w-16">수량</th>
              <th className="p-2 text-center font-medium w-16">단위</th>
            </tr>
          </thead>
          <tbody>
            {items.length > 0 ? (
              items.map((item) => (
                <tr key={item.id} className="border-b border-gray-300">
                  <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">{item.quantity}</td>
                  <td className="p-2 text-center">{item.unit}</td>
                </tr>
              ))
            ) : (
              <tr className="border-b border-gray-300">
                <td colSpan={5} className="p-4 text-center text-gray-400">
                  등록된 품목이 없습니다
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>

      {/* 발주처/당사 정보 */}
      <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>{client}</span>
            </div>
            <div className="flex">
              <span className="w-20 text-gray-600">현장명</span>
              <span>-</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>
        </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>{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>{companyContact}</span>
            </div>
            <div className="flex">
              <span className="w-20 text-gray-600">주소</span>
              <span>{companyAddress}</span>
            </div>
          </div>
        </div>
      </div>

      {/* 총 계약 금액 */}
      <div className="border border-gray-300 p-6 text-center mb-4">
        <p className="text-sm text-gray-600 mb-2">총 계약 금액</p>
        <p className="text-3xl font-bold">
          ₩ {formatAmount(finalTotal)}
        </p>
        <p className="text-sm text-gray-600 mt-1">(부가세 포함)</p>
      </div>

      {/* 금액 계산 */}
      <div className="border border-gray-300 mb-4">
        <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 border-r border-gray-300">{formatAmount(subtotal)}원</td>
              <td className="p-2 bg-gray-100 border-r border-gray-300 w-32">할인율</td>
              <td className="p-2 text-right">{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 border-r border-gray-300 text-red-600">-{formatAmount(discountAmount)}원</td>
              <td className="p-2 bg-gray-100 border-r border-gray-300">할인 후 공급가액</td>
              <td className="p-2 text-right">{formatAmount(afterDiscount)}원</td>
            </tr>
            <tr>
              <td className="p-2 bg-gray-100 border-r border-gray-300">부가세(10%)</td>
              <td className="p-2 text-right border-r border-gray-300">{formatAmount(vat)}원</td>
              <td className="p-2 bg-gray-100 border-r border-gray-300 font-medium">합계</td>
              <td className="p-2 text-right font-semibold">{formatAmount(finalTotal)}원</td>
            </tr>
          </tbody>
        </table>
      </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 min-h-[60px] text-sm">
          {remarks || "-"}
        </div>
      </div>
    </div>
  );
}