import React from 'react';

const BOMFileUpload = ({ 
  bomName, 
  setBomName, 
  selectedFile, 
  setSelectedFile, 
  uploading, 
  handleUpload,
  error 
}) => {
  return (
    <div style={{
      background: 'white',
      borderRadius: '12px',
      border: '1px solid #e2e8f0',
      padding: '24px',
      marginBottom: '24px'
    }}>
      <h3 style={{ 
        fontSize: '18px', 
        fontWeight: '600', 
        color: '#2d3748',
        margin: '0 0 16px 0'
      }}>
        새 BOM 업로드
      </h3>
      
      <div style={{ marginBottom: '16px' }}>
        <label style={{ 
          display: 'block', 
          fontSize: '14px', 
          fontWeight: '600', 
          color: '#4a5568',
          marginBottom: '8px'
        }}>
          BOM 이름 <span style={{ color: '#e53e3e' }}>*</span>
        </label>
        <input
          type="text"
          value={bomName}
          onChange={(e) => setBomName(e.target.value)}
          placeholder="예: PIPING_BOM_A구역, 배관자재_1차, VALVE_LIST_Rev0"
          style={{
            width: '100%',
            padding: '12px',
            border: '1px solid #e2e8f0',
            borderRadius: '8px',
            fontSize: '14px',
            background: bomName ? '#f0fff4' : 'white'
          }}
        />
        <p style={{ 
          fontSize: '12px', 
          color: '#718096',
          margin: '4px 0 0 0'
        }}>
          💡 이 이름은 엑셀 내보내기 파일명과 자재 관리에 사용됩니다. 
          동일한 BOM 이름으로 재업로드 시 리비전이 자동 증가합니다.
        </p>
      </div>
      
      <div style={{ 
        display: 'flex', 
        alignItems: 'center', 
        gap: '12px',
        marginBottom: '16px'
      }}>
        <input
          id="file-input"
          type="file"
          accept=".csv,.xlsx,.xls"
          onChange={(e) => setSelectedFile(e.target.files[0])}
          style={{ flex: 1 }}
        />
        <button
          onClick={handleUpload}
          disabled={!selectedFile || !bomName.trim() || uploading}
          style={{
            padding: '12px 24px',
            background: (!selectedFile || !bomName.trim() || uploading) ? '#e2e8f0' : 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
            color: (!selectedFile || !bomName.trim() || uploading) ? '#a0aec0' : 'white',
            border: 'none',
            borderRadius: '8px',
            cursor: (!selectedFile || !bomName.trim() || uploading) ? 'not-allowed' : 'pointer',
            fontSize: '14px',
            fontWeight: '600'
          }}
        >
          {uploading ? '업로드 중...' : '업로드'}
        </button>
      </div>
      
      {selectedFile && (
        <p style={{ 
          fontSize: '14px', 
          color: '#718096',
          margin: '0'
        }}>
          선택된 파일: {selectedFile.name}
        </p>
      )}

      {error && (
        <div style={{
          background: '#fed7d7',
          border: '1px solid #fc8181',
          borderRadius: '8px',
          padding: '12px 16px',
          marginTop: '16px',
          color: '#c53030'
        }}>
          {error}
        </div>
      )}
    </div>
  );
};

export default BOMFileUpload;
















