sam-react-prod/src/components/production/WorkOrders/documents/ScreenInspectionContent.tsx

'use client';

/**
 * 스크린 중간검사 성적서 문서 콘텐츠
 *
 * 기획서 기준:
 * - 헤더: "중간검사성적서 (스크린)" + 결재란
 * - 기본정보: 제품명/스크린, 규격/와이어 글라스 코팅직물, 수주처, 현장명 | 제품LOT NO, 로트크기, 검사일자, 검사자
 * - ■ 중간검사 기준서: 도해 + 검사항목/검사기준/검사방법/검사주기/관련규정
 *   가공상태, 재봉상태, 조립상태, 치수(길이/높이/간격)
 * - ■ 중간검사 DATA: No, 가공상태결모양(양호/불량), 재봉상태결모양(양호/불량), 조립상태(양호/불량),
 *   길이(도면치수/측정값입력), 나비(도면치수/측정값입력), 간격(기준치/OK·NG선택), 판정(자동)
 * - 부적합 내용 / 종합판정(자동)
 */

import { useState, useCallback, useMemo } from 'react';
import type { WorkOrder } from '../types';

interface ScreenInspectionContentProps {
  data: WorkOrder;
  readOnly?: boolean;
}

type CheckStatus = '양호' | '불량' | null;
type GapResult = 'OK' | 'NG' | null;

interface InspectionRow {
  id: number;
  processStatus: CheckStatus;     // 가공상태 결모양
  sewingStatus: CheckStatus;      // 재봉상태 결모양
  assemblyStatus: CheckStatus;    // 조립상태
  lengthDesign: string;           // 길이 도면치수 (표시용)
  lengthMeasured: string;         // 길이 측정값 (입력)
  widthDesign: string;            // 나비 도면치수 (표시용)
  widthMeasured: string;          // 나비 측정값 (입력)
  gapStandard: string;            // 간격 기준치 (표시용)
  gapResult: GapResult;           // 간격 측정값 (OK/NG 선택)
}

const DEFAULT_ROW_COUNT = 6;

export function ScreenInspectionContent({ data: order, readOnly = false }: ScreenInspectionContentProps) {
  const fullDate = new Date().toLocaleDateString('ko-KR', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  });

  const today = new Date().toLocaleDateString('ko-KR', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
  }).replace(/\. /g, '-').replace('.', '');

  const documentNo = order.workOrderNo || 'ABC123';
  const primaryAssignee = order.assignees?.find(a => a.isPrimary)?.name || order.assignee || '-';

  const [rows, setRows] = useState<InspectionRow[]>(() =>
    Array.from({ length: DEFAULT_ROW_COUNT }, (_, i) => ({
      id: i + 1,
      processStatus: null,
      sewingStatus: null,
      assemblyStatus: null,
      lengthDesign: '7,400',
      lengthMeasured: '',
      widthDesign: '2,950',
      widthMeasured: '',
      gapStandard: '400 이하',
      gapResult: null,
    }))
  );

  const [inadequateContent, setInadequateContent] = useState('');

  const handleStatusChange = useCallback((rowId: number, field: 'processStatus' | 'sewingStatus' | 'assemblyStatus', value: CheckStatus) => {
    if (readOnly) return;
    setRows(prev => prev.map(row =>
      row.id === rowId ? { ...row, [field]: value } : row
    ));
  }, [readOnly]);

  const handleInputChange = useCallback((rowId: number, field: 'lengthMeasured' | 'widthMeasured', value: string) => {
    if (readOnly) return;
    setRows(prev => prev.map(row =>
      row.id === rowId ? { ...row, [field]: value } : row
    ));
  }, [readOnly]);

  const handleGapChange = useCallback((rowId: number, value: GapResult) => {
    if (readOnly) return;
    setRows(prev => prev.map(row =>
      row.id === rowId ? { ...row, gapResult: value } : row
    ));
  }, [readOnly]);

  // 행별 판정 자동 계산
  const getRowJudgment = useCallback((row: InspectionRow): '적' | '부' | null => {
    const { processStatus, sewingStatus, assemblyStatus, gapResult } = row;
    // 하나라도 불량 or NG → 부
    if (processStatus === '불량' || sewingStatus === '불량' || assemblyStatus === '불량' || gapResult === 'NG') {
      return '부';
    }
    // 모두 양호 + OK → 적
    if (processStatus === '양호' && sewingStatus === '양호' && assemblyStatus === '양호' && gapResult === 'OK') {
      return '적';
    }
    return null;
  }, []);

  // 종합판정 자동 계산
  const overallResult = useMemo(() => {
    const judgments = rows.map(getRowJudgment);
    if (judgments.some(j => j === '부')) return '불합격';
    if (judgments.every(j => j === '적')) return '합격';
    return null;
  }, [rows, getRowJudgment]);

  // 체크박스 렌더 (양호/불량)
  const renderCheckStatus = (rowId: number, field: 'processStatus' | 'sewingStatus' | 'assemblyStatus', value: CheckStatus) => (
    <td className="border border-gray-400 p-1">
      <div className="flex flex-col items-center gap-0.5">
        <label className="flex items-center gap-0.5 cursor-pointer text-xs">
          <input
            type="checkbox"
            checked={value === '양호'}
            onChange={() => handleStatusChange(rowId, field, value === '양호' ? null : '양호')}
            disabled={readOnly}
            className="w-3 h-3"
          />
          양호
        </label>
        <label className="flex items-center gap-0.5 cursor-pointer text-xs">
          <input
            type="checkbox"
            checked={value === '불량'}
            onChange={() => handleStatusChange(rowId, field, value === '불량' ? null : '불량')}
            disabled={readOnly}
            className="w-3 h-3"
          />
          불량
        </label>
      </div>
    </td>
  );

  const inputClass = 'w-full text-center border-0 bg-transparent focus:outline-none focus:ring-1 focus:ring-blue-500 rounded text-xs';

  return (
    <div className="p-6 bg-white">
      {/* ===== 헤더 영역 ===== */}
      <div className="flex justify-between items-start mb-6">
        <div>
          <h1 className="text-2xl font-bold">중간검사성적서 (스크린)</h1>
          <p className="text-xs text-gray-500 mt-1">
            문서번호: {documentNo} | 작성일자: {fullDate}
          </p>
        </div>

        {/* 결재란 */}
        <table className="border-collapse text-sm flex-shrink-0">
          <tbody>
            <tr>
              <td className="border border-gray-400 px-4 py-1 text-center align-middle" rowSpan={3}>결<br/>재</td>
              <td className="border border-gray-400 px-6 py-1 text-center">작성</td>
              <td className="border border-gray-400 px-6 py-1 text-center">승인</td>
              <td className="border border-gray-400 px-6 py-1 text-center">승인</td>
              <td className="border border-gray-400 px-6 py-1 text-center">승인</td>
            </tr>
            <tr>
              <td className="border border-gray-400 px-6 py-3 text-center">{primaryAssignee}</td>
              <td className="border border-gray-400 px-6 py-3 text-center text-gray-400">이름</td>
              <td className="border border-gray-400 px-6 py-3 text-center text-gray-400">이름</td>
              <td className="border border-gray-400 px-6 py-3 text-center text-gray-400">이름</td>
            </tr>
            <tr>
              <td className="border border-gray-400 px-6 py-1 text-center">부서명</td>
              <td className="border border-gray-400 px-6 py-1 text-center">부서명</td>
              <td className="border border-gray-400 px-6 py-1 text-center">부서명</td>
              <td className="border border-gray-400 px-6 py-1 text-center">부서명</td>
            </tr>
          </tbody>
        </table>
      </div>

      {/* ===== 기본 정보 ===== */}
      <table className="w-full border-collapse text-xs mb-6">
        <tbody>
          <tr>
            <td className="border border-gray-400 bg-gray-50 px-3 py-2 font-medium w-24">제품명</td>
            <td className="border border-gray-400 px-3 py-2">스크린</td>
            <td className="border border-gray-400 bg-gray-50 px-3 py-2 font-medium w-28">제품 LOT NO</td>
            <td className="border border-gray-400 px-3 py-2">{order.lotNo || '-'}</td>
          </tr>
          <tr>
            <td className="border border-gray-400 bg-gray-50 px-3 py-2 font-medium">규격</td>
            <td className="border border-gray-400 px-3 py-2">와이어 글라스 코팅직물</td>
            <td className="border border-gray-400 bg-gray-50 px-3 py-2 font-medium">로트크기</td>
            <td className="border border-gray-400 px-3 py-2">{order.items?.length || 0} 개소</td>
          </tr>
          <tr>
            <td className="border border-gray-400 bg-gray-50 px-3 py-2 font-medium">수주처</td>
            <td className="border border-gray-400 px-3 py-2">{order.client || '-'}</td>
            <td className="border border-gray-400 bg-gray-50 px-3 py-2 font-medium">검사일자</td>
            <td className="border border-gray-400 px-3 py-2">{today}</td>
          </tr>
          <tr>
            <td className="border border-gray-400 bg-gray-50 px-3 py-2 font-medium">현장명</td>
            <td className="border border-gray-400 px-3 py-2">{order.projectName || '-'}</td>
            <td className="border border-gray-400 bg-gray-50 px-3 py-2 font-medium">검사자</td>
            <td className="border border-gray-400 px-3 py-2">{primaryAssignee}</td>
          </tr>
        </tbody>
      </table>

      {/* ===== 중간검사 기준서 ===== */}
      <div className="mb-1 font-bold text-sm">■ 중간검사 기준서</div>
      <table className="w-full border-collapse text-xs mb-6">
        <tbody>
          <tr>
            {/* 도해 영역 */}
            <td className="border border-gray-400 p-4 text-center text-gray-300 align-middle w-1/4" rowSpan={8}>
              <div className="h-40 flex items-center justify-center">도해 이미지 영역</div>
            </td>
            {/* 헤더 행 */}
            <th className="border border-gray-400 bg-gray-100 px-2 py-1 text-center" colSpan={2}>검사항목</th>
            <th className="border border-gray-400 bg-gray-100 px-2 py-1 text-center">검사기준</th>
            <th className="border border-gray-400 bg-gray-100 px-2 py-1 text-center">검사방법</th>
            <th className="border border-gray-400 bg-gray-100 px-2 py-1 text-center">검사주기</th>
            <th className="border border-gray-400 bg-gray-100 px-2 py-1 text-center">관련규정</th>
          </tr>
          <tr>
            <td className="border border-gray-400 px-2 py-1 font-medium" colSpan={2}>가공상태</td>
            <td className="border border-gray-400 px-2 py-1">사용상 해로운 결함이 없을것</td>
            <td className="border border-gray-400 px-2 py-1 text-center">육안검사</td>
            <td className="border border-gray-400 px-2 py-1 text-center"></td>
            <td className="border border-gray-400 px-2 py-1">KS F 4510 5.1항</td>
          </tr>
          <tr>
            <td className="border border-gray-400 px-2 py-1 font-medium" colSpan={2}>재봉상태</td>
            <td className="border border-gray-400 px-2 py-1">내화실험 되어 견고하게</td>
            <td className="border border-gray-400 px-2 py-1 text-center"></td>
            <td className="border border-gray-400 px-2 py-1 text-center"></td>
            <td className="border border-gray-400 px-2 py-1"></td>
          </tr>
          <tr>
            <td className="border border-gray-400 px-2 py-1 font-medium" colSpan={2}>조립상태</td>
            <td className="border border-gray-400 px-2 py-1">엔도확인 견고하게 조립되어야 함</td>
            <td className="border border-gray-400 px-2 py-1 text-center"></td>
            <td className="border border-gray-400 px-2 py-1 text-center"></td>
            <td className="border border-gray-400 px-2 py-1">KS F 4510<br/>n = 1, c = 0</td>
          </tr>
          <tr>
            <td className="border border-gray-400 px-2 py-1 font-medium bg-gray-50" rowSpan={3}>치수<br/>(mm)</td>
            <td className="border border-gray-400 px-2 py-1 font-medium">길이</td>
            <td className="border border-gray-400 px-2 py-1">도면치수 ± 4</td>
            <td className="border border-gray-400 px-2 py-1 text-center"></td>
            <td className="border border-gray-400 px-2 py-1 text-center"></td>
            <td className="border border-gray-400 px-2 py-1"></td>
          </tr>
          <tr>
            <td className="border border-gray-400 px-2 py-1 font-medium">높이</td>
            <td className="border border-gray-400 px-2 py-1">도면치수 + 제한없음 − 40</td>
            <td className="border border-gray-400 px-2 py-1 text-center"></td>
            <td className="border border-gray-400 px-2 py-1 text-center"></td>
            <td className="border border-gray-400 px-2 py-1"></td>
          </tr>
          <tr>
            <td className="border border-gray-400 px-2 py-1 font-medium">간격</td>
            <td className="border border-gray-400 px-2 py-1">400 이하</td>
            <td className="border border-gray-400 px-2 py-1 text-center">GONO 게이지</td>
            <td className="border border-gray-400 px-2 py-1 text-center"></td>
            <td className="border border-gray-400 px-2 py-1">자체규정</td>
          </tr>
        </tbody>
      </table>

      {/* ===== 중간검사 DATA ===== */}
      <div className="mb-1 font-bold text-sm">■ 중간검사 DATA</div>
      <table className="w-full border-collapse text-xs mb-4">
        <thead>
          <tr className="bg-gray-100">
            <th className="border border-gray-400 p-1 w-8" rowSpan={2}>No.</th>
            <th className="border border-gray-400 p-1 w-16" rowSpan={2}>가공상태<br/>결모양</th>
            <th className="border border-gray-400 p-1 w-16" rowSpan={2}>재봉상태<br/>결모양</th>
            <th className="border border-gray-400 p-1 w-16" rowSpan={2}>조립상태</th>
            <th className="border border-gray-400 p-1" colSpan={2}>길이 (mm)</th>
            <th className="border border-gray-400 p-1" colSpan={2}>나비 (mm)</th>
            <th className="border border-gray-400 p-1" colSpan={2}>간격 (mm)</th>
            <th className="border border-gray-400 p-1 w-14" rowSpan={2}>판정<br/>(적/부)</th>
          </tr>
          <tr className="bg-gray-100">
            <th className="border border-gray-400 p-1 w-16">도면치수</th>
            <th className="border border-gray-400 p-1 w-16">측정값</th>
            <th className="border border-gray-400 p-1 w-16">도면치수</th>
            <th className="border border-gray-400 p-1 w-16">측정값</th>
            <th className="border border-gray-400 p-1 w-16">기준치</th>
            <th className="border border-gray-400 p-1 w-16">측정값</th>
          </tr>
        </thead>
        <tbody>
          {rows.map((row) => {
            const judgment = getRowJudgment(row);
            return (
              <tr key={row.id}>
                <td className="border border-gray-400 p-1 text-center">{row.id}</td>
                {/* 가공상태 - 양호/불량 체크 */}
                {renderCheckStatus(row.id, 'processStatus', row.processStatus)}
                {/* 재봉상태 - 양호/불량 체크 */}
                {renderCheckStatus(row.id, 'sewingStatus', row.sewingStatus)}
                {/* 조립상태 - 양호/불량 체크 */}
                {renderCheckStatus(row.id, 'assemblyStatus', row.assemblyStatus)}
                {/* 길이 - 도면치수 표시 + 측정값 입력 */}
                <td className="border border-gray-400 p-1 text-center">{row.lengthDesign}</td>
                <td className="border border-gray-400 p-1">
                  <input type="text" value={row.lengthMeasured} onChange={(e) => handleInputChange(row.id, 'lengthMeasured', e.target.value)} disabled={readOnly} className={inputClass} placeholder="-" />
                </td>
                {/* 나비 - 도면치수 표시 + 측정값 입력 */}
                <td className="border border-gray-400 p-1 text-center">{row.widthDesign}</td>
                <td className="border border-gray-400 p-1">
                  <input type="text" value={row.widthMeasured} onChange={(e) => handleInputChange(row.id, 'widthMeasured', e.target.value)} disabled={readOnly} className={inputClass} placeholder="-" />
                </td>
                {/* 간격 - 기준치 표시 + OK/NG 선택 */}
                <td className="border border-gray-400 p-1 text-center">{row.gapStandard}</td>
                <td className="border border-gray-400 p-1">
                  <div className="flex flex-col items-center gap-0.5">
                    <label className="flex items-center gap-0.5 cursor-pointer text-xs">
                      <input
                        type="checkbox"
                        checked={row.gapResult === 'OK'}
                        onChange={() => handleGapChange(row.id, row.gapResult === 'OK' ? null : 'OK')}
                        disabled={readOnly}
                        className="w-3 h-3"
                      />
                      OK
                    </label>
                    <label className="flex items-center gap-0.5 cursor-pointer text-xs">
                      <input
                        type="checkbox"
                        checked={row.gapResult === 'NG'}
                        onChange={() => handleGapChange(row.id, row.gapResult === 'NG' ? null : 'NG')}
                        disabled={readOnly}
                        className="w-3 h-3"
                      />
                      NG
                    </label>
                  </div>
                </td>
                {/* 판정 - 자동 계산 */}
                <td className={`border border-gray-400 p-1 text-center font-bold ${
                  judgment === '적' ? 'text-blue-600' : judgment === '부' ? 'text-red-600' : 'text-gray-300'
                }`}>
                  {judgment || '-'}
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>

      {/* ===== 부적합 내용 + 종합판정 ===== */}
      <table className="w-full border-collapse text-xs">
        <tbody>
          <tr>
            <td className="border border-gray-400 bg-gray-100 px-3 py-2 font-medium w-24 align-top">부적합 내용</td>
            <td className="border border-gray-400 px-3 py-2" colSpan={2}>
              <textarea value={inadequateContent} onChange={(e) => !readOnly && setInadequateContent(e.target.value)} disabled={readOnly}
                className="w-full border-0 bg-transparent focus:outline-none focus:ring-1 focus:ring-blue-500 rounded text-xs resize-none" rows={2} />
            </td>
            <td className="border border-gray-400 bg-gray-100 px-3 py-2 font-medium text-center w-24">종합판정</td>
          </tr>
          <tr>
            <td className="border border-gray-400 px-3 py-2" colSpan={3}></td>
            <td className={`border border-gray-400 px-3 py-2 text-center font-bold text-sm ${
              overallResult === '합격' ? 'text-blue-600' : overallResult === '불합격' ? 'text-red-600' : 'text-gray-400'
            }`}>
              {overallResult || '합격'}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}