import { Box, List, ListItemButton, ListItemText, Typography } from '@mui/material';
import { Link, useLocation } from 'react-router-dom';
import {
  LibraryBooksOutlined as KnowledgeBasesIcon,
  AccountTreeOutlined as AgentIcon,
} from '@mui/icons-material';
import { useTranslation } from 'react-i18next';

const Sidebar = () => {
  const location = useLocation();
  const { t } = useTranslation();

  const navItems = [
    { text: t('header.knowledgeBase'), path: '/knowledge', icon: KnowledgeBasesIcon },
    { text: t('header.agent'), path: '/agents', icon: AgentIcon },
  ];

  return (
    <Box
      sx={{
        width: '240px',
        backgroundColor: '#1E1E24',
        color: '#DDD',
        height: '100vh',
        padding: '1rem 0',
        display: 'flex',
        flexDirection: 'column',
      }}
    >
      <Typography
        sx={{
          fontSize: '1.05rem',
          fontWeight: 600,
          padding: '0 1.25rem 1rem',
          margin: '0 0 0.5rem',
          color: '#FFF',
          letterSpacing: '0.5px',
        }}
      >
        T-Systems Enterprise
      </Typography>

      <List>
        {navItems.map((item) => {
          const IconComponent = item.icon;
          let isActive = location.pathname === item.path;
          if (item.path === '/knowledge' && location.pathname === '/') {
            isActive = true;
          }
          return (
            <Link
              key={item.path}
              to={item.path}
              style={{ textDecoration: 'none', color: 'inherit' }}
            >
              <ListItemButton
                sx={{
                  color: isActive ? '#FFF' : '#B9B9C2',
                  backgroundColor: isActive ? 'rgba(226,0,116,0.12)' : 'transparent',
                  borderLeft: isActive ? '4px solid' : '4px solid transparent',
                  borderLeftColor: isActive ? 'primary.main' : 'transparent',
                  fontWeight: isActive ? 600 : 'normal',
                  '&:hover': {
                    backgroundColor: 'rgba(255,255,255,0.05)',
                    color: '#FFF',
                  },
                  '& .MuiListItemText-primary': {
                    fontSize: '0.9rem',
                  },
                }}
              >
                <IconComponent
                  sx={{
                    color: 'primary.main',
                    marginRight: '12px',
                    fontSize: '1.2rem'
                  }}
                />
                <ListItemText primary={item.text} />
              </ListItemButton>
            </Link>
          );
        })}
      </List>
      <Box
        sx={{
          marginTop: 'auto',
          padding: '20px',
          fontSize: '0.75rem',
          opacity: 0.7,
        }}
      >
        © 2025 T-Systems
      </Box>
    </Box>
  );
};

export default Sidebar;