import React, { useState, useEffect } from 'react';
import BOMUploadTab from '../components/bom/tabs/BOMUploadTab';
import BOMFilesTab from '../components/bom/tabs/BOMFilesTab';
import BOMMaterialsTab from '../components/bom/tabs/BOMMaterialsTab';

const UnifiedBOMPage = ({ 
  onNavigate, 
  selectedProject,
  user 
}) => {
  const [activeTab, setActiveTab] = useState('upload');
  const [selectedBOM, setSelectedBOM] = useState(null);
  const [bomFiles, setBomFiles] = useState([]);
  const [refreshTrigger, setRefreshTrigger] = useState(0);

  // 업로드 성공 시 Files 탭으로 이동
  const handleUploadSuccess = (uploadedFile) => {
    setRefreshTrigger(prev => prev + 1);
    setActiveTab('files');
    // 업로드된 파일을 자동 선택
    if (uploadedFile) {
      setSelectedBOM(uploadedFile);
    }
  };

  // BOM 파일 선택 시 Materials 탭으로 이동
  const handleBOMSelect = (bomFile) => {
    setSelectedBOM(bomFile);
    setActiveTab('materials');
  };

  // 탭 정의
  const tabs = [
    {
      id: 'upload',
      label: 'Upload',
      icon: '📤',
      description: 'Upload new BOM files'
    },
    {
      id: 'files',
      label: 'Files & Revisions',
      icon: '📊',
      description: 'Manage BOM files and revisions'
    },
    {
      id: 'materials',
      label: 'Materials',
      icon: '📋',
      description: 'Manage classified materials',
      disabled: !selectedBOM
    }
  ];

  return (
    <div style={{ 
      padding: '40px', 
      background: 'linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%)', 
      minHeight: '100vh',
      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
    }}>
      {/* 헤더 */}
      <div style={{
        background: 'rgba(255, 255, 255, 0.95)',
        backdropFilter: 'blur(10px)',
        borderRadius: '20px',
        padding: '32px',
        boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
        border: '1px solid rgba(255, 255, 255, 0.2)',
        marginBottom: '40px'
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '24px' }}>
          <div>
            <h1 style={{ 
              fontSize: '28px', 
              fontWeight: '700', 
              color: '#0f172a', 
              margin: '0 0 8px 0',
              letterSpacing: '-0.025em'
            }}>
              BOM Management System
            </h1>
            <p style={{ 
              fontSize: '16px', 
              color: '#64748b', 
              margin: 0,
              fontWeight: '400'
            }}>
              Project: {selectedProject?.job_name || 'No Project Selected'}
              {selectedBOM && (
                <span style={{ marginLeft: '16px', color: '#3b82f6', fontWeight: '500' }}>
                  → {selectedBOM.bom_name || selectedBOM.original_filename}
                </span>
              )}
            </p>
          </div>
          <button
            onClick={() => onNavigate('dashboard')}
            style={{
              background: 'white',
              color: '#6b7280',
              border: '1px solid #d1d5db',
              borderRadius: '12px',
              padding: '12px 20px',
              cursor: 'pointer',
              fontSize: '14px',
              fontWeight: '600',
              transition: 'all 0.2s ease'
            }}
          >
            Back to Dashboard
          </button>
        </div>

        {/* 프로젝트 정보 */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
          gap: '20px'
        }}>
          <div style={{
            background: 'linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%)',
            padding: '20px',
            borderRadius: '12px',
            textAlign: 'center'
          }}>
            <div style={{ fontSize: '18px', fontWeight: '600', color: '#1d4ed8', marginBottom: '4px' }}>
              {selectedProject?.official_project_code || selectedProject?.job_no || 'N/A'}
            </div>
            <div style={{ fontSize: '14px', color: '#1d4ed8', fontWeight: '500' }}>
              Project Code
            </div>
          </div>
          
          <div style={{
            background: 'linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%)',
            padding: '20px',
            borderRadius: '12px',
            textAlign: 'center'
          }}>
            <div style={{ fontSize: '18px', fontWeight: '600', color: '#059669', marginBottom: '4px' }}>
              {user?.username || 'Unknown'}
            </div>
            <div style={{ fontSize: '14px', color: '#059669', fontWeight: '500' }}>
              Current User
            </div>
          </div>

          <div style={{
            background: 'linear-gradient(135deg, #fef3c7 0%, #fde68a 100%)',
            padding: '20px',
            borderRadius: '12px',
            textAlign: 'center'
          }}>
            <div style={{ fontSize: '18px', fontWeight: '600', color: '#d97706', marginBottom: '4px' }}>
              {bomFiles.length}
            </div>
            <div style={{ fontSize: '14px', color: '#d97706', fontWeight: '500' }}>
              BOM Files
            </div>
          </div>
        </div>
      </div>

      {/* 탭 네비게이션 */}
      <div style={{
        background: 'rgba(255, 255, 255, 0.95)',
        backdropFilter: 'blur(10px)',
        borderRadius: '20px',
        padding: '24px 32px',
        boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
        border: '1px solid rgba(255, 255, 255, 0.2)',
        marginBottom: '40px'
      }}>
        <div style={{ display: 'flex', gap: '8px' }}>
          {tabs.map((tab) => (
            <button
              key={tab.id}
              onClick={() => !tab.disabled && setActiveTab(tab.id)}
              disabled={tab.disabled}
              style={{
                flex: 1,
                padding: '16px 24px',
                background: activeTab === tab.id 
                  ? 'linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)' 
                  : tab.disabled 
                    ? '#f3f4f6' 
                    : 'white',
                color: activeTab === tab.id 
                  ? 'white' 
                  : tab.disabled 
                    ? '#9ca3af' 
                    : '#374151',
                border: activeTab === tab.id 
                  ? 'none' 
                  : '1px solid #e5e7eb',
                borderRadius: '12px',
                cursor: tab.disabled ? 'not-allowed' : 'pointer',
                fontSize: '16px',
                fontWeight: '600',
                transition: 'all 0.2s ease',
                textAlign: 'center',
                opacity: tab.disabled ? 0.5 : 1
              }}
            >
              <div style={{ fontSize: '20px', marginBottom: '4px' }}>
                {tab.icon}
              </div>
              <div>{tab.label}</div>
              <div style={{ 
                fontSize: '12px', 
                fontWeight: '400', 
                marginTop: '4px',
                opacity: 0.8
              }}>
                {tab.description}
              </div>
            </button>
          ))}
        </div>
      </div>

      {/* 탭 컨텐츠 */}
      <div style={{
        background: 'rgba(255, 255, 255, 0.95)',
        backdropFilter: 'blur(10px)',
        borderRadius: '20px',
        boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
        border: '1px solid rgba(255, 255, 255, 0.2)',
        overflow: 'hidden'
      }}>
        {activeTab === 'upload' && (
          <BOMUploadTab
            selectedProject={selectedProject}
            user={user}
            onUploadSuccess={handleUploadSuccess}
            onNavigate={onNavigate}
          />
        )}

        {activeTab === 'files' && (
          <BOMFilesTab
            selectedProject={selectedProject}
            user={user}
            bomFiles={bomFiles}
            setBomFiles={setBomFiles}
            selectedBOM={selectedBOM}
            onBOMSelect={handleBOMSelect}
            refreshTrigger={refreshTrigger}
          />
        )}

        {activeTab === 'materials' && selectedBOM && (
          <BOMMaterialsTab
            selectedProject={selectedProject}
            user={user}
            selectedBOM={selectedBOM}
            onNavigate={onNavigate}
          />
        )}
      </div>
    </div>
  );
};

export default UnifiedBOMPage;
