import { useState } from 'react';
import Avatar from '@mui/material/Avatar';
import Box from '@mui/material/Box';
import IconButton from '@mui/material/IconButton';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import LogoutIcon from '@mui/icons-material/Logout';
import BusinessIcon from '@mui/icons-material/Business';
import { useAuth } from '../auth/useAuth';
import CompanySettingsDialog from './CompanySettingsDialog';

// Menu open/close state is local; toggling it only re-renders this component.
export default function UserMenu() {
  const { user, logout } = useAuth();
  const [anchorEl, setAnchorEl] = useState(null);
  const [settingsOpen, setSettingsOpen] = useState(false);
  const open = Boolean(anchorEl);

  return (
    <>
      <Box sx={{ px: 1.5, py: 1.5, alignSelf: 'flex-start' }}>
        <IconButton
          onClick={(e) => setAnchorEl(e.currentTarget)}
          onMouseDown={(e) => e.preventDefault()}
          sx={{ p: 0, width: 32, height: 32, borderRadius: '50%' }}
        >
          <Avatar src={user?.picture} alt={user?.email} sx={{ width: 32, height: 32 }}>
            {user?.email?.[0]?.toUpperCase()}
          </Avatar>
        </IconButton>
      </Box>
      <Menu
        anchorEl={anchorEl}
        open={open}
        onClose={() => setAnchorEl(null)}
        anchorOrigin={{ vertical: 'top', horizontal: 'left' }}
        transformOrigin={{ vertical: 'bottom', horizontal: 'left' }}
      >
        <MenuItem disabled>{user?.email}</MenuItem>
        <MenuItem
          disabled={!user?.selectedCompanyId}
          onClick={() => {
            setAnchorEl(null);
            setSettingsOpen(true);
          }}
        >
          <ListItemIcon>
            <BusinessIcon fontSize="small" />
          </ListItemIcon>
          <ListItemText>Unternehmen</ListItemText>
        </MenuItem>
        <MenuItem
          onClick={() => {
            setAnchorEl(null);
            logout();
          }}
        >
          <ListItemIcon>
            <LogoutIcon fontSize="small" />
          </ListItemIcon>
          <ListItemText>Sign out</ListItemText>
        </MenuItem>
      </Menu>
      <CompanySettingsDialog open={settingsOpen} onClose={() => setSettingsOpen(false)} />
    </>
  );
}