import {
  Box,
  Divider,
  List,
  ListItemButton,
  ListItemIcon,
  ListItemText,
  Typography,
} from '@mui/material';
import DashboardIcon from '@mui/icons-material/Dashboard';
import SwapHorizIcon from '@mui/icons-material/SwapHoriz';
import AssessmentIcon from '@mui/icons-material/Assessment';
import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet';
import SettingsIcon from '@mui/icons-material/Settings';
import { NavLink } from 'react-router-dom';

type SidebarProps = {
  onNavigate?: () => void;
};

const menuItems = [
  {
    label: 'Dashboard',
    path: '/dashboard',
    icon: <DashboardIcon />,
  },
  {
    label: 'Movimentos',
    path: '/movimentos',
    icon: <SwapHorizIcon />,
  },
  {
    label: 'Carteiras',
    path: '/carteiras',
    icon: <AccountBalanceWalletIcon />,
  },
  {
    label: 'Relatórios',
    path: '/relatorios',
    icon: <AssessmentIcon />,
  },
  {
    label: 'Configurações',
    path: '/configuracoes',
    icon: <SettingsIcon />,
  },
];

export function Sidebar({ onNavigate }: SidebarProps) {
  return (
    <Box
      sx={{
        width: 280,
        height: '100%',
        display: 'flex',
        flexDirection: 'column',
        background: 'linear-gradient(180deg, #0F172A 0%, #111827 100%)',
        color: '#fff',
      }}
    >
      <Box sx={{ padding: 3 }}>
        <Typography variant="h6" fontWeight={900}>
          Zendion
        </Typography>

        <Typography variant="body2" sx={{ color: 'rgba(255,255,255,0.65)' }}>
          Financeiro
        </Typography>
      </Box>

      <Divider sx={{ borderColor: 'rgba(255,255,255,0.08)' }} />

      <List sx={{ padding: 2, flex: 1 }}>
        {menuItems.map((item) => (
          <ListItemButton
            key={item.path}
            component={NavLink}
            to={item.path}
            onClick={onNavigate}
            sx={{
              borderRadius: 2,
              marginBottom: 0.75,
              color: 'rgba(255,255,255,0.72)',
              '& .MuiListItemIcon-root': {
                color: 'rgba(255,255,255,0.72)',
                minWidth: 40,
              },
              '&.active': {
                backgroundColor: 'rgba(59,130,246,0.22)',
                color: '#fff',
                '& .MuiListItemIcon-root': {
                  color: '#60A5FA',
                },
              },
              '&:hover': {
                backgroundColor: 'rgba(255,255,255,0.08)',
              },
            }}
          >
            <ListItemIcon>{item.icon}</ListItemIcon>
            <ListItemText
              primary={item.label}
              primaryTypographyProps={{
                fontWeight: 700,
              }}
            />
          </ListItemButton>
        ))}
      </List>

      <Box sx={{ padding: 2 }}>
        <Box
          sx={{
            padding: 2,
            borderRadius: 3,
            backgroundColor: 'rgba(255,255,255,0.06)',
            border: '1px solid rgba(255,255,255,0.08)',
          }}
        >
          <Typography variant="body2" fontWeight={800}>
            MVP ativo
          </Typography>
          <Typography variant="caption" sx={{ color: 'rgba(255,255,255,0.62)' }}>
            Cadastro e edição de movimentos funcionando.
          </Typography>
        </Box>
      </Box>
    </Box>
  );
}