"use client";

import React from 'react';

// 수입검사 성적서 데이터 타입
export interface ImportInspectionData {
  // 헤더 정보
  documentNo: string;
  reportDate: string;
  productName: string;
  specification: string;
  materialNo: string;
  lotSize: number;
  supplier: string;
  lotNo: string;
  inspectionDate: string;
  inspector: string;
  approvers: {
    writer?: string;
    reviewer?: string;
    approver?: string;
  };
  // 검사 항목
  inspectionItems: {
    appearance: {
      result: 'OK' | 'NG';
      measurements: ('OK' | 'NG')[];
    };
    dimensions: {
      thickness: {
        standard: number;
        tolerance: string;
        measurements: number[];
      };
      width: {
        standard: number;
        tolerance: string;
        measurements: number[];
      };
      length: {
        standard: number;
        tolerance: string;
        measurements: number[];
      };
    };
    tensileStrength: {
      standard: string;
      measurements: number[];
    };
    elongation: {
      thicknessRange: string;
      standard: string;
      supplier: string;
      measurements: number[];
    };
    zincCoating: {
      standard: string;
      measurements: number[];
    };
  };
  overallResult: '합격' | '불합격';
}

// Mock 데이터
export const MOCK_IMPORT_INSPECTION: ImportInspectionData = {
  documentNo: 'KDQP-01-001',
  reportDate: '2025-07-15',
  productName: '전기 아연도금 강판 (KS D 3528, SECC) "EGI 평국판"',
  specification: '1.55 * 1218 × 480',
  materialNo: 'PE02RB',
  lotSize: 200,
  supplier: '지오TNS (KG스틸)',
  lotNo: '250715-02',
  inspectionDate: '07/15',
  inspector: '노원호',
  approvers: {
    writer: '노원호',
    reviewer: '',
    approver: '',
  },
  inspectionItems: {
    appearance: {
      result: 'OK',
      measurements: ['OK', 'OK', 'OK'],
    },
    dimensions: {
      thickness: {
        standard: 1.55,
        tolerance: '±0.10',
        measurements: [1.528, 1.533, 1.521],
      },
      width: {
        standard: 1219,
        tolerance: '±7',
        measurements: [1222, 1222, 1222],
      },
      length: {
        standard: 480,
        tolerance: '±15',
        measurements: [480, 480, 480],
      },
    },
    tensileStrength: {
      standard: '270 이상',
      measurements: [313.8],
    },
    elongation: {
      thicknessRange: '두께 1.0 이상 ~ 1.6 미만',
      standard: '37 이상',
      supplier: '공급업체 밀시트',
      measurements: [46.5],
    },
    zincCoating: {
      standard: '편면 17 이상',
      measurements: [17.21, 17.17],
    },
  },
  overallResult: '합격',
};

interface ImportInspectionDocumentProps {
  data?: ImportInspectionData;
}

export const ImportInspectionDocument = ({ data = MOCK_IMPORT_INSPECTION }: ImportInspectionDocumentProps) => {
  return (
    <div className="bg-white p-8 w-full text-sm shadow-sm print:shadow-none">
      {/* 헤더 */}
      <div className="flex justify-between items-start mb-4">
        <div className="flex items-center gap-2">
          <div className="text-2xl font-bold">KD</div>
          <div className="text-xs text-gray-600">경동기업</div>
        </div>
        <div className="text-2xl font-bold tracking-[0.3rem]">수 입 검 사 성 적 서</div>
        <div className="text-right">
          <table className="text-xs border-collapse">
            <tbody>
              <tr>
                <td className="border border-gray-400 px-2 py-1 bg-gray-100 w-12">담당</td>
                <td className="border border-gray-400 px-2 py-1 w-16">부서장</td>
              </tr>
              <tr>
                <td className="border border-gray-400 px-2 py-1 bg-gray-100">결재</td>
                <td className="border border-gray-400 px-2 py-1 h-8">{data.approvers.writer}</td>
              </tr>
            </tbody>
          </table>
          <div className="text-xs text-right mt-1">접고일자: {data.reportDate}</div>
        </div>
      </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-20 font-medium">품 명</td>
            <td className="border border-gray-400 px-3 py-2" colSpan={3}>{data.productName}</td>
            <td className="border border-gray-400 px-3 py-2 bg-gray-100 w-20 font-medium">납품업체<br/>(제조업체)</td>
            <td className="border border-gray-400 px-3 py-2 w-28">{data.supplier}</td>
          </tr>
          <tr>
            <td className="border border-gray-400 px-3 py-2 bg-gray-100 font-medium">규 격<br/>(두께*너비*길이)</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 w-20 font-medium">로트번호</td>
            <td className="border border-gray-400 px-3 py-2">{data.lotNo}</td>
            <td className="border border-gray-400 px-3 py-2 bg-gray-100 font-medium" rowSpan={2}></td>
            <td className="border border-gray-400 px-3 py-2" rowSpan={2}></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.materialNo}</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.lotSize}</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} <span className="ml-2">☑</span></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"></td>
          </tr>
        </tbody>
      </table>

      {/* 검사 항목 테이블 */}
      <table className="w-full border-collapse text-xs">
        <thead>
          <tr className="bg-gray-100">
            <th className="border border-gray-400 px-2 py-2 w-10" rowSpan={2}>NO</th>
            <th className="border border-gray-400 px-2 py-2 w-20" rowSpan={2}>검사항목</th>
            <th className="border border-gray-400 px-2 py-2" colSpan={2}>검사기준</th>
            <th className="border border-gray-400 px-2 py-2 w-16" rowSpan={2}>검사방식</th>
            <th className="border border-gray-400 px-2 py-2 w-16" rowSpan={2}>검사주기</th>
            <th className="border border-gray-400 px-2 py-2" colSpan={3}>측정값</th>
            <th className="border border-gray-400 px-2 py-2 w-14" rowSpan={2}>판정<br/>(적/부)</th>
          </tr>
          <tr className="bg-gray-100">
            <th className="border border-gray-400 px-2 py-1"></th>
            <th className="border border-gray-400 px-2 py-1"></th>
            <th className="border border-gray-400 px-2 py-1 w-16">n1<br/>양호/불량</th>
            <th className="border border-gray-400 px-2 py-1 w-16">n2<br/>양호/불량</th>
            <th className="border border-gray-400 px-2 py-1 w-16">n3<br/>양호/불량</th>
          </tr>
        </thead>
        <tbody>
          {/* 1. 겉모양 */}
          <tr>
            <td className="border border-gray-400 px-2 py-2 text-center align-middle" rowSpan={1}>1</td>
            <td className="border border-gray-400 px-2 py-2 text-center align-middle">겉모양</td>
            <td className="border border-gray-400 px-2 py-2 text-center" colSpan={2}>
              사용상 해로운<br/>결함이 없을 것
            </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">
              <span className={data.inspectionItems.appearance.result === 'OK' ? 'font-bold' : ''}>☑OK</span>
              <span className={data.inspectionItems.appearance.result === 'NG' ? 'font-bold' : ''}>☐NG</span>
            </td>
            <td className="border border-gray-400 px-2 py-2 text-center">
              <span className={data.inspectionItems.appearance.measurements[0] === 'OK' ? 'font-bold' : ''}>☑OK</span>
              <span className={data.inspectionItems.appearance.measurements[0] === 'NG' ? 'font-bold' : ''}>☐NG</span>
            </td>
            <td className="border border-gray-400 px-2 py-2 text-center">
              <span className={data.inspectionItems.appearance.measurements[1] === 'OK' ? 'font-bold' : ''}>☑OK</span>
              <span className={data.inspectionItems.appearance.measurements[1] === 'NG' ? 'font-bold' : ''}>☐NG</span>
            </td>
            <td className="border border-gray-400 px-2 py-2 text-center">
              <span className={data.inspectionItems.appearance.measurements[2] === 'OK' ? 'font-bold' : ''}>☑OK</span>
              <span className={data.inspectionItems.appearance.measurements[2] === 'NG' ? 'font-bold' : ''}>☐NG</span>
            </td>
            <td className="border border-gray-400 px-2 py-2 text-center font-medium">적</td>
          </tr>

          {/* 2. 치수 */}
          <tr>
            <td className="border border-gray-400 px-2 py-2 text-center align-middle" rowSpan={6}>2</td>
            <td className="border border-gray-400 px-2 py-2 text-center align-middle" rowSpan={6}>치수</td>
            <td className="border border-gray-400 px-2 py-1 text-center align-middle" rowSpan={4}>
              두께<br/>{data.inspectionItems.dimensions.thickness.standard}
            </td>
            <td className="border border-gray-400 px-1 py-1 text-xs">
              <div className="flex items-center gap-1">
                <span>☐</span>
                <span>0.8 이상<br/>~ 1.0 미만</span>
                <span className="ml-auto">± 0.07</span>
              </div>
            </td>
            <td className="border border-gray-400 px-2 py-1 text-center" rowSpan={6}>
              n = 3<br/>c = 0
            </td>
            <td className="border border-gray-400 px-2 py-1 text-center" rowSpan={6}>체크검사</td>
            <td className="border border-gray-400 px-2 py-2 text-center" rowSpan={4}>
              {data.inspectionItems.dimensions.thickness.measurements[0]}
            </td>
            <td className="border border-gray-400 px-2 py-2 text-center" rowSpan={4}>
              {data.inspectionItems.dimensions.thickness.measurements[1]}
            </td>
            <td className="border border-gray-400 px-2 py-2 text-center" rowSpan={4}>
              {data.inspectionItems.dimensions.thickness.measurements[2]}
            </td>
            <td className="border border-gray-400 px-2 py-2 text-center font-medium" rowSpan={6}>적</td>
          </tr>
          <tr>
            <td className="border border-gray-400 px-1 py-1 text-xs">
              <div className="flex items-center gap-1">
                <span>☐</span>
                <span>1.0 이상<br/>~ 1.25 미만</span>
                <span className="ml-auto">± 0.08</span>
              </div>
            </td>
          </tr>
          <tr>
            <td className="border border-gray-400 px-1 py-1 text-xs bg-blue-50">
              <div className="flex items-center gap-1">
                <span>☑</span>
                <span>1.25 이상<br/>~ 1.6 미만</span>
                <span className="ml-auto">± 0.10</span>
              </div>
            </td>
          </tr>
          <tr>
            <td className="border border-gray-400 px-1 py-1 text-xs">
              <div className="flex items-center gap-1">
                <span>☐</span>
                <span>1.6 이상<br/>~ 2.0 미만</span>
                <span className="ml-auto">± 0.12</span>
              </div>
            </td>
          </tr>
          <tr>
            <td className="border border-gray-400 px-2 py-1 text-center align-middle" rowSpan={1}>
              너비<br/>{data.inspectionItems.dimensions.width.standard}
            </td>
            <td className="border border-gray-400 px-1 py-1 text-xs bg-blue-50">
              <div className="flex items-center gap-1">
                <span>☑</span>
                <span>1250 미만</span>
                <span className="ml-auto">+ 7<br/>- 0</span>
              </div>
            </td>
            <td className="border border-gray-400 px-2 py-2 text-center">
              {data.inspectionItems.dimensions.width.measurements[0]}
            </td>
            <td className="border border-gray-400 px-2 py-2 text-center">
              {data.inspectionItems.dimensions.width.measurements[1]}
            </td>
            <td className="border border-gray-400 px-2 py-2 text-center">
              {data.inspectionItems.dimensions.width.measurements[2]}
            </td>
          </tr>
          <tr>
            <td className="border border-gray-400 px-2 py-1 text-center align-middle" rowSpan={1}>
              길이<br/>{data.inspectionItems.dimensions.length.standard}
            </td>
            <td className="border border-gray-400 px-1 py-1 text-xs bg-blue-50">
              <div className="flex items-center gap-1">
                <span>☑</span>
                <span>2000 이상<br/>~ 4000 미만</span>
                <span className="ml-auto">+ 15<br/>- 0</span>
              </div>
            </td>
            <td className="border border-gray-400 px-2 py-2 text-center">
              {data.inspectionItems.dimensions.length.measurements[0]}
            </td>
            <td className="border border-gray-400 px-2 py-2 text-center">
              {data.inspectionItems.dimensions.length.measurements[1]}
            </td>
            <td className="border border-gray-400 px-2 py-2 text-center">
              {data.inspectionItems.dimensions.length.measurements[2]}
            </td>
          </tr>

          {/* 3. 인장강도 */}
          <tr>
            <td className="border border-gray-400 px-2 py-2 text-center">3</td>
            <td className="border border-gray-400 px-2 py-2 text-center">인장강도 (N/<br/>㎟)</td>
            <td className="border border-gray-400 px-2 py-2 text-center" colSpan={2}>
              {data.inspectionItems.tensileStrength.standard}
            </td>
            <td className="border border-gray-400 px-2 py-2 text-center" colSpan={2}></td>
            <td className="border border-gray-400 px-2 py-2 text-center" colSpan={3}>
              {data.inspectionItems.tensileStrength.measurements[0]}
            </td>
            <td className="border border-gray-400 px-2 py-2 text-center font-medium">적</td>
          </tr>

          {/* 4. 연신율 */}
          <tr>
            <td className="border border-gray-400 px-2 py-2 text-center" rowSpan={3}>4</td>
            <td className="border border-gray-400 px-2 py-2 text-center" rowSpan={3}>연신율<br/>%</td>
            <td className="border border-gray-400 px-1 py-1 text-xs" rowSpan={1}>
              <div className="flex items-center gap-1">
                <span>☐</span>
                <span>두께 0.6<br/>이상<br/>~ 1.0 미<br/>만</span>
                <span className="ml-auto">36 이상</span>
              </div>
            </td>
            <td className="border border-gray-400 px-2 py-1 text-center" rowSpan={3}>
              공급업체<br/>밀시트
            </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-2 text-center" rowSpan={3} colSpan={3}>
              {data.inspectionItems.elongation.measurements[0]}
            </td>
            <td className="border border-gray-400 px-2 py-2 text-center font-medium" rowSpan={3}>적</td>
          </tr>
          <tr>
            <td className="border border-gray-400 px-1 py-1 text-xs bg-blue-50">
              <div className="flex items-center gap-1">
                <span>☑</span>
                <span>두께 1.0<br/>이상<br/>~ 1.6 미<br/>만</span>
                <span className="ml-auto">37 이상</span>
              </div>
            </td>
          </tr>
          <tr>
            <td className="border border-gray-400 px-1 py-1 text-xs">
              <div className="flex items-center gap-1">
                <span>☐</span>
                <span>두께 1.6<br/>이상<br/>~ 2.3<br/>미만</span>
                <span className="ml-auto">38 이상</span>
              </div>
            </td>
          </tr>

          {/* 5. 아연의 최소 부착량 */}
          <tr>
            <td className="border border-gray-400 px-2 py-2 text-center">5</td>
            <td className="border border-gray-400 px-2 py-2 text-center">아연의 최소<br/>부착량 (g/㎡)</td>
            <td className="border border-gray-400 px-2 py-2 text-center" colSpan={2}>
              편면 17 이상
            </td>
            <td className="border border-gray-400 px-2 py-2 text-center" colSpan={2}></td>
            <td className="border border-gray-400 px-2 py-2 text-center" colSpan={3}>
              {data.inspectionItems.zincCoating.measurements.join(' / ')}
            </td>
            <td className="border border-gray-400 px-2 py-2 text-center font-medium">적</td>
          </tr>
        </tbody>
      </table>

      {/* 주석 */}
      <div className="mt-2 text-xs text-gray-600">
        <p>※ 1.55mm의 경우 KS F 4510에 따른 MIN 1.5의 기준에 따름</p>
        <p>※ 두께의 경우 너비 1000 이상 ~ 1250 미만 기준에 따름</p>
      </div>

      {/* 종합판정 */}
      <div className="mt-4 flex justify-end">
        <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>
    </div>
  );
};