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,
  user
}) => {
  const [materials, setMaterials] = useState([]);
  const [loading, setLoading] = useState(true);
  const [selectedCategory, setSelectedCategory] = useState('PIPE');
  const [selectedMaterials, setSelectedMaterials] = useState(new Set());
  const [exportHistory, setExportHistory] = useState([]); // 내보내기 이력
  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);
  
  // 구매신청된 자재 ID 관리
  const [purchasedMaterials, setPurchasedMaterials] = useState(new Set());

  // 같은 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 loadPurchasedMaterials = async (jobNo) => {
    try {
      const response = await api.get('/purchase-request/list', {
        params: { job_no: jobNo }
      });
      
      if (response.data?.requests) {
        const allPurchasedIds = new Set();
        
        // 모든 구매신청에서 자재 ID 수집
        for (const request of response.data.requests) {
          try {
            const detailResponse = await api.get(`/purchase-request/${request.request_id}/materials`);
            if (detailResponse.data?.materials) {
              detailResponse.data.materials.forEach(m => {
                if (m.material_ids) {
                  // 그룹화된 자재의 모든 ID 추가
                  m.material_ids.forEach(id => allPurchasedIds.add(id));
                } else if (m.material_id) {
                  // 개별 자재 ID 추가
                  allPurchasedIds.add(m.material_id);
                }
              });
            }
          } catch (err) {
            console.error('구매신청 상세 로드 실패:', err);
          }
        }
        
        setPurchasedMaterials(allPurchasedIds);
        console.log(`✅ 구매신청된 자재 ${allPurchasedIds.size}개 확인`);
      }
    } catch (error) {
      console.error('구매신청 목록 로드 실패:', error);
    }
  };

  const loadMaterials = async (id) => {
    try {
      setLoading(true);
      console.log('🔍 자재 데이터 로딩 중...', { 
        file_id: id, 
        selectedProject: selectedProject?.job_no || selectedProject?.official_project_code,
        jobNo 
      });
      
      // 구매신청된 자재 먼저 확인
      const projectJobNo = selectedProject?.job_no || selectedProject?.official_project_code || jobNo;
      await loadPurchasedMaterials(projectJobNo);
      
      const response = await fetchMaterials({ 
        file_id: parseInt(id), 
        limit: 10000,
        exclude_requested: false,  // 구매신청된 자재도 포함하여 표시
        job_no: projectJobNo  // 프로젝트별 필터링 추가
      });
      
      if (response.data?.materials) {
        const materialsData = response.data.materials;
        console.log(`✅ ${materialsData.length}개 원본 자재 로드 완료`);
        
        // PIPE 데이터 샘플 확인
        const pipeSample = materialsData.find(m => m.classified_category === 'PIPE');
        if (pipeSample) {
          console.log('📊 PIPE 샘플 데이터:', pipeSample);
          console.log('📊 pipe_details:', pipeSample.pipe_details);
        }
        
        // 같은 사양끼리 그룹화 (PIPE는 특별 처리)
        const groupedMap = new Map();
        
        materialsData.forEach(material => {
          let groupKey;
          
          if (material.classified_category === 'PIPE') {
            // PIPE는 길이를 제외한 사양으로 그룹화
            // 예: "PIPE 2" SCH40 120mm"과 "PIPE 2" SCH40 60mm"은 같은 그룹
            const descWithoutLength = material.original_description.replace(/\d+(?:\.\d+)?\s*mm/gi, '').trim();
            groupKey = `PIPE|${descWithoutLength}|${material.size_spec || ''}|${material.schedule || ''}|${material.material_grade || ''}`;
          } else {
            // PIPE가 아닌 경우 기존 방식대로 그룹화
            groupKey = `${material.original_description}|${material.size_spec || ''}|${material.schedule || ''}|${material.material_grade || ''}|${material.classified_category}`;
          }
          
          if (groupedMap.has(groupKey)) {
            // 이미 있는 그룹에 추가
            const existing = groupedMap.get(groupKey);
            
            if (material.classified_category === 'PIPE') {
              // PIPE의 경우 - 백엔드에서 이미 그룹화되어 온 경우 처리
              if (material.pipe_details && material.pipe_details.individual_pipes) {
                // 백엔드에서 그룹화된 개별 파이프 정보 사용
                const individualPipes = material.pipe_details.individual_pipes;
                
                individualPipes.forEach(pipe => {
                  const pipeLength = parseFloat(pipe.length);
                  const pipeQty = parseFloat(pipe.quantity || 1);
                  const pipeTotalLength = pipeLength * pipeQty;
                  
                  if (existing.pipe_lengths) {
                    existing.pipe_lengths.push({ length: pipeLength, quantity: pipeQty, totalLength: pipeTotalLength });
                    existing.total_length = (existing.total_length || 0) + pipeTotalLength;
                  } else {
                    existing.pipe_lengths = [{ length: pipeLength, quantity: pipeQty, totalLength: pipeTotalLength }];
                    existing.total_length = pipeTotalLength;
                  }
                });
                
                existing.quantity = material.pipe_details.group_total_quantity || material.quantity;
              } else {
                // 개별 파이프 처리 (백엔드 그룹화 없는 경우)
                const qty = parseFloat(material.quantity);
                let length = 6000; // 기본값 6m
                
                if (material.pipe_details && material.pipe_details.length_mm) {
                  length = parseFloat(material.pipe_details.length_mm);
                }
                
                const totalLength = length * qty;
                
                if (existing.pipe_lengths) {
                  existing.pipe_lengths.push({ length, quantity: qty, totalLength });
                  existing.total_length = (existing.total_length || 0) + totalLength;
                } else {
                  existing.pipe_lengths = [{ length, quantity: qty, totalLength }];
                  existing.total_length = totalLength;
                }
                
                existing.quantity = (parseFloat(existing.quantity) + qty).toFixed(3);
              }
              
              // 6,000mm를 1본으로 계산
              existing.pipe_count = Math.ceil((existing.total_length || 0) / 6000);
            } else {
              // PIPE가 아닌 경우 수량만 합산
              existing.quantity = (parseFloat(existing.quantity) + parseFloat(material.quantity)).toFixed(3);
            }
            
            existing.grouped_ids = [...existing.grouped_ids, material.id];
          } else {
            // 새 그룹 생성
            const newGroup = {
              ...material,
              grouped_ids: [material.id],  // 그룹에 속한 모든 자재 ID 저장
              is_grouped: true
            };
            
            // PIPE의 경우 길이 정보 초기화
            if (material.classified_category === 'PIPE') {
              // 백엔드에서 이미 그룹화된 경우
              if (material.pipe_details && material.pipe_details.individual_pipes) {
                newGroup.pipe_lengths = material.pipe_details.individual_pipes.map(pipe => ({
                  length: parseFloat(pipe.length),
                  quantity: parseFloat(pipe.quantity || 1),
                  totalLength: parseFloat(pipe.length) * parseFloat(pipe.quantity || 1)
                }));
                newGroup.total_length = material.pipe_details.total_length_mm || 
                  newGroup.pipe_lengths.reduce((sum, p) => sum + p.totalLength, 0);
                newGroup.quantity = material.pipe_details.group_total_quantity || material.quantity;
              } else {
                // 개별 파이프
                const qty = parseFloat(material.quantity);
                let length = 6000; // 기본값 6m
                
                if (material.pipe_details && material.pipe_details.length_mm) {
                  length = parseFloat(material.pipe_details.length_mm);
                }
                
                const totalLength = length * qty;
                newGroup.pipe_lengths = [{ length, quantity: qty, totalLength }];
                newGroup.total_length = totalLength;
              }
              
              newGroup.pipe_count = Math.ceil(newGroup.total_length / 6000);  // 6,000mm를 1본으로 계산
            }
            
            groupedMap.set(groupKey, newGroup);
          }
        });
        
        const groupedMaterials = Array.from(groupedMap.values());
        console.log(`📦 ${groupedMaterials.length}개 그룹으로 집계 완료`);
        
        // 파이프 데이터 검증
        const pipes = groupedMaterials.filter(m => m.classified_category === 'PIPE');
        if (pipes.length > 0) {
          console.log('📊 파이프 데이터 샘플:', pipes[0]);
        }
        
        setMaterials(groupedMaterials);
      }
    } 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 || 'UNCLASSIFIED';
      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': 'SUPPORT',
      'SUPPORT': 'SUPPORT',
      'PIPE': 'PIPE',
      'FITTING': 'FITTING',
      'FLANGE': 'FLANGE',
      'VALVE': 'VALVE',
      'BOLT': 'BOLT',
      'GASKET': 'GASKET',
      'INSTRUMENT': 'INSTRUMENT',
      'UNCLASSIFIED': 'UNCLASSIFIED'
    };
    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') {
        // 엘보: 각도, 반경, 연결 방식 상세 표시
        let elbowDetails = [];
        
        // 각도 정보 추출
        if (fittingSubtype.includes('90DEG') || description.includes('90') || description.includes('90°')) {
          elbowDetails.push('90°');
        } else if (fittingSubtype.includes('45DEG') || description.includes('45') || description.includes('45°')) {
          elbowDetails.push('45°');
        }
        
        // 반경 정보 추출 (Long Radius / Short Radius)
        if (fittingSubtype.includes('LONG_RADIUS') || description.toUpperCase().includes('LR') || description.toUpperCase().includes('LONG RADIUS')) {
          elbowDetails.push('LR');
        } else if (fittingSubtype.includes('SHORT_RADIUS') || description.toUpperCase().includes('SR') || description.toUpperCase().includes('SHORT RADIUS')) {
          elbowDetails.push('SR');
        }
        
        // 연결 방식
        if (description.includes('SW')) {
          elbowDetails.push('SW');
        } else if (description.includes('BW')) {
          elbowDetails.push('BW');
        }
        
        // 기본값 설정 (각도가 없으면 90도로 가정)
        if (!elbowDetails.some(detail => detail.includes('°'))) {
          elbowDetails.unshift('90°');
        }
        
        displayType = `ELBOW ${elbowDetails.join(' ')}`.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 (fittingType === 'OLET') {
        // OLET: 풀네임으로 표시
        const oletSubtype = fittingSubtype || '';
        let oletDisplayName = '';
        
        switch (oletSubtype) {
          case 'SOCKOLET':
            oletDisplayName = 'SOCK-O-LET';
            break;
          case 'WELDOLET':
            oletDisplayName = 'WELD-O-LET';
            break;
          case 'ELLOLET':
            oletDisplayName = 'ELL-O-LET';
            break;
          case 'THREADOLET':
            oletDisplayName = 'THREAD-O-LET';
            break;
          case 'ELBOLET':
            oletDisplayName = 'ELB-O-LET';
            break;
          case 'NIPOLET':
            oletDisplayName = 'NIP-O-LET';
            break;
          case 'COUPOLET':
            oletDisplayName = 'COUP-O-LET';
            break;
          default:
            oletDisplayName = 'OLET';
        }
        
        displayType = oletDisplayName;
      } 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 || '';
      const flangeDetails = material.flange_details || {};
      
      // 플랜지 타입 풀네임 매핑 (영어)
      const flangeTypeMap = {
        'WN': 'WELD NECK FLANGE',
        'WELD_NECK': 'WELD NECK FLANGE',
        'SO': 'SLIP ON FLANGE', 
        'SLIP_ON': 'SLIP ON FLANGE',
        'SW': 'SOCKET WELD FLANGE',
        'SOCKET_WELD': 'SOCKET WELD FLANGE',
        'BL': 'BLIND FLANGE',
        'BLIND': 'BLIND FLANGE',
        'RED': 'REDUCING FLANGE',
        'REDUCING': 'REDUCING FLANGE',
        'ORIFICE': 'ORIFICE FLANGE',
        'SPECTACLE': 'SPECTACLE BLIND',
        'PADDLE': 'PADDLE BLIND',
        'SPACER': 'SPACER'
      };
      
      // 끝단처리 풀네임 매핑 (영어)
      const facingTypeMap = {
        'RF': 'RAISED FACE',
        'RAISED_FACE': 'RAISED FACE',
        'FF': 'FULL FACE',
        'FULL_FACE': 'FULL FACE',
        'RTJ': 'RING JOINT',
        'RING_JOINT': 'RING JOINT',
        'MALE': 'MALE',
        'FEMALE': 'FEMALE'
      };
      
      // 백엔드에서 제공된 타입 정보
      const rawFlangeType = flangeDetails.flange_type || '';
      const rawFacingType = flangeDetails.facing_type || '';
      
      // 풀네임으로 변환
      let displayType = flangeTypeMap[rawFlangeType] || rawFlangeType || '-';
      let facingType = facingTypeMap[rawFacingType] || rawFacingType || '-';
      
      // 백엔드 데이터가 없으면 description에서 추출
      if (displayType === '-') {
        const upperDesc = description.toUpperCase();
        if (upperDesc.includes('WN') || upperDesc.includes('WELD NECK')) {
          displayType = 'WELD NECK FLANGE';
        } else if (upperDesc.includes('SO') || upperDesc.includes('SLIP ON')) {
          displayType = 'SLIP ON FLANGE';
        } else if (upperDesc.includes('SW') || upperDesc.includes('SOCKET')) {
          displayType = 'SOCKET WELD FLANGE';
        } else if (upperDesc.includes('BLIND') || upperDesc.includes('BL')) {
          displayType = 'BLIND FLANGE';
        } else if (upperDesc.includes('REDUCING') || upperDesc.includes('RED')) {
          displayType = 'REDUCING FLANGE';
        } else if (upperDesc.includes('ORIFICE')) {
          displayType = 'ORIFICE FLANGE';
        } else if (upperDesc.includes('SPECTACLE')) {
          displayType = 'SPECTACLE BLIND';
        } else if (upperDesc.includes('PADDLE')) {
          displayType = 'PADDLE BLIND';
        } else if (upperDesc.includes('SPACER')) {
          displayType = 'SPACER';
        } else {
          displayType = 'FLANGE';
        }
      }
      
      // 끝단처리 정보가 없으면 description에서 추출
      if (facingType === '-') {
        const upperDesc = description.toUpperCase();
        if (upperDesc.includes(' RF') || upperDesc.includes('RAISED')) {
          facingType = 'RAISED FACE';
        } else if (upperDesc.includes(' FF') || upperDesc.includes('FULL FACE')) {
          facingType = 'FULL FACE';
        } else if (upperDesc.includes('RTJ') || upperDesc.includes('RING')) {
          facingType = 'RING JOINT';
        }
      }
      
      // 원본 설명에서 스케줄 추출
      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,  // 풀네임 플랜지 타입
        facing: facingType,    // 새로 추가: 끝단처리 정보
        size: material.size_spec || '-',
        pressure: flangeDetails.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 === 'SUPPORT' || category === 'U_BOLT') {
      const desc = material.original_description || '';
      const isUrethaneBlock = desc.includes('URETHANE') || desc.includes('BLOCK SHOE') || desc.includes('우레탄');
      const isClamp = desc.includes('CLAMP') || desc.includes('클램프');
      
      let subtypeText = '';
      if (isUrethaneBlock) {
        subtypeText = '우레탄블럭슈';
      } else if (isClamp) {
        subtypeText = '클램프';
      } else {
        subtypeText = '유볼트';
      }
      
      return {
        type: 'SUPPORT',
        subtype: subtypeText,
        size: material.main_nom || material.size_inch || material.size_spec || '-',
        description: material.original_description || '-',
        grade: material.full_material_grade || material.material_grade || '-',
        additionalReq: '-',
        quantity: Math.round(material.quantity || 0),
        unit: '개',
        isSupport: true
      };
    } else if (category === 'SPECIAL') {
      // SPECIAL 카테고리: 크기/스케줄/재질을 제외한 나머지를 타입으로 표시
      const desc = material.original_description || '';
      
      // 크기, 스케줄, 재질 패턴 제거하여 타입 추출
      let typeText = desc;
      
      // 재질 제거 (ASTM A105 등)
      typeText = typeText.replace(/ASTM\s+[A-Z0-9]+/gi, '').trim();
      typeText = typeText.replace(/[A-Z]{2,}\s+[A-Z0-9]+/g, '').trim();
      
      // 크기 제거 (1", 2", 3" 등)
      typeText = typeText.replace(/\d+["']\s*/g, '').trim();
      
      // 스케줄 제거 (SCH 40, 150LB 등)
      typeText = typeText.replace(/SCH\s*\d+[A-Z]*/gi, '').trim();
      typeText = typeText.replace(/\d+LB/gi, '').trim();
      
      // 쉼표 정리
      typeText = typeText.replace(/,\s*,/g, ',').replace(/^,\s*|,\s*$/g, '').trim();
      
      return {
        type: 'SPECIAL',
        subtype: typeText || desc,
        size: material.main_nom || material.size_inch || material.size_spec || '-',
        schedule: '-',
        grade: material.full_material_grade || material.material_grade || '-',
        drawingNo: material.drawing_name || material.line_no || material.dwg_name || 'N/A',
        additionalReq: '-',
        quantity: Math.round(material.quantity || 0),
        unit: '개',
        isSpecial: true
      };
    } else if (category === 'UNCLASSIFIED') {
      return {
        type: 'UNCLASSIFIED',
        description: material.original_description || 'Unclassified Item',
        quantity: Math.round(material.quantity || 0),
        unit: '개',
        isUnknown: true
      };
    } else {
      return {
        type: category || 'UNCLASSIFIED',
        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 parsedMaterialsMap = React.useMemo(() => {
    const map = new Map();
    materials.forEach(material => {
      map.set(material.id, parseMaterialInfo(material));
    });
    return map;
  }, [materials]);

  // parseMaterialInfo를 캐시된 버전으로 교체
  const getParsedInfo = (material) => {
    return parsedMaterialsMap.get(material.id) || parseMaterialInfo(material);
  };

  // 필터링된 자재 목록
  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 = getParsedInfo(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 = () => {
    // 구매신청되지 않은 항목들만 필터링
    const selectableMaterials = filteredMaterials.filter(material => {
      const isPurchased = material.grouped_ids ? 
        material.grouped_ids.some(id => purchasedMaterials.has(id)) :
        purchasedMaterials.has(material.id);
      return !isPurchased;
    });
    
    // 현재 선택 가능한 모든 항목이 선택되어 있는지 확인
    const allSelectableSelected = selectableMaterials.every(m => selectedMaterials.has(m.id));
    
    if (allSelectableSelected) {
      // 전체 해제
      setSelectedMaterials(new Set());
    } else {
      // 구매신청되지 않은 항목만 선택
      setSelectedMaterials(new Set(selectableMaterials.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);
  };

  // 자재 상태별 CSS 클래스 생성
  const getMaterialRowClasses = (material, baseClass) => {
    const classes = [baseClass];
    
    if (selectedMaterials.has(material.id)) {
      classes.push('selected');
    }
    
    // 구매신청 여부 확인
    const isPurchased = material.grouped_ids ? 
      material.grouped_ids.some(id => purchasedMaterials.has(id)) :
      purchasedMaterials.has(material.id);
    
    if (isPurchased) {
      classes.push('purchased');
    }
    
    // 리비전 상태
    if (material.revision_status === 'inventory') {
      classes.push('inventory');
    } else if (material.revision_status === 'deleted_not_purchased') {
      classes.push('deleted-not-purchased');
    } else if (material.revision_status === 'changed') {
      classes.push('changed');
    }
    
    return classes.join(' ');
  };

  // 리비전 상태 배지 렌더링
  const renderRevisionBadge = (material) => {
    if (material.revision_status === 'inventory') {
      return (
        <span style={{ 
          display: 'inline-block', 
          padding: '2px 6px', 
          backgroundColor: '#f59e0b', 
          color: 'white', 
          fontSize: '10px', 
          borderRadius: '3px',
          marginBottom: '4px',
          marginLeft: '4px'
        }}>
          재고품
        </span>
      );
    } else if (material.revision_status === 'changed') {
      return (
        <span style={{ 
          display: 'inline-block', 
          padding: '2px 6px', 
          backgroundColor: '#3b82f6', 
          color: 'white', 
          fontSize: '10px', 
          borderRadius: '3px',
          marginBottom: '4px',
          marginLeft: '4px'
        }}>
          변경됨
        </span>
      );
    }
    return null;
  };

  // 필터 헤더 컴포넌트
  const FilterableHeader = ({ children, sortKey, filterKey, className = "" }) => {
    const uniqueValues = React.useMemo(() => {
      const values = new Set();
      
      // 현재 선택된 카테고리의 자재들만 필터링 (최대 200개만 처리하여 성능 개선)
      const categoryMaterials = materials
        .filter(material => material.classified_category === selectedCategory)
        .slice(0, 200);
      
      categoryMaterials.forEach(material => {
        const info = getParsedInfo(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 = async () => {
    try {
      // 내보낼 데이터 결정
      let dataToExport;
      
      if (selectedMaterials.size > 0) {
        // 선택된 항목만 내보내기
        dataToExport = materials.filter(m => selectedMaterials.has(m.id));
      } else {
        // 선택된 항목이 없으면 현재 보이는 카테고리의 구매신청되지 않은 자재만
        dataToExport = filteredMaterials.filter(material => {
          const isPurchased = material.grouped_ids ? 
            material.grouped_ids.some(id => purchasedMaterials.has(id)) :
            purchasedMaterials.has(material.id);
          return !isPurchased;
        });
      }
      
      // 그룹화된 자재의 경우 모든 ID를 포함
      const allMaterialIds = [];
      const expandedMaterialsData = [];
      
      dataToExport.forEach(material => {
        if (material.grouped_ids && material.grouped_ids.length > 0) {
          // 그룹화된 자재의 모든 ID 추가
          allMaterialIds.push(...material.grouped_ids);
          // 각 ID에 대해 동일한 데이터 복사
          material.grouped_ids.forEach(id => {
            expandedMaterialsData.push({
              ...material,
              material_id: id,
              id: id
            });
          });
        } else {
          // 그룹화되지 않은 자재
          allMaterialIds.push(material.id);
          expandedMaterialsData.push(material);
        }
      });
      
      console.log('📊 엑셀 내보내기:', dataToExport.length, '개 그룹, ', allMaterialIds.length, '개 실제 자재');
      console.log('🔍 전송할 자재 ID들:', allMaterialIds);
      console.log('📦 그룹화 정보:', dataToExport.map(m => ({
        id: m.id,
        grouped_ids: m.grouped_ids,
        description: m.original_description
      })));
      
      // 사용자 요구사항을 자재에 추가
      const dataWithRequirements = dataToExport.map(material => ({
        ...material,
        user_requirement: userRequirements[material.id] || ''
      }));
      
      // 1단계: 엑셀 파일 생성
      const timestamp = new Date().toISOString().split('T')[0];
      const fileName = `${jobNo}_${selectedCategory}_${timestamp}.xlsx`;
      
      // 엑셀 파일명 설정
      const excelFileName = fileName;
      
      // 2단계: 생성된 엑셀을 서버에 업로드 (구매신청과 함께)
      // 서버에 구매신청 생성
      try {
        // 그룹화된 데이터를 구매신청 형식으로 변환
        const groupedMaterialsForRequest = dataToExport.map(material => {
          if (material.classified_category === 'PIPE' && material.total_length) {
            // PIPE의 경우 길이 정보 포함
            return {
              group_key: `${material.original_description}|${material.size_spec}|${material.schedule}|${material.material_grade}`,
              material_ids: material.grouped_ids || [material.id],
              description: material.original_description,
              category: material.classified_category,
              size: material.size_inch || material.size_spec,
              schedule: material.schedule,
              material_grade: material.material_grade || material.full_material_grade,
              quantity: material.quantity,
              unit: 'm',  // 파이프는 미터 단위
              total_length: material.total_length,
              pipe_lengths: material.pipe_lengths,
              user_requirement: userRequirements[material.id] || ''
            };
          } else {
            // 다른 자재들
            return {
              group_key: `${material.original_description}|${material.size_spec}|${material.schedule}|${material.material_grade}`,
              material_ids: material.grouped_ids || [material.id],
              description: material.original_description,
              category: material.classified_category,
              size: material.size_inch || material.size_spec,
              schedule: material.schedule,
              material_grade: material.material_grade || material.full_material_grade,
              quantity: material.quantity,
              unit: material.unit || '개',
              user_requirement: userRequirements[material.id] || ''
            };
          }
        });
        
        const response = await api.post('/purchase-request/create', {
          file_id: fileId,
          job_no: jobNo,
          category: selectedCategory,
          material_ids: allMaterialIds,  // 그룹화된 모든 ID 전송
          materials_data: expandedMaterialsData.map(m => ({  // 확장된 데이터 전송
            material_id: m.id,
            description: m.original_description,
            category: m.classified_category,
            size: m.size_inch || m.size_spec,
            schedule: m.schedule,
            material_grade: m.material_grade || m.full_material_grade,
            quantity: m.quantity,
            unit: m.unit,
            user_requirement: userRequirements[m.id] || ''
          })),
          grouped_materials: groupedMaterialsForRequest  // 그룹화 정보 추가 전송
        });
        
        if (response.data.success) {
        console.log(`✅ 구매신청 완료: ${response.data.request_no}`);
        console.log(`📊 구매신청된 자재 ID: ${allMaterialIds.length}개`, allMaterialIds);
        alert(`구매신청 ${response.data.request_no}이 생성되었습니다.\n구매신청 관리 페이지에서 확인하세요.`);
        
        // 구매신청된 자재 ID를 즉시 purchasedMaterials에 추가
        setPurchasedMaterials(prev => {
          const newSet = new Set(prev);
          allMaterialIds.forEach(id => newSet.add(id));
          console.log(`📦 구매신청 자재 추가: 기존 ${prev.size}개 → 신규 ${newSet.size}개`);
          return newSet;
        });
        
        // 선택된 항목 초기화
        setSelectedMaterials(new Set());
        
        // 페이지 새로고침하여 신청된 자재 숨기기
        console.log('🔄 구매신청 후 자재 목록 새로고침 시작');
        await loadMaterials(fileId);
        console.log('✅ 자재 목록 새로고침 완료');
        }
      } catch (error) {
        console.error('구매신청 생성 실패:', error);
        // 실패해도 엑셀은 내보내기
      }
      
      // 엑셀 내보내기 (한 번만 실행)
      const additionalInfo = {
        filename: filename || bomName,
        jobNo: jobNo,
        revision: currentRevision,
        uploadDate: new Date().toLocaleDateString()
      };
      
      exportMaterialsToExcel(dataWithRequirements, excelFileName, 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"
            style={{ position: 'relative' }}
          >
            {(() => {
              if (selectedMaterials.size > 0) {
                return `선택 항목 구매신청 (${selectedMaterials.size}개)`;
              } else {
                // 구매신청되지 않은 항목 개수 계산
                const availableCount = filteredMaterials.filter(material => {
                  const isPurchased = material.grouped_ids ? 
                    material.grouped_ids.some(id => purchasedMaterials.has(id)) :
                    purchasedMaterials.has(material.id);
                  return !isPurchased;
                }).length;
                return `${selectedCategory} 전체 구매신청 (${availableCount}개)`;
              }
            })()}
            {exportHistory.length > 0 && (
              <span style={{
                position: 'absolute',
                top: '-8px',
                right: '-8px',
                background: '#28a745',
                color: 'white',
                borderRadius: '50%',
                width: '20px',
                height: '20px',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                fontSize: '11px',
                fontWeight: 'bold'
              }}>
                {exportHistory.length}
              </span>
            )}
          </button>
        </div>
      </div>
      
      {/* 구매신청 이력 표시 */}
      {exportHistory.length > 0 && (
        <div style={{
          background: '#d4edda',
          border: '1px solid #c3e6cb',
          borderRadius: '4px',
          padding: '8px 12px',
          marginBottom: '16px',
          fontSize: '13px',
          color: '#155724'
        }}>
          ✅ 최근 구매신청: {new Date(exportHistory[0].export_date).toLocaleString()} 
          ({exportHistory[0].category} {exportHistory[0].material_count}개)
          {exportHistory.length > 1 && ` 외 ${exportHistory.length - 1}건`}
        </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="facing" filterKey="facing">끝단처리</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 === 'SUPPORT' || selectedCategory === 'U_BOLT' ? (
          <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>
            <FilterableHeader sortKey="description" filterKey="description">디스크립션</FilterableHeader>
            <div>추가요구</div>
            <div>사용자요구</div>
            <FilterableHeader sortKey="quantity" filterKey="quantity">수량</FilterableHeader>
          </div>
        ) : selectedCategory === 'UNCLASSIFIED' ? (
          <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 = getParsedInfo(material);
          
          if (material.classified_category === 'SPECIAL') {
            // SPECIAL 카테고리 (10개 컬럼)
            // 구매신청 여부 확인
            const isPurchased = material.grouped_ids ? 
              material.grouped_ids.some(id => purchasedMaterials.has(id)) :
              purchasedMaterials.has(material.id);
              
            return (
              <div 
                key={material.id} 
                className={`detailed-material-row special-row ${selectedMaterials.has(material.id) ? 'selected' : ''} ${isPurchased ? 'purchased' : ''}`}
                style={isPurchased ? { opacity: 0.6, backgroundColor: '#f0f0f0' } : {}}
              >
                {/* 선택 */}
                <div className="material-cell">
                  <input
                    type="checkbox"
                    checked={selectedMaterials.has(material.id)}
                    onChange={() => toggleMaterialSelection(material.id)}
                    disabled={isPurchased}
                    title={isPurchased ? '이미 구매신청된 자재입니다' : ''}
                  />
                </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">{info.drawingNo || material.drawing_name || material.line_no || material.dwg_name || '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">
                  {isPurchased && (
                    <span style={{ 
                      display: 'inline-block', 
                      padding: '2px 6px', 
                      backgroundColor: '#4CAF50', 
                      color: 'white', 
                      fontSize: '10px', 
                      borderRadius: '3px',
                      marginBottom: '4px'
                    }}>
                      구매신청완료
                    </span>
                  )}
                  <span className="quantity-text" style={{ display: 'block' }}>
                    {info.quantity || material.quantity || 1}개
                  </span>
                </div>
              </div>
            );
          }
          if (material.classified_category === 'PIPE') {
            // PIPE 또는 카테고리 없는 경우 (기본 9개 컬럼)
            // 구매신청 여부 확인
            const isPurchased = material.grouped_ids ? 
              material.grouped_ids.some(id => purchasedMaterials.has(id)) :
              purchasedMaterials.has(material.id);
              
            return (
              <div 
                key={material.id} 
                className={getMaterialRowClasses(material, 'detailed-material-row pipe-row')}
                style={isPurchased ? { opacity: 0.6, backgroundColor: '#f0f0f0' } : {}}
              >
                {/* 선택 */}
                <div className="material-cell">
                  <input
                    type="checkbox"
                    checked={selectedMaterials.has(material.id)}
                    onChange={() => toggleMaterialSelection(material.id)}
                    disabled={isPurchased}
                    title={isPurchased ? '이미 구매신청된 자재입니다' : ''}
                  />
                </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">
                  <div>
                    {isPurchased && (
                      <span style={{ 
                        display: 'inline-block', 
                        padding: '2px 6px', 
                        backgroundColor: '#4CAF50', 
                        color: 'white', 
                        fontSize: '10px', 
                        borderRadius: '3px',
                        marginBottom: '4px'
                      }}>
                        구매신청완료
                      </span>
                    )}
                    <span className="quantity-text" style={{ fontWeight: 'bold', display: 'block' }}>
                      {(() => {
                        // 총 길이와 개수 계산
                        let totalLengthMm = material.total_length || 0;
                        let totalCount = 0;
                        
                        if (material.pipe_lengths && material.pipe_lengths.length > 0) {
                          // pipe_lengths 배열에서 총 개수 계산
                          totalCount = material.pipe_lengths.reduce((sum, p) => sum + parseFloat(p.quantity || 0), 0);
                        } else if (material.grouped_ids && material.grouped_ids.length > 0) {
                          totalCount = material.grouped_ids.length;
                          if (!totalLengthMm) {
                            totalLengthMm = totalCount * 6000;
                          }
                        } else {
                          totalCount = parseFloat(material.quantity) || 1;
                          if (!totalLengthMm) {
                            totalLengthMm = totalCount * 6000;
                          }
                        }
                        
                        // 6,000mm를 1본으로 계산
                        const pipeCount = Math.ceil(totalLengthMm / 6000);
                        
                          // 형식: 2본(11,000mm/40개)
                          return `${pipeCount}본(${totalLengthMm.toLocaleString()}mm/${totalCount}개)`;
                        })()}
                      </span>
                  </div>
                </div>
              </div>
            );
          }
          
          if (material.classified_category === 'FITTING') {
            // 구매신청 여부 확인
            const isPurchased = material.grouped_ids ? 
              material.grouped_ids.some(id => purchasedMaterials.has(id)) :
              purchasedMaterials.has(material.id);
              
            return (
              <div 
                key={material.id} 
                className={`detailed-material-row fitting-row ${selectedMaterials.has(material.id) ? 'selected' : ''} ${isPurchased ? 'purchased' : ''}`}
                style={isPurchased ? { opacity: 0.6, backgroundColor: '#f0f0f0' } : {}}
              >
                {/* 선택 */}
                <div className="material-cell">
                  <input
                    type="checkbox"
                    checked={selectedMaterials.has(material.id)}
                    onChange={() => toggleMaterialSelection(material.id)}
                    disabled={isPurchased}
                    title={isPurchased ? '이미 구매신청된 자재입니다' : ''}
                  />
                </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">
                  {isPurchased && (
                    <span style={{ 
                      display: 'inline-block', 
                      padding: '2px 6px', 
                      backgroundColor: '#4CAF50', 
                      color: 'white', 
                      fontSize: '10px', 
                      borderRadius: '3px',
                      marginBottom: '4px'
                    }}>
                      구매신청완료
                    </span>
                  )}
                  <span className="quantity-value" style={{ display: 'block' }}>
                    {info.quantity} {info.unit}
                  </span>
                </div>
              </div>
            );
          }
          
          if (material.classified_category === 'VALVE') {
            // 구매신청 여부 확인
            const isPurchased = material.grouped_ids ? 
              material.grouped_ids.some(id => purchasedMaterials.has(id)) :
              purchasedMaterials.has(material.id);
              
            return (
              <div 
                key={material.id} 
                className={`detailed-material-row valve-row ${selectedMaterials.has(material.id) ? 'selected' : ''} ${isPurchased ? 'purchased' : ''}`}
                style={isPurchased ? { opacity: 0.6, backgroundColor: '#f0f0f0' } : {}}
              >
                {/* 선택 */}
                <div className="material-cell">
                  <input
                    type="checkbox"
                    checked={selectedMaterials.has(material.id)}
                    onChange={() => toggleMaterialSelection(material.id)}
                    disabled={isPurchased}
                    title={isPurchased ? '이미 구매신청된 자재입니다' : ''}
                  />
                </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">
                  {isPurchased && (
                    <span style={{ 
                      display: 'inline-block', 
                      padding: '2px 6px', 
                      backgroundColor: '#4CAF50', 
                      color: 'white', 
                      fontSize: '10px', 
                      borderRadius: '3px',
                      marginBottom: '4px'
                    }}>
                      구매신청완료
                    </span>
                  )}
                  <span className="quantity-value" style={{ display: 'block' }}>
                    {info.quantity} {info.unit}
                  </span>
                </div>
              </div>
            );
          }
          
          if (material.classified_category === 'FLANGE') {
            // 구매신청 여부 확인
            const isPurchased = material.grouped_ids ? 
              material.grouped_ids.some(id => purchasedMaterials.has(id)) :
              purchasedMaterials.has(material.id);
              
            return (
              <div 
                key={material.id} 
                className={`detailed-material-row flange-row ${selectedMaterials.has(material.id) ? 'selected' : ''} ${isPurchased ? 'purchased' : ''}`}
                style={isPurchased ? { opacity: 0.6, backgroundColor: '#f0f0f0' } : {}}
              >
                {/* 선택 */}
                <div className="material-cell">
                  <input
                    type="checkbox"
                    checked={selectedMaterials.has(material.id)}
                    onChange={() => toggleMaterialSelection(material.id)}
                    disabled={isPurchased}
                    title={isPurchased ? '이미 구매신청된 자재입니다' : ''}
                  />
                </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="facing-text">{info.facing || '-'}</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">
                  {isPurchased && (
                    <span style={{ 
                      display: 'inline-block', 
                      padding: '2px 6px', 
                      backgroundColor: '#4CAF50', 
                      color: 'white', 
                      fontSize: '10px', 
                      borderRadius: '3px',
                      marginBottom: '4px'
                    }}>
                      구매신청완료
                    </span>
                  )}
                  <span className="quantity-value" style={{ display: 'block' }}>
                    {info.quantity} {info.unit}
                  </span>
                </div>
              </div>
            );
          }
          
          if (material.classified_category === 'UNCLASSIFIED') {
            // 구매신청 여부 확인
            const isPurchased = material.grouped_ids ? 
              material.grouped_ids.some(id => purchasedMaterials.has(id)) :
              purchasedMaterials.has(material.id);
              
            return (
              <div 
                key={material.id} 
                className={`detailed-material-row unknown-row ${selectedMaterials.has(material.id) ? 'selected' : ''} ${isPurchased ? 'purchased' : ''}`}
                style={isPurchased ? { opacity: 0.6, backgroundColor: '#f0f0f0' } : {}}
              >
                {/* 선택 */}
                <div className="material-cell">
                  <input
                    type="checkbox"
                    checked={selectedMaterials.has(material.id)}
                    onChange={() => toggleMaterialSelection(material.id)}
                    disabled={isPurchased}
                    title={isPurchased ? '이미 구매신청된 자재입니다' : ''}
                  />
                </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">
                  {isPurchased && (
                    <span style={{ 
                      display: 'inline-block', 
                      padding: '2px 6px', 
                      backgroundColor: '#4CAF50', 
                      color: 'white', 
                      fontSize: '10px', 
                      borderRadius: '3px',
                      marginBottom: '4px'
                    }}>
                      구매신청완료
                    </span>
                  )}
                  <div className="quantity-info">
                    <span className="quantity-value" style={{ display: 'block' }}>
                      {info.quantity} {info.unit}
                    </span>
                  </div>
                </div>
              </div>
            );
          }
          
          if (material.classified_category === 'GASKET') {
            // 구매신청 여부 확인
            const isPurchased = material.grouped_ids ? 
              material.grouped_ids.some(id => purchasedMaterials.has(id)) :
              purchasedMaterials.has(material.id);
              
            return (
              <div 
                key={material.id} 
                className={`detailed-material-row gasket-row ${selectedMaterials.has(material.id) ? 'selected' : ''} ${isPurchased ? 'purchased' : ''}`}
                style={isPurchased ? { opacity: 0.6, backgroundColor: '#f0f0f0' } : {}}
              >
                {/* 선택 */}
                <div className="material-cell">
                  <input
                    type="checkbox"
                    checked={selectedMaterials.has(material.id)}
                    onChange={() => toggleMaterialSelection(material.id)}
                    disabled={isPurchased}
                    title={isPurchased ? '이미 구매신청된 자재입니다' : ''}
                  />
                </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">
                  {isPurchased && (
                    <span style={{ 
                      display: 'inline-block', 
                      padding: '2px 6px', 
                      backgroundColor: '#4CAF50', 
                      color: 'white', 
                      fontSize: '10px', 
                      borderRadius: '3px',
                      marginBottom: '4px'
                    }}>
                      구매신청완료
                    </span>
                  )}
                  <div className="quantity-info">
                    <span className="quantity-value" style={{ display: 'block' }}>
                      {info.quantity} {info.unit}
                    </span>
                  </div>
                </div>
              </div>
            );
          }
          
        if (material.classified_category === 'BOLT') {
          // BOLT 카테고리 (9개 컬럼, 길이 표시)
          // 구매신청 여부 확인
          const isPurchased = material.grouped_ids ? 
            material.grouped_ids.some(id => purchasedMaterials.has(id)) :
            purchasedMaterials.has(material.id);
            
          return (
            <div 
              key={material.id} 
              className={`detailed-material-row bolt-row ${selectedMaterials.has(material.id) ? 'selected' : ''} ${isPurchased ? 'purchased' : ''}`}
              style={isPurchased ? { opacity: 0.6, backgroundColor: '#f0f0f0' } : {}}
            >
              {/* 선택 */}
              <div className="material-cell">
                <input
                  type="checkbox"
                  checked={selectedMaterials.has(material.id)}
                  onChange={() => toggleMaterialSelection(material.id)}
                  disabled={isPurchased}
                  title={isPurchased ? '이미 구매신청된 자재입니다' : ''}
                />
              </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">
                {isPurchased && (
                  <span style={{ 
                    display: 'inline-block', 
                    padding: '2px 6px', 
                    backgroundColor: '#4CAF50', 
                    color: 'white', 
                    fontSize: '10px', 
                    borderRadius: '3px',
                    marginBottom: '4px'
                  }}>
                    구매신청완료
                  </span>
                )}
                <span className="quantity-text" style={{ display: 'block' }}>{info.quantity || material.quantity || 1} {info.unit || 'SETS'}</span>
              </div>
            </div>
          );
        }
        
        if (material.classified_category === 'SUPPORT' || material.classified_category === 'U_BOLT') {
          // SUPPORT 카테고리 - 자재 타입별 다른 표시
          const desc = material.original_description || '';
          const isUrethaneBlock = desc.includes('URETHANE') || desc.includes('BLOCK SHOE') || desc.includes('우레탄');
          const isClamp = desc.includes('CLAMP') || desc.includes('클램프');
          
          // 구매신청 여부 확인
          const isPurchased = material.grouped_ids ? 
            material.grouped_ids.some(id => purchasedMaterials.has(id)) :
            purchasedMaterials.has(material.id);
          
          let badgeType = 'support';
          let badgeText = 'SUPPORT';
          let subtypeText = '';
          
          if (isUrethaneBlock) {
            subtypeText = '우레탄블럭슈';
          } else if (isClamp) {
            subtypeText = '클램프';
          } else {
            subtypeText = '유볼트';
          }
          
          return (
            <div 
              key={material.id} 
              className={`detailed-material-row support-row ${selectedMaterials.has(material.id) ? 'selected' : ''} ${isPurchased ? 'purchased' : ''}`}
              style={isPurchased ? { opacity: 0.6, backgroundColor: '#f0f0f0' } : {}}
            >
              {/* 선택 */}
              <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 ${badgeType}`}>
                  {badgeText}
                </span>
              </div>
              
              {/* 타입 */}
              <div className="material-cell">
                <span className="subtype-text">{subtypeText}</span>
              </div>
              
              {/* 크기 */}
              <div className="material-cell">
                <span className="size-text">
                  {material.main_nom || material.size_inch || info.size || '-'}
                </span>
              </div>
              
              {/* 디스크립션 (재질정보 포함) */}
              <div className="material-cell">
                <span className="description-text">
                  {material.original_description || '-'}
                </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>
          );
        }
        
          // 위에서 처리되지 않은 모든 자재는 기본 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;

