import React from 'react';
import BOMManagementPage from '../../../pages/BOMManagementPage';

const BOMMaterialsTab = ({ 
  selectedProject,
  user,
  selectedBOM,
  onNavigate 
}) => {
  // BOMManagementPage에 필요한 props 구성
  const bomManagementProps = {
    onNavigate,
    user,
    selectedProject,
    fileId: selectedBOM?.id,
    jobNo: selectedBOM?.job_no || selectedProject?.official_project_code || selectedProject?.job_no,
    bomName: selectedBOM?.bom_name || selectedBOM?.original_filename,
    revision: selectedBOM?.revision || 'Rev.0',
    filename: selectedBOM?.original_filename
  };

  return (
    <div style={{ 
      background: 'white',
      minHeight: '600px'
    }}>
      {/* 헤더 정보 */}
      <div style={{
        padding: '24px 40px',
        borderBottom: '1px solid #e5e7eb',
        background: '#f8fafc'
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div>
            <h2 style={{ 
              fontSize: '24px', 
              fontWeight: '700', 
              color: '#0f172a', 
              margin: '0 0 8px 0' 
            }}>
              Material Management
            </h2>
            <p style={{ 
              fontSize: '16px', 
              color: '#64748b', 
              margin: 0 
            }}>
              BOM: {selectedBOM?.bom_name || selectedBOM?.original_filename} • {selectedBOM?.revision || 'Rev.0'}
            </p>
          </div>
          
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))',
            gap: '12px',
            fontSize: '12px'
          }}>
            <div style={{
              background: 'linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%)',
              padding: '8px 12px',
              borderRadius: '8px',
              textAlign: 'center'
            }}>
              <div style={{ fontSize: '14px', fontWeight: '600', color: '#1d4ed8' }}>
                {selectedBOM?.id || 'N/A'}
              </div>
              <div style={{ color: '#1d4ed8', fontWeight: '500' }}>
                File ID
              </div>
            </div>
            
            <div style={{
              background: 'linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%)',
              padding: '8px 12px',
              borderRadius: '8px',
              textAlign: 'center'
            }}>
              <div style={{ fontSize: '14px', fontWeight: '600', color: '#059669' }}>
                {selectedBOM?.revision || 'Rev.0'}
              </div>
              <div style={{ color: '#059669', fontWeight: '500' }}>
                Revision
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* BOM 관리 페이지 임베드 */}
      <div style={{ 
        background: 'white',
        // BOMManagementPage의 기본 패딩을 제거하기 위한 스타일 오버라이드
        '& > div': {
          padding: '0 !important',
          background: 'transparent !important',
          minHeight: 'auto !important'
        }
      }}>
        <BOMManagementPage {...bomManagementProps} />
      </div>
    </div>
  );
};

export default BOMMaterialsTab;
