import React, { useState } from 'react';
import { FileText, Plus, Save, Trash2, Upload, Database, Image as ImageIcon, Eye, Edit } from 'lucide-react';

// ============================================================
// 공통 데이터 및 유틸리티
// ============================================================
const sampleTemplates = [
  { id: 1, name: '원자재(EGI 1.55T) 입고 검사 기준', type: 'IQC', process: '- (입고 시)', docForm: '수입검사 성적서 (3열 샘플링)', itemCount: 6 },
  { id: 2, name: '조인트바 조립 공정검사 기준 V1', type: 'PQC', process: 'P-004 조인트바 조립', docForm: '조인트바 표준 성적서', itemCount: 6 },
  { id: 3, name: '슬랫 성형 공정검사 기준', type: 'PQC', process: 'P-003 슬랫 성형', docForm: '공통 중간검사성적서', itemCount: 4 },
  { id: 4, name: '가이드레일 절곡 공정검사 기준', type: 'PQC', process: 'P-002 절곡', docForm: '절곡품 검사성적서', itemCount: 5 },
  { id: 5, name: '방화셔터 완제품(출하) 검사 기준', type: 'FQC', process: 'P-Final 최종조립/포장', docForm: '제품검사 성적서 (사진강조)', itemCount: 7 }
];

const sampleInspectionItems = [
  { order: 1, section: '겉모양', name: '외관 상태', standard: '결함 없을 것', inputType: '합격/불합격', validation: '-' },
  { order: 2, section: '치수', name: '두께 (1.55)', standard: '1.55 ± 0.10', inputType: '숫자', validation: '1.45 ~ 1.65' },
  { order: 3, section: '치수', name: '너비 (1219)', standard: '1250 미만 (+7/-0)', inputType: '숫자', validation: 'Max 1250' }
];

const getTypeBadge = (type) => {
  const badges = {
    IQC: 'bg-blue-100 text-blue-700',
    PQC: 'bg-yellow-100 text-yellow-700',
    FQC: 'bg-green-100 text-green-700'
  };
  return badges[type] || 'bg-gray-100 text-gray-700';
};

// ============================================================
// 검사템플릿 목록 (TemplateList)
// ============================================================
export const TemplateList = ({ onNavigate }) => {
  return (
    <div className="space-y-6">
      {/* 헤더 - 타이틀/버튼 분리 */}
      <div className="space-y-3">
        <h1 className="text-xl font-bold text-gray-900 flex items-center gap-2">
          <FileText className="w-6 h-6 text-blue-500" />
          검사템플릿 목록
        </h1>
        <div className="flex items-center justify-end">
          <button
            onClick={() => onNavigate('template-register')}
            className="flex items-center gap-2 px-4 py-2 bg-black text-white rounded-lg hover:bg-gray-800"
          >
            <Plus className="w-4 h-4" />
            템플릿 등록
          </button>
        </div>
      </div>

      {/* 템플릿 목록 테이블 */}
      <div className="border rounded-xl overflow-hidden">
        <table className="w-full text-sm">
          <thead className="bg-gray-50 border-b">
            <tr>
              <th className="text-left px-4 py-3 font-medium">템플릿명</th>
              <th className="text-center px-4 py-3 font-medium w-32">검사 유형</th>
              <th className="text-left px-4 py-3 font-medium w-48">적용 공정</th>
              <th className="text-left px-4 py-3 font-medium w-56">연결 양식</th>
              <th className="text-center px-4 py-3 font-medium w-24">항목 수</th>
              <th className="text-center px-4 py-3 font-medium w-32">작업</th>
            </tr>
          </thead>
          <tbody className="divide-y">
            {sampleTemplates.map(template => (
              <tr
                key={template.id}
                className="hover:bg-gray-50 cursor-pointer"
                onClick={() => onNavigate('template-detail', template)}
              >
                <td className="px-4 py-3 font-medium">{template.name}</td>
                <td className="px-4 py-3 text-center">
                  <span className={`px-2 py-1 rounded text-xs font-medium ${getTypeBadge(template.type)}`}>
                    {template.type}
                  </span>
                </td>
                <td className="px-4 py-3 text-gray-600">{template.process}</td>
                <td className="px-4 py-3 text-gray-600">{template.docForm}</td>
                <td className="px-4 py-3 text-center text-gray-600">{template.itemCount}개</td>
                <td className="px-4 py-3 text-center" onClick={(e) => e.stopPropagation()}>
                  <div className="flex items-center justify-center gap-1">
                    <button
                      onClick={() => onNavigate('template-detail', template)}
                      className="px-2 py-1 text-xs border rounded hover:bg-gray-50"
                    >
                      <Eye className="w-3 h-3 inline mr-1" />
                      상세
                    </button>
                    <button
                      onClick={() => onNavigate('template-edit', template)}
                      className="px-2 py-1 text-xs border rounded hover:bg-gray-50"
                    >
                      <Edit className="w-3 h-3 inline mr-1" />
                      수정
                    </button>
                    <button className="px-2 py-1 text-xs border rounded hover:bg-gray-50 text-red-600">
                      삭제
                    </button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

// ============================================================
// 검사템플릿 등록 (TemplateRegister)
// ============================================================
export const TemplateRegister = ({ onNavigate, onSave }) => {
  const [inspectionType, setInspectionType] = useState('IQC');
  const [inspectionItems, setInspectionItems] = useState(sampleInspectionItems);

  const handleAddItem = () => {
    const newItem = {
      order: inspectionItems.length + 1,
      section: '',
      name: '',
      standard: '',
      inputType: '숫자',
      validation: ''
    };
    setInspectionItems([...inspectionItems, newItem]);
  };

  const handleDeleteItem = (index) => {
    setInspectionItems(inspectionItems.filter((_, i) => i !== index));
  };

  return (
    <div className="space-y-6">
      {/* 헤더 */}
      <div className="space-y-3">
        <h1 className="text-xl font-bold text-gray-900 flex items-center gap-2">
          <FileText className="w-6 h-6 text-blue-500" />
          검사템플릿 등록
        </h1>
        <div className="flex items-center justify-end gap-2">
          <button
            onClick={() => onNavigate('template-list')}
            className="px-4 py-2 border rounded-lg hover:bg-gray-50"
          >
            취소
          </button>
          <button className="px-4 py-2 border rounded-lg hover:bg-gray-50">
            임시저장
          </button>
          <button
            onClick={onSave}
            className="flex items-center gap-2 px-4 py-2 bg-black text-white rounded-lg hover:bg-gray-800"
          >
            <Save className="w-4 h-4" />
            저장
          </button>
        </div>
      </div>

      {/* 기본 설정 */}
      <div className="border rounded-xl">
        <div className="p-4 border-b bg-gray-50">
          <h4 className="font-medium">1. 기본 설정 및 유형</h4>
        </div>
        <div className="p-6 space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <div>
              <label className="block text-sm font-medium mb-1">템플릿명 *</label>
              <input
                type="text"
                placeholder="예: 원자재(EGI 1.55T) 입고 검사 기준"
                className="w-full px-3 py-2 border rounded-lg text-sm"
              />
            </div>
            <div>
              <label className="block text-sm font-medium mb-1">적용 공정 *</label>
              <select className="w-full px-3 py-2 border rounded-lg text-sm">
                <option value="">- (공정 없음 / 자재 입고 시)</option>
                <option value="P-002">P-002 - 절곡 공정</option>
                <option value="P-003">P-003 - 슬랫 성형 공정</option>
                <option value="P-004">P-004 - 조인트바 조립 공정</option>
                <option value="P-Final">P-Final - 최종 조립 및 포장</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium mb-1">연결 양식</label>
              <select className="w-full px-3 py-2 border rounded-lg text-sm">
                <option value="">문서 양식 선택</option>
                <option value="IQC-001">수입검사 성적서 (3열 샘플링 양식)</option>
                <option value="PQC-001">조인트바 표준 성적서 (기본형)</option>
                <option value="PQC-002">공통 중간검사성적서 (동적 데이터형)</option>
                <option value="PQC-003">절곡품 검사성적서 (도면강조형)</option>
                <option value="FQC-001">제품검사 성적서 (사진강조형)</option>
              </select>
            </div>
          </div>

          {/* 검사 유형 Radio */}
          <div>
            <label className="block text-sm font-medium mb-2">검사 유형 *</label>
            <div className="flex gap-6">
              <label className="flex items-center gap-2 cursor-pointer">
                <input
                  type="radio"
                  checked={inspectionType === 'IQC'}
                  onChange={() => setInspectionType('IQC')}
                  className="w-4 h-4"
                />
                <span className="text-sm">수입검사 (IQC)</span>
              </label>
              <label className="flex items-center gap-2 cursor-pointer">
                <input
                  type="radio"
                  checked={inspectionType === 'PQC'}
                  onChange={() => setInspectionType('PQC')}
                  className="w-4 h-4"
                />
                <span className="text-sm">공정검사 (PQC)</span>
              </label>
              <label className="flex items-center gap-2 cursor-pointer">
                <input
                  type="radio"
                  checked={inspectionType === 'FQC'}
                  onChange={() => setInspectionType('FQC')}
                  className="w-4 h-4"
                />
                <span className="text-sm">제품검사 (FQC)</span>
              </label>
            </div>
          </div>
        </div>
      </div>

      {/* 검사 유형별 세부 설정 */}
      <div className="border rounded-xl">
        <div className="p-4 border-b bg-gray-50">
          <h4 className="font-medium">
            2. {inspectionType === 'IQC' ? '수입검사 세부 설정' :
                inspectionType === 'PQC' ? '공정검사 세부 설정' :
                '제품검사 세부 설정'}
          </h4>
        </div>
        <div className="p-6">
          <p className="text-sm text-gray-500">검사 유형별 세부 설정 영역입니다.</p>
        </div>
      </div>

      {/* 검사 항목 정의 */}
      <div className="border rounded-xl">
        <div className="p-4 border-b bg-gray-50 flex items-center justify-between">
          <div>
            <h4 className="font-medium">3. 검사 항목 정의</h4>
          </div>
          <button
            onClick={handleAddItem}
            className="flex items-center gap-1 px-3 py-1.5 bg-black text-white rounded-lg text-sm hover:bg-gray-800"
          >
            <Plus className="w-4 h-4" />
            항목 추가
          </button>
        </div>
        <div className="overflow-x-auto">
          <table className="w-full text-sm">
            <thead className="bg-gray-50 border-b">
              <tr>
                <th className="text-center px-4 py-2 w-16">순서</th>
                <th className="text-left px-4 py-2 w-32">섹션</th>
                <th className="text-left px-4 py-2">항목명</th>
                <th className="text-left px-4 py-2">기준값</th>
                <th className="text-left px-4 py-2 w-40">입력 타입</th>
                <th className="text-left px-4 py-2">검증 로직</th>
                <th className="text-center px-4 py-2 w-24">작업</th>
              </tr>
            </thead>
            <tbody className="divide-y">
              {inspectionItems.map((item, index) => (
                <tr key={index} className="hover:bg-gray-50">
                  <td className="px-4 py-2 text-center">
                    <input
                      type="number"
                      value={item.order}
                      className="w-16 px-2 py-1 border rounded text-sm text-center"
                      readOnly
                    />
                  </td>
                  <td className="px-4 py-2">
                    <input
                      type="text"
                      defaultValue={item.section}
                      placeholder="겉모양"
                      className="w-full px-2 py-1 border rounded text-sm"
                    />
                  </td>
                  <td className="px-4 py-2">
                    <input
                      type="text"
                      defaultValue={item.name}
                      placeholder="외관 상태"
                      className="w-full px-2 py-1 border rounded text-sm"
                    />
                  </td>
                  <td className="px-4 py-2">
                    <input
                      type="text"
                      defaultValue={item.standard}
                      placeholder="결함 없을 것"
                      className="w-full px-2 py-1 border rounded text-sm"
                    />
                  </td>
                  <td className="px-4 py-2">
                    <select
                      defaultValue={item.inputType}
                      className="w-full px-2 py-1 border rounded text-sm"
                    >
                      <option value="숫자">숫자 입력</option>
                      <option value="텍스트">텍스트</option>
                      <option value="합격/불합격">O/X 합불</option>
                      <option value="선택(단일)">선택(단일)</option>
                      <option value="선택(다중)">선택(다중)</option>
                      <option value="날짜">날짜</option>
                      <option value="파일첨부">파일 첨부</option>
                    </select>
                  </td>
                  <td className="px-4 py-2">
                    <input
                      type="text"
                      defaultValue={item.validation}
                      placeholder="1.45 ~ 1.65"
                      className="w-full px-2 py-1 border rounded text-sm"
                    />
                  </td>
                  <td className="px-4 py-2 text-center">
                    <button
                      onClick={() => handleDeleteItem(index)}
                      className="p-1 hover:bg-gray-100 rounded"
                    >
                      <Trash2 className="w-4 h-4 text-red-500" />
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div className="p-4 border-t bg-gray-50">
          <p className="text-xs text-gray-500">
            💡 검증 로직 예시: <code className="bg-white px-1 py-0.5 rounded">x &gt; 100</code>,
            <code className="bg-white px-1 py-0.5 rounded ml-2">50 ≤ x ≤ 100</code>,
            <code className="bg-white px-1 py-0.5 rounded ml-2">x = 합격</code>
          </p>
        </div>
      </div>
    </div>
  );
};

// ============================================================
// 검사템플릿 상세 (TemplateDetail)
// ============================================================
export const TemplateDetail = ({ template, onNavigate }) => {
  const selectedTemplate = template || sampleTemplates[0];

  return (
    <div className="space-y-6">
      {/* 헤더 */}
      <div className="space-y-3">
        <div className="flex items-center gap-4">
          <h1 className="text-xl font-bold text-gray-900 flex items-center gap-2">
            <FileText className="w-6 h-6 text-blue-500" />
            검사템플릿 상세
          </h1>
          <span className={`px-2 py-1 rounded text-xs font-medium ${getTypeBadge(selectedTemplate.type)}`}>
            {selectedTemplate.type}
          </span>
        </div>
        <div className="flex items-center justify-end gap-2">
          <button
            onClick={() => onNavigate('template-list')}
            className="flex items-center gap-1 px-4 py-2 border rounded hover:bg-gray-50"
          >
            목록
          </button>
          <button
            onClick={() => onNavigate('template-edit', selectedTemplate)}
            className="flex items-center gap-2 px-4 py-2 bg-black text-white rounded-lg hover:bg-gray-800"
          >
            <Edit className="w-4 h-4" />
            수정
          </button>
        </div>
      </div>

      {/* 기본 정보 */}
      <div className="border rounded-xl bg-white">
        <div className="p-4 border-b bg-gray-50">
          <h4 className="font-medium">기본 정보</h4>
        </div>
        <div className="p-6">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <div>
              <p className="text-sm text-gray-500 mb-1">템플릿명</p>
              <p className="font-medium">{selectedTemplate.name}</p>
            </div>
            <div>
              <p className="text-sm text-gray-500 mb-1">검사 유형</p>
              <p className="font-medium">{selectedTemplate.type}</p>
            </div>
            <div>
              <p className="text-sm text-gray-500 mb-1">적용 공정</p>
              <p className="font-medium">{selectedTemplate.process}</p>
            </div>
            <div>
              <p className="text-sm text-gray-500 mb-1">연결 양식</p>
              <p className="font-medium">{selectedTemplate.docForm}</p>
            </div>
            <div>
              <p className="text-sm text-gray-500 mb-1">검사 항목 수</p>
              <p className="font-medium">{selectedTemplate.itemCount}개</p>
            </div>
          </div>
        </div>
      </div>

      {/* 검사 항목 */}
      <div className="border rounded-xl bg-white">
        <div className="p-4 border-b bg-gray-50">
          <h4 className="font-medium">검사 항목</h4>
        </div>
        <div className="overflow-x-auto">
          <table className="w-full text-sm">
            <thead className="bg-gray-50 border-b">
              <tr>
                <th className="text-center px-4 py-3">순서</th>
                <th className="text-left px-4 py-3">섹션</th>
                <th className="text-left px-4 py-3">항목명</th>
                <th className="text-left px-4 py-3">기준값</th>
                <th className="text-left px-4 py-3">입력 타입</th>
                <th className="text-left px-4 py-3">검증 로직</th>
              </tr>
            </thead>
            <tbody className="divide-y">
              {sampleInspectionItems.map((item, index) => (
                <tr key={index}>
                  <td className="px-4 py-3 text-center">{item.order}</td>
                  <td className="px-4 py-3">{item.section}</td>
                  <td className="px-4 py-3 font-medium">{item.name}</td>
                  <td className="px-4 py-3 text-gray-600">{item.standard}</td>
                  <td className="px-4 py-3 text-gray-600">{item.inputType}</td>
                  <td className="px-4 py-3 text-gray-600">{item.validation}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
};

// ============================================================
// 검사템플릿 수정 (TemplateEdit)
// ============================================================
export const TemplateEdit = ({ template, onNavigate, onSave }) => {
  const selectedTemplate = template || sampleTemplates[0];
  const [inspectionType, setInspectionType] = useState(selectedTemplate.type);
  const [inspectionItems, setInspectionItems] = useState(sampleInspectionItems);

  const handleAddItem = () => {
    const newItem = {
      order: inspectionItems.length + 1,
      section: '',
      name: '',
      standard: '',
      inputType: '숫자',
      validation: ''
    };
    setInspectionItems([...inspectionItems, newItem]);
  };

  const handleDeleteItem = (index) => {
    setInspectionItems(inspectionItems.filter((_, i) => i !== index));
  };

  return (
    <div className="space-y-6">
      {/* 헤더 */}
      <div className="space-y-3">
        <h1 className="text-xl font-bold text-gray-900 flex items-center gap-2">
          <FileText className="w-6 h-6 text-blue-500" />
          검사템플릿 수정
        </h1>
        <div className="flex items-center justify-end gap-2">
          <button
            onClick={() => onNavigate('template-detail', selectedTemplate)}
            className="px-4 py-2 border rounded-lg hover:bg-gray-50"
          >
            취소
          </button>
          <button className="px-4 py-2 border rounded-lg hover:bg-gray-50">
            임시저장
          </button>
          <button
            onClick={onSave}
            className="flex items-center gap-2 px-4 py-2 bg-black text-white rounded-lg hover:bg-gray-800"
          >
            <Save className="w-4 h-4" />
            수정완료
          </button>
        </div>
      </div>

      {/* 기본 설정 */}
      <div className="border rounded-xl">
        <div className="p-4 border-b bg-gray-50">
          <h4 className="font-medium">1. 기본 설정 및 유형</h4>
        </div>
        <div className="p-6 space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <div>
              <label className="block text-sm font-medium mb-1">템플릿명 *</label>
              <input
                type="text"
                defaultValue={selectedTemplate.name}
                placeholder="예: 원자재(EGI 1.55T) 입고 검사 기준"
                className="w-full px-3 py-2 border rounded-lg text-sm"
              />
            </div>
            <div>
              <label className="block text-sm font-medium mb-1">적용 공정 *</label>
              <select defaultValue={selectedTemplate.process} className="w-full px-3 py-2 border rounded-lg text-sm">
                <option value="">- (공정 없음 / 자재 입고 시)</option>
                <option value="P-002">P-002 - 절곡 공정</option>
                <option value="P-003">P-003 - 슬랫 성형 공정</option>
                <option value="P-004">P-004 - 조인트바 조립 공정</option>
                <option value="P-Final">P-Final - 최종 조립 및 포장</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium mb-1">연결 양식</label>
              <select defaultValue={selectedTemplate.docForm} className="w-full px-3 py-2 border rounded-lg text-sm">
                <option value="">문서 양식 선택</option>
                <option value="IQC-001">수입검사 성적서 (3열 샘플링 양식)</option>
                <option value="PQC-001">조인트바 표준 성적서 (기본형)</option>
                <option value="PQC-002">공통 중간검사성적서 (동적 데이터형)</option>
                <option value="PQC-003">절곡품 검사성적서 (도면강조형)</option>
                <option value="FQC-001">제품검사 성적서 (사진강조형)</option>
              </select>
            </div>
          </div>

          {/* 검사 유형 Radio */}
          <div>
            <label className="block text-sm font-medium mb-2">검사 유형 *</label>
            <div className="flex gap-6">
              <label className="flex items-center gap-2 cursor-pointer">
                <input
                  type="radio"
                  checked={inspectionType === 'IQC'}
                  onChange={() => setInspectionType('IQC')}
                  className="w-4 h-4"
                />
                <span className="text-sm">수입검사 (IQC)</span>
              </label>
              <label className="flex items-center gap-2 cursor-pointer">
                <input
                  type="radio"
                  checked={inspectionType === 'PQC'}
                  onChange={() => setInspectionType('PQC')}
                  className="w-4 h-4"
                />
                <span className="text-sm">공정검사 (PQC)</span>
              </label>
              <label className="flex items-center gap-2 cursor-pointer">
                <input
                  type="radio"
                  checked={inspectionType === 'FQC'}
                  onChange={() => setInspectionType('FQC')}
                  className="w-4 h-4"
                />
                <span className="text-sm">제품검사 (FQC)</span>
              </label>
            </div>
          </div>
        </div>
      </div>

      {/* 검사 유형별 세부 설정 */}
      <div className="border rounded-xl">
        <div className="p-4 border-b bg-gray-50">
          <h4 className="font-medium">
            2. {inspectionType === 'IQC' ? '수입검사 세부 설정' :
                inspectionType === 'PQC' ? '공정검사 세부 설정' :
                '제품검사 세부 설정'}
          </h4>
        </div>
        <div className="p-6">
          <p className="text-sm text-gray-500">검사 유형별 세부 설정 영역입니다.</p>
        </div>
      </div>

      {/* 검사 항목 정의 */}
      <div className="border rounded-xl">
        <div className="p-4 border-b bg-gray-50 flex items-center justify-between">
          <div>
            <h4 className="font-medium">3. 검사 항목 정의</h4>
          </div>
          <button
            onClick={handleAddItem}
            className="flex items-center gap-1 px-3 py-1.5 bg-black text-white rounded-lg text-sm hover:bg-gray-800"
          >
            <Plus className="w-4 h-4" />
            항목 추가
          </button>
        </div>
        <div className="overflow-x-auto">
          <table className="w-full text-sm">
            <thead className="bg-gray-50 border-b">
              <tr>
                <th className="text-center px-4 py-2 w-16">순서</th>
                <th className="text-left px-4 py-2 w-32">섹션</th>
                <th className="text-left px-4 py-2">항목명</th>
                <th className="text-left px-4 py-2">기준값</th>
                <th className="text-left px-4 py-2 w-40">입력 타입</th>
                <th className="text-left px-4 py-2">검증 로직</th>
                <th className="text-center px-4 py-2 w-24">작업</th>
              </tr>
            </thead>
            <tbody className="divide-y">
              {inspectionItems.map((item, index) => (
                <tr key={index} className="hover:bg-gray-50">
                  <td className="px-4 py-2 text-center">
                    <input
                      type="number"
                      value={item.order}
                      className="w-16 px-2 py-1 border rounded text-sm text-center"
                      readOnly
                    />
                  </td>
                  <td className="px-4 py-2">
                    <input
                      type="text"
                      defaultValue={item.section}
                      placeholder="겉모양"
                      className="w-full px-2 py-1 border rounded text-sm"
                    />
                  </td>
                  <td className="px-4 py-2">
                    <input
                      type="text"
                      defaultValue={item.name}
                      placeholder="외관 상태"
                      className="w-full px-2 py-1 border rounded text-sm"
                    />
                  </td>
                  <td className="px-4 py-2">
                    <input
                      type="text"
                      defaultValue={item.standard}
                      placeholder="결함 없을 것"
                      className="w-full px-2 py-1 border rounded text-sm"
                    />
                  </td>
                  <td className="px-4 py-2">
                    <select
                      defaultValue={item.inputType}
                      className="w-full px-2 py-1 border rounded text-sm"
                    >
                      <option value="숫자">숫자 입력</option>
                      <option value="텍스트">텍스트</option>
                      <option value="합격/불합격">O/X 합불</option>
                      <option value="선택(단일)">선택(단일)</option>
                      <option value="선택(다중)">선택(다중)</option>
                      <option value="날짜">날짜</option>
                      <option value="파일첨부">파일 첨부</option>
                    </select>
                  </td>
                  <td className="px-4 py-2">
                    <input
                      type="text"
                      defaultValue={item.validation}
                      placeholder="1.45 ~ 1.65"
                      className="w-full px-2 py-1 border rounded text-sm"
                    />
                  </td>
                  <td className="px-4 py-2 text-center">
                    <button
                      onClick={() => handleDeleteItem(index)}
                      className="p-1 hover:bg-gray-100 rounded"
                    >
                      <Trash2 className="w-4 h-4 text-red-500" />
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div className="p-4 border-t bg-gray-50">
          <p className="text-xs text-gray-500">
            💡 검증 로직 예시: <code className="bg-white px-1 py-0.5 rounded">x &gt; 100</code>,
            <code className="bg-white px-1 py-0.5 rounded ml-2">50 ≤ x ≤ 100</code>,
            <code className="bg-white px-1 py-0.5 rounded ml-2">x = 합격</code>
          </p>
        </div>
      </div>
    </div>
  );
};

// ============================================================
// 레거시 호환성을 위한 기본 export (사용 안 함)
// ============================================================
const InspectionTemplateManager = () => {
  console.warn('InspectionTemplateManager: Use individual components (TemplateList, TemplateRegister, TemplateDetail, TemplateEdit) instead');
  return null;
};

export default InspectionTemplateManager;
