"use client";

/**
 * 스크린 중간검사 성적서 문서 컴포넌트
 *
 * 공통 컴포넌트 사용:
 * - DocumentHeader: quality 레이아웃 + customApproval (QualityApprovalTable)
 */

import React from 'react';
import { DocumentHeader, QualityApprovalTable } from '@/components/document-system';
import { formatNumber } from '@/lib/utils/amount';

// 스크린 중간검사 성적서 데이터 타입
export interface ScreenInspectionData {
  documentNo: string;
  productName: string;
  specification: string;
  client: string;
  siteName: string;
  lotNo: string;
  lotSize: string;
  inspectionDate: string;
  inspector: string;
  approvers: {
    writer?: string;
    reviewer?: string;
    approver?: string;
  };
  // 중간검사 기준서 정보
  standardInfo: {
    appearance: { criteria: string; method: string; frequency: string; regulation: string };
    assembly: { criteria: string; method: string; frequency: string; regulation: string };
    dimensions: { criteria: string; method: string; frequency: string; regulation: string };
    coating: { criteria: string; method: string; frequency: string; regulation: string };
  };
  // 중간검사 DATA
  inspectionData: {
    serialNo: string;
    processState: '양호' | '불량';
    materialState: '양호' | '불량';
    assemblyState: '양호' | '불량';
    height: { standard: number; measured: number };
    width: { standard: number; measured: number };
    checkCount: string;
    checkResult: 'OK' | 'NG';
    result: '적합' | '부적합';
  }[];
  notes: string;
  overallResult: '합격' | '불합격';
}

// Mock 데이터
export const MOCK_SCREEN_INSPECTION: ScreenInspectionData = {
  documentNo: 'KDQP-01-006',
  productName: '스크린',
  specification: '와이어 클러치 크립지름',
  client: '주일',
  siteName: '용산고등학교(4호)',
  lotNo: 'KD-WE-251015-01-(3)',
  lotSize: '11 개소',
  inspectionDate: '2025.',
  inspector: '',
  approvers: {
    writer: '전진',
    reviewer: '',
    approver: '',
  },
  standardInfo: {
    appearance: {
      criteria: '사용상 해로운 결함이 없을 것',
      method: '',
      frequency: '',
      regulation: 'KS F 4510 5.1항',
    },
    assembly: {
      criteria: '밴드시트 읍동에 의해\n견고하게 조립되어야 함',
      method: '육안검사',
      frequency: 'n = L, c = 0',
      regulation: 'KS F 4510 7항\n유지 건설규',
    },
    dimensions: {
      criteria: '도면대로 + 레벨상황',
      method: '',
      frequency: '',
      regulation: '',
    },
    coating: {
      criteria: '400 이하',
      method: 'GO/NO\nGAGE',
      frequency: '',
      regulation: '',
    },
  },
  inspectionData: [
    { serialNo: '01', processState: '양호', materialState: '양호', assemblyState: '양호', height: { standard: 7400, measured: 2950 }, width: { standard: 2950, measured: 2950 }, checkCount: '400 이하', checkResult: 'OK', result: '적합' },
    { serialNo: '02', processState: '양호', materialState: '양호', assemblyState: '양호', height: { standard: 4700, measured: 2950 }, width: { standard: 2950, measured: 2950 }, checkCount: '400 이하', checkResult: 'OK', result: '적합' },
    { serialNo: '03', processState: '양호', materialState: '양호', assemblyState: '양호', height: { standard: 6790, measured: 2950 }, width: { standard: 2950, measured: 2950 }, checkCount: '400 이하', checkResult: 'OK', result: '적합' },
    { serialNo: '04', processState: '양호', materialState: '양호', assemblyState: '양호', height: { standard: 3700, measured: 2950 }, width: { standard: 2950, measured: 2950 }, checkCount: '400 이하', checkResult: 'OK', result: '적합' },
    { serialNo: '05', processState: '양호', materialState: '양호', assemblyState: '양호', height: { standard: 6000, measured: 2950 }, width: { standard: 2950, measured: 2950 }, checkCount: '400 이하', checkResult: 'OK', result: '적합' },
    { serialNo: '06', processState: '양호', materialState: '양호', assemblyState: '양호', height: { standard: 7300, measured: 2950 }, width: { standard: 2950, measured: 2950 }, checkCount: '400 이하', checkResult: 'OK', result: '적합' },
    { serialNo: '07', processState: '양호', materialState: '양호', assemblyState: '양호', height: { standard: 3700, measured: 2950 }, width: { standard: 2950, measured: 2950 }, checkCount: '400 이하', checkResult: 'OK', result: '적합' },
  ],
  notes: '',
  overallResult: '합격',
};

interface ScreenInspectionDocumentProps {
  data?: ScreenInspectionData;
}

export const ScreenInspectionDocument = ({ data = MOCK_SCREEN_INSPECTION }: ScreenInspectionDocumentProps) => {
  return (
    <div className="bg-white p-8 w-full text-sm shadow-sm print:shadow-none">
      {/* 문서 헤더 (공통 컴포넌트) */}
      <DocumentHeader
        title="스크린"
        subtitle="중간검사 성적서"
        layout="quality"
        logo={{ text: 'KD', subtext: '경동기업\nKYUNGDONG COMPANY' }}
        customApproval={
          <QualityApprovalTable
            type="4col"
            approvers={data.approvers}
          />
        }
      />

      {/* 기본 정보 테이블 */}
      <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-20 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-24 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.lotSize}</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>

      {/* 중간검사 기준서 */}
      <table className="w-full border-collapse mb-4 text-xs">
        <thead>
          <tr className="bg-gray-100">
            <th className="border border-gray-400 px-2 py-2 w-24" rowSpan={2}>중간검사<br/>기준서</th>
            <th className="border border-gray-400 px-2 py-2 w-12">도해</th>
            <th className="border border-gray-400 px-2 py-2 w-20">검사항목</th>
            <th className="border border-gray-400 px-2 py-2">검사기준</th>
            <th className="border border-gray-400 px-2 py-2 w-16">검사방법</th>
            <th className="border border-gray-400 px-2 py-2 w-16">검사주기</th>
            <th className="border border-gray-400 px-2 py-2 w-24">관련규정</th>
          </tr>
        </thead>
        <tbody>
          {/* 도해 영역 - 첫 번째 행 */}
          <tr>
            <td className="border border-gray-400 p-2 text-center align-middle" rowSpan={4}>
              {/* 도해 이미지 영역 */}
              <div className="w-20 h-28 mx-auto border border-gray-300 bg-gray-50 flex items-center justify-center">
                <div className="text-center text-gray-400">
                  <div className="flex flex-col items-center gap-1">
                    <div className="flex items-center gap-2">
                      <span className="w-4 h-4 border border-gray-400 rounded-full flex items-center justify-center text-[8px]">1</span>
                    </div>
                    <div className="w-12 h-1 bg-gray-300"></div>
                    <div className="flex items-center gap-2">
                      <span className="w-4 h-4 border border-gray-400 rounded-full flex items-center justify-center text-[8px]">2</span>
                    </div>
                    <div className="w-12 h-8 border border-gray-300"></div>
                    <div className="flex items-center gap-2">
                      <span className="w-4 h-4 border border-gray-400 rounded-full flex items-center justify-center text-[8px]">3</span>
                    </div>
                  </div>
                </div>
              </div>
            </td>
            <td className="border border-gray-400 px-2 py-2 text-center">가공상태</td>
            <td className="border border-gray-400 px-2 py-2 text-center">겉모양</td>
            <td className="border border-gray-400 px-2 py-2">{data.standardInfo.appearance.criteria}</td>
            <td className="border border-gray-400 px-2 py-2 text-center"></td>
            <td className="border border-gray-400 px-2 py-2 text-center"></td>
            <td className="border border-gray-400 px-2 py-2 text-center text-[10px]">{data.standardInfo.appearance.regulation}</td>
          </tr>
          <tr>
            <td className="border border-gray-400 px-2 py-2 text-center">조립상태</td>
            <td className="border border-gray-400 px-2 py-2 text-center">조립상태</td>
            <td className="border border-gray-400 px-2 py-2 whitespace-pre-line">{data.standardInfo.assembly.criteria}</td>
            <td className="border border-gray-400 px-2 py-2 text-center">{data.standardInfo.assembly.method}</td>
            <td className="border border-gray-400 px-2 py-2 text-center whitespace-pre-line">{data.standardInfo.assembly.frequency}</td>
            <td className="border border-gray-400 px-2 py-2 text-center text-[10px] whitespace-pre-line">{data.standardInfo.assembly.regulation}</td>
          </tr>
          <tr>
            <td className="border border-gray-400 px-2 py-2 text-center"></td>
            <td className="border border-gray-400 px-2 py-2 text-center">도면대로 + 레벨상황</td>
            <td className="border border-gray-400 px-2 py-2">{data.standardInfo.dimensions.criteria}</td>
            <td className="border border-gray-400 px-2 py-2 text-center"></td>
            <td className="border border-gray-400 px-2 py-2 text-center"></td>
            <td className="border border-gray-400 px-2 py-2 text-center"></td>
          </tr>
          <tr>
            <td className="border border-gray-400 px-2 py-2 text-center">간극</td>
            <td className="border border-gray-400 px-2 py-2 text-center"></td>
            <td className="border border-gray-400 px-2 py-2">{data.standardInfo.coating.criteria}</td>
            <td className="border border-gray-400 px-2 py-2 text-center whitespace-pre-line">{data.standardInfo.coating.method}</td>
            <td className="border border-gray-400 px-2 py-2 text-center"></td>
            <td className="border border-gray-400 px-2 py-2 text-center"></td>
          </tr>
        </tbody>
      </table>

      {/* 중간검사 DATA */}
      <div className="mb-2 text-xs font-medium">중간검사 DATA</div>
      <table className="w-full border-collapse text-xs mb-4">
        <thead>
          <tr className="bg-gray-100">
            <th className="border border-gray-400 px-1 py-1" rowSpan={2}>일련<br/>번호</th>
            <th className="border border-gray-400 px-1 py-1 w-12" colSpan={1}>검사항</th>
            <th className="border border-gray-400 px-1 py-1" colSpan={4}>치수 [mm]</th>
            <th className="border border-gray-400 px-1 py-1 w-12" colSpan={2}>판 정</th>
            <th className="border border-gray-400 px-1 py-1 w-14" rowSpan={2}>판정</th>
          </tr>
          <tr className="bg-gray-100">
            <th className="border border-gray-400 px-1 py-1">가공상태</th>
            <th className="border border-gray-400 px-1 py-1">재료현황</th>
            <th className="border border-gray-400 px-1 py-1">조립상태</th>
            <th className="border border-gray-400 px-1 py-1">⓪ 높이</th>
            <th className="border border-gray-400 px-1 py-1">⓪ 너비</th>
            <th className="border border-gray-400 px-1 py-1">측정값</th>
            <th className="border border-gray-400 px-1 py-1">⓪ 간격</th>
          </tr>
        </thead>
        <tbody>
          {data.inspectionData.map((item, index) => (
            <tr key={index}>
              <td className="border border-gray-400 px-1 py-1 text-center">{item.serialNo}</td>
              <td className="border border-gray-400 px-1 py-1 text-center">
                ☐ 양호 ☐ 불량
              </td>
              <td className="border border-gray-400 px-1 py-1 text-center">
                ☐ 양호 ☐ 불량
              </td>
              <td className="border border-gray-400 px-1 py-1 text-center">
                ☐ 양호 ☐ 불량
              </td>
              <td className="border border-gray-400 px-1 py-1 text-center font-medium">{formatNumber(item.height.standard)}</td>
              <td className="border border-gray-400 px-1 py-1 text-center font-medium">{formatNumber(item.width.standard)}</td>
              <td className="border border-gray-400 px-1 py-1 text-center">{item.checkCount}</td>
              <td className="border border-gray-400 px-1 py-1 text-center">
                ☐ OK ☐ NG
              </td>
              <td className="border border-gray-400 px-1 py-1 text-center">
                ☐ 적합 ☐ 부적합
              </td>
            </tr>
          ))}
        </tbody>
      </table>

      {/* 부적합 내용 */}
      <div className="border border-gray-400 mb-4">
        <div className="bg-gray-100 px-3 py-1 text-xs font-medium border-b border-gray-400">【부적합 내용】</div>
        <div className="px-3 py-2 text-xs text-gray-600 min-h-[30px]">{data.notes}</div>
      </div>

      {/* 문서번호 및 종합판정 */}
      <div className="flex justify-between items-end">
        <div className="text-xs text-gray-500">{data.documentNo}</div>
        <div className="border border-gray-400">
          <div className="bg-gray-100 px-4 py-1 text-center text-xs font-medium border-b border-gray-400">종합판정</div>
          <div className={`px-8 py-2 text-center text-sm font-bold ${data.overallResult === '합격' ? 'text-blue-600' : 'text-red-600'}`}>
            {data.overallResult}
          </div>
        </div>
        <div className="text-xs text-gray-500">KDPS-03-01</div>
      </div>
    </div>
  );
};
