'use client';

/**
 * 제품검사성적서 문서
 *
 * 기획서 기반:
 * - 결재라인 (작성/승인)
 * - 기본정보 (제품명, LOT NO, 제품코드, 로트크기 등)
 * - 제품 사진
 * - 검사항목 테이블 (No, 검사항목, 검사기준, 검사방법, 검사주기, 측정값, 판정)
 *   - No/검사항목: 그룹별 rowSpan 병합
 *   - 검사방법/검사주기: 크로스그룹 병합 (methodSpan/freqSpan) + 그룹 내 병합 하이브리드
 *   - 판정: □ 적합 / □ 부적합 클릭 가능, judgmentSpan으로 크로스그룹 병합
 *   - 특이사항 + 종합판정(자동계산)을 테이블 마지막 행으로 포함
 */

import { useMemo } from 'react';
import { ConstructionApprovalTable } from '@/components/document-system';
import type { InspectionReportDocument as InspectionReportDocumentType, ReportInspectionItem } from '../types';

interface InspectionReportDocumentProps {
  data: InspectionReportDocumentType;
}

/** 검사항목을 No 기준으로 그룹화 */
function groupItemsByNo(items: ReportInspectionItem[]) {
  const groups: { no: number; category: string; rows: ReportInspectionItem[] }[] = [];
  let currentGroup: (typeof groups)[number] | null = null;

  for (const item of items) {
    if (!currentGroup || currentGroup.no !== item.no) {
      currentGroup = { no: item.no, category: item.category, rows: [] };
      groups.push(currentGroup);
    }
    currentGroup.rows.push(item);
  }

  return groups;
}

/** 크로스그룹 병합 커버리지 계산: { map: flatIndex→rowSpan, covered: Set<coveredIndices> } */
function buildCoverageMap(items: ReportInspectionItem[], field: 'methodSpan' | 'freqSpan' | 'judgmentSpan' | 'subCategorySpan' | 'measuredValueSpan') {
  const map: Record<number, number> = {};
  const covered = new Set<number>();

  items.forEach((item, idx) => {
    const span = item[field];
    if (span && span > 0) {
      map[idx] = span;
      for (let i = idx + 1; i < idx + span && i < items.length; i++) {
        covered.add(i);
      }
    }
  });

  return { map, covered };
}

export function InspectionReportDocument({ data }: InspectionReportDocumentProps) {
  // 읽기 전용 - data.inspectionItems 그대로 사용
  const items = data.inspectionItems;

  const groups = useMemo(() => groupItemsByNo(items), [items]);

  // 크로스그룹 병합 렌더맵
  const methodCoverage = useMemo(() => buildCoverageMap(items, 'methodSpan'), [items]);
  const freqCoverage = useMemo(() => buildCoverageMap(items, 'freqSpan'), [items]);
  const judgmentCoverage = useMemo(() => buildCoverageMap(items, 'judgmentSpan'), [items]);
  const subCatCoverage = useMemo(() => buildCoverageMap(items, 'subCategorySpan'), [items]);
  const measuredValueCoverage = useMemo(() => buildCoverageMap(items, 'measuredValueSpan'), [items]);

  // 그룹별 flat index 오프셋
  const groupOffsets = useMemo(() => {
    const offsets: number[] = [];
    let offset = 0;
    for (const group of groups) {
      offsets.push(offset);
      offset += group.rows.length;
    }
    return offsets;
  }, [groups]);

  // 종합판정 자동 계산
  const calculatedJudgment = useMemo(() => {
    const processedBySpan = new Set<number>();
    const judgments: ('적합' | '부적합' | undefined)[] = [];

    items.forEach((item, idx) => {
      if (item.hideJudgment) return;
      if (processedBySpan.has(idx)) return;

      if (item.judgmentSpan) {
        judgments.push(item.judgment);
        for (let i = idx + 1; i < idx + item.judgmentSpan && i < items.length; i++) {
          processedBySpan.add(i);
        }
      } else if (!judgmentCoverage.covered.has(idx)) {
        judgments.push(item.judgment);
      }
    });

    if (judgments.some(j => j === '부적합')) return '불합격';
    if (judgments.every(j => j === '적합')) return '합격';
    return '합격';
  }, [items, judgmentCoverage.covered]);

  return (
    <div className="bg-white p-8 min-h-full text-[11px]">
      {/* 헤더: 제목 (좌측) + 결재란 (우측) */}
      <div className="flex justify-between items-start mb-4">
        <div>
          <h1 className="text-2xl font-bold tracking-widest mb-2">제 품 검 사 성 적 서</h1>
          <div className="text-[10px] space-y-1">
            <div className="flex gap-4">
              <span>문서번호: <strong>{data.documentNumber}</strong></span>
              <span>작성일자: <strong>{data.createdDate}</strong></span>
            </div>
          </div>
        </div>

        <ConstructionApprovalTable
          approvers={{
            writer: data.approvalLine[0]
              ? { name: data.approvalLine[0].name, department: data.approvalLine[0].department }
              : undefined,
            approver1: data.approvalLine[1]
              ? { name: data.approvalLine[1].name, department: data.approvalLine[1].department }
              : undefined,
            approver2: data.approvalLine[2]
              ? { name: data.approvalLine[2].name, department: data.approvalLine[2].department }
              : undefined,
            approver3: data.approvalLine[3]
              ? { name: data.approvalLine[3].name, department: data.approvalLine[3].department }
              : undefined,
          }}
        />
      </div>

      {/* 기본 정보 */}
      <div className="border border-gray-400 mb-4">
        <div className="bg-gray-200 text-center py-1 font-bold border-b border-gray-400">기본 정보</div>
        <table className="w-full">
          <tbody>
            <tr className="border-b border-gray-300">
              <td className="bg-gray-100 px-2 py-1 w-28 font-medium border-r border-gray-300">제품명</td>
              <td className="px-2 py-1 border-r border-gray-300">{data.productName || '-'}</td>
              <td className="bg-gray-100 px-2 py-1 w-28 font-medium border-r border-gray-300">제품 LOT NO</td>
              <td className="px-2 py-1">{data.productLotNo || '-'}</td>
            </tr>
            <tr className="border-b border-gray-300">
              <td className="bg-gray-100 px-2 py-1 font-medium border-r border-gray-300">제품코드</td>
              <td className="px-2 py-1 border-r border-gray-300">{data.productCode || '-'}</td>
              <td className="bg-gray-100 px-2 py-1 font-medium border-r border-gray-300">로트크기</td>
              <td className="px-2 py-1">{data.lotSize || '-'}</td>
            </tr>
            <tr className="border-b border-gray-300">
              <td className="bg-gray-100 px-2 py-1 font-medium border-r border-gray-300">수주처</td>
              <td className="px-2 py-1 border-r border-gray-300">{data.client || '-'}</td>
              <td className="bg-gray-100 px-2 py-1 font-medium border-r border-gray-300">검사일자</td>
              <td className="px-2 py-1">{data.inspectionDate || '-'}</td>
            </tr>
            <tr>
              <td className="bg-gray-100 px-2 py-1 font-medium border-r border-gray-300">현장명</td>
              <td className="px-2 py-1 border-r border-gray-300">{data.siteName || '-'}</td>
              <td className="bg-gray-100 px-2 py-1 font-medium border-r border-gray-300">검사자</td>
              <td className="px-2 py-1">{data.inspector || '-'}</td>
            </tr>
          </tbody>
        </table>
      </div>

      {/* 제품 사진 */}
      <div className="border border-gray-400 mb-4">
        <div className="bg-gray-200 text-center py-1 font-bold border-b border-gray-400">제품 사진</div>
        <div className="p-4 flex items-center justify-center gap-4 min-h-[200px]">
          {data.productImages && data.productImages.length > 0 ? (
            data.productImages.map((img, index) => (
              <img
                key={index}
                src={img}
                alt={`제품 사진 ${index + 1}`}
                className="max-h-[250px] max-w-[45%] object-contain border border-gray-300 rounded"
              />
            ))
          ) : (
            <div className="text-gray-400 text-center">
              <div className="border-2 border-dashed border-gray-300 p-8 rounded">
                제품 사진 없음
              </div>
            </div>
          )}
        </div>
      </div>

      {/* 검사항목 테이블 + 특이사항 + 종합판정 */}
      <table className="w-full border-collapse border border-gray-400 mb-4">
        <thead>
          <tr className="bg-gray-100">
            <th className="border border-gray-400 px-2 py-1 w-10 text-center">No.</th>
            <th className="border border-gray-400 px-2 py-1 w-24">검사항목</th>
            <th className="border border-gray-400 px-2 py-1" colSpan={2}>검사기준</th>
            <th className="border border-gray-400 px-2 py-1 w-16 text-center whitespace-pre-line">검사{'\n'}방법</th>
            <th className="border border-gray-400 px-2 py-1 w-16 text-center whitespace-pre-line">검사{'\n'}주기</th>
            <th className="border border-gray-400 px-2 py-1 w-16 text-center">측정값</th>
            <th className="border border-gray-400 px-2 py-1 w-28 text-center">판정</th>
          </tr>
        </thead>
        <tbody>
          {groups.map((group, groupIdx) =>
            group.rows.map((row, rowIdx) => {
              const flatIdx = groupOffsets[groupIdx] + rowIdx;

              // === 검사방법 셀 렌더 결정 ===
              let renderMethod = false;
              let methodRowSpan = 1;
              if (methodCoverage.map[flatIdx] !== undefined) {
                // 크로스그룹 병합 시작점
                renderMethod = true;
                methodRowSpan = methodCoverage.map[flatIdx];
              } else if (!methodCoverage.covered.has(flatIdx) && rowIdx === 0) {
                // 크로스그룹에 속하지 않음 → 그룹 내 병합 (첫 행)
                renderMethod = true;
                methodRowSpan = group.rows.length;
              }

              // === 검사주기 셀 렌더 결정 ===
              let renderFreq = false;
              let freqRowSpan = 1;
              if (freqCoverage.map[flatIdx] !== undefined) {
                renderFreq = true;
                freqRowSpan = freqCoverage.map[flatIdx];
              } else if (!freqCoverage.covered.has(flatIdx) && rowIdx === 0) {
                renderFreq = true;
                freqRowSpan = group.rows.length;
              }

              // === 판정 셀 렌더 결정 ===
              let renderJudgment = false;
              let judgmentRowSpan = 1;
              if (judgmentCoverage.map[flatIdx] !== undefined) {
                // 크로스그룹 판정 병합 시작점
                renderJudgment = true;
                judgmentRowSpan = judgmentCoverage.map[flatIdx];
              } else if (!judgmentCoverage.covered.has(flatIdx)) {
                // 일반 per-row 판정
                renderJudgment = true;
                judgmentRowSpan = 1;
              }

              return (
                <tr key={flatIdx} className="border-b border-gray-300">
                  {/* No. - 그룹 첫 행만 rowSpan */}
                  {rowIdx === 0 && (
                    <td
                      className="border border-gray-400 px-2 py-1 text-center align-middle font-medium"
                      rowSpan={group.rows.length}
                    >
                      {group.no}
                    </td>
                  )}
                  {/* 검사항목 - 그룹 첫 행만 rowSpan */}
                  {rowIdx === 0 && (
                    <td
                      className="border border-gray-400 px-2 py-1 align-middle font-medium whitespace-pre-line"
                      rowSpan={group.rows.length}
                    >
                      {group.category}
                    </td>
                  )}
                  {/* 검사기준: subCategory 셀 */}
                  {(() => {
                    // subCategorySpan 시작점 → 병합 셀 렌더
                    if (subCatCoverage.map[flatIdx] !== undefined) {
                      return (
                        <td
                          className="border border-gray-400 px-2 py-1 align-middle font-medium whitespace-pre-line text-center"
                          rowSpan={subCatCoverage.map[flatIdx]}
                        >
                          {row.subCategory}
                        </td>
                      );
                    }
                    // 다른 셀의 subCategorySpan에 포함 → 렌더 안함
                    if (subCatCoverage.covered.has(flatIdx)) {
                      return null;
                    }
                    // 개별 subCategory 있음 → 단일 셀
                    if (row.subCategory) {
                      return (
                        <td className="border border-gray-400 px-2 py-1 font-medium whitespace-pre-line">
                          {row.subCategory}
                        </td>
                      );
                    }
                    // subCategory 없음 → 렌더 안함 (criteria가 colSpan=2)
                    return null;
                  })()}
                  {/* 검사기준: criteria 셀 */}
                  <td
                    className="border border-gray-400 px-2 py-1 whitespace-pre-line"
                    colSpan={
                      // subCategory 셀이 없는 경우 (no subCategory AND not covered by span) → colSpan=2
                      !row.subCategory && !subCatCoverage.covered.has(flatIdx) && subCatCoverage.map[flatIdx] === undefined
                        ? 2
                        : undefined
                    }
                  >
                    {row.criteria}
                  </td>
                  {/* 검사방법 */}
                  {renderMethod && (
                    <td
                      className="border border-gray-400 px-2 py-1 text-center align-middle whitespace-pre-line"
                      rowSpan={methodRowSpan}
                    >
                      {row.method || ''}
                    </td>
                  )}
                  {/* 검사주기 */}
                  {renderFreq && (
                    <td
                      className="border border-gray-400 px-2 py-1 text-center align-middle whitespace-pre-line"
                      rowSpan={freqRowSpan}
                    >
                      {row.frequency || ''}
                    </td>
                  )}
                  {/* 측정값 */}
                  {(() => {
                    if (measuredValueCoverage.map[flatIdx] !== undefined) {
                      return (
                        <td
                          className="border border-gray-400 px-2 py-1 text-center align-middle"
                          rowSpan={measuredValueCoverage.map[flatIdx]}
                        >
                          {row.measuredValue || ''}
                        </td>
                      );
                    }
                    if (measuredValueCoverage.covered.has(flatIdx)) {
                      return null;
                    }
                    // 읽기 전용 - 측정값 표시만
                    return (
                      <td className="border border-gray-400 px-2 py-1 text-center">
                        {row.measuredValue || ''}
                      </td>
                    );
                  })()}
                  {/* 판정 - 읽기 전용 */}
                  {renderJudgment && (
                    row.hideJudgment ? (
                      <td
                        className="border border-gray-400 px-1 py-1"
                        rowSpan={judgmentRowSpan}
                      />
                    ) : (
                      <td
                        className="border border-gray-400 px-1 py-1 text-center align-middle"
                        rowSpan={judgmentRowSpan}
                      >
                        <div className="flex items-center justify-center gap-1 text-[10px]">
                          <span className={row.judgment === '적합' ? 'font-bold text-blue-600' : 'text-gray-400'}>
                            {row.judgment === '적합' ? '■' : '□'} 적합
                          </span>
                          <span className={row.judgment === '부적합' ? 'font-bold text-red-600' : 'text-gray-400'}>
                            {row.judgment === '부적합' ? '■' : '□'} 부적합
                          </span>
                        </div>
                      </td>
                    )
                  )}
                </tr>
              );
            })
          )}

          {items.length === 0 && (
            <tr>
              <td colSpan={8} className="border border-gray-400 px-2 py-4 text-center text-gray-400">
                검사항목이 없습니다.
              </td>
            </tr>
          )}

          {/* 특이사항 + 종합판정 (테이블 마지막 행) */}
          <tr>
            <td className="border border-gray-400 bg-gray-100 px-2 py-2 font-bold text-center" colSpan={2}>
              특이사항
            </td>
            <td className="border border-gray-400 px-2 py-2" colSpan={4}>
              {data.specialNotes || ''}
            </td>
            <td className="border border-gray-400 bg-gray-100 px-2 py-2 font-bold text-center">
              종합판정
            </td>
            <td className={`border border-gray-400 px-2 py-2 text-center font-bold text-sm ${
              calculatedJudgment === '합격' ? 'text-blue-600' : 'text-red-600'
            }`}>
              {calculatedJudgment}
            </td>
          </tr>
        </tbody>
      </table>

      {/* 서명 영역 */}
      <div className="mt-8 text-center text-[10px]">
        <p>위 내용과 같이 제품검사 결과를 보고합니다.</p>
        <div className="mt-6">
          <p>{data.createdDate}</p>
        </div>
      </div>
    </div>
  );
}
