import React, { useState, useRef, useCallback } from 'react';
import api from '../../../api';

const BOMUploadTab = ({ 
  selectedProject,
  user,
  onUploadSuccess,
  onNavigate 
}) => {
  const [dragOver, setDragOver] = useState(false);
  const [uploading, setUploading] = useState(false);
  const [uploadProgress, setUploadProgress] = useState(0);
  const [selectedFiles, setSelectedFiles] = useState([]);
  const [bomName, setBomName] = useState('');
  const [error, setError] = useState('');
  const [success, setSuccess] = useState('');
  const fileInputRef = useRef(null);

  // 파일 검증
  const validateFile = (file) => {
    const allowedTypes = [
      'application/vnd.ms-excel',
      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
      'text/csv'
    ];
    
    const maxSize = 50 * 1024 * 1024; // 50MB
    
    if (!allowedTypes.includes(file.type) && !file.name.match(/\.(xlsx|xls|csv)$/i)) {
      return '지원되지 않는 파일 형식입니다. Excel 또는 CSV 파일만 업로드 가능합니다.';
    }
    
    if (file.size > maxSize) {
      return '파일 크기가 너무 큽니다. 50MB 이하의 파일만 업로드 가능합니다.';
    }
    
    return null;
  };

  // 파일 선택 처리
  const handleFileSelect = useCallback((files) => {
    const fileList = Array.from(files);
    const validFiles = [];
    const errors = [];

    fileList.forEach(file => {
      const error = validateFile(file);
      if (error) {
        errors.push(`${file.name}: ${error}`);
      } else {
        validFiles.push(file);
      }
    });

    if (errors.length > 0) {
      setError(errors.join('\n'));
      return;
    }

    setSelectedFiles(validFiles);
    setError('');
    
    // 첫 번째 파일명을 기본 BOM 이름으로 설정 (확장자 제거)
    if (validFiles.length > 0 && !bomName) {
      const fileName = validFiles[0].name;
      const nameWithoutExt = fileName.replace(/\.[^/.]+$/, '');
      setBomName(nameWithoutExt);
    }
  }, [bomName]);

  // 드래그 앤 드롭 처리
  const handleDragOver = useCallback((e) => {
    e.preventDefault();
    setDragOver(true);
  }, []);

  const handleDragLeave = useCallback((e) => {
    e.preventDefault();
    setDragOver(false);
  }, []);

  const handleDrop = useCallback((e) => {
    e.preventDefault();
    setDragOver(false);
    handleFileSelect(e.dataTransfer.files);
  }, [handleFileSelect]);

  // 파일 선택 버튼 클릭
  const handleFileButtonClick = () => {
    fileInputRef.current?.click();
  };

  // 파일 업로드
  const handleUpload = async () => {
    if (selectedFiles.length === 0) {
      setError('업로드할 파일을 선택해주세요.');
      return;
    }

    if (!bomName.trim()) {
      setError('BOM 이름을 입력해주세요.');
      return;
    }

    if (!selectedProject) {
      setError('프로젝트를 선택해주세요.');
      return;
    }

    try {
      setUploading(true);
      setUploadProgress(0);
      setError('');
      setSuccess('');

      let uploadedFile = null;

      for (let i = 0; i < selectedFiles.length; i++) {
        const file = selectedFiles[i];
        const formData = new FormData();
        
        formData.append('file', file);
        formData.append('job_no', selectedProject.official_project_code || selectedProject.job_no);
        formData.append('bom_name', bomName.trim());
        formData.append('revision', 'Rev.0'); // 새 업로드는 항상 Rev.0

        const response = await api.post('/files/upload', formData, {
          headers: { 'Content-Type': 'multipart/form-data' },
          onUploadProgress: (progressEvent) => {
            const progress = Math.round(
              ((i * 100) + (progressEvent.loaded * 100) / progressEvent.total) / selectedFiles.length
            );
            setUploadProgress(progress);
          }
        });

        if (!response.data?.success) {
          throw new Error(response.data?.message || '업로드 실패');
        }

        // 첫 번째 파일의 정보를 저장
        if (i === 0) {
          uploadedFile = {
            id: response.data.file_id,
            bom_name: bomName.trim(),
            revision: 'Rev.0',
            job_no: selectedProject.official_project_code || selectedProject.job_no,
            original_filename: file.name
          };
        }
      }

      setSuccess(`${selectedFiles.length}개 파일이 성공적으로 업로드되었습니다!`);
      
      // 업로드 성공 즉시 콜백 호출 (파일 목록 새로고침)
      if (onUploadSuccess) {
        onUploadSuccess(uploadedFile);
      }
      
      // 파일 초기화
      setSelectedFiles([]);
      setBomName('');

    } catch (err) {
      console.error('업로드 실패:', err);
      setError(`업로드 실패: ${err.response?.data?.detail || err.message}`);
    } finally {
      setUploading(false);
      setUploadProgress(0);
    }
  };

  // 파일 제거
  const removeFile = (index) => {
    const newFiles = selectedFiles.filter((_, i) => i !== index);
    setSelectedFiles(newFiles);
    
    if (newFiles.length === 0) {
      setBomName('');
    }
  };

  // 파일 크기 포맷팅
  const formatFileSize = (bytes) => {
    if (bytes === 0) return '0 Bytes';
    const k = 1024;
    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
  };

  return (
    <div style={{ padding: '40px' }}>
      {/* BOM 이름 입력 */}
      <div style={{ marginBottom: '32px' }}>
        <label style={{
          display: 'block',
          fontSize: '16px',
          fontWeight: '600',
          color: '#374151',
          marginBottom: '8px'
        }}>
          BOM Name
        </label>
        <input
          type="text"
          value={bomName}
          onChange={(e) => setBomName(e.target.value)}
          placeholder="Enter BOM name..."
          style={{
            width: '100%',
            padding: '12px 16px',
            border: '2px solid #e5e7eb',
            borderRadius: '12px',
            fontSize: '16px',
            transition: 'border-color 0.2s ease',
            outline: 'none'
          }}
          onFocus={(e) => e.target.style.borderColor = '#3b82f6'}
          onBlur={(e) => e.target.style.borderColor = '#e5e7eb'}
        />
      </div>

      {/* 파일 드롭 영역 */}
      <div
        onDragOver={handleDragOver}
        onDragLeave={handleDragLeave}
        onDrop={handleDrop}
        style={{
          border: `3px dashed ${dragOver ? '#3b82f6' : '#d1d5db'}`,
          borderRadius: '16px',
          padding: '60px 40px',
          textAlign: 'center',
          background: dragOver ? '#eff6ff' : '#f9fafb',
          transition: 'all 0.3s ease',
          cursor: 'pointer',
          marginBottom: '24px'
        }}
        onClick={handleFileButtonClick}
      >
        <div style={{ fontSize: '48px', marginBottom: '16px' }}>
          {dragOver ? '📁' : '📄'}
        </div>
        <h3 style={{ 
          fontSize: '20px', 
          fontWeight: '600', 
          color: '#374151', 
          margin: '0 0 8px 0' 
        }}>
          {dragOver ? 'Drop files here' : 'Upload BOM Files'}
        </h3>
        <p style={{ 
          fontSize: '16px', 
          color: '#6b7280', 
          margin: '0 0 16px 0' 
        }}>
          Drag and drop your Excel or CSV files here, or click to browse
        </p>
        <div style={{
          display: 'inline-flex',
          alignItems: 'center',
          gap: '8px',
          padding: '8px 16px',
          background: 'rgba(59, 130, 246, 0.1)',
          borderRadius: '8px',
          fontSize: '14px',
          color: '#3b82f6'
        }}>
          <span>📋</span>
          Supported: .xlsx, .xls, .csv (Max 50MB)
        </div>
      </div>

      {/* 숨겨진 파일 입력 */}
      <input
        ref={fileInputRef}
        type="file"
        multiple
        accept=".xlsx,.xls,.csv"
        onChange={(e) => handleFileSelect(e.target.files)}
        style={{ display: 'none' }}
      />

      {/* 선택된 파일 목록 */}
      {selectedFiles.length > 0 && (
        <div style={{ marginBottom: '24px' }}>
          <h4 style={{ 
            fontSize: '18px', 
            fontWeight: '600', 
            color: '#374151', 
            marginBottom: '16px' 
          }}>
            Selected Files ({selectedFiles.length})
          </h4>
          <div style={{ 
            background: '#f8fafc', 
            borderRadius: '12px', 
            padding: '16px' 
          }}>
            {selectedFiles.map((file, index) => (
              <div key={index} style={{
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
                padding: '12px 16px',
                background: 'white',
                borderRadius: '8px',
                marginBottom: index < selectedFiles.length - 1 ? '8px' : '0',
                boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)'
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                  <span style={{ fontSize: '20px' }}>📄</span>
                  <div>
                    <div style={{ fontWeight: '500', color: '#374151' }}>
                      {file.name}
                    </div>
                    <div style={{ fontSize: '14px', color: '#6b7280' }}>
                      {formatFileSize(file.size)}
                    </div>
                  </div>
                </div>
                <button
                  onClick={() => removeFile(index)}
                  style={{
                    background: '#fee2e2',
                    color: '#dc2626',
                    border: 'none',
                    borderRadius: '6px',
                    padding: '6px 12px',
                    cursor: 'pointer',
                    fontSize: '12px',
                    fontWeight: '500'
                  }}
                >
                  Remove
                </button>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* 업로드 진행률 */}
      {uploading && (
        <div style={{ marginBottom: '24px' }}>
          <div style={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            marginBottom: '8px'
          }}>
            <span style={{ fontSize: '14px', fontWeight: '500', color: '#374151' }}>
              Uploading...
            </span>
            <span style={{ fontSize: '14px', fontWeight: '500', color: '#3b82f6' }}>
              {uploadProgress}%
            </span>
          </div>
          <div style={{
            width: '100%',
            height: '8px',
            background: '#e5e7eb',
            borderRadius: '4px',
            overflow: 'hidden'
          }}>
            <div style={{
              width: `${uploadProgress}%`,
              height: '100%',
              background: 'linear-gradient(90deg, #3b82f6 0%, #1d4ed8 100%)',
              transition: 'width 0.3s ease'
            }} />
          </div>
        </div>
      )}

      {/* 에러 메시지 */}
      {error && (
        <div style={{
          background: '#fee2e2',
          border: '1px solid #fecaca',
          borderRadius: '8px',
          padding: '12px 16px',
          marginBottom: '24px'
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
            <span style={{ fontSize: '16px' }}>⚠️</span>
            <div style={{ fontSize: '14px', color: '#dc2626', whiteSpace: 'pre-line' }}>
              {error}
            </div>
          </div>
        </div>
      )}

      {/* 성공 메시지 */}
      {success && (
        <div style={{
          background: '#dcfce7',
          border: '1px solid #bbf7d0',
          borderRadius: '8px',
          padding: '12px 16px',
          marginBottom: '24px'
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
            <span style={{ fontSize: '16px' }}>✅</span>
            <div style={{ fontSize: '14px', color: '#059669' }}>
              {success}
            </div>
          </div>
        </div>
      )}

      {/* 업로드 버튼 */}
      <div style={{ display: 'flex', gap: '16px', justifyContent: 'flex-end' }}>
        <button
          onClick={handleUpload}
          disabled={uploading || selectedFiles.length === 0 || !bomName.trim()}
          style={{
            padding: '12px 32px',
            background: (uploading || selectedFiles.length === 0 || !bomName.trim()) 
              ? '#d1d5db' 
              : 'linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)',
            color: 'white',
            border: 'none',
            borderRadius: '12px',
            cursor: (uploading || selectedFiles.length === 0 || !bomName.trim()) 
              ? 'not-allowed' 
              : 'pointer',
            fontSize: '16px',
            fontWeight: '600',
            transition: 'all 0.2s ease'
          }}
        >
          {uploading ? 'Uploading...' : 'Upload BOM'}
        </button>
      </div>

      {/* 가이드 정보 */}
      <div style={{
        marginTop: '40px',
        padding: '24px',
        background: '#f8fafc',
        borderRadius: '12px',
        border: '1px solid #e2e8f0'
      }}>
        <h3 style={{ 
          fontSize: '18px', 
          fontWeight: '600', 
          color: '#374151', 
          marginBottom: '16px' 
        }}>
          📋 Upload Guidelines
        </h3>
        <div style={{ 
          display: 'grid', 
          gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', 
          gap: '20px' 
        }}>
          <div>
            <h4 style={{ fontSize: '14px', fontWeight: '600', color: '#059669', marginBottom: '8px' }}>
              ✅ Supported Formats
            </h4>
            <ul style={{ margin: 0, paddingLeft: '16px', color: '#6b7280', fontSize: '14px' }}>
              <li>Excel files (.xlsx, .xls)</li>
              <li>CSV files (.csv)</li>
              <li>Maximum file size: 50MB</li>
            </ul>
          </div>
          <div>
            <h4 style={{ fontSize: '14px', fontWeight: '600', color: '#3b82f6', marginBottom: '8px' }}>
              📊 Required Columns
            </h4>
            <ul style={{ margin: 0, paddingLeft: '16px', color: '#6b7280', fontSize: '14px' }}>
              <li>Description (자재명/품명)</li>
              <li>Quantity (수량)</li>
              <li>Size information (사이즈)</li>
            </ul>
          </div>
          <div>
            <h4 style={{ fontSize: '14px', fontWeight: '600', color: '#f59e0b', marginBottom: '8px' }}>
              ⚡ Auto Processing
            </h4>
            <ul style={{ margin: 0, paddingLeft: '16px', color: '#6b7280', fontSize: '14px' }}>
              <li>Automatic material classification</li>
              <li>WELD GAP items excluded</li>
              <li>Ready for material management</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
};

export default BOMUploadTab;
