import React, { useState } from 'react';
import Link from 'next/link';
import {
  Box,
  Menu,
  Avatar,
  Typography,
  Divider,
  Button,
  IconButton,
} from '@mui/material';
import { IconMail } from '@tabler/icons-react';
import { Stack } from '@mui/system';

import { useAuthStore } from '../../login/store/useAuthStore';
import { useAuth } from '../../login/hooks/useAuth';

const Profile = () => {
  const [anchorEl2, setAnchorEl2] = useState(null);
  const user = useAuthStore((s) => s.user);
  const { logout } = useAuth();

  const handleClick2 = (event: any) => {
    setAnchorEl2(event.currentTarget);
  };
  const handleClose2 = () => {
    setAnchorEl2(null);
  };

  return (
    <Box>
      <IconButton
        aria-label="show 11 new notifications"
        color="inherit"
        aria-controls="msgs-menu"
        aria-haspopup="true"
        sx={{
          ...(typeof anchorEl2 === 'object' && {
            color: 'primary.main',
          }),
        }}
        onClick={handleClick2}
      >
        <Avatar
          sx={{
            width: 35,
            height: 35,
            bgcolor: 'primary.main',
          }}
        >
          {user?.nome?.[0] || user?.userName?.[0] || 'U'}
        </Avatar>
      </IconButton>
      {/* ------------------------------------------- */}
      {/* Message Dropdown */}
      {/* ------------------------------------------- */}
      <Menu
        id="msgs-menu"
        anchorEl={anchorEl2}
        keepMounted
        open={Boolean(anchorEl2)}
        onClose={handleClose2}
        anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
        transformOrigin={{ horizontal: 'right', vertical: 'top' }}
        sx={{
          '& .MuiMenu-paper': {
            width: '360px',
            p: 4,
          },
        }}
      >
        <Typography variant="h5">User Profile</Typography>
        <Stack direction="row" py={3} spacing={2} alignItems="center">
          <Avatar
            sx={{ width: 95, height: 95, bgcolor: 'primary.main' }}
          >
            {user?.nome?.[0] || user?.userName?.[0] || 'U'}
          </Avatar>
          <Box>
            <Typography
              variant="subtitle2"
              color="textPrimary"
              fontWeight={600}
            >
              {user?.nome || user?.userName || 'Usuário'}
            </Typography>
            <Typography variant="subtitle2" color="textSecondary">
              {user?.nomeFilial || 'Sem filial'}
            </Typography>
            <Typography
              variant="subtitle2"
              color="textSecondary"
              display="flex"
              alignItems="center"
              gap={1}
            >
              <IconMail width={15} height={15} />
              {user?.rca ? `RCA: ${user.rca}` : 'Sem e-mail'}
            </Typography>
          </Box>
        </Stack>
        <Box mt={2}>
          <Button
            variant="outlined"
            color="primary"
            onClick={logout}
            fullWidth
          >
            Sair
          </Button>
        </Box>
      </Menu>
    </Box>
  );
};

export default Profile;
