'use client';

/**
 * 지출결의서 문서 컴포넌트
 *
 * 공통 컴포넌트 사용:
 * - DocumentHeader: centered 레이아웃 + customApproval (ApprovalLineBox)
 */

import { ApprovalLineBox } from './ApprovalLineBox';
import type { ExpenseReportDocumentData } from './types';
import { DocumentHeader } from '@/components/document-system';
import { formatNumber as formatCurrency } from '@/lib/utils/amount';

interface ExpenseReportDocumentProps {
  data: ExpenseReportDocumentData;
}

export function ExpenseReportDocument({ data }: ExpenseReportDocumentProps) {

  return (
    <div className="bg-white p-8 min-h-full">
      {/* 문서 헤더 (공통 컴포넌트) */}
      <DocumentHeader
        title="지출결의서"
        subtitle={`문서번호: ${data.documentNo} | 작성일자: ${data.createdAt}`}
        layout="centered"
        customApproval={<ApprovalLineBox drafter={data.drafter} approvers={data.approvers} />}
      />

      {/* 문서 내용 */}
      <div className="border border-gray-300">
        {/* 지출 요청일 / 결제일 */}
        <div className="grid grid-cols-2 border-b border-gray-300">
          <div className="flex border-r border-gray-300">
            <div className="w-28 bg-gray-100 p-3 font-medium text-sm border-r border-gray-300">
              지출 요청일
            </div>
            <div className="flex-1 p-3 text-sm">{data.requestDate || '-'}</div>
          </div>
          <div className="flex">
            <div className="w-28 bg-gray-100 p-3 font-medium text-sm border-r border-gray-300">
              결제일
            </div>
            <div className="flex-1 p-3 text-sm">{data.paymentDate || '-'}</div>
          </div>
        </div>

        {/* 지출결의서 내역 */}
        <div className="border-b border-gray-300">
          <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-16">No.</th>
                <th className="p-2 text-left font-medium border-r border-gray-300">적요</th>
                <th className="p-2 text-right font-medium border-r border-gray-300 w-32">금액</th>
                <th className="p-2 text-left font-medium w-40">비고</th>
              </tr>
            </thead>
            <tbody>
              {data.items.length > 0 ? (
                data.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.description}</td>
                    <td className="p-2 text-right border-r border-gray-300">
                      {formatCurrency(item.amount)}
                    </td>
                    <td className="p-2">{item.note}</td>
                  </tr>
                ))
              ) : (
                <>
                  {[1, 2, 3].map((num) => (
                    <tr key={num} className="border-b border-gray-300">
                      <td className="p-2 text-center border-r border-gray-300">{num}</td>
                      <td className="p-2 border-r border-gray-300">&nbsp;</td>
                      <td className="p-2 border-r border-gray-300">&nbsp;</td>
                      <td className="p-2">&nbsp;</td>
                    </tr>
                  ))}
                </>
              )}
            </tbody>
          </table>
        </div>

        {/* 법인카드 / 총 비용 */}
        <div className="grid grid-cols-2 border-b border-gray-300">
          <div className="flex border-r border-gray-300">
            <div className="w-28 bg-gray-100 p-3 font-medium text-sm border-r border-gray-300">
              법인카드
            </div>
            <div className="flex-1 p-3 text-sm">{data.cardInfo || '-'}</div>
          </div>
          <div className="flex">
            <div className="w-28 bg-gray-100 p-3 font-medium text-sm border-r border-gray-300">
              총 비용
            </div>
            <div className="flex-1 p-3 text-sm font-semibold">
              {formatCurrency(data.totalAmount)}원
            </div>
          </div>
        </div>

        {/* 참고 이미지 */}
        <div>
          <div className="bg-gray-800 text-white p-2 text-sm font-medium text-center">
            참고 이미지
          </div>
          <div className="min-h-[150px] p-4 bg-gray-50">
            {data.attachments && data.attachments.length > 0 ? (
              <div className="grid grid-cols-3 gap-4">
                {data.attachments.map((url, index) => (
                  <img
                    key={index}
                    src={url}
                    alt={`첨부 이미지 ${index + 1}`}
                    className="w-full max-h-48 object-contain rounded border"
                  />
                ))}
              </div>
            ) : (
              <div className="text-center text-gray-400 py-8">
                첨부된 이미지가 없습니다
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}