import React, { useState } from 'react';
import { BottomNavigation, BottomNavigationAction, Paper, Box, IconButton, Menu, MenuItem, ListItemIcon, ListItemText } from '@mui/material';
import MoreVertIcon from '@mui/icons-material/MoreVert';
import { useNavigate, useLocation } from 'react-router-dom';
import HomeIcon from '@mui/icons-material/Home';
import VpnKeyIcon from '@mui/icons-material/VpnKey';
import CodeIcon from '@mui/icons-material/Code';
import SettingsIcon from '@mui/icons-material/Settings';
import WifiIcon from '@mui/icons-material/Wifi';
import LockIcon from '@mui/icons-material/Lock';
import { useSessionStore } from '../store/sessionStore';

const Navigation = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const { isSessionUnlocked } = useSessionStore();
  
  // Get current path without leading slash
  const currentPath = location.pathname.substring(1) || 'home';

  // State for the more menu
  const [moreAnchorEl, setMoreAnchorEl] = useState<null | HTMLElement>(null);
  const isMoreMenuOpen = Boolean(moreAnchorEl);

  const handleMoreClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
    setMoreAnchorEl(event.currentTarget);
  };

  const handleMoreClose = () => {
    setMoreAnchorEl(null);
  };

  const handleNavigation = (path: string) => {
    navigate(`/${path === 'home' ? '' : path}`);
    handleMoreClose();
  };

  return (
    <Paper 
      sx={{ position: 'static', bottom: 0, left: 0, right: 0 }} 
      elevation={3}
    >
      <Box sx={{ display: 'flex', width: '100%' }}>
        <BottomNavigation
          showLabels
          value={currentPath}
          onChange={(_, newValue) => {
            navigate(`/${newValue === 'home' ? '' : newValue}`);
          }}
          sx={{ flexGrow: 1 }}
        >
          <BottomNavigationAction 
            label="Home" 
            value="home" 
            icon={<HomeIcon />} 
          />
          
          <BottomNavigationAction 
            label="Keys" 
            value="keypair" 
            icon={<VpnKeyIcon />} 
            disabled={!isSessionUnlocked}
          />
          
          <BottomNavigationAction 
            label="Crypto" 
            value="crypto" 
            icon={<LockIcon />} 
            disabled={!isSessionUnlocked}
          />
          
          <BottomNavigationAction 
            label="More" 
            value="more" 
            icon={<MoreVertIcon />} 
            onClick={handleMoreClick}
          />
        </BottomNavigation>

        <Menu
          anchorEl={moreAnchorEl}
          open={isMoreMenuOpen}
          onClose={handleMoreClose}
          anchorOrigin={{
            vertical: 'top',
            horizontal: 'right',
          }}
          transformOrigin={{
            vertical: 'bottom',
            horizontal: 'right',
          }}
        >
          <MenuItem 
            onClick={() => handleNavigation('script')} 
            disabled={!isSessionUnlocked}
            selected={currentPath === 'script'}
          >
            <ListItemIcon>
              <CodeIcon fontSize="small" />
            </ListItemIcon>
            <ListItemText>Scripts</ListItemText>
          </MenuItem>
          
          <MenuItem 
            onClick={() => handleNavigation('websocket')} 
            disabled={!isSessionUnlocked}
            selected={currentPath === 'websocket'}
          >
            <ListItemIcon>
              <WifiIcon fontSize="small" />
            </ListItemIcon>
            <ListItemText>WebSocket</ListItemText>
          </MenuItem>
          
          <MenuItem 
            onClick={() => handleNavigation('settings')} 
            selected={currentPath === 'settings'}
          >
            <ListItemIcon>
              <SettingsIcon fontSize="small" />
            </ListItemIcon>
            <ListItemText>Settings</ListItemText>
          </MenuItem>
        </Menu>
      </Box>
    </Paper>
  );
};

export default Navigation;
