import React, { useState, useEffect } from 'react';
import { fetchMaterials } from '../api';
import { exportMaterialsToExcel } from '../utils/excelExport';
import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';
import api from '../api';
import './NewMaterialsPage.css';

const NewMaterialsPage = ({ 
  onNavigate, 
  selectedProject,
  fileId,
  jobNo,
  bomName,
  revision,
  filename 
}) => {
  const [materials, setMaterials] = useState([]);
  const [loading, setLoading] = useState(true);
  const [selectedCategory, setSelectedCategory] = useState('PIPE');
  const [selectedMaterials, setSelectedMaterials] = useState(new Set());
  const [viewMode, setViewMode] = useState('detailed'); // 'detailed' or 'simple'
  const [availableRevisions, setAvailableRevisions] = useState([]);
  const [currentRevision, setCurrentRevision] = useState(revision || 'Rev.0');
  
  // 사용자 요구사항 상태 관리
  const [userRequirements, setUserRequirements] = useState({});
  // materialId: requirement 형태
  const [savingRequirements, setSavingRequirements] = useState(false);

  // 정렬 및 필터링 상태
  const [sortConfig, setSortConfig] = useState({ key: null, direction: 'asc' });
  const [columnFilters, setColumnFilters] = useState({});
  const [showFilterDropdown, setShowFilterDropdown] = useState(null);

  // 같은 BOM의 다른 리비전들 조회
  const loadAvailableRevisions = async () => {
    try {
      const response = await api.get('/files/', {
        params: { job_no: jobNo }
      });
      
      const allFiles = Array.isArray(response.data) ? response.data : response.data?.files || [];
      const sameBomFiles = allFiles.filter(file => 
        (file.bom_name || file.original_filename) === bomName
      );
      
      // 리비전별로 정렬 (최신순)
      sameBomFiles.sort((a, b) => {
        const revA = parseInt(a.revision?.replace('Rev.', '') || '0');
        const revB = parseInt(b.revision?.replace('Rev.', '') || '0');
        return revB - revA;
      });
      
      setAvailableRevisions(sameBomFiles);
      console.log('📋 사용 가능한 리비전:', sameBomFiles);
    } catch (error) {
      console.error('리비전 목록 조회 실패:', error);
    }
  };

  // 자재 데이터 로드
  useEffect(() => {
    if (fileId) {
      loadMaterials(fileId);
      loadAvailableRevisions();
      loadUserRequirements(fileId);
    }
  }, [fileId]);

  // 외부 클릭 시 필터 드롭다운 닫기
  useEffect(() => {
    const handleClickOutside = (event) => {
      if (!event.target.closest('.filterable-header')) {
        setShowFilterDropdown(null);
      }
    };

    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, []);

  const loadMaterials = async (id) => {
    try {
      setLoading(true);
      console.log('🔍 자재 데이터 로딩 중...', { file_id: id });
      
      const response = await fetchMaterials({ 
        file_id: parseInt(id), 
        limit: 10000 
      });
      
      if (response.data?.materials) {
        const materialsData = response.data.materials;
        console.log(`✅ ${materialsData.length}개 자재 로드 완료`);
        
        // 파이프 데이터 검증
        const pipes = materialsData.filter(m => m.classified_category === 'PIPE');
        if (pipes.length > 0) {
          console.log('📊 파이프 데이터 샘플:', pipes[0]);
        }
        
        setMaterials(materialsData);
      }
    } catch (error) {
      console.error('❌ 자재 로딩 실패:', error);
      setMaterials([]);
    } finally {
      setLoading(false);
    }
  };

  // 사용자 요구사항 로드
  const loadUserRequirements = async (id) => {
    try {
      console.log('🔍 사용자 요구사항 로딩 중...', { file_id: id });
      
      const response = await api.get('/files/user-requirements', {
        params: { file_id: parseInt(id) }
      });
      
      if (response.data && Array.isArray(response.data)) {
        const requirements = {};
        console.log('📦 API 응답 데이터:', response.data);
        response.data.forEach(req => {
          // material_id를 키로 사용하여 요구사항 저장
          if (req.material_id) {
            requirements[req.material_id] = req.requirement_description || req.requirement_title || '';
            console.log(`📥 로드된 요구사항: 자재 ID ${req.material_id} = "${requirements[req.material_id]}"`);
          } else {
            console.warn('⚠️ material_id가 없는 요구사항:', req);
          }
        });
        
        console.log('🔄 setUserRequirements 호출 전 상태:', userRequirements);
        setUserRequirements(requirements);
        console.log('🔄 setUserRequirements 호출 후 새로운 상태:', requirements);
        console.log('✅ 사용자 요구사항 로드 완료:', Object.keys(requirements).length, '개');
        
        // 상태 업데이트 확인을 위한 지연된 로그
        setTimeout(() => {
          console.log('⏰ 1초 후 실제 userRequirements 상태:', userRequirements);
        }, 1000);
      }
    } catch (error) {
      console.error('❌ 사용자 요구사항 로딩 실패:', error);
      setUserRequirements({});
    }
  };

  // 사용자 요구사항 저장
  const saveUserRequirements = async () => {
    try {
      setSavingRequirements(true);
      
      // 강제 테스트: userRequirements가 비어있으면 첫 번째 자재에 테스트 데이터 추가
      let currentRequirements = { ...userRequirements };
      if (Object.keys(currentRequirements).length === 0 && materials.length > 0) {
        const firstMaterialId = materials[0].id;
        currentRequirements[firstMaterialId] = '강제 테스트 요구사항';
        setUserRequirements(currentRequirements);
        console.log('⚠️ 테스트 데이터 강제 추가:', currentRequirements);
      }
      
      // 디버깅: 현재 userRequirements 상태 확인
      console.log('💾 저장 시작 - 현재 userRequirements:', currentRequirements);
      console.log('💾 저장 시작 - userRequirements 키 개수:', Object.keys(currentRequirements).length);
      
      console.log('💾 사용자 요구사항 저장 중...', userRequirements);
      console.log('📋 전체 userRequirements 객체:', Object.keys(userRequirements).length, '개');
      
      // 요구사항이 있는 자재들만 저장
      const requirementsToSave = Object.entries(currentRequirements)
        .filter(([materialId, requirement]) => {
          const hasValue = requirement && requirement.trim() && requirement.trim().length > 0;
          console.log(`🔍 자재 ID ${materialId}: "${requirement}" (길이: ${requirement ? requirement.length : 0}) -> ${hasValue ? '저장' : '제외'}`);
          return hasValue;
        })
        .map(([materialId, requirement]) => ({
          material_id: parseInt(materialId),
          file_id: parseInt(fileId),
          requirement_type: 'CUSTOM_SPEC',
          requirement_title: '사용자 요구사항',
          requirement_description: requirement.trim(),
          priority: 'NORMAL'
        }));

      console.log('📝 저장할 요구사항 개수:', requirementsToSave.length);
      
      if (requirementsToSave.length === 0) {
        alert('저장할 요구사항이 없습니다.');
        return;
      }

      // 기존 요구사항 삭제 후 새로 저장
      console.log('🗑️ 기존 요구사항 삭제 중...', { file_id: parseInt(fileId) });
      console.log('🌐 API Base URL:', api.defaults.baseURL);
      console.log('🔑 Authorization Header:', api.defaults.headers.Authorization);
      
      try {
        const deleteResponse = await api.delete(`/files/user-requirements`, {
          params: { file_id: parseInt(fileId) }
        });
        console.log('✅ 기존 요구사항 삭제 완료:', deleteResponse.data);
      } catch (deleteError) {
        console.error('❌ 기존 요구사항 삭제 실패:', deleteError);
        console.error('❌ 삭제 에러 상세:', deleteError.response?.data);
        console.error('❌ 삭제 에러 전체:', deleteError);
        // 삭제 실패해도 계속 진행
      }

      // 새 요구사항들 저장
      console.log('🚀 API 호출 시작 - 저장할 데이터:', requirementsToSave);
      for (const req of requirementsToSave) {
        console.log('🚀 개별 API 호출:', req);
        try {
          const response = await api.post('/files/user-requirements', req);
          console.log('✅ API 응답:', response.data);
        } catch (apiError) {
          console.error('❌ API 호출 실패:', apiError);
          console.error('❌ API 에러 상세:', apiError.response?.data);
          throw apiError;
        }
      }
      
      alert(`${requirementsToSave.length}개의 사용자 요구사항이 저장되었습니다.`);
      console.log('✅ 사용자 요구사항 저장 완료');
      
      // 저장 후 다시 로드하여 최신 상태 반영
      console.log('🔄 저장 완료 후 다시 로드 시작...');
      await loadUserRequirements(fileId);
      console.log('🔄 저장 완료 후 다시 로드 완료!');
      
    } catch (error) {
      console.error('❌ 사용자 요구사항 저장 실패:', error);
      alert('사용자 요구사항 저장에 실패했습니다: ' + (error.response?.data?.detail || error.message));
    } finally {
      setSavingRequirements(false);
    }
  };

  // 사용자 요구사항 입력 핸들러
  const handleUserRequirementChange = (materialId, value) => {
    console.log(`📝 사용자 요구사항 입력: 자재 ID ${materialId} = "${value}"`);
    setUserRequirements(prev => {
      const updated = {
        ...prev,
        [materialId]: value
      };
      console.log('🔄 업데이트된 userRequirements:', updated);
      return updated;
    });
  };

  // 카테고리별 자재 수 계산
  const getCategoryCounts = () => {
    const counts = {};
    materials.forEach(material => {
      const category = material.classified_category || 'UNKNOWN';
      counts[category] = (counts[category] || 0) + 1;
    });
    return counts;
  };

  // 파이프 구매 수량 계산 함수
  const calculatePipePurchase = (material) => {
    // 백엔드에서 이미 그룹핑된 데이터 사용
    const totalLength = material.pipe_details?.total_length_mm || 0;
    const pipeCount = material.pipe_details?.pipe_count || material.quantity || 0;
    
    // 절단 손실: 각 단관마다 2mm
    const cuttingLoss = pipeCount * 2;
    
    // 총 필요 길이
    const requiredLength = totalLength + cuttingLoss;
    
    // 6M(6000mm) 단위로 구매 본수 계산
    const purchaseCount = Math.ceil(requiredLength / 6000);
    
    return {
      pipeCount,        // 단관 개수
      totalLength,      // 총 BOM 길이
      cuttingLoss,      // 절단 손실
      requiredLength,   // 필요 길이
      purchaseCount     // 구매 본수
    };
  };

  // 카테고리 표시명 매핑
  const getCategoryDisplayName = (category) => {
    const categoryMap = {
      'SPECIAL': 'SPECIAL',
      'U_BOLT': 'U-BOLT',
      'SUPPORT': 'SUPPORT',
      'PIPE': 'PIPE',
      'FITTING': 'FITTING',
      'FLANGE': 'FLANGE',
      'VALVE': 'VALVE',
      'BOLT': 'BOLT',
      'GASKET': 'GASKET',
      'INSTRUMENT': 'INSTRUMENT',
      'UNKNOWN': 'UNKNOWN'
    };
    return categoryMap[category] || category;
  };

  // 니플 끝단 정보 추출
  const extractNippleEndInfo = (description) => {
    const descUpper = description.toUpperCase();
    
    // 니플 끝단 패턴들
    const endPatterns = {
      'PBE': 'PBE',      // Plain Both End
      'BBE': 'BBE',      // Bevel Both End  
      'POE': 'POE',      // Plain One End
      'BOE': 'BOE',      // Bevel One End
      'TOE': 'TOE',      // Thread One End
      'SW X NPT': 'SW×NPT',  // Socket Weld x NPT
      'SW X SW': 'SW×SW',    // Socket Weld x Socket Weld
      'NPT X NPT': 'NPT×NPT', // NPT x NPT
    };
    
    for (const [pattern, display] of Object.entries(endPatterns)) {
      if (descUpper.includes(pattern)) {
        return display;
      }
    }
    
    return '';
  };

  // 볼트 추가요구사항 추출
  const extractBoltAdditionalRequirements = (description) => {
    const descUpper = description.toUpperCase();
    const additionalReqs = [];
    
    // 표면처리 패턴들 (원본 영어 약어 사용)
    const surfaceTreatments = {
      'ELEC.GALV': 'ELEC.GALV',
      'ELEC GALV': 'ELEC.GALV', 
      'GALVANIZED': 'GALVANIZED',
      'GALV': 'GALV',
      'HOT DIP GALV': 'HDG',
      'HDG': 'HDG',
      'ZINC PLATED': 'ZINC PLATED',
      'ZINC': 'ZINC',
      'STAINLESS': 'STAINLESS',
      'SS': 'SS'
    };
    
    // 표면처리 확인
    for (const [pattern, treatment] of Object.entries(surfaceTreatments)) {
      if (descUpper.includes(pattern)) {
        additionalReqs.push(treatment);
      }
    }
    
    // 중복 제거
    const uniqueReqs = [...new Set(additionalReqs)];
    return uniqueReqs.join(', ');
  };

  // 자재 정보 파싱
  const parseMaterialInfo = (material) => {
    const category = material.classified_category;
    
    if (category === 'PIPE') {
      const calc = calculatePipePurchase(material);
      
      return {
        type: 'PIPE',
        subtype: material.pipe_details?.manufacturing_method || 'SMLS',
        size: material.size_spec || '-',
        schedule: material.pipe_details?.schedule || '-',
        grade: material.full_material_grade || material.material_grade || '-',  // 전체 재질명 우선 사용
        quantity: calc.purchaseCount,
        unit: '본',
        details: calc
      };
    } else if (category === 'FITTING') {
      const fittingDetails = material.fitting_details || {};
      const classificationDetails = material.classification_details || {};
      
      // 개선된 분류기 결과 우선 사용
      const fittingTypeInfo = classificationDetails.fitting_type || {};
      const scheduleInfo = classificationDetails.schedule_info || {};
      
      // 기존 필드와 새 필드 통합
      const fittingType = fittingTypeInfo.type || fittingDetails.fitting_type || '';
      const fittingSubtype = fittingTypeInfo.subtype || fittingDetails.fitting_subtype || '';
      const mainSchedule = scheduleInfo.main_schedule || fittingDetails.schedule || '';
      const redSchedule = scheduleInfo.red_schedule || '';
      const hasDifferentSchedules = scheduleInfo.has_different_schedules || false;
      
      const description = material.original_description || '';
      
      // 피팅 타입별 상세 표시
      let displayType = '';
      
      // 개선된 분류기 결과 우선 표시
      if (fittingType === 'TEE' && fittingSubtype === 'REDUCING') {
        displayType = 'TEE REDUCING';
      } else if (fittingType === 'REDUCER' && fittingSubtype === 'CONCENTRIC') {
        displayType = 'REDUCER CONC';
      } else if (fittingType === 'REDUCER' && fittingSubtype === 'ECCENTRIC') {
        displayType = 'REDUCER ECC';
      } else if (description.toUpperCase().includes('TEE RED')) {
        // 기존 데이터의 TEE RED 패턴
        displayType = 'TEE REDUCING';
      } else if (description.toUpperCase().includes('RED CONC')) {
        // 기존 데이터의 RED CONC 패턴
        displayType = 'REDUCER CONC';
      } else if (description.toUpperCase().includes('RED ECC')) {
        // 기존 데이터의 RED ECC 패턴
        displayType = 'REDUCER ECC';
      } else if (description.toUpperCase().includes('CAP')) {
        // CAP: 연결 방식 표시 (예: CAP, NPT(F), 3000LB, ASTM A105)
        if (description.includes('NPT(F)')) {
          displayType = 'CAP NPT(F)';
        } else if (description.includes('SW')) {
          displayType = 'CAP SW';
        } else if (description.includes('BW')) {
          displayType = 'CAP BW';
        } else {
          displayType = 'CAP';
        }
      } else if (description.toUpperCase().includes('PLUG')) {
        // PLUG: 타입과 연결 방식 표시 (예: HEX.PLUG, NPT(M), 6000LB, ASTM A105)
        if (description.toUpperCase().includes('HEX')) {
          if (description.includes('NPT(M)')) {
            displayType = 'HEX PLUG NPT(M)';
          } else {
            displayType = 'HEX PLUG';
          }
        } else if (description.includes('NPT(M)')) {
          displayType = 'PLUG NPT(M)';
        } else if (description.includes('NPT')) {
          displayType = 'PLUG NPT';
        } else {
          displayType = 'PLUG';
        }
      } else if (fittingType === 'NIPPLE') {
        // 니플: 길이와 끝단 가공 정보
        const length = fittingDetails.length_mm || fittingDetails.avg_length_mm;
        const endInfo = extractNippleEndInfo(description);
        
        let nippleType = 'NIPPLE';
        if (length) nippleType += ` ${length}mm`;
        if (endInfo) nippleType += ` ${endInfo}`;
        
        displayType = nippleType;
      } else if (fittingType === 'ELBOW') {
        // 엘보: 각도와 연결 방식
        const angle = fittingSubtype === '90DEG' ? '90°' : fittingSubtype === '45DEG' ? '45°' : '';
        const connection = description.includes('SW') ? 'SW' : description.includes('BW') ? 'BW' : '';
        displayType = `ELBOW ${angle} ${connection}`.trim();
      } else if (fittingType === 'TEE') {
        // 티: 타입과 연결 방식
        const teeType = fittingSubtype === 'EQUAL' ? 'EQ' : fittingSubtype === 'REDUCING' ? 'RED' : '';
        const connection = description.includes('SW') ? 'SW' : description.includes('BW') ? 'BW' : '';
        displayType = `TEE ${teeType} ${connection}`.trim();
      } else if (fittingType === 'REDUCER') {
        // 레듀서: 콘센트릭/에센트릭
        const reducerType = fittingSubtype === 'CONCENTRIC' ? 'CONC' : fittingSubtype === 'ECCENTRIC' ? 'ECC' : '';
        const sizes = fittingDetails.reduced_size ? `${material.size_spec}×${fittingDetails.reduced_size}` : material.size_spec;
        displayType = `RED ${reducerType} ${sizes}`.trim();
      } else if (fittingType === 'SWAGE') {
        // 스웨이지: 타입 명시
        const swageType = fittingSubtype || '';
        displayType = `SWAGE ${swageType}`.trim();
      } else if (!displayType) {
        // 기타 피팅 타입
        displayType = fittingType || 'FITTING';
      }
      
      // 압력 등급과 스케줄 추출
      let pressure = '-';
      let schedule = '-';
      
      // 압력 등급 찾기 (3000LB, 6000LB 등)
      const pressureMatch = description.match(/(\d+)LB/i);
      if (pressureMatch) {
        pressure = `${pressureMatch[1]}LB`;
      }
      
      // 스케줄 표시 (분리 스케줄 지원)
      if (hasDifferentSchedules && mainSchedule && redSchedule) {
        // 분리 스케줄: "SCH 40 x SCH 80"
        schedule = `${mainSchedule} x ${redSchedule}`;
      } else if (mainSchedule && mainSchedule !== 'UNKNOWN') {
        // 단일 스케줄: "SCH 40"
        schedule = mainSchedule;
      } else if (description.includes('SCH')) {
        // 기존 데이터에서 분리 스케줄 패턴 확인
        const separatedSchMatch = description.match(/SCH\s*(\d+[A-Z]*)\s*[xX×]\s*SCH\s*(\d+[A-Z]*)/i);
        if (separatedSchMatch) {
          // 분리 스케줄 발견: "SCH 40 x SCH 80"
          schedule = `SCH ${separatedSchMatch[1]} x SCH ${separatedSchMatch[2]}`;
        } else {
          // 단일 스케줄
          const schMatch = description.match(/SCH\s*(\d+[A-Z]*)/i);
          if (schMatch) {
            schedule = `SCH ${schMatch[1]}`;
          }
        }
      }
      
      return {
        type: 'FITTING',
        subtype: displayType,
        size: material.size_spec || '-',
        pressure: pressure,
        schedule: schedule,
        grade: material.full_material_grade || material.material_grade || '-',  // 전체 재질명 우선 사용
        quantity: Math.round(material.quantity || 0),
        unit: '개',
        isFitting: true
      };
    } else if (category === 'VALVE') {
      const valveDetails = material.valve_details || {};
      const description = material.original_description || '';
      
      // 밸브 타입 파싱 (GATE, BALL, CHECK, GLOBE 등)
      let valveType = valveDetails.valve_type || '';
      if (!valveType && description) {
        if (description.includes('GATE')) valveType = 'GATE';
        else if (description.includes('BALL')) valveType = 'BALL';
        else if (description.includes('CHECK')) valveType = 'CHECK';
        else if (description.includes('GLOBE')) valveType = 'GLOBE';
        else if (description.includes('BUTTERFLY')) valveType = 'BUTTERFLY';
      }
      
      // 연결 방식 파싱 (FLG, SW, THRD 등)
      let connectionType = '';
      if (description.includes('FLG')) {
        connectionType = 'FLG';
      } else if (description.includes('SW X THRD')) {
        connectionType = 'SW×THRD';
      } else if (description.includes('SW')) {
        connectionType = 'SW';
      } else if (description.includes('THRD')) {
        connectionType = 'THRD';
      } else if (description.includes('BW')) {
        connectionType = 'BW';
      }
      
      // 압력 등급 파싱
      let pressure = '-';
      const pressureMatch = description.match(/(\d+)LB/i);
      if (pressureMatch) {
        pressure = `${pressureMatch[1]}LB`;
      }
      
      // 스케줄은 밸브에는 일반적으로 없음
      let schedule = '-';
      
      return {
        type: 'VALVE',
        valveType: valveType,
        connectionType: connectionType,
        size: material.size_spec || '-',
        pressure: pressure,
        schedule: schedule,
        grade: material.material_grade || '-',
        quantity: Math.round(material.quantity || 0),
        unit: '개',
        isValve: true
      };
    } else if (category === 'FLANGE') {
      const description = material.original_description || '';
      
      // 백엔드에서 개선된 플랜지 타입 제공 (WN RF, SO FF 등)
      const displayType = material.flange_details?.flange_type || '-';
      
      // 원본 설명에서 스케줄 추출
      let schedule = '-';
      const upperDesc = description.toUpperCase();
      
      // SCH 40, SCH 80 등의 패턴 찾기
      if (upperDesc.includes('SCH')) {
        const schMatch = description.match(/SCH\s*(\d+[A-Z]*)/i);
        if (schMatch && schMatch[1]) {
          schedule = `SCH ${schMatch[1]}`;
        }
      }
      
      return {
        type: 'FLANGE',
        subtype: displayType,  // 백엔드에서 개선된 타입 정보 제공 (WN RF, SO FF 등)
        size: material.size_spec || '-',
        pressure: material.flange_details?.pressure_rating || '-',
        schedule: schedule,
        grade: material.full_material_grade || material.material_grade || '-',  // 전체 재질명 우선 사용
        quantity: Math.round(material.quantity || 0),
        unit: '개',
        isFlange: true // 플랜지 구분용 플래그
      };
    } else if (category === 'BOLT') {
      const qty = Math.round(material.quantity || 0);
      const safetyQty = Math.ceil(qty * 1.05); // 5% 여유율
      const purchaseQty = Math.ceil(safetyQty / 4) * 4; // 4의 배수
      
      // 볼트 상세 정보 우선 사용
      const boltDetails = material.bolt_details || {};
      
      // 길이 정보 (bolt_details 우선, 없으면 원본 설명에서 추출)
      let boltLength = '-';
      if (boltDetails.length && boltDetails.length !== '-') {
        boltLength = boltDetails.length;
      } else {
        // 원본 설명에서 길이 추출
        const description = material.original_description || '';
        const lengthPatterns = [
          /(\d+(?:\.\d+)?)\s*LG/i,  // 75 LG, 90.0000 LG
          /(\d+(?:\.\d+)?)\s*mm/i,  // 50mm
          /(\d+(?:\.\d+)?)\s*MM/i,  // 50MM
          /LG[,\s]*(\d+(?:\.\d+)?)/i // LG, 75 형태
        ];
        
        for (const pattern of lengthPatterns) {
          const match = description.match(pattern);
          if (match) {
            let lengthValue = match[1];
            // 소수점 제거 (145.0000 → 145)
            if (lengthValue.includes('.') && lengthValue.endsWith('.0000')) {
              lengthValue = lengthValue.split('.')[0];
            } else if (lengthValue.includes('.') && /\.0+$/.test(lengthValue)) {
              lengthValue = lengthValue.split('.')[0];
            }
            boltLength = `${lengthValue}mm`;
            break;
          }
        }
      }
      
      // 재질 정보 (bolt_details 우선, 없으면 기본 필드 사용)
      let boltGrade = '-';
      if (boltDetails.material_standard && boltDetails.material_grade) {
        // bolt_details에서 완전한 재질 정보 구성
        if (boltDetails.material_grade !== 'UNKNOWN' && boltDetails.material_grade !== boltDetails.material_standard) {
          boltGrade = `${boltDetails.material_standard} ${boltDetails.material_grade}`;
        } else {
          boltGrade = boltDetails.material_standard;
        }
      } else if (material.full_material_grade && material.full_material_grade !== '-') {
        boltGrade = material.full_material_grade;
      } else if (material.material_grade && material.material_grade !== '-') {
        boltGrade = material.material_grade;
      }
      
      // 볼트 타입 (PSV_BOLT, LT_BOLT 등)
      let boltSubtype = 'BOLT_GENERAL';
      if (boltDetails.bolt_type && boltDetails.bolt_type !== 'UNKNOWN') {
        boltSubtype = boltDetails.bolt_type;
      } else {
        // 원본 설명에서 특수 볼트 타입 추출
        const description = material.original_description || '';
        const upperDesc = description.toUpperCase();
        if (upperDesc.includes('PSV')) {
          boltSubtype = 'PSV_BOLT';
        } else if (upperDesc.includes('LT')) {
          boltSubtype = 'LT_BOLT';
        } else if (upperDesc.includes('CK')) {
          boltSubtype = 'CK_BOLT';
        }
      }
      
      // 추가요구사항 추출 (ELEC.GALV 등)
      const additionalReq = extractBoltAdditionalRequirements(material.original_description || '');
      
      return {
        type: 'BOLT',
        subtype: boltSubtype,
        size: material.size_spec || material.main_nom || '-',
        schedule: boltLength, // 길이 정보
        grade: boltGrade,
        additionalReq: additionalReq, // 추가요구사항
        quantity: purchaseQty,
        unit: 'SETS'
      };
    } else if (category === 'GASKET') {
      const qty = Math.round(material.quantity || 0);
      const purchaseQty = Math.ceil(qty / 5) * 5; // 5의 배수
      
      // original_description에서 재질 정보 파싱
      const description = material.original_description || '';
      let materialStructure = '-'; // H/F/I/O 부분
      let materialDetail = '-'; // SS304/GRAPHITE/CS/CS 부분
      
      // H/F/I/O와 재질 상세 정보 추출
      const materialMatch = description.match(/H\/F\/I\/O\s+(.+?)(?:,|$)/);
      if (materialMatch) {
        materialStructure = 'H/F/I/O';
        materialDetail = materialMatch[1].trim();
        // 두께 정보 제거 (별도 추출)
        materialDetail = materialDetail.replace(/,?\s*\d+(?:\.\d+)?mm$/, '').trim();
      }
      
      // 압력 정보 추출
      let pressure = '-';
      const pressureMatch = description.match(/(\d+LB)/);
      if (pressureMatch) {
        pressure = pressureMatch[1];
      }
      
      // 두께 정보 추출
      let thickness = '-';
      const thicknessMatch = description.match(/(\d+(?:\.\d+)?)\s*mm/i);
      if (thicknessMatch) {
        thickness = thicknessMatch[1] + 'mm';
      }
      
      return {
        type: 'GASKET',
        subtype: 'SWG', // 항상 SWG로 표시
        size: material.size_spec || '-',
        pressure: pressure,
        materialStructure: materialStructure,
        materialDetail: materialDetail,
        thickness: thickness,
        quantity: purchaseQty,
        unit: '개',
        isGasket: true
      };
    } else if (category === 'UNKNOWN') {
      return {
        type: 'UNKNOWN',
        description: material.original_description || 'Unknown Item',
        quantity: Math.round(material.quantity || 0),
        unit: '개',
        isUnknown: true
      };
    } else {
      return {
        type: category || 'UNKNOWN',
        subtype: '-',
        size: material.size_spec || '-',
        schedule: '-',
        grade: material.material_grade || '-',
        quantity: Math.round(material.quantity || 0),
        unit: '개'
      };
    }
  };

  // 정렬 함수
  const handleSort = (key) => {
    let direction = 'asc';
    if (sortConfig.key === key && sortConfig.direction === 'asc') {
      direction = 'desc';
    }
    setSortConfig({ key, direction });
  };

  // 필터 함수
  const handleFilter = (column, value) => {
    setColumnFilters(prev => ({
      ...prev,
      [column]: value
    }));
  };

  // 필터 초기화
  const clearFilter = (column) => {
    setColumnFilters(prev => {
      const newFilters = { ...prev };
      delete newFilters[column];
      return newFilters;
    });
  };

  // 모든 필터 초기화
  const clearAllFilters = () => {
    setColumnFilters({});
    setSortConfig({ key: null, direction: 'asc' });
  };

  // 필터링된 자재 목록
  const filteredMaterials = materials
    .filter(material => {
      // 카테고리 필터
      if (material.classified_category !== selectedCategory) {
        return false;
      }

      // 컬럼 필터 적용
      for (const [column, filterValue] of Object.entries(columnFilters)) {
        if (!filterValue) continue;

        const info = parseMaterialInfo(material);
        let materialValue = '';

        switch (column) {
          case 'type':
            materialValue = info.type || '';
            break;
          case 'subtype':
            materialValue = info.subtype || '';
            break;
          case 'size':
            materialValue = info.size || '';
            break;
          case 'schedule':
            materialValue = info.schedule || '';
            break;
          case 'grade':
            materialValue = info.grade || '';
            break;
          case 'quantity':
            materialValue = info.quantity?.toString() || '';
            break;
          default:
            materialValue = material[column]?.toString() || '';
        }

        if (!materialValue.toLowerCase().includes(filterValue.toLowerCase())) {
          return false;
        }
      }

      return true;
    })
    .sort((a, b) => {
      if (!sortConfig.key) return 0;

      const aInfo = parseMaterialInfo(a);
      const bInfo = parseMaterialInfo(b);
      
      let aValue, bValue;

      switch (sortConfig.key) {
        case 'type':
          aValue = aInfo.type || '';
          bValue = bInfo.type || '';
          break;
        case 'subtype':
          aValue = aInfo.subtype || '';
          bValue = bInfo.subtype || '';
          break;
        case 'size':
          aValue = aInfo.size || '';
          bValue = bInfo.size || '';
          break;
        case 'schedule':
          aValue = aInfo.schedule || '';
          bValue = bInfo.schedule || '';
          break;
        case 'grade':
          aValue = aInfo.grade || '';
          bValue = bInfo.grade || '';
          break;
        case 'quantity':
          aValue = aInfo.quantity || 0;
          bValue = bInfo.quantity || 0;
          break;
        default:
          aValue = a[sortConfig.key] || '';
          bValue = b[sortConfig.key] || '';
      }

      // 숫자 비교
      if (typeof aValue === 'number' && typeof bValue === 'number') {
        return sortConfig.direction === 'asc' ? aValue - bValue : bValue - aValue;
      }

      // 문자열 비교
      const comparison = aValue.toString().localeCompare(bValue.toString());
      return sortConfig.direction === 'asc' ? comparison : -comparison;
    });

  // 카테고리 색상 (제거 - CSS에서 처리)

  // 전체 선택/해제
  const toggleAllSelection = () => {
    if (selectedMaterials.size === filteredMaterials.length) {
      setSelectedMaterials(new Set());
    } else {
      setSelectedMaterials(new Set(filteredMaterials.map(m => m.id)));
    }
  };

  // 개별 선택
  const toggleMaterialSelection = (id) => {
    const newSelection = new Set(selectedMaterials);
    if (newSelection.has(id)) {
      newSelection.delete(id);
    } else {
      newSelection.add(id);
    }
    setSelectedMaterials(newSelection);
  };

  // 필터 헤더 컴포넌트
  const FilterableHeader = ({ children, sortKey, filterKey, className = "" }) => {
    const uniqueValues = React.useMemo(() => {
      const values = new Set();
      
      // 현재 선택된 카테고리의 자재들만 필터링
      const categoryMaterials = materials.filter(material => {
        return material.classified_category === selectedCategory;
      });
      
      categoryMaterials.forEach(material => {
        const info = parseMaterialInfo(material);
        let value = '';
        
        switch (filterKey) {
          case 'type':
            value = info.type || '';
            break;
          case 'subtype':
            value = info.subtype || '';
            break;
          case 'size':
            value = info.size || '';
            break;
          case 'schedule':
            value = info.schedule || '';
            break;
          case 'grade':
            value = info.grade || '';
            break;
          case 'quantity':
            value = info.quantity?.toString() || '';
            break;
          default:
            value = material[filterKey]?.toString() || '';
        }
        
        if (value) values.add(value);
      });
      
      return Array.from(values).sort();
    }, [materials, filterKey, selectedCategory]);

    return (
      <div className={`filterable-header ${className}`}>
        <span className="header-text">{children}</span>
        <div className="header-controls">
          {/* 정렬 버튼 */}
          <button
            className={`sort-btn ${sortConfig.key === sortKey ? 'active' : ''}`}
            onClick={() => handleSort(sortKey)}
            title="정렬"
          >
            {sortConfig.key === sortKey ? (
              sortConfig.direction === 'asc' ? '↑' : '↓'
            ) : '↕'}
          </button>
          
          {/* 필터 버튼 */}
          <button
            className={`filter-btn ${columnFilters[filterKey] ? 'active' : ''}`}
            onClick={() => setShowFilterDropdown(showFilterDropdown === filterKey ? null : filterKey)}
            title="필터"
          >
            ⋮
          </button>
        </div>
        
        {/* 필터 드롭다운 */}
        {showFilterDropdown === filterKey && (
          <div className="filter-dropdown">
            <div className="filter-search">
              <input
                type="text"
                placeholder="검색..."
                value={columnFilters[filterKey] || ''}
                onChange={(e) => handleFilter(filterKey, e.target.value)}
                autoFocus
              />
              {columnFilters[filterKey] && (
                <button 
                  className="clear-filter-btn"
                  onClick={() => clearFilter(filterKey)}
                  title="필터 초기화"
                >
                  ✕
                </button>
              )}
            </div>
            
            <div className="filter-options">
              <div className="filter-option-header">값 목록:</div>
              {uniqueValues.slice(0, 20).map(value => (
                <div
                  key={value}
                  className="filter-option"
                  onClick={() => {
                    handleFilter(filterKey, value);
                    setShowFilterDropdown(null);
                  }}
                >
                  {value}
                </div>
              ))}
              {uniqueValues.length > 20 && (
                <div className="filter-option-more">
                  +{uniqueValues.length - 20}개 더...
                </div>
              )}
            </div>
          </div>
        )}
      </div>
    );
  };

  // 엑셀 내보내기 - 개선된 버전 사용
  const exportToExcel = () => {
    try {
      // 내보낼 데이터 결정 (선택 항목 또는 현재 카테고리 전체)
      const dataToExport = selectedMaterials.size > 0 
        ? filteredMaterials.filter(m => selectedMaterials.has(m.id))
        : filteredMaterials;
      
      console.log('📊 엑셀 내보내기:', dataToExport.length, '개 항목');
      
      // 사용자 요구사항을 자재에 추가
      const dataWithRequirements = dataToExport.map(material => ({
        ...material,
        user_requirement: userRequirements[material.id] || ''
      }));
      
      // 개선된 엑셀 내보내기 함수 사용
      const additionalInfo = {
        filename: filename || bomName,
        jobNo: jobNo,
        revision: currentRevision,
        uploadDate: new Date().toLocaleDateString()
      };
      
      const fileName = `${selectedCategory}_${jobNo || 'export'}_${new Date().toISOString().split('T')[0]}.xlsx`;
      
      exportMaterialsToExcel(dataWithRequirements, fileName, additionalInfo);
      
      console.log('✅ 엑셀 내보내기 성공');
    } catch (error) {
      console.error('❌ 엑셀 내보내기 실패:', error);
      alert('엑셀 내보내기에 실패했습니다.');
    }
  };

  if (loading) {
    return (
      <div className="loading-container">
        <div className="loading-spinner"></div>
        <p>자재 목록을 불러오는 중...</p>
      </div>
    );
  }

  const categoryCounts = getCategoryCounts();

  return (
    <div className="materials-page">
      {/* 헤더 */}
      <div className="materials-header">
        <div className="header-left">
          <button 
            onClick={() => {
              // 프로젝트 정보를 포함하여 BOM 페이지로 돌아가기
              const projectInfo = selectedProject || {
                job_no: jobNo,
                official_project_code: jobNo,
                job_name: bomName || filename
              };
              onNavigate('bom', {
                selectedProject: projectInfo
              });
            }} 
            className="back-button-simple"
            title="BOM 업로드로 돌아가기"
          >
            ←
          </button>
          <div className="header-info">
            <h1>자재 목록</h1>
            {jobNo && (
              <span className="job-info">
                {jobNo} - {bomName}
              </span>
            )}
            <span className="material-count-inline">
              총 {materials.length}개 자재 ({currentRevision})
            </span>
          </div>
        </div>
        <div className="header-center">
          {availableRevisions.length > 1 && (
            <div className="revision-selector">
              <label>리비전: </label>
              <select 
                value={currentRevision} 
                onChange={(e) => {
                  const selectedRev = e.target.value;
                  const selectedFile = availableRevisions.find(f => f.revision === selectedRev);
                  if (selectedFile) {
                    setCurrentRevision(selectedRev);
                    loadMaterials(selectedFile.id);
                  }
                }}
                className="revision-dropdown"
              >
                {availableRevisions.map(file => (
                  <option key={file.id} value={file.revision}>
                    {file.revision || 'Rev.0'} ({file.parsed_count || 0}개 자재)
                  </option>
                ))}
              </select>
            </div>
          )}
        </div>
        <div className="header-right">
          <button
            onClick={() => {
              const currentUrl = window.location.href;
              const pageInfo = `페이지: NewMaterialsPage\nURL: ${currentUrl}\nJob: ${jobNo}\nRevision: ${currentRevision}`;
              alert(pageInfo);
            }}
            style={{
              padding: '4px 8px',
              background: '#667eea',
              color: 'white',
              border: 'none',
              borderRadius: '4px',
              fontSize: '11px',
              cursor: 'pointer'
            }}
          >
            🔗 URL
          </button>
        </div>
      </div>

      {/* 카테고리 필터 */}
      <div className="category-filters">
        {/* SPECIAL 카테고리 우선 표시 */}
        <button
          key="SPECIAL"
          className={`category-btn ${selectedCategory === 'SPECIAL' ? 'active' : ''}`}
          onClick={() => setSelectedCategory('SPECIAL')}
        >
          SPECIAL <span className="count">{categoryCounts.SPECIAL || 0}</span>
        </button>
        
        {Object.entries(categoryCounts).filter(([category]) => category !== 'SPECIAL').map(([category, count]) => (
          <button
            key={category}
            className={`category-btn ${selectedCategory === category ? 'active' : ''}`}
            onClick={() => setSelectedCategory(category)}
          >
            {getCategoryDisplayName(category)} <span className="count">{count}</span>
          </button>
        ))}
      </div>

      {/* 액션 바 */}
      <div className="action-bar">
        <div className="selection-info">
          {selectedMaterials.size}개 중 {filteredMaterials.length}개 선택
          {Object.keys(columnFilters).length > 0 && (
            <span className="filter-info">
              (필터 {Object.keys(columnFilters).length}개 적용됨)
            </span>
          )}
        </div>
        <div className="action-buttons">
          {(Object.keys(columnFilters).length > 0 || sortConfig.key) && (
            <button 
              onClick={clearAllFilters}
              className="clear-filters-btn"
              title="모든 필터 및 정렬 초기화"
            >
              필터 초기화
            </button>
          )}
          <button 
            onClick={toggleAllSelection}
            className="select-all-btn"
          >
            {selectedMaterials.size === filteredMaterials.length ? '전체 해제' : '전체 선택'}
          </button>
          <button 
            onClick={saveUserRequirements}
            className="save-requirements-btn"
            disabled={savingRequirements}
            style={{
              backgroundColor: savingRequirements ? '#ccc' : '#10b981',
              color: 'white',
              border: 'none',
              padding: '10px 20px',
              borderRadius: '6px',
              cursor: savingRequirements ? 'not-allowed' : 'pointer',
              marginRight: '10px',
              fontSize: '14px',
              fontWeight: '500'
            }}
          >
            {savingRequirements ? '저장 중...' : '사용자 요구사항 저장'}
          </button>
          
          <button 
            onClick={exportToExcel}
            className="export-btn"
          >
            {selectedMaterials.size > 0 
              ? `선택 항목 엑셀 내보내기 (${selectedMaterials.size})`
              : '전체 엑셀 내보내기'}
          </button>
        </div>
      </div>

      {/* 자재 테이블 */}
      <div className="materials-grid">
        {/* SPECIAL 전용 헤더 */}
        {selectedCategory === 'SPECIAL' ? (
          <div className="detailed-grid-header special-header">
            <div>선택</div>
            <FilterableHeader sortKey="type" filterKey="type">종류</FilterableHeader>
            <FilterableHeader sortKey="subtype" filterKey="subtype">타입</FilterableHeader>
            <FilterableHeader sortKey="size" filterKey="size">크기</FilterableHeader>
            <FilterableHeader sortKey="schedule" filterKey="schedule">스케줄</FilterableHeader>
            <FilterableHeader sortKey="grade" filterKey="grade">재질</FilterableHeader>
            <div>도면번호</div>
            <div>추가요구</div>
            <div>사용자요구</div>
            <FilterableHeader sortKey="quantity" filterKey="quantity">수량</FilterableHeader>
          </div>
        ) : selectedCategory === 'FLANGE' ? (
          <div className="detailed-grid-header flange-header">
            <div>선택</div>
            <FilterableHeader sortKey="type" filterKey="type">종류</FilterableHeader>
            <FilterableHeader sortKey="subtype" filterKey="subtype">타입</FilterableHeader>
            <FilterableHeader sortKey="size" filterKey="size">크기</FilterableHeader>
            <div>압력(파운드)</div>
            <FilterableHeader sortKey="schedule" filterKey="schedule">스케줄</FilterableHeader>
            <FilterableHeader sortKey="grade" filterKey="grade">재질</FilterableHeader>
            <div>추가요구</div>
            <div>사용자요구</div>
            <FilterableHeader sortKey="quantity" filterKey="quantity">수량</FilterableHeader>
          </div>
        ) : selectedCategory === 'FITTING' ? (
          <div className="detailed-grid-header fitting-header">
            <div>선택</div>
            <FilterableHeader sortKey="type" filterKey="type">종류</FilterableHeader>
            <FilterableHeader sortKey="subtype" filterKey="subtype">타입/상세</FilterableHeader>
            <FilterableHeader sortKey="size" filterKey="size">크기</FilterableHeader>
            <div>압력</div>
            <FilterableHeader sortKey="schedule" filterKey="schedule">스케줄</FilterableHeader>
            <FilterableHeader sortKey="grade" filterKey="grade">재질</FilterableHeader>
            <div>추가요구</div>
            <div>사용자요구</div>
            <FilterableHeader sortKey="quantity" filterKey="quantity">수량</FilterableHeader>
          </div>
        ) : selectedCategory === 'GASKET' ? (
          <div className="detailed-grid-header gasket-header">
            <div>선택</div>
            <div>종류</div>
            <div>타입</div>
            <div>크기</div>
            <div>압력</div>
            <div>재질</div>
            <div>상세내역</div>
            <div>두께</div>
            <div>추가요구</div>
            <div>사용자요구</div>
            <div>수량</div>
          </div>
        ) : selectedCategory === 'VALVE' ? (
          <div className="detailed-grid-header valve-header">
            <div>선택</div>
            <div>타입</div>
            <div>연결방식</div>
            <div>크기</div>
            <div>압력</div>
            <div>재질</div>
            <div>추가요구</div>
            <div>사용자요구</div>
            <div>수량</div>
          </div>
        ) : selectedCategory === 'BOLT' ? (
          <div className="detailed-grid-header bolt-header">
            <div>선택</div>
            <FilterableHeader sortKey="type" filterKey="type">종류</FilterableHeader>
            <FilterableHeader sortKey="subtype" filterKey="subtype">타입</FilterableHeader>
            <FilterableHeader sortKey="size" filterKey="size">크기</FilterableHeader>
            <FilterableHeader sortKey="schedule" filterKey="schedule">길이</FilterableHeader>
            <FilterableHeader sortKey="grade" filterKey="grade">재질</FilterableHeader>
            <div>추가요구</div>
            <div>사용자요구</div>
            <FilterableHeader sortKey="quantity" filterKey="quantity">수량</FilterableHeader>
          </div>
        ) : selectedCategory === 'U_BOLT' ? (
          <div className="detailed-grid-header ubolt-header">
            <div>선택</div>
            <FilterableHeader sortKey="type" filterKey="type">종류</FilterableHeader>
            <FilterableHeader sortKey="subtype" filterKey="subtype">타입</FilterableHeader>
            <FilterableHeader sortKey="size" filterKey="size">크기</FilterableHeader>
            <div>재질</div>
            <div>추가요구</div>
            <div>사용자요구</div>
            <FilterableHeader sortKey="quantity" filterKey="quantity">수량</FilterableHeader>
          </div>
        ) : selectedCategory === 'SUPPORT' ? (
          <div className="detailed-grid-header support-header">
            <div>선택</div>
            <FilterableHeader sortKey="type" filterKey="type">종류</FilterableHeader>
            <FilterableHeader sortKey="subtype" filterKey="subtype">타입</FilterableHeader>
            <FilterableHeader sortKey="size" filterKey="size">크기</FilterableHeader>
            <div>스케줄</div>
            <div>재질</div>
            <div>추가요구</div>
            <div>사용자요구</div>
            <FilterableHeader sortKey="quantity" filterKey="quantity">수량</FilterableHeader>
          </div>
        ) : selectedCategory === 'UNKNOWN' ? (
          <div className="detailed-grid-header unknown-header">
            <div>선택</div>
            <div>종류</div>
            <div>설명</div>
            <div>사용자요구</div>
            <div>수량</div>
          </div>
        ) : (
          <div className="detailed-grid-header pipe-header">
            <div>선택</div>
            <FilterableHeader sortKey="type" filterKey="type">종류</FilterableHeader>
            <FilterableHeader sortKey="subtype" filterKey="subtype">타입</FilterableHeader>
            <FilterableHeader sortKey="size" filterKey="size">크기</FilterableHeader>
            <FilterableHeader sortKey="schedule" filterKey="schedule">스케줄</FilterableHeader>
            <FilterableHeader sortKey="grade" filterKey="grade">재질</FilterableHeader>
            <div>추가요구</div>
            <div>사용자요구</div>
            <FilterableHeader sortKey="quantity" filterKey="quantity">수량</FilterableHeader>
          </div>
        )}
        
        {filteredMaterials.map((material) => {
          const info = parseMaterialInfo(material);
          
          if (material.classified_category === 'SPECIAL') {
            // SPECIAL 카테고리 (10개 컬럼)
            return (
              <div 
                key={material.id} 
                className={`detailed-material-row special-row ${selectedMaterials.has(material.id) ? 'selected' : ''}`}
              >
                {/* 선택 */}
                <div className="material-cell">
                  <input
                    type="checkbox"
                    checked={selectedMaterials.has(material.id)}
                    onChange={() => toggleMaterialSelection(material.id)}
                  />
                </div>
                
                {/* 종류 */}
                <div className="material-cell">
                  <span className={`type-badge special`}>
                    SPECIAL
                  </span>
                </div>
                
                {/* 타입 */}
                <div className="material-cell">
                  <span className="subtype-text">{info.subtype || material.description}</span>
                </div>
                
                {/* 크기 */}
                <div className="material-cell">
                  <span className="size-text">{info.size || material.main_nom}</span>
                </div>
                
                {/* 스케줄 */}
                <div className="material-cell">
                  <span className="schedule-text">{info.schedule}</span>
                </div>
                
                {/* 재질 */}
                <div className="material-cell">
                  <span className="grade-text">{info.grade || material.full_material_grade}</span>
                </div>
                
                {/* 도면번호 */}
                <div className="material-cell">
                  <span className="drawing-text">{material.dat_file || 'N/A'}</span>
                </div>
                
                {/* 추가요구 */}
                <div className="material-cell">
                  <span className="additional-req-text">{material.additional_requirements || '-'}</span>
                </div>
                
                {/* 사용자요구 */}
                <div className="material-cell">
                  <input
                    type="text"
                    className="user-req-input"
                    placeholder="요구사항 입력"
                    value={userRequirements[material.id] || ''}
                    onChange={(e) => handleUserRequirementChange(material.id, e.target.value)}
                  />
                </div>
                
                {/* 수량 */}
                <div className="material-cell">
                  <span className="quantity-text">{info.quantity || material.quantity || 1}</span>
                </div>
              </div>
            );
          }
          if (material.classified_category === 'PIPE') {
            // PIPE 또는 카테고리 없는 경우 (기본 9개 컬럼)
            return (
              <div 
                key={material.id} 
                className={`detailed-material-row pipe-row ${selectedMaterials.has(material.id) ? 'selected' : ''}`}
              >
                {/* 선택 */}
                <div className="material-cell">
                  <input
                    type="checkbox"
                    checked={selectedMaterials.has(material.id)}
                    onChange={() => toggleMaterialSelection(material.id)}
                  />
                </div>
                
                {/* 종류 */}
                <div className="material-cell">
                  <span className={`type-badge ${info.type ? info.type.toLowerCase() : 'unknown'}`}>
                    {info.type || 'N/A'}
                  </span>
                </div>
                
                {/* 타입 */}
                <div className="material-cell">
                  <span className="subtype-text">{info.subtype}</span>
                </div>
                
                {/* 크기 */}
                <div className="material-cell">
                  <span className="size-text">{info.size}</span>
                </div>
                
                {/* 스케줄 */}
                <div className="material-cell">
                  <span>{info.schedule}</span>
                </div>
                
                {/* 재질 */}
                <div className="material-cell">
                  <span className="material-grade">{info.grade}</span>
                </div>
                
                {/* 추가요구 */}
                <div className="material-cell">
                  <span>{info.additionalReq || '-'}</span>
                </div>
                
                {/* 사용자요구 */}
                <div className="material-cell">
                  <input
                    type="text"
                    className="user-req-input"
                    placeholder="요구사항 입력"
                    value={userRequirements[material.id] || ''}
                    onChange={(e) => handleUserRequirementChange(material.id, e.target.value)}
                  />
                </div>
                
                {/* 수량 */}
                <div className="material-cell">
                  <span>{info.quantity} {info.unit}</span>
                </div>
              </div>
            );
          }
          
          if (material.classified_category === 'FITTING') {
            return (
              <div 
                key={material.id} 
                className={`detailed-material-row fitting-row ${selectedMaterials.has(material.id) ? 'selected' : ''}`}
              >
                {/* 선택 */}
                <div className="material-cell">
                  <input
                    type="checkbox"
                    checked={selectedMaterials.has(material.id)}
                    onChange={() => toggleMaterialSelection(material.id)}
                  />
                </div>
                
                {/* 종류 */}
                <div className="material-cell">
                  <span className={`type-badge ${info.type.toLowerCase()}`}>
                    {info.type}
                  </span>
                </div>
                
                {/* 타입/상세 */}
                <div className="material-cell">
                  <span className="subtype-text">{info.subtype}</span>
                </div>
                
                {/* 크기 */}
                <div className="material-cell">
                  <span className="size-text">{info.size}</span>
                </div>
                
                {/* 압력 */}
                <div className="material-cell">
                  <span className="pressure-info">{info.pressure}</span>
                </div>
                
                {/* 스케줄 */}
                <div className="material-cell">
                  <span>{info.schedule}</span>
                </div>
                
                {/* 재질 */}
                <div className="material-cell">
                  <span className="material-grade">{info.grade}</span>
                </div>
                
                {/* 추가요구 */}
                <div className="material-cell">
                  <span>{info.additionalReq || '-'}</span>
                </div>
                
                {/* 사용자요구 */}
                <div className="material-cell">
                  <input
                    type="text"
                    className="user-req-input"
                    placeholder="요구사항 입력"
                    value={userRequirements[material.id] || ''}
                    onChange={(e) => {
                      console.log('🎯 입력 이벤트 발생!', material.id, e.target.value);
                      handleUserRequirementChange(material.id, e.target.value);
                    }}
                  />
                </div>
                
                {/* 수량 */}
                <div className="material-cell">
                  <span className="quantity-value">
                    {info.quantity} {info.unit}
                  </span>
                </div>
              </div>
            );
          }
          
          if (material.classified_category === 'VALVE') {
            return (
              <div 
                key={material.id} 
                className={`detailed-material-row valve-row ${selectedMaterials.has(material.id) ? 'selected' : ''}`}
              >
                {/* 선택 */}
                <div className="material-cell">
                  <input
                    type="checkbox"
                    checked={selectedMaterials.has(material.id)}
                    onChange={() => toggleMaterialSelection(material.id)}
                  />
                </div>
                
                {/* 타입 */}
                <div className="material-cell">
                  <span className="valve-type">{info.valveType}</span>
                </div>
                
                {/* 연결방식 */}
                <div className="material-cell">
                  <span className="connection-type">{info.connectionType}</span>
                </div>
                
                {/* 크기 */}
                <div className="material-cell">
                  <span className="size-text">{info.size}</span>
                </div>
                
                {/* 압력 */}
                <div className="material-cell">
                  <span className="pressure-info">{info.pressure}</span>
                </div>
                
                {/* 재질 */}
                <div className="material-cell">
                  <span className="material-grade">{info.grade}</span>
                </div>
                
                {/* 추가요구 */}
                <div className="material-cell">
                  <span>{info.additionalReq || '-'}</span>
                </div>
                
                {/* 사용자요구 */}
                <div className="material-cell">
                  <input
                    type="text"
                    className="user-req-input"
                    placeholder="요구사항 입력"
                    value={userRequirements[material.id] || ''}
                    onChange={(e) => {
                      console.log('🎯 입력 이벤트 발생!', material.id, e.target.value);
                      handleUserRequirementChange(material.id, e.target.value);
                    }}
                  />
                </div>
                
                {/* 수량 */}
                <div className="material-cell">
                  <span className="quantity-value">
                    {info.quantity} {info.unit}
                  </span>
                </div>
              </div>
            );
          }
          
          if (material.classified_category === 'FLANGE') {
            return (
              <div 
                key={material.id} 
                className={`detailed-material-row flange-row ${selectedMaterials.has(material.id) ? 'selected' : ''}`}
              >
                {/* 선택 */}
                <div className="material-cell">
                  <input
                    type="checkbox"
                    checked={selectedMaterials.has(material.id)}
                    onChange={() => toggleMaterialSelection(material.id)}
                  />
                </div>
                
                {/* 종류 */}
                <div className="material-cell">
                  <span className={`type-badge ${info.type.toLowerCase()}`}>
                    {info.type}
                  </span>
                </div>
                
                {/* 타입 */}
                <div className="material-cell">
                  <span className="subtype-text">{info.subtype}</span>
                </div>
                
                {/* 크기 */}
                <div className="material-cell">
                  <span className="size-text">{info.size}</span>
                </div>
                
                {/* 압력(파운드) */}
                <div className="material-cell">
                  <span className="pressure-info">{info.pressure}</span>
                </div>
                
                {/* 스케줄 */}
                <div className="material-cell">
                  <span>{info.schedule}</span>
                </div>
                
                {/* 재질 */}
                <div className="material-cell">
                  <span className="material-grade">{info.grade}</span>
                </div>
                
                {/* 추가요구 */}
                <div className="material-cell">
                  <span>{info.additionalReq || '-'}</span>
                </div>
                
                {/* 사용자요구 */}
                <div className="material-cell">
                  <input
                    type="text"
                    className="user-req-input"
                    placeholder="요구사항 입력"
                    value={userRequirements[material.id] || ''}
                    onChange={(e) => {
                      console.log('🎯 입력 이벤트 발생!', material.id, e.target.value);
                      handleUserRequirementChange(material.id, e.target.value);
                    }}
                  />
                </div>
                
                {/* 수량 */}
                <div className="material-cell">
                  <span className="quantity-value">
                    {info.quantity} {info.unit}
                  </span>
                </div>
              </div>
            );
          }
          
          if (material.classified_category === 'UNKNOWN') {
            return (
              <div 
                key={material.id} 
                className={`detailed-material-row unknown-row ${selectedMaterials.has(material.id) ? 'selected' : ''}`}
              >
                {/* 선택 */}
                <div className="material-cell">
                  <input
                    type="checkbox"
                    checked={selectedMaterials.has(material.id)}
                    onChange={() => toggleMaterialSelection(material.id)}
                  />
                </div>
                
                {/* 종류 */}
                <div className="material-cell">
                  <span className={`type-badge unknown`}>
                    {info.type}
                  </span>
                </div>
                
                {/* 설명 */}
                <div className="material-cell description-cell">
                  <span className="description-text" title={info.description}>
                    {info.description}
                  </span>
                </div>
                
                {/* 사용자요구 */}
                <div className="material-cell">
                  <input
                    type="text"
                    className="user-req-input"
                    placeholder="요구사항 입력"
                    value={userRequirements[material.id] || ''}
                    onChange={(e) => {
                      console.log('🎯 입력 이벤트 발생!', material.id, e.target.value);
                      handleUserRequirementChange(material.id, e.target.value);
                    }}
                  />
                </div>
                
                {/* 수량 */}
                <div className="material-cell">
                  <div className="quantity-info">
                    <span className="quantity-value">
                      {info.quantity} {info.unit}
                    </span>
                  </div>
                </div>
              </div>
            );
          }
          
          if (material.classified_category === 'GASKET') {
            return (
              <div 
                key={material.id} 
                className={`detailed-material-row gasket-row ${selectedMaterials.has(material.id) ? 'selected' : ''}`}
              >
                {/* 선택 */}
                <div className="material-cell">
                  <input
                    type="checkbox"
                    checked={selectedMaterials.has(material.id)}
                    onChange={() => toggleMaterialSelection(material.id)}
                  />
                </div>
                
                {/* 종류 */}
                <div className="material-cell">
                  <span className={`type-badge ${info.type.toLowerCase()}`}>
                    {info.type}
                  </span>
                </div>
                
                {/* 타입 */}
                <div className="material-cell">
                  <span className="subtype-text">{info.subtype}</span>
                </div>
                
                {/* 크기 */}
                <div className="material-cell">
                  <span className="size-text">{info.size}</span>
                </div>
                
                {/* 압력 */}
                <div className="material-cell">
                  <span className="pressure-info">{info.pressure}</span>
                </div>
                
                {/* 재질 */}
                <div className="material-cell">
                  <span className="material-structure">{info.materialStructure}</span>
                </div>
                
                {/* 상세내역 */}
                <div className="material-cell">
                  <span className="material-detail">{info.materialDetail}</span>
                </div>
                
                {/* 두께 */}
                <div className="material-cell">
                  <span className="thickness-info">{info.thickness}</span>
                </div>
                
                {/* 추가요구 */}
                <div className="material-cell">
                  <span>{info.additionalReq || '-'}</span>
                </div>
                
                {/* 사용자요구 */}
                <div className="material-cell">
                  <input
                    type="text"
                    className="user-req-input"
                    placeholder="요구사항 입력"
                    value={userRequirements[material.id] || ''}
                    onChange={(e) => {
                      console.log('🎯 입력 이벤트 발생!', material.id, e.target.value);
                      handleUserRequirementChange(material.id, e.target.value);
                    }}
                  />
                </div>
                
                {/* 수량 */}
                <div className="material-cell">
                  <div className="quantity-info">
                    <span className="quantity-value">
                      {info.quantity} {info.unit}
                    </span>
                  </div>
                </div>
              </div>
            );
          }
          
        if (material.classified_category === 'BOLT') {
          // BOLT 카테고리 (9개 컬럼, 길이 표시)
          return (
            <div 
              key={material.id} 
              className={`detailed-material-row bolt-row ${selectedMaterials.has(material.id) ? 'selected' : ''}`}
            >
              {/* 선택 */}
              <div className="material-cell">
                <input
                  type="checkbox"
                  checked={selectedMaterials.has(material.id)}
                  onChange={() => toggleMaterialSelection(material.id)}
                />
              </div>
              
              {/* 종류 */}
              <div className="material-cell">
                <span className={`type-badge bolt`}>
                  BOLT
                </span>
              </div>
              
              {/* 타입 */}
              <div className="material-cell">
                <span className="subtype-text">{info.subtype || 'BOLT_GENERAL'}</span>
              </div>
              
              {/* 크기 */}
              <div className="material-cell">
                <span className="size-text">{info.size || material.main_nom}</span>
              </div>
              
              {/* 길이 (스케줄 대신) */}
              <div className="material-cell">
                <span className="length-text">{info.schedule || '-'}</span>
              </div>
              
              {/* 재질 */}
              <div className="material-cell">
                <span className="grade-text">{info.grade || material.full_material_grade}</span>
              </div>
              
              {/* 추가요구 */}
              <div className="material-cell">
                <span className="additional-req-text">{info.additionalReq || '-'}</span>
              </div>
              
              {/* 사용자요구 */}
              <div className="material-cell">
                <input
                  type="text"
                  className="user-req-input"
                  placeholder="요구사항 입력"
                  value={userRequirements[material.id] || ''}
                  onChange={(e) => handleUserRequirementChange(material.id, e.target.value)}
                />
              </div>
              
              {/* 수량 */}
              <div className="material-cell">
                <span className="quantity-text">{info.quantity || material.quantity || 1} {info.unit || 'SETS'}</span>
              </div>
            </div>
          );
        }
        
        if (material.classified_category === 'U_BOLT') {
          // U_BOLT 카테고리 - 자재 타입별 다른 표시
          const isUrethaneBlock = material.original_description?.includes('URETHANE') || 
                                  material.original_description?.includes('BLOCK SHOE') ||
                                  material.original_description?.includes('우레탄');
          
          return (
            <div 
              key={material.id} 
              className={`detailed-material-row ubolt-row ${selectedMaterials.has(material.id) ? 'selected' : ''}`}
            >
              {/* 선택 */}
              <div className="material-cell">
                <input
                  type="checkbox"
                  checked={selectedMaterials.has(material.id)}
                  onChange={() => toggleMaterialSelection(material.id)}
                />
              </div>
              
              {/* 종류 */}
              <div className="material-cell">
                <span className={`type-badge ${isUrethaneBlock ? 'urethane' : 'ubolt'}`}>
                  {isUrethaneBlock ? 'URETHANE' : 'U-BOLT'}
                </span>
              </div>
              
              {/* 타입 */}
              <div className="material-cell">
                <span className="subtype-text">
                  {isUrethaneBlock ? 'BLOCK SHOE' : (info.subtype || 'U_BOLT')}
                </span>
              </div>
              
              {/* 크기 */}
              <div className="material-cell">
                <span className="size-text">
                  {isUrethaneBlock ? 
                    (material.original_description?.match(/\d+t/i)?.[0] || material.main_nom) : 
                    (info.size || material.main_nom)
                  }
                </span>
              </div>
              
              {/* 재질 */}
              <div className="material-cell">
                <span className="grade-text">
                  {isUrethaneBlock ? 
                    'URETHANE' : 
                    (info.grade || material.full_material_grade || '재질 확인 필요')
                  }
                </span>
              </div>
              
              {/* 추가요구 */}
              <div className="material-cell">
                <span className="additional-req-text">{info.additionalReq || '-'}</span>
              </div>
              
              {/* 사용자요구 */}
              <div className="material-cell">
                <input
                  type="text"
                  className="user-req-input"
                  placeholder="요구사항 입력"
                  value={userRequirements[material.id] || ''}
                  onChange={(e) => handleUserRequirementChange(material.id, e.target.value)}
                />
              </div>
              
              {/* 수량 */}
              <div className="material-cell">
                <span className="quantity-text">{info.quantity || material.quantity || 1} {info.unit || 'SETS'}</span>
              </div>
            </div>
          );
        }
        
        if (material.classified_category === 'SUPPORT') {
          // SUPPORT 카테고리 (9개 컬럼)
          return (
            <div 
              key={material.id} 
              className={`detailed-material-row support-row ${selectedMaterials.has(material.id) ? 'selected' : ''}`}
            >
              {/* 선택 */}
              <div className="material-cell">
                <input
                  type="checkbox"
                  checked={selectedMaterials.has(material.id)}
                  onChange={() => toggleMaterialSelection(material.id)}
                />
              </div>
              
              {/* 종류 */}
              <div className="material-cell">
                <span className={`type-badge support`}>
                  SUPPORT
                </span>
              </div>
              
              {/* 타입 */}
              <div className="material-cell">
                <span className="subtype-text">{info.subtype || material.original_description}</span>
              </div>
              
              {/* 크기 */}
              <div className="material-cell">
                <span className="size-text">{info.size || material.main_nom}</span>
              </div>
              
              {/* 스케줄 */}
              <div className="material-cell">
                <span className="schedule-text">{info.schedule || '-'}</span>
              </div>
              
              {/* 재질 */}
              <div className="material-cell">
                <span className="grade-text">{info.grade || material.full_material_grade || '-'}</span>
              </div>
              
              {/* 추가요구 */}
              <div className="material-cell">
                <span className="additional-req-text">{info.additionalReq || '-'}</span>
              </div>
              
              {/* 사용자요구 */}
              <div className="material-cell">
                <input
                  type="text"
                  className="user-req-input"
                  placeholder="요구사항 입력"
                  value={userRequirements[material.id] || ''}
                  onChange={(e) => handleUserRequirementChange(material.id, e.target.value)}
                />
              </div>
              
              {/* 수량 */}
              <div className="material-cell">
                <span className="quantity-text">{info.quantity || material.quantity || 1} {info.unit || 'EA'}</span>
              </div>
            </div>
          );
        }
          
          // 위에서 처리되지 않은 모든 자재는 기본 9개 컬럼으로 렌더링
          // (예: 아직 전용 뷰가 없는 자재)
          return (
            <div 
              key={material.id + '-default'} 
              className={`detailed-material-row pipe-row ${selectedMaterials.has(material.id) ? 'selected' : ''}`}
            >
              {/* This is a fallback view, adjust columns as needed */}
              <div className="material-cell"><input type="checkbox" checked={selectedMaterials.has(material.id)} onChange={() => toggleMaterialSelection(material.id)} /></div>
              <div className="material-cell"><span className={`type-badge ${info.type ? info.type.toLowerCase() : 'unknown'}`}>{info.type || 'N/A'}</span></div>
              <div className="material-cell">{info.subtype || material.original_description}</div>
              <div className="material-cell">{info.size}</div>
              <div className="material-cell">{info.schedule}</div>
              <div className="material-cell">{info.grade}</div>
              <div className="material-cell">-</div>
              <div className="material-cell"><input type="text" className="user-req-input" placeholder="요구사항" value={userRequirements[material.id] || ''} onChange={(e) => handleUserRequirementChange(material.id, e.target.value)} /></div>
              <div className="material-cell">{info.quantity} {info.unit}</div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default NewMaterialsPage;