import React from 'react';
import { Box, Tooltip, IconButton, Stack } from '@mui/material';
import { 
  Storage, 
  Terminal, 
  FileUpload, 
  Settings, 
  History 
} from '@mui/icons-material';

interface NavigationRailProps {
  activeTab: string;
  onTabChange: (tab: string) => void;
}

const NavigationRail: React.FC<NavigationRailProps> = ({ activeTab, onTabChange }) => {
  const tabs = [
    { id: 'explorer', icon: <Storage />, label: 'Explorer' },
    { id: 'sql', icon: <Terminal />, label: 'SQL Editor' },
    { id: 'transfer', icon: <FileUpload />, label: 'Import/Export' },
    { id: 'history', icon: <History />, label: 'Query History' },
  ];

  return (
    <Box sx={{ 
      width: 72, 
      height: '100vh', 
      display: 'flex', 
      flexDirection: 'column', 
      alignItems: 'center', 
      py: 4, 
      bgcolor: (theme) => theme.palette.mode === 'dark' ? '#0a0f1d' : '#ffffff',
      borderRight: 1, 
      borderColor: 'divider',
      zIndex: 1200,
      boxShadow: (theme) => theme.palette.mode === 'dark' ? 'none' : '4px 0 10px rgba(0,0,0,0.02)'
    }}>
      <Stack spacing={2.5} sx={{ width: '100%' }}>
        {tabs.map((tab) => {
          const isActive = activeTab === tab.id;
          return (
            <Box key={tab.id} sx={{ position: 'relative', width: '100%', display: 'flex', justifyContent: 'center' }}>
              {/* Active Indicator - Elegant Pill Style */}
              {isActive && (
                <Box 
                  sx={{ 
                    position: 'absolute', 
                    left: 4, 
                    top: '20%', 
                    height: '60%', 
                    width: 4, 
                    bgcolor: 'primary.main', 
                    borderRadius: 4,
                    boxShadow: '0 0 12px rgba(0, 97, 255, 0.4)'
                  }} 
                />
              )}
              
              <Tooltip title={tab.label} placement="right" arrow>
                <IconButton 
                  onClick={() => onTabChange(tab.id)}
                  sx={{ 
                    width: 48,
                    height: 48,
                    color: isActive ? 'primary.main' : 'text.secondary',
                    bgcolor: isActive ? 'rgba(0, 97, 255, 0.05)' : 'transparent',
                    borderRadius: '8px',
                    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
                    '&:hover': { 
                      bgcolor: isActive ? 'rgba(0, 97, 255, 0.1)' : 'rgba(0, 0, 0, 0.03)',
                      color: isActive ? 'primary.main' : 'primary.main',
                      '& .MuiSvgIcon-root': {
                        transform: 'scale(1.1)',
                      }
                    },
                    '& .MuiSvgIcon-root': {
                      fontSize: 26,
                      transition: 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
                    }
                  }}
                >
                  {tab.icon}
                </IconButton>
              </Tooltip>
            </Box>
          );
        })}
      </Stack>
      
      <Box sx={{ mt: 'auto' }}>
        <Tooltip title="Settings" placement="right" arrow>
          <IconButton sx={{ 
            width: 48,
            height: 48,
            color: 'text.secondary',
            transition: 'all 0.2s',
            '&:hover': { color: 'primary.main', bgcolor: 'rgba(0, 0, 0, 0.03)' }
          }}>
            <Settings />
          </IconButton>
        </Tooltip>
      </Box>
    </Box>
  );
};

export default NavigationRail;