"use client";

/**
 * 조인트바 중간검사 성적서 문서 컴포넌트
 *
 * 새 기획서(SlatJointBarInspectionContent) 레이아웃 적용:
 * - 헤더: 다른 중간검사 성적서(스크린/절곡/슬랫)와 동일한 헤딩 + 결재 테이블
 * - 기본정보: 제품명/슬랫, 규격/슬랫, 수주처, 부서
 * - 중간검사 기준서 KOPS-20: 도해 이미지 + 겉모양(3행) + 치수(4행)
 * - 중간검사 DATA: No, 겉모양(가공/조립), ①②③④ 치수, 판정
 * - 부적합 내용 + 종합판정 (한 행)
 */

import React from 'react';

// 조인트바 중간검사 성적서 데이터 타입
export interface JointbarInspectionData {
  documentNo: string;
  productName: string;
  specification: string;
  client: string;
  siteName: string;
  lotNo: string;
  department: string;
  inspectionDate: string;
  inspector: string;
  approvers: {
    writer?: string;
    reviewer?: string;
    approver?: string;
  };
  // 중간검사 DATA
  inspectionData: {
    serialNo: string;
    processState: '양호' | '불량';
    assemblyState: '양호' | '불량';
    height1: { standard: string; measured: string };
    height2: { standard: string; measured: string };
    length: { standard: string; measured: string };
    interval: { standard: string; measured: string };
    result: '적' | '부';
  }[];
  notes: string;
  overallResult: '합격' | '불합격';
}

// Mock 데이터
export const MOCK_JOINTBAR_INSPECTION: JointbarInspectionData = {
  documentNo: 'KDQP-01-009',
  productName: '슬랫',
  specification: '슬랫',
  client: '주일',
  siteName: '용산고등학교(4호)',
  lotNo: 'KD-WE-251015-01-(3)',
  department: '생산부',
  inspectionDate: '2025.',
  inspector: '',
  approvers: {
    writer: '전진',
    reviewer: '',
    approver: '',
  },
  inspectionData: [
    { serialNo: '1', processState: '양호', assemblyState: '양호', height1: { standard: '43.1 ± 0.5', measured: '43.1' }, height2: { standard: '14.5 ± 1', measured: '14.5' }, length: { standard: '', measured: '' }, interval: { standard: '150 ± 4', measured: '150' }, result: '적' },
    { serialNo: '2', processState: '양호', assemblyState: '양호', height1: { standard: '43.1 ± 0.5', measured: '43.1' }, height2: { standard: '14.5 ± 1', measured: '14.5' }, length: { standard: '', measured: '' }, interval: { standard: '150 ± 4', measured: '150' }, result: '적' },
    { serialNo: '3', processState: '양호', assemblyState: '양호', height1: { standard: '43.1 ± 0.5', measured: '43.1' }, height2: { standard: '14.5 ± 1', measured: '14.5' }, length: { standard: '', measured: '' }, interval: { standard: '150 ± 4', measured: '150' }, result: '적' },
    { serialNo: '4', processState: '양호', assemblyState: '양호', height1: { standard: '43.1 ± 0.5', measured: '43.1' }, height2: { standard: '14.5 ± 1', measured: '14.5' }, length: { standard: '', measured: '' }, interval: { standard: '150 ± 4', measured: '150' }, result: '적' },
    { serialNo: '5', processState: '양호', assemblyState: '양호', height1: { standard: '43.1 ± 0.5', measured: '43.1' }, height2: { standard: '14.5 ± 1', measured: '14.5' }, length: { standard: '', measured: '' }, interval: { standard: '150 ± 4', measured: '150' }, result: '적' },
  ],
  notes: '',
  overallResult: '합격',
};

interface JointbarInspectionDocumentProps {
  data?: JointbarInspectionData;
}

export const JointbarInspectionDocument = ({ data = MOCK_JOINTBAR_INSPECTION }: JointbarInspectionDocumentProps) => {
  return (
    <div className="bg-white p-8 w-full text-sm shadow-sm print:shadow-none">
      {/* 헤더 영역 - 다른 중간검사 성적서와 동일 패턴 */}
      <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 whitespace-nowrap">
            문서번호: {data.documentNo} | 검사일자: {data.inspectionDate}
          </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">{data.approvers.writer || ''}</td>
              <td className="border border-gray-400 px-6 py-3 text-center text-gray-400">{data.approvers.reviewer || '이름'}</td>
              <td className="border border-gray-400 px-6 py-3 text-center text-gray-400">{data.approvers.approver || '이름'}</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 whitespace-nowrap">부서명</td>
              <td className="border border-gray-400 px-6 py-1 text-center whitespace-nowrap">부서명</td>
              <td className="border border-gray-400 px-6 py-1 text-center whitespace-nowrap">부서명</td>
              <td className="border border-gray-400 px-6 py-1 text-center whitespace-nowrap">부서명</td>
            </tr>
          </tbody>
        </table>
      </div>

      {/* 기본 정보 테이블 */}
      <table className="w-full border-collapse mb-4 text-xs">
        <tbody>
          <tr>
            <td className="border border-gray-400 px-3 py-2 bg-gray-100 w-24 font-medium">제품명</td>
            <td className="border border-gray-400 px-3 py-2">{data.productName}</td>
            <td className="border border-gray-400 px-3 py-2 bg-gray-100 w-28 font-medium">제품 LOT NO</td>
            <td className="border border-gray-400 px-3 py-2">{data.lotNo}</td>
          </tr>
          <tr>
            <td className="border border-gray-400 px-3 py-2 bg-gray-100 font-medium">규 격</td>
            <td className="border border-gray-400 px-3 py-2">{data.specification}</td>
            <td className="border border-gray-400 px-3 py-2 bg-gray-100 font-medium">부서</td>
            <td className="border border-gray-400 px-3 py-2">{data.department}</td>
          </tr>
          <tr>
            <td className="border border-gray-400 px-3 py-2 bg-gray-100 font-medium">수주처</td>
            <td className="border border-gray-400 px-3 py-2">{data.client}</td>
            <td className="border border-gray-400 px-3 py-2 bg-gray-100 font-medium">검사일자</td>
            <td className="border border-gray-400 px-3 py-2">{data.inspectionDate}</td>
          </tr>
          <tr>
            <td className="border border-gray-400 px-3 py-2 bg-gray-100 font-medium">현장명</td>
            <td className="border border-gray-400 px-3 py-2">{data.siteName}</td>
            <td className="border border-gray-400 px-3 py-2 bg-gray-100 font-medium">검사자</td>
            <td className="border border-gray-400 px-3 py-2">{data.inspector}</td>
          </tr>
        </tbody>
      </table>

      {/* 중간검사 기준서 KOPS-20 */}
      <div className="mb-1 font-bold text-xs">■ 중간검사 기준서 KOPS-20</div>
      <table className="w-full border-collapse text-xs mb-4">
        <tbody>
          <tr>
            {/* 도해 영역 */}
            <td className="border border-gray-400 p-4 text-center text-gray-300 align-middle w-1/5" 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 text-center" rowSpan={3}>겉모양</td>
            <td className="border border-gray-400 px-2 py-1 font-medium">가공상태</td>
            <td className="border border-gray-400 px-2 py-1">사용상 해로운 결함이 없을것</td>
            <td className="border border-gray-400 px-2 py-1 text-center" rowSpan={3}>육안검사</td>
            <td className="border border-gray-400 px-2 py-1 text-center" rowSpan={7}>n = 1, c = 0</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" rowSpan={2}>조립상태</td>
            <td className="border border-gray-400 px-2 py-1">엔드락이 용접에 의해<br/>견고하게 조립되어야 함</td>
            <td className="border border-gray-400 px-2 py-1">KS F 4510 9항</td>
          </tr>
          <tr>
            <td className="border border-gray-400 px-2 py-1">용접부위에 락카도색이<br/>되어야 함</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 bg-gray-50 text-center" rowSpan={4}>치수<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 text-center">43.1 ± 0.5</td>
            <td className="border border-gray-400 px-2 py-1 text-center" rowSpan={4}>체크검사</td>
            <td className="border border-gray-400 px-2 py-1" rowSpan={3}>KS F 4510 7항<br/>표9</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 text-center">14.5 ± 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 text-center">도면치수 ± 4</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 text-center">150 ± 4</td>
            <td className="border border-gray-400 px-2 py-1">자체규정</td>
          </tr>
        </tbody>
      </table>

      {/* 중간검사 DATA */}
      <div className="mb-1 font-bold text-xs">■ 중간검사 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" colSpan={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" colSpan={2}>④ 간격</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>
            <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>
          {data.inspectionData.map((item, index) => (
            <tr key={index}>
              <td className="border border-gray-400 p-1 text-center">{item.serialNo}</td>
              {/* 가공상태 */}
              <td className="border border-gray-400 p-1">
                <div className="flex flex-col items-center gap-0.5">
                  <span className="flex items-center gap-0.5 text-xs whitespace-nowrap">
                    <span className={`inline-flex items-center justify-center w-3 h-3 border rounded-sm text-[8px] leading-none ${item.processState === '양호' ? 'border-gray-600 bg-gray-700 text-white' : 'border-gray-400 bg-white'}`}>
                      {item.processState === '양호' ? '✓' : ''}
                    </span>
                    양호
                  </span>
                  <span className="flex items-center gap-0.5 text-xs whitespace-nowrap">
                    <span className={`inline-flex items-center justify-center w-3 h-3 border rounded-sm text-[8px] leading-none ${item.processState === '불량' ? 'border-gray-600 bg-gray-700 text-white' : 'border-gray-400 bg-white'}`}>
                      {item.processState === '불량' ? '✓' : ''}
                    </span>
                    불량
                  </span>
                </div>
              </td>
              {/* 조립상태 */}
              <td className="border border-gray-400 p-1">
                <div className="flex flex-col items-center gap-0.5">
                  <span className="flex items-center gap-0.5 text-xs whitespace-nowrap">
                    <span className={`inline-flex items-center justify-center w-3 h-3 border rounded-sm text-[8px] leading-none ${item.assemblyState === '양호' ? 'border-gray-600 bg-gray-700 text-white' : 'border-gray-400 bg-white'}`}>
                      {item.assemblyState === '양호' ? '✓' : ''}
                    </span>
                    양호
                  </span>
                  <span className="flex items-center gap-0.5 text-xs whitespace-nowrap">
                    <span className={`inline-flex items-center justify-center w-3 h-3 border rounded-sm text-[8px] leading-none ${item.assemblyState === '불량' ? 'border-gray-600 bg-gray-700 text-white' : 'border-gray-400 bg-white'}`}>
                      {item.assemblyState === '불량' ? '✓' : ''}
                    </span>
                    불량
                  </span>
                </div>
              </td>
              {/* ① 높이 */}
              <td className="border border-gray-400 p-1 text-center">{item.height1.standard}</td>
              <td className="border border-gray-400 p-1 text-center">{item.height1.measured || '-'}</td>
              {/* ② 높이 */}
              <td className="border border-gray-400 p-1 text-center">{item.height2.standard}</td>
              <td className="border border-gray-400 p-1 text-center">{item.height2.measured || '-'}</td>
              {/* ③ 길이 */}
              <td className="border border-gray-400 p-1 text-center">{item.length.standard || '-'}</td>
              <td className="border border-gray-400 p-1 text-center">{item.length.measured || '-'}</td>
              {/* ④ 간격 */}
              <td className="border border-gray-400 p-1 text-center">{item.interval.standard}</td>
              <td className="border border-gray-400 p-1 text-center">{item.interval.measured || '-'}</td>
              {/* 판정 */}
              <td className={`border border-gray-400 p-1 text-center font-bold ${
                item.result === '적' ? 'text-blue-600' : 'text-red-600'
              }`}>
                {item.result}
              </td>
            </tr>
          ))}
        </tbody>
      </table>

      {/* 부적합 내용 + 종합판정 */}
      <table className="w-full border-collapse text-xs mb-4">
        <tbody>
          <tr>
            <td className="border border-gray-400 bg-gray-100 px-3 py-2 font-medium w-24 align-middle text-center">부적합 내용</td>
            <td className="border border-gray-400 px-3 py-2 min-h-[30px]">{data.notes || '\u00A0'}</td>
            <td className="border border-gray-400 bg-gray-100 px-3 py-2 font-medium text-center w-24">종합판정</td>
            <td className={`border border-gray-400 px-3 py-2 text-center font-bold text-sm w-24 ${
              data.overallResult === '합격' ? 'text-blue-600' : 'text-red-600'
            }`}>
              {data.overallResult}
            </td>
          </tr>
        </tbody>
      </table>

      {/* 문서번호 */}
      <div className="flex justify-between items-end">
        <div className="text-xs text-gray-500">{data.documentNo}</div>
        <div className="text-xs text-gray-500">KDPS-10-03</div>
      </div>
    </div>
  );
};
