import { useDispatch } from 'react-redux';
import { AppBar, Toolbar, IconButton, Typography, Box, Avatar } from '@mui/material';
import MenuIcon from '@mui/icons-material/Menu';
import LogoutIcon from '@mui/icons-material/Logout';
import { toggleSidebar } from '../app/slices/uiSlice';
import { useAuth } from '../hooks/useAuth';

export default function Topbar() {
  const dispatch = useDispatch();
  const { user, logout } = useAuth();

  const initials = user?.displayName
    ? user.displayName.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2)
    : '';

  return (
    <AppBar position="fixed" sx={{ zIndex: (theme) => theme.zIndex.drawer + 1, height: 64 }}>
      <Toolbar sx={{ height: 64, minHeight: 64 }}>
        <IconButton
          color="inherit"
          edge="start"
          onClick={() => dispatch(toggleSidebar())}
          sx={{ mr: 2 }}
          aria-label="Toggle sidebar menu"
        >
          <MenuIcon />
        </IconButton>
        <Typography variant="h6" noWrap sx={{ flexGrow: 1, fontWeight: 600 }}>
          Proposal System
        </Typography>
        {user && (
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
              <Avatar sx={{ width: 32, height: 32, bgcolor: '#1B789B', fontSize: 12, fontWeight: 600 }}>
                {initials}
              </Avatar>
              <Box sx={{ display: 'flex', flexDirection: 'column', lineHeight: 1.2 }}>
                <Typography sx={{ fontSize: '13px', fontWeight: 600, color: '#fff' }}>
                  {user.displayName}
                </Typography>
                <Typography sx={{ fontSize: '11px', color: 'rgba(255,255,255,0.55)' }}>
                  {user.role}
                </Typography>
              </Box>
            </Box>
            <Box sx={{ width: '1px', height: 24, bgcolor: 'rgba(255,255,255,0.12)', mx: 0.5 }} />
            <IconButton
              onClick={logout}
              size="small"
              aria-label="Log out"
              sx={{ color: 'rgba(255,255,255,0.55)', '&:hover': { color: '#ff6b6b', bgcolor: 'rgba(255,100,100,0.1)' } }}
            >
              <LogoutIcon fontSize="small" />
            </IconButton>
          </Box>
        )}
      </Toolbar>
    </AppBar>
  );
}