'use client';

/**
 * 간접 공사 내역서 문서 콘텐츠
 *
 * 공통 컴포넌트 사용:
 * - DocumentHeader: simple 레이아웃 + 3col 결재란
 */

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

// 간접 공사 내역 아이템 타입
interface IndirectConstructionItem {
  id: string;
  name: string;
  spec: string;
  unit: string;
  contractQuantity: number;
  contractAmount: number;
  prevQuantity: number;
  prevAmount: number;
  currentQuantity: number;
  currentAmount: number;
  cumulativeQuantity: number;
  cumulativeAmount: number;
  remark?: string;
}

// 목업 데이터 생성
function generateMockItems(): IndirectConstructionItem[] {
  return [
    { id: '1', name: '국민연금', spec: '직접노무비 × 4.50%', unit: '식', contractQuantity: 1, contractAmount: 2500000, prevQuantity: 0, prevAmount: 0, currentQuantity: 0, currentAmount: 2500000, cumulativeQuantity: 0, cumulativeAmount: 2500000 },
    { id: '2', name: '건강보험', spec: '직접노무비 × 3.545%', unit: '식', contractQuantity: 1, contractAmount: 2500000, prevQuantity: 0, prevAmount: 0, currentQuantity: 0, currentAmount: 2500000, cumulativeQuantity: 0, cumulativeAmount: 2500000 },
    { id: '3', name: '노인장기요양보험료', spec: '건강보험료 × 12.81%', unit: '식', contractQuantity: 1, contractAmount: 2500000, prevQuantity: 0, prevAmount: 0, currentQuantity: 0, currentAmount: 2500000, cumulativeQuantity: 0, cumulativeAmount: 2500000 },
    { id: '4', name: '고용보험', spec: '직접공사비 × 30% × 1.57%', unit: '식', contractQuantity: 1, contractAmount: 2500000, prevQuantity: 0, prevAmount: 0, currentQuantity: 0, currentAmount: 2500000, cumulativeQuantity: 0, cumulativeAmount: 2500000 },
    { id: '5', name: '일반관리비', spec: '1) 직접공사비 × 업체요율\n2) 공과물비+작업비 시공비 포함', unit: '식', contractQuantity: 1, contractAmount: 2500000, prevQuantity: 0, prevAmount: 0, currentQuantity: 0, currentAmount: 2500000, cumulativeQuantity: 0, cumulativeAmount: 2500000 },
    { id: '6', name: '안전관리비', spec: '직접공사비 × 0.3%(일반건산)', unit: '식', contractQuantity: 1, contractAmount: 2500000, prevQuantity: 0, prevAmount: 0, currentQuantity: 0, currentAmount: 2500000, cumulativeQuantity: 0, cumulativeAmount: 2500000 },
    { id: '7', name: '안전검사자', spec: '실투입 × 양정실시', unit: 'M/D', contractQuantity: 1, contractAmount: 2500000, prevQuantity: 0, prevAmount: 0, currentQuantity: 0, currentAmount: 2500000, cumulativeQuantity: 0, cumulativeAmount: 2500000 },
    { id: '8', name: '신호수 및 위기감시자', spec: '실투입 × 양정실시', unit: 'M/D', contractQuantity: 1, contractAmount: 2500000, prevQuantity: 0, prevAmount: 0, currentQuantity: 0, currentAmount: 2500000, cumulativeQuantity: 0, cumulativeAmount: 2500000 },
    { id: '9', name: '퇴직공제부금', spec: '직접노무비 × 2.3%', unit: '식', contractQuantity: 1, contractAmount: 2500000, prevQuantity: 0, prevAmount: 0, currentQuantity: 0, currentAmount: 2500000, cumulativeQuantity: 0, cumulativeAmount: 2500000 },
    { id: '10', name: '폐기물처리비', spec: '직접공사비 × 요제요율이상', unit: '식', contractQuantity: 1, contractAmount: 2500000, prevQuantity: 0, prevAmount: 0, currentQuantity: 0, currentAmount: 2500000, cumulativeQuantity: 0, cumulativeAmount: 2500000 },
    { id: '11', name: '건설기계대여자금보증료', spec: '(직접비+간접공사비) × 0.07%', unit: '식', contractQuantity: 1, contractAmount: 2500000, prevQuantity: 0, prevAmount: 0, currentQuantity: 0, currentAmount: 2500000, cumulativeQuantity: 0, cumulativeAmount: 2500000 },
  ];
}

interface IndirectConstructionContentProps {
  data: ProgressBillingDetailFormData;
}

export function IndirectConstructionContent({ data }: IndirectConstructionContentProps) {
  const items = generateMockItems();
  const totalContractAmount = items.reduce((sum, item) => sum + item.contractAmount, 0);
  const totalCurrentAmount = items.reduce((sum, item) => sum + item.currentAmount, 0);
  const totalCumulativeAmount = items.reduce((sum, item) => sum + item.cumulativeAmount, 0);

  return (
    <div className="max-w-[297mm] mx-auto bg-white shadow-lg rounded-lg p-8">
      {/* 문서 헤더 (공통 컴포넌트) */}
      <DocumentHeader
        title="간접 공사 내역서"
        subtitle={`문서번호: ${data.billingNumber || 'ABC123'} | 작성일자: 2025년 11월 11일`}
        layout="centered"
        approval={{
          type: '3col',
          writer: { name: '홍길동' },
          approver: { name: '이름' },
          showDepartment: true,
          departmentLabels: { writer: '부서명', approver: '부서명' },
        }}
      />

      <div className="text-center font-bold text-lg mb-4">
        기성내역 제{data.billingRound || 1}회 ({data.billingYearMonth || '2025년 11월'})
      </div>
      <div className="mb-4">
        <span className="font-bold">■ 현장: {data.siteName || '현장명'}</span>
      </div>

      <div className="overflow-x-auto">
        <table className="w-full border-collapse border border-gray-400 text-xs">
          <thead>
            <tr className="bg-gray-50">
              <th rowSpan={2} className="border border-gray-400 px-2 py-2 text-center w-10">No.</th>
              <th rowSpan={2} className="border border-gray-400 px-2 py-2 text-center min-w-[100px]">품명</th>
              <th rowSpan={2} className="border border-gray-400 px-2 py-2 text-center min-w-[180px]">규격</th>
              <th rowSpan={2} className="border border-gray-400 px-2 py-2 text-center w-14">단위</th>
              <th colSpan={2} className="border border-gray-400 px-2 py-1 text-center bg-red-50">계약금액</th>
              <th colSpan={2} className="border border-gray-400 px-2 py-1 text-center bg-red-50">전회기성</th>
              <th colSpan={2} className="border border-gray-400 px-2 py-1 text-center bg-red-50">금회기성</th>
              <th colSpan={2} className="border border-gray-400 px-2 py-1 text-center bg-red-50">누계기성</th>
              <th rowSpan={2} className="border border-gray-400 px-2 py-2 text-center w-16">비고</th>
            </tr>
            <tr className="bg-gray-50">
              <th className="border border-gray-400 px-2 py-1 text-center w-12">수량</th>
              <th className="border border-gray-400 px-2 py-1 text-center w-20">금액</th>
              <th className="border border-gray-400 px-2 py-1 text-center w-12">수량</th>
              <th className="border border-gray-400 px-2 py-1 text-center w-20">금액</th>
              <th className="border border-gray-400 px-2 py-1 text-center w-12">수량</th>
              <th className="border border-gray-400 px-2 py-1 text-center w-20">금액</th>
              <th className="border border-gray-400 px-2 py-1 text-center w-12">수량</th>
              <th className="border border-gray-400 px-2 py-1 text-center w-20">금액</th>
            </tr>
          </thead>
          <tbody>
            {items.map((item, index) => (
              <tr key={item.id}>
                <td className="border border-gray-400 px-2 py-2 text-center">{index + 1}</td>
                <td className="border border-gray-400 px-2 py-2">{item.name}</td>
                <td className="border border-gray-400 px-2 py-2 whitespace-pre-line text-xs">{item.spec}</td>
                <td className="border border-gray-400 px-2 py-2 text-center">{item.unit}</td>
                <td className="border border-gray-400 px-2 py-2 text-center">{item.contractQuantity}</td>
                <td className="border border-gray-400 px-2 py-2 text-right">{formatNumber(item.contractAmount)}</td>
                <td className="border border-gray-400 px-2 py-2 text-center">{item.prevQuantity || '-'}</td>
                <td className="border border-gray-400 px-2 py-2 text-right">{item.prevAmount ? formatNumber(item.prevAmount) : '-'}</td>
                <td className="border border-gray-400 px-2 py-2 text-center">{item.currentQuantity || '-'}</td>
                <td className="border border-gray-400 px-2 py-2 text-right">{formatNumber(item.currentAmount)}</td>
                <td className="border border-gray-400 px-2 py-2 text-center">{item.cumulativeQuantity || '-'}</td>
                <td className="border border-gray-400 px-2 py-2 text-right">{formatNumber(item.cumulativeAmount)}</td>
                <td className="border border-gray-400 px-2 py-2">{item.remark || ''}</td>
              </tr>
            ))}
            <tr className="bg-gray-50 font-bold">
              <td colSpan={5} className="border border-gray-400 px-2 py-2 text-center">합계</td>
              <td className="border border-gray-400 px-2 py-2 text-right">{formatNumber(totalContractAmount)}</td>
              <td colSpan={2} className="border border-gray-400 px-2 py-2"></td>
              <td colSpan={2} className="border border-gray-400 px-2 py-2 text-right">{formatNumber(totalCurrentAmount)}</td>
              <td colSpan={2} className="border border-gray-400 px-2 py-2 text-right">{formatNumber(totalCumulativeAmount)}</td>
              <td className="border border-gray-400 px-2 py-2"></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  );
}
