import React, { useState } from 'react';
import Link from 'next/link';
import {
  Box,
  Menu,
  Avatar,
  Typography,
  Button,
  IconButton,
} from '@mui/material';
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);
  };

  // Gera as iniciais do nome
  const getIniciais = () => {
    if (!user?.nome) return user?.userName?.[0]?.toUpperCase() || 'U';
    const partes = user.nome.trim().split(' ').filter(Boolean);
    if (partes.length === 1) return partes[0][0].toUpperCase();
    return (partes[0][0] + partes[partes.length - 1][0]).toUpperCase();
  };

  return (
    <Box>
      <IconButton
        aria-label="menu do perfil"
        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',
          }}
        >
          {getIniciais()}
        </Avatar>
      </IconButton>
      {/* ------------------------------------------- */}
      {/* Profile 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: '320px',
            p: 3,
          },
        }}
      >
        <Typography variant="h6" fontWeight={600}>
          Meu Perfil
        </Typography>
        <Stack direction="row" py={2} spacing={2} alignItems="center">
          <Avatar
            sx={{ width: 64, height: 64, bgcolor: 'primary.main', fontSize: '1.5rem' }}
          >
            {getIniciais()}
          </Avatar>
          <Box>
            <Typography
              variant="subtitle2"
              color="textPrimary"
              fontWeight={600}
            >
              {user?.nome || user?.userName || 'Usuário'}
            </Typography>
            <Typography variant="body2" color="textSecondary">
              {user?.nomeFilial || '-'}
            </Typography>
            <Typography variant="body2" color="textSecondary">
              Matrícula: {user?.matricula || '-'}
            </Typography>
          </Box>
        </Stack>
        <Button
          variant="outlined"
          color="primary"
          component={Link}
          href="/dashboard/profile"
          fullWidth
          sx={{ mb: 1 }}
        >
          Ver Perfil Completo
        </Button>
        <Button
          variant="contained"
          color="primary"
          onClick={logout}
          fullWidth
        >
          Sair
        </Button>
      </Menu>
    </Box>
  );
};

export default Profile;

