'use client';

/**
 * 사진대지 문서 콘텐츠
 *
 * 공통 컴포넌트 사용:
 * - DocumentHeader: centered 레이아웃 + 3col 결재란
 */

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

// 사진대지 아이템 타입
interface PhotoDocumentItem {
  id: string;
  imageUrl: string;
  name: string;
}

// 목업 데이터 생성
function generateMockPhotos(photoItems: ProgressBillingDetailFormData['photoItems']): PhotoDocumentItem[] {
  const photos: PhotoDocumentItem[] = [];

  photoItems.forEach((item) => {
    if (item.photos && item.photos.length > 0) {
      const selectedIndex = item.selectedPhotoIndex ?? 0;
      photos.push({
        id: item.id,
        imageUrl: item.photos[selectedIndex] || item.photos[0],
        name: item.name,
      });
    }
  });

  // 최소 6개 항목 채우기 (2열 × 3행)
  while (photos.length < 6) {
    photos.push({
      id: `mock-${photos.length}`,
      imageUrl: '',
      name: '명칭',
    });
  }

  return photos;
}

interface PhotoDocumentContentProps {
  data: ProgressBillingDetailFormData;
}

export function PhotoDocumentContent({ data }: PhotoDocumentContentProps) {
  const photos = generateMockPhotos(data.photoItems);

  // 2열로 그룹화
  const photoRows: PhotoDocumentItem[][] = [];
  for (let i = 0; i < photos.length; i += 2) {
    photoRows.push(photos.slice(i, i + 2));
  }

  return (
    <div className="max-w-[210mm] 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-6">
        <span className="font-bold">■ 현장: {data.siteName || '현장명'}</span>
      </div>

      {/* 사진 그리드 */}
      <div className="border border-gray-400">
        {photoRows.map((row, rowIndex) => (
          <div key={rowIndex} className="grid grid-cols-2">
            {row.map((photo, colIndex) => (
              <div
                key={photo.id}
                className={`border border-gray-400 ${colIndex === 0 ? 'border-l-0' : ''} ${rowIndex === 0 ? 'border-t-0' : ''}`}
              >
                {/* 이미지 영역 */}
                <div className="aspect-[4/3] bg-gray-100 flex items-center justify-center overflow-hidden">
                  {photo.imageUrl ? (
                    <img
                      src={photo.imageUrl}
                      alt={photo.name}
                      className="w-full h-full object-cover"
                    />
                  ) : (
                    <span className="text-gray-400 text-lg">IMG</span>
                  )}
                </div>
                {/* 명칭 라벨 */}
                <div className="border-t border-gray-400 px-4 py-3 text-center bg-white">
                  <span className="text-sm font-medium">{photo.name}</span>
                </div>
              </div>
            ))}
            {/* 홀수 개일 때 빈 셀 채우기 */}
            {row.length === 1 && (
              <div className="border border-gray-400 border-t-0">
                <div className="aspect-[4/3] bg-gray-100 flex items-center justify-center">
                  <span className="text-gray-400 text-lg">IMG</span>
                </div>
                <div className="border-t border-gray-400 px-4 py-3 text-center bg-white">
                  <span className="text-sm font-medium">명칭</span>
                </div>
              </div>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}
