import React from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { Box, List, ListItemButton, ListItemText, Typography } from '@mui/material';
import {
  Person as PersonIcon,
  Computer as ComputerIcon,
  Group as GroupIcon,
  SmartToy as SmartToyIcon,
  Extension as ExtensionIcon,
} from '@mui/icons-material';
import { useTranslation } from 'react-i18next';


interface SettingMenuItem {
  key: string;
  label: string;
  icon: React.ComponentType<any>;
  path: string;
}

const SettingSidebar: React.FC = () => {

  const { t } = useTranslation();
  const settingMenuItems: SettingMenuItem[] = [
    {
      key: 'profile',
      label: t('setting.profile'),
      icon: PersonIcon,
      path: '/setting/profile',
    },
    {
      key: 'models',
      label: t('setting.model'),
      icon: SmartToyIcon,
      path: '/setting/models',
    },
    {
      key: 'system',
      label: t('setting.system'),
      icon: ComputerIcon,
      path: '/setting/system',
    },
    {
      key: 'teams',
      label: t('setting.team'),
      icon: GroupIcon,
      path: '/setting/teams',
    },
    {
      key: 'mcp',
      label: t('setting.mcp'),
      icon: ExtensionIcon,
      path: '/setting/mcp',
    },
  ];


  const navigate = useNavigate();
  const location = useLocation();

  const handleMenuClick = (path: string) => {
    navigate(path);
  };

  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('header.setting')}
      </Typography>

      <List>
        {settingMenuItems.map((item) => {
          const IconComponent = item.icon;
          const isActive = location.pathname === item.path;

          return (
            <ListItemButton
              key={item.key}
              onClick={() => handleMenuClick(item.path)}
              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.label} />
            </ListItemButton>
          );
        })}
      </List>

      <Box
        sx={{
          marginTop: 'auto',
          padding: '20px',
          fontSize: '0.75rem',
          opacity: 0.7,
        }}
      >
        © 2025 T-Systems
      </Box>
    </Box>
  );
};

export default SettingSidebar;