import React, { useState } from 'react';
import { exportMaterialsToExcel } from '../../../utils/excelExport';
import api from '../../../api';
import { FilterableHeader, MaterialTable } from '../shared';

const FlangeMaterialsView = ({ 
  materials, 
  selectedMaterials, 
  setSelectedMaterials,
  userRequirements,
  setUserRequirements,
  purchasedMaterials,
  fileId,
  user,
  onNavigate 
}) => {
  const [sortConfig, setSortConfig] = useState({ key: null, direction: 'asc' });
  const [columnFilters, setColumnFilters] = useState({});
  const [showFilterDropdown, setShowFilterDropdown] = useState(null);

  // 플랜지 정보 파싱
  const parseFlangeInfo = (material) => {
    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',
      'BLIND': 'BLIND 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': 'FLAT FACE',
      'FLAT_FACE': 'FLAT FACE',
      'RTJ': 'RING TYPE JOINT',
      'RING_TYPE_JOINT': 'RING TYPE JOINT'
    };

    const rawFlangeType = flangeDetails.flange_type || '';
    const rawFacingType = flangeDetails.facing_type || '';

    let displayType = flangeTypeMap[rawFlangeType] || rawFlangeType || '-';
    let facingType = facingTypeMap[rawFacingType] || rawFacingType || '-';

    // Description에서 추출
    if (displayType === '-') {
      const desc = description.toUpperCase();
      if (desc.includes('ORIFICE')) {
        displayType = 'ORIFICE FLANGE';
      } else if (desc.includes('SPECTACLE')) {
        displayType = 'SPECTACLE BLIND';
      } else if (desc.includes('PADDLE')) {
        displayType = 'PADDLE BLIND';
      } else if (desc.includes('SPACER')) {
        displayType = 'SPACER';
      } else if (desc.includes('REDUCING') || desc.includes('RED')) {
        displayType = 'REDUCING FLANGE';
      } else if (desc.includes('BLIND')) {
        displayType = 'BLIND FLANGE';
      } else if (desc.includes('WN')) {
        displayType = 'WELD NECK FLANGE';
      } else if (desc.includes('SO')) {
        displayType = 'SLIP ON FLANGE';
      } else if (desc.includes('SW')) {
        displayType = 'SOCKET WELD FLANGE';
      } else {
        displayType = 'FLANGE';
      }
    }

    if (facingType === '-') {
      const desc = description.toUpperCase();
      if (desc.includes('RF')) {
        facingType = 'RAISED FACE';
      } else if (desc.includes('FF')) {
        facingType = 'FLAT FACE';
      } else if (desc.includes('RTJ')) {
        facingType = 'RING TYPE 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]}`;
      }
    }
    
    // 압력 등급 추출
    let pressure = '-';
    const pressureMatch = description.match(/(\d+)LB/i);
    if (pressureMatch) {
      pressure = `${pressureMatch[1]}LB`;
    }

    return {
      type: 'FLANGE',
      subtype: displayType,  // 풀네임 플랜지 타입
      facing: facingType,    // 새로 추가: 끝단처리 정보
      size: material.size_spec || '-',
      pressure: flangeDetails.pressure_rating || pressure,
      schedule: schedule,
      grade: material.full_material_grade || material.material_grade || '-',
      quantity: Math.round(material.quantity || 0),
      unit: '개',
      isFlange: true // 플랜지 구분용 플래그
    };
  };

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

  // 필터링된 및 정렬된 자재 목록
  const getFilteredAndSortedMaterials = () => {
    let filtered = materials.filter(material => {
      return Object.entries(columnFilters).every(([key, filterValue]) => {
        if (!filterValue) return true;
        const info = parseFlangeInfo(material);
        const value = info[key]?.toString().toLowerCase() || '';
        return value.includes(filterValue.toLowerCase());
      });
    });

    if (sortConfig.key) {
      filtered.sort((a, b) => {
        const aInfo = parseFlangeInfo(a);
        const bInfo = parseFlangeInfo(b);
        const aValue = aInfo[sortConfig.key] || '';
        const bValue = bInfo[sortConfig.key] || '';
        
        if (sortConfig.direction === 'asc') {
          return aValue > bValue ? 1 : -1;
        } else {
          return aValue < bValue ? 1 : -1;
        }
      });
    }

    return filtered;
  };

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

  // 개별 선택
  const handleMaterialSelect = (materialId) => {
    const newSelected = new Set(selectedMaterials);
    if (newSelected.has(materialId)) {
      newSelected.delete(materialId);
    } else {
      newSelected.add(materialId);
    }
    setSelectedMaterials(newSelected);
  };

  // 엑셀 내보내기
  const handleExportToExcel = async () => {
    const selectedMaterialsData = materials.filter(m => selectedMaterials.has(m.id));
    if (selectedMaterialsData.length === 0) {
      alert('내보낼 자재를 선택해주세요.');
      return;
    }

    const timestamp = new Date().toISOString().slice(0, 19).replace(/:/g, '-');
    const excelFileName = `FLANGE_Materials_${timestamp}.xlsx`;

    const dataWithRequirements = selectedMaterialsData.map(material => ({
      ...material,
      user_requirement: userRequirements[material.id] || ''
    }));

    try {
      await api.post('/files/save-excel', {
        file_id: fileId,
        category: 'FLANGE',
        materials: dataWithRequirements,
        filename: excelFileName,
        user_id: user?.id
      });

      exportMaterialsToExcel(dataWithRequirements, excelFileName, {
        category: 'FLANGE',
        filename: excelFileName,
        uploadDate: new Date().toLocaleDateString()
      });

      alert('엑셀 파일이 생성되고 서버에 저장되었습니다.');
    } catch (error) {
      console.error('엑셀 저장 실패:', error);
      exportMaterialsToExcel(dataWithRequirements, excelFileName, {
        category: 'FLANGE',
        filename: excelFileName,
        uploadDate: new Date().toLocaleDateString()
      });
    }
  };

  const filteredMaterials = getFilteredAndSortedMaterials();

  // 필터 헤더 컴포넌트
  const FilterableHeader = ({ sortKey, filterKey, children }) => (
    <div className="filterable-header" style={{ position: 'relative' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
        <span
          onClick={() => handleSort(sortKey)}
          style={{ cursor: 'pointer', flex: 1 }}
        >
          {children}
          {sortConfig.key === sortKey && (
            <span style={{ marginLeft: '4px' }}>
              {sortConfig.direction === 'asc' ? '↑' : '↓'}
            </span>
          )}
        </span>
        <button
          onClick={() => setShowFilterDropdown(showFilterDropdown === filterKey ? null : filterKey)}
          style={{
            background: 'none',
            border: 'none',
            cursor: 'pointer',
            padding: '2px',
            fontSize: '12px',
            color: '#6b7280'
          }}
        >
          🔍
        </button>
      </div>
      {showFilterDropdown === filterKey && (
        <div style={{
          position: 'absolute',
          top: '100%',
          left: 0,
          background: 'white',
          border: '1px solid #e2e8f0',
          borderRadius: '6px',
          padding: '8px',
          boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
          zIndex: 1000,
          minWidth: '150px'
        }}>
          <input
            type="text"
            placeholder={`Filter ${children}...`}
            value={columnFilters[filterKey] || ''}
            onChange={(e) => setColumnFilters({
              ...columnFilters,
              [filterKey]: e.target.value
            })}
            style={{
              width: '100%',
              padding: '4px 8px',
              border: '1px solid #d1d5db',
              borderRadius: '4px',
              fontSize: '12px'
            }}
            autoFocus
          />
        </div>
      )}
    </div>
  );

  return (
    <div style={{ padding: '32px' }}>
      {/* 헤더 */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '24px' }}>
        <div>
          <h3 style={{ 
            fontSize: '24px', 
            fontWeight: '700', 
            color: '#0f172a', 
            margin: '0 0 8px 0' 
          }}>
            Flange Materials
          </h3>
          <p style={{ 
            fontSize: '14px', 
            color: '#64748b', 
            margin: 0 
          }}>
            {filteredMaterials.length} items • {selectedMaterials.size} selected
          </p>
        </div>
        
        <div style={{ display: 'flex', gap: '12px' }}>
          <button
            onClick={handleSelectAll}
            style={{
              background: 'white',
              color: '#6b7280',
              border: '1px solid #d1d5db',
              borderRadius: '8px',
              padding: '10px 16px',
              cursor: 'pointer',
              fontSize: '14px',
              fontWeight: '500'
            }}
          >
            {selectedMaterials.size === filteredMaterials.length ? 'Deselect All' : 'Select All'}
          </button>
          
          <button
            onClick={handleExportToExcel}
            disabled={selectedMaterials.size === 0}
            style={{
              background: selectedMaterials.size > 0 ? 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)' : '#e5e7eb',
              color: selectedMaterials.size > 0 ? 'white' : '#9ca3af',
              border: 'none',
              borderRadius: '8px',
              padding: '10px 16px',
              cursor: selectedMaterials.size > 0 ? 'pointer' : 'not-allowed',
              fontSize: '14px',
              fontWeight: '500'
            }}
          >
            Export to Excel ({selectedMaterials.size})
          </button>
        </div>
      </div>

      {/* 테이블 */}
      <div style={{ 
        background: 'white', 
        borderRadius: '12px', 
        overflow: 'hidden',
        boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)'
      }}>
        {/* 헤더 */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: '50px 1fr 200px 150px 120px 100px 120px 150px 80px 80px 200px',
          gap: '12px',
          padding: '16px',
          background: '#f8fafc',
          borderBottom: '1px solid #e2e8f0',
          fontSize: '14px',
          fontWeight: '600',
          color: '#374151'
        }}>
          <div>
            <input
              type="checkbox"
              checked={selectedMaterials.size === filteredMaterials.length && filteredMaterials.length > 0}
              onChange={handleSelectAll}
              style={{ cursor: 'pointer' }}
            />
          </div>
          <FilterableHeader sortKey="subtype" filterKey="subtype">Type</FilterableHeader>
          <FilterableHeader sortKey="facing" filterKey="facing">Facing</FilterableHeader>
          <FilterableHeader sortKey="size" filterKey="size">Size</FilterableHeader>
          <FilterableHeader sortKey="pressure" filterKey="pressure">Pressure</FilterableHeader>
          <FilterableHeader sortKey="schedule" filterKey="schedule">Schedule</FilterableHeader>
          <FilterableHeader sortKey="grade" filterKey="grade">Material Grade</FilterableHeader>
          <FilterableHeader sortKey="quantity" filterKey="quantity">Quantity</FilterableHeader>
          <div>Unit</div>
          <div>User Requirement</div>
        </div>

        {/* 데이터 행들 */}
        <div style={{ maxHeight: '600px', overflowY: 'auto' }}>
          {filteredMaterials.map((material, index) => {
            const info = parseFlangeInfo(material);
            const isSelected = selectedMaterials.has(material.id);
            const isPurchased = purchasedMaterials.has(material.id);
            
            return (
              <div
                key={material.id}
                style={{
                  display: 'grid',
                  gridTemplateColumns: '50px 1fr 200px 150px 120px 100px 120px 150px 80px 80px 200px',
                  gap: '12px',
                  padding: '16px',
                  borderBottom: index < filteredMaterials.length - 1 ? '1px solid #f1f5f9' : 'none',
                  background: isSelected ? '#eff6ff' : (isPurchased ? '#fef3c7' : 'white'),
                  transition: 'background 0.15s ease'
                }}
                onMouseEnter={(e) => {
                  if (!isSelected && !isPurchased) {
                    e.target.style.background = '#f8fafc';
                  }
                }}
                onMouseLeave={(e) => {
                  if (!isSelected && !isPurchased) {
                    e.target.style.background = 'white';
                  }
                }}
              >
                <div>
                  <input
                    type="checkbox"
                    checked={isSelected}
                    onChange={() => handleMaterialSelect(material.id)}
                    style={{ cursor: 'pointer' }}
                  />
                </div>
                <div style={{ fontSize: '14px', color: '#1f2937' }}>
                  FLANGE
                  {isPurchased && (
                    <span style={{
                      marginLeft: '8px',
                      padding: '2px 6px',
                      background: '#fbbf24',
                      color: '#92400e',
                      borderRadius: '4px',
                      fontSize: '10px',
                      fontWeight: '500'
                    }}>
                      PURCHASED
                    </span>
                  )}
                </div>
                <div style={{ fontSize: '14px', color: '#1f2937', fontWeight: '500' }}>
                  {info.subtype}
                </div>
                <div style={{ fontSize: '14px', color: '#1f2937' }}>
                  {info.facing}
                </div>
                <div style={{ fontSize: '14px', color: '#1f2937' }}>
                  {info.size}
                </div>
                <div style={{ fontSize: '14px', color: '#1f2937' }}>
                  {info.pressure}
                </div>
                <div style={{ fontSize: '14px', color: '#1f2937' }}>
                  {info.schedule}
                </div>
                <div style={{ fontSize: '14px', color: '#1f2937' }}>
                  {info.grade}
                </div>
                <div style={{ fontSize: '14px', color: '#1f2937', fontWeight: '600', textAlign: 'right' }}>
                  {info.quantity}
                </div>
                <div style={{ fontSize: '14px', color: '#6b7280' }}>
                  {info.unit}
                </div>
                <div>
                  <input
                    type="text"
                    value={userRequirements[material.id] || ''}
                    onChange={(e) => setUserRequirements({
                      ...userRequirements,
                      [material.id]: e.target.value
                    })}
                    placeholder="Enter requirement..."
                    style={{
                      width: '100%',
                      padding: '6px 8px',
                      border: '1px solid #d1d5db',
                      borderRadius: '4px',
                      fontSize: '12px'
                    }}
                  />
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {filteredMaterials.length === 0 && (
        <div style={{
          textAlign: 'center',
          padding: '60px 20px',
          color: '#64748b'
        }}>
          <div style={{ fontSize: '48px', marginBottom: '16px' }}>🔩</div>
          <div style={{ fontSize: '18px', fontWeight: '600', marginBottom: '8px' }}>
            No Flange Materials Found
          </div>
          <div style={{ fontSize: '14px' }}>
            {Object.keys(columnFilters).some(key => columnFilters[key]) 
              ? 'Try adjusting your filters' 
              : 'No flange materials available in this BOM'}
          </div>
        </div>
      )}
    </div>
  );
};

export default FlangeMaterialsView;