"use client";

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

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

interface PurchaseOrderDocumentProps {
  orderNumber: string;
  client: string;
  siteName: string;
  manager?: string;
  managerContact?: string;
  deliveryRequestDate: string;
  expectedShipDate?: string;
  deliveryMethod?: string;
  address: string;
  orderDate?: string;
  installationCount?: number;
  items: OrderItem[];
  remarks?: string;
}

export function PurchaseOrderDocument({
  orderNumber,
  client,
  siteName,
  manager = "-",
  managerContact = "010-0123-4567",
  deliveryRequestDate,
  expectedShipDate = "-",
  deliveryMethod = "상차",
  address,
  orderDate = new Date().toISOString().split("T")[0],
  installationCount = 3,
  items,
  remarks,
}: PurchaseOrderDocumentProps) {
  return (
    <div className="bg-white p-8 min-h-full">
      {/* 헤더: 제목 + 로트번호/결재란 */}
      <div className="flex justify-between items-start mb-6">
        <h1 className="text-2xl font-bold tracking-widest">발 주 서</h1>
        <div className="text-right">
          <div className="flex items-center justify-end gap-2 mb-2 text-sm">
            <span className="text-gray-600">로트번호</span>
            <span className="font-medium">{orderNumber}</span>
          </div>
          <table className="border border-gray-300 text-xs">
            <thead>
              <tr className="bg-gray-100">
                <th className="border-r border-gray-300 px-2 py-1">결재</th>
                <th className="border-r border-gray-300 px-2 py-1">작성</th>
                <th className="border-r border-gray-300 px-2 py-1">검토</th>
                <th className="border-r border-gray-300 px-2 py-1">승인</th>
                <th className="border-r border-gray-300 px-2 py-1">전결</th>
                <th className="border-r border-gray-300 px-2 py-1">회계</th>
                <th className="px-2 py-1">생산</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td className="border-r border-t border-gray-300 h-8 w-10"></td>
                <td className="border-r border-t border-gray-300 h-8 w-10"></td>
                <td className="border-r border-t border-gray-300 h-8 w-10"></td>
                <td className="border-r border-t border-gray-300 h-8 w-10"></td>
                <td className="border-r border-t border-gray-300 h-8 w-10"></td>
                <td className="border-r border-t border-gray-300 h-8 w-10"></td>
                <td className="border-t border-gray-300 h-8 w-10"></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      {/* 신청업체 */}
      <div className="border border-gray-300 mb-4">
        <table className="w-full text-sm">
          <tbody>
            <tr>
              <td rowSpan={2} className="bg-gray-100 border-r border-b border-gray-300 p-2 text-center font-medium w-20">
                신청업체
              </td>
              <td className="bg-gray-100 border-r border-b border-gray-300 p-2 w-20">발주처</td>
              <td className="border-r border-b border-gray-300 p-2">{client}</td>
              <td className="bg-gray-100 border-r border-b border-gray-300 p-2 w-20">발주일</td>
              <td className="border-b border-gray-300 p-2">{orderDate}</td>
            </tr>
            <tr>
              <td className="bg-gray-100 border-r border-b border-gray-300 p-2">담당자</td>
              <td className="border-r border-b border-gray-300 p-2">{manager}</td>
              <td className="bg-gray-100 border-r border-b border-gray-300 p-2">연락처</td>
              <td className="border-b border-gray-300 p-2">{managerContact}</td>
            </tr>
            <tr>
              <td className="bg-gray-100 border-r border-gray-300 p-2 text-center font-medium"></td>
              <td className="bg-gray-100 border-r border-gray-300 p-2">FAX</td>
              <td className="border-r border-gray-300 p-2">-</td>
              <td className="bg-gray-100 border-r border-gray-300 p-2">설치개소<br/>(동)</td>
              <td className="border-gray-300 p-2">{installationCount}개소</td>
            </tr>
          </tbody>
        </table>
      </div>

      {/* 신청내용 */}
      <div className="border border-gray-300 mb-4">
        <table className="w-full text-sm">
          <tbody>
            <tr>
              <td rowSpan={3} className="bg-gray-100 border-r border-gray-300 p-2 text-center font-medium w-20">
                신청내용
              </td>
              <td className="bg-gray-100 border-r border-b border-gray-300 p-2 w-20">현장명</td>
              <td colSpan={3} className="border-b border-gray-300 p-2">{siteName}</td>
            </tr>
            <tr>
              <td className="bg-gray-100 border-r border-b border-gray-300 p-2">납기요청<br/>일</td>
              <td className="border-r border-b border-gray-300 p-2">{deliveryRequestDate}</td>
              <td className="bg-gray-100 border-r border-b border-gray-300 p-2 w-20">배송방법</td>
              <td className="border-b border-gray-300 p-2">{deliveryMethod}</td>
            </tr>
            <tr>
              <td className="bg-gray-100 border-r border-gray-300 p-2">출고일</td>
              <td className="border-r border-gray-300 p-2">{expectedShipDate}</td>
              <td className="bg-gray-100 border-r border-gray-300 p-2">납품주소</td>
              <td className="border-gray-300 p-2">{address}</td>
            </tr>
          </tbody>
        </table>
      </div>

      {/* 부자재 */}
      <div className="mb-4">
        <p className="text-sm font-medium mb-2">■ 부자재</p>
        <div className="border border-gray-300">
          <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-16">구분</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-20">규격</th>
                <th className="p-2 text-center font-medium border-r border-gray-300 w-24">길이(mm)</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-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 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.width ? `${item.width}` : "-"}
                    </td>
                    <td className="p-2 text-center border-r border-gray-300">{item.quantity}</td>
                    <td className="p-2 text-center">{item.symbol || "-"}</td>
                  </tr>
                ))
              ) : (
                <tr className="border-b border-gray-300">
                  <td colSpan={6} className="p-4 text-center text-gray-400">
                    등록된 품목이 없습니다
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>

      {/* 특이사항 */}
      <div className="mb-4">
        <p className="text-sm font-medium mb-2">【 특이사항 】</p>
        <div className="border border-gray-300 p-3 min-h-[50px] text-sm">
          {remarks || "-"}
        </div>
      </div>

      {/* 유의사항 */}
      <div className="mb-4">
        <p className="text-sm font-medium mb-2">【 유의사항 】</p>
        <div className="border border-gray-300 p-3 text-sm">
          <ul className="space-y-1">
            <li>• 발주 승인 완료 후 작업을 진행해주시기 바랍니다.</li>
            <li>• 납기 일정 부득이하게 변경이 필요할 경우 사전에 납품해주시기 바랍니다.</li>
            <li>• 기타 문의사항은 담당자에게 연락 부탁드립니다.</li>
          </ul>
        </div>
      </div>

      {/* 문의 */}
      <div className="text-center text-sm text-gray-600">
        문의: 홍길동 | 010-1234-5678
      </div>
    </div>
  );
}