import React from 'react';

const BOMFileTable = ({ 
  files, 
  loading, 
  groupFilesByBOM, 
  handleViewMaterials, 
  openRevisionDialog, 
  handleDelete,
  onNavigate 
}) => {
  if (loading) {
    return (
      <div style={{ textAlign: 'center', padding: '40px' }}>
        로딩 중...
      </div>
    );
  }

  if (files.length === 0) {
    return (
      <div style={{
        background: '#bee3f8',
        border: '1px solid #63b3ed',
        borderRadius: '8px',
        padding: '12px 16px',
        color: '#2c5282'
      }}>
        업로드된 BOM이 없습니다.
      </div>
    );
  }

  return (
    <div style={{
      background: 'white',
      borderRadius: '12px',
      border: '1px solid #e2e8f0',
      overflow: 'hidden'
    }}>
      <table style={{ width: '100%', borderCollapse: 'collapse' }}>
        <thead>
          <tr style={{ background: '#f7fafc' }}>
            <th style={{ padding: '12px', textAlign: 'left', borderBottom: '1px solid #e2e8f0' }}>BOM 이름</th>
            <th style={{ padding: '12px', textAlign: 'left', borderBottom: '1px solid #e2e8f0' }}>파일명</th>
            <th style={{ padding: '12px', textAlign: 'left', borderBottom: '1px solid #e2e8f0' }}>리비전</th>
            <th style={{ padding: '12px', textAlign: 'left', borderBottom: '1px solid #e2e8f0' }}>자재 수</th>
            <th style={{ padding: '12px', textAlign: 'left', borderBottom: '1px solid #e2e8f0' }}>업로드 일시</th>
            <th style={{ padding: '12px', textAlign: 'left', borderBottom: '1px solid #e2e8f0' }}>작업</th>
          </tr>
        </thead>
        <tbody>
          {Object.entries(groupFilesByBOM()).map(([bomKey, bomFiles]) => (
            bomFiles.map((file, index) => (
              <tr 
                key={file.id} 
                style={{ 
                  backgroundColor: index === 0 ? 'rgba(25, 118, 210, 0.08)' : 'rgba(0, 0, 0, 0.02)'
                }}
              >
                <td style={{ padding: '12px', borderBottom: '1px solid #e2e8f0' }}>
                  <div style={{ 
                    fontWeight: index === 0 ? 'bold' : 'normal',
                    fontSize: '14px'
                  }}>
                    {file.bom_name || bomKey}
                  </div>
                  {index === 0 && bomFiles.length > 1 && (
                    <div style={{ 
                      fontSize: '12px', 
                      color: '#4299e1',
                      marginTop: '4px'
                    }}>
                      최신 리비전 (총 {bomFiles.length}개)
                    </div>
                  )}
                </td>
                <td style={{ padding: '12px', borderBottom: '1px solid #e2e8f0', fontSize: '14px' }}>
                  {file.original_filename || file.filename}
                </td>
                <td style={{ padding: '12px', borderBottom: '1px solid #e2e8f0' }}>
                  <span style={{
                    background: index === 0 ? '#4299e1' : '#e2e8f0',
                    color: index === 0 ? 'white' : '#4a5568',
                    padding: '4px 8px',
                    borderRadius: '4px',
                    fontSize: '12px',
                    fontWeight: '600'
                  }}>
                    {file.revision || 'Rev.0'}
                  </span>
                </td>
                <td style={{ padding: '12px', borderBottom: '1px solid #e2e8f0', fontSize: '14px' }}>
                  {file.parsed_count || file.material_count || 0}개
                </td>
                <td style={{ padding: '12px', borderBottom: '1px solid #e2e8f0', fontSize: '14px' }}>
                  {file.upload_date ? new Date(file.upload_date).toLocaleString('ko-KR') : '-'}
                </td>
                <td style={{ padding: '12px', borderBottom: '1px solid #e2e8f0' }}>
                  <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
                    <button
                      onClick={() => {
                        // 자재 관리 페이지로 이동 (특정 파일)
                        if (window.onNavigate) {
                          window.onNavigate('materials', {
                            file_id: file.id,
                            jobNo: file.job_no,
                            bomName: file.bom_name,
                            revision: file.revision,
                            filename: file.original_filename
                          });
                        }
                      }}
                      style={{
                        padding: '6px 12px',
                        background: '#667eea',
                        color: 'white',
                        border: 'none',
                        borderRadius: '4px',
                        cursor: 'pointer',
                        fontSize: '12px'
                      }}
                    >
                      📋 자재 보기
                    </button>
                    
                    <button
                      onClick={() => handleViewMaterials(file)}
                      style={{
                        padding: '6px 12px',
                        background: '#48bb78',
                        color: 'white',
                        border: 'none',
                        borderRadius: '4px',
                        cursor: 'pointer',
                        fontSize: '12px'
                      }}
                    >
                      🧮 구매수량 계산
                    </button>
                    
                    <button
                      onClick={() => openRevisionDialog(file.bom_name || bomKey, file.id)}
                      style={{
                        padding: '6px 12px',
                        background: 'white',
                        color: '#4299e1',
                        border: '1px solid #4299e1',
                        borderRadius: '4px',
                        cursor: 'pointer',
                        fontSize: '12px'
                      }}
                    >
                      📝 리비전
                    </button>
                    
                    <button
                      onClick={() => handleDelete(file.id)}
                      style={{
                        padding: '6px 12px',
                        background: '#f56565',
                        color: 'white',
                        border: 'none',
                        borderRadius: '4px',
                        cursor: 'pointer',
                        fontSize: '12px'
                      }}
                    >
                      삭제
                    </button>
                  </div>
                </td>
              </tr>
            ))
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default BOMFileTable;
