'use client';

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

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

interface DirectConstructionItem {
  id: string;
  name: string;
  product: string;
  width: number;
  height: number;
  quantity: number;
  unit: string;
  contractUnitPrice: number;
  contractAmount: number;
  prevQuantity: number;
  prevAmount: number;
  currentQuantity: number;
  currentAmount: number;
  cumulativeQuantity: number;
  cumulativeAmount: number;
  remark?: string;
}

function generateMockItems(billingItems: ProgressBillingDetailFormData['billingItems']): DirectConstructionItem[] {
  return billingItems.map((item, index) => ({
    id: item.id,
    name: item.name || '명칭',
    product: item.product || '제품명',
    width: item.width || 2500,
    height: item.height || 3200,
    quantity: 1,
    unit: 'EA',
    contractUnitPrice: 2500000,
    contractAmount: 2500000,
    prevQuantity: index < 4 ? 0 : 0.8,
    prevAmount: index < 4 ? 0 : 1900000,
    currentQuantity: 0.8,
    currentAmount: 1900000,
    cumulativeQuantity: 0.8,
    cumulativeAmount: 1900000,
    remark: '',
  }));
}

interface DirectConstructionContentProps {
  data: ProgressBillingDetailFormData;
}

export function DirectConstructionContent({ data }: DirectConstructionContentProps) {
  const items = generateMockItems(data.billingItems);
  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-[80px]">명칭</th>
              <th rowSpan={2} className="border border-gray-400 px-2 py-2 text-center min-w-[60px]">제품</th>
              <th colSpan={2} className="border border-gray-400 px-2 py-1 text-center bg-red-50">규격 mm</th>
              <th rowSpan={2} className="border border-gray-400 px-2 py-2 text-center w-12">수량</th>
              <th rowSpan={2} className="border border-gray-400 px-2 py-2 text-center w-12">단위</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-14">가로</th>
              <th className="border border-gray-400 px-2 py-1 text-center w-14">세로</th>
              <th className="border border-gray-400 px-2 py-1 text-center w-16">단가</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">{item.product}</td>
                <td className="border border-gray-400 px-2 py-2 text-right">{formatNumber(item.width)}</td>
                <td className="border border-gray-400 px-2 py-2 text-right">{formatNumber(item.height)}</td>
                <td className="border border-gray-400 px-2 py-2 text-center">{item.quantity}</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-right">{formatNumber(item.contractUnitPrice)}</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={8} 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 className="border border-gray-400 px-2 py-2"></td>
              <td className="border border-gray-400 px-2 py-2 text-right">{formatNumber(totalCurrentAmount)}</td>
              <td className="border border-gray-400 px-2 py-2"></td>
              <td 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>
  );
}
