/**
 * 단가표 보기 모달 (문서 스타일)
 *
 * DocumentViewer 래퍼 사용 (인쇄/공유/닫기)
 * DocumentHeader + ApprovalLine 활용
 * 경동기업 자재단가 조정 문서
 */

'use client';

import { DocumentViewer } from '@/components/document-system/viewer/DocumentViewer';
import { DocumentHeader } from '@/components/document-system/components/DocumentHeader';
import { ConstructionApprovalTable } from '@/components/document-system/components/ConstructionApprovalTable';
import { formatNumber } from '@/lib/utils/amount';
import type { PriceDistributionDetail } from './types';

interface Props {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  detail: PriceDistributionDetail;
}

export function PriceDistributionDocumentModal({ open, onOpenChange, detail }: Props) {
  const effectiveDate = detail.effectiveDate
    ? new Date(detail.effectiveDate)
    : new Date();
  const year = effectiveDate.getFullYear();
  const month = effectiveDate.getMonth() + 1;
  const day = effectiveDate.getDate();

  return (
    <DocumentViewer
      title="문서 상세_단가표_팝업"
      subtitle="단가표 보기"
      preset="readonly"
      open={open}
      onOpenChange={onOpenChange}
    >
      <div className="bg-white mx-auto" style={{ width: '210mm', minHeight: '297mm', padding: '15mm 20mm' }}>
        {/* 문서 헤더 + 결재란 */}
        <DocumentHeader
          title="경동기업 자재단가 조정"
          documentCode={detail.distributionNo}
          subtitle={`적용기간: ${year}년 ${month}월 ${day}일 ~`}
          layout="construction"
          className="pb-4 border-b-2 border-black"
          approval={null}
          customApproval={
            <ConstructionApprovalTable
              approvers={{
                writer: { name: detail.author },
              }}
            />
          }
        />

        {/* 수신/발신 정보 */}
        <div className="border border-gray-300 mb-6 mt-6">
          <table className="w-full text-sm">
            <tbody>
              <tr className="border-b border-gray-300">
                <td className="bg-gray-100 border-r border-gray-300 px-2 py-1 w-28 font-medium">수신자</td>
                <td className="border-r border-gray-300 px-2 py-1">경동기업 고객사</td>
                <td className="bg-gray-100 border-r border-gray-300 px-2 py-1 w-28 font-medium">발신자</td>
                <td className="px-2 py-1">경동기업</td>
              </tr>
              <tr className="border-b border-gray-300">
                <td className="bg-gray-100 border-r border-gray-300 px-2 py-1 font-medium">발신일자</td>
                <td className="border-r border-gray-300 px-2 py-1">
                  {year}-{String(month).padStart(2, '0')}-{String(day).padStart(2, '0')}
                </td>
                <td className="bg-gray-100 border-r border-gray-300 px-2 py-1 font-medium">사무실 연락처</td>
                <td className="px-2 py-1">{detail.officePhone || '-'}</td>
              </tr>
              <tr>
                <td className="bg-gray-100 border-r border-gray-300 px-2 py-1 font-medium"></td>
                <td className="border-r border-gray-300 px-2 py-1"></td>
                <td className="bg-gray-100 border-r border-gray-300 px-2 py-1 font-medium">발주전용 연락처</td>
                <td className="px-2 py-1">{detail.orderPhone || '-'}</td>
              </tr>
            </tbody>
          </table>
        </div>

        {/* 안내 문구 */}
        <div className="text-sm leading-relaxed space-y-4 mb-8">
          <p>
            1. 귀사의 무궁한 발전을 기원합니다.
          </p>
          <p>
            2. 자사에서 귀사에 가격인 변동으로 인해 단가(단가표)에 아래와 같이 조정하여 단가표를 보내드리오니,
            우순거래처 귀 물록표를 보내드리오며 이 단가는 거래(단가표)로 알고서시고 첫 기간 다른 거래처에 단가가
            표를 보내 데이터가 안되도록 합니다.
          </p>
          <p>
            3. 귀사에 공급하는 자재가 조정되었으니,
            <br />
            <span className="ml-4">
              가. {year}년 {month}월 {day}일 발주요분부터~
            </span>
            <br />
            <span className="ml-4">
              나. 단가표
            </span>
          </p>
        </div>

        {/* 단가 테이블 */}
        <div className="overflow-x-auto mb-8">
          <table className="w-full border-collapse text-sm">
            <thead>
              <tr className="bg-gray-100">
                <th className="border border-gray-300 px-3 py-2 text-center font-semibold">구분</th>
                <th className="border border-gray-300 px-3 py-2 text-center font-semibold">물록</th>
                <th className="border border-gray-300 px-3 py-2 text-center font-semibold">규격</th>
                <th className="border border-gray-300 px-3 py-2 text-center font-semibold">두께/T</th>
                <th className="border border-gray-300 px-3 py-2 text-center font-semibold">입가/M</th>
                <th className="border border-gray-300 px-3 py-2 text-center font-semibold">단위</th>
                <th className="border border-gray-300 px-3 py-2 text-center font-semibold">
                  조정금액
                  <br />
                  <span className="text-xs font-normal">(VAT별도)</span>
                </th>
              </tr>
            </thead>
            <tbody>
              {detail.items.map((item) => (
                <tr key={item.id}>
                  <td className="border border-gray-300 px-3 py-2 text-center">{item.itemType}</td>
                  <td className="border border-gray-300 px-3 py-2">{item.itemName}</td>
                  <td className="border border-gray-300 px-3 py-2 text-center">{item.specification}</td>
                  <td className="border border-gray-300 px-3 py-2 text-center">-</td>
                  <td className="border border-gray-300 px-3 py-2 text-center">-</td>
                  <td className="border border-gray-300 px-3 py-2 text-center">{item.unit}</td>
                  <td className="border border-gray-300 px-3 py-2 text-right font-mono">
                    {formatNumber(item.salesPrice)}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {/* 하단 날짜 및 회사 정보 */}
        <div className="text-center mt-12 space-y-2">
          <p className="text-sm">
            {year}년 {month}월 {day}일
          </p>
          <p className="text-lg font-bold">
            ㈜ 경동기업
          </p>
        </div>
      </div>
    </DocumentViewer>
  );
}

export default PriceDistributionDocumentModal;
