import React from 'react';
import {
  AppBar,
  Toolbar,
  Box,
  ListItemIcon,
  ListItemText,
  Typography,
  useTheme,
  useMediaQuery,
} from '@mui/material';
import { useNavigate } from 'react-router-dom';
import LogoutIcon from '@mui/icons-material/Logout';
import authService from '../../../services/authService'; 

const KitchPlusAppBar = ({ onDrawerToggle, sidebarOpen, isMobile }) => {
  const theme = useTheme();
  const navigate = useNavigate();
  const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));

  // دالة تسجيل الخروج المعدلة
  const handleLogout = async () => {
    try {
      const result = await authService.logout();

      if (result.success) {
        localStorage.removeItem('token');
        navigate('/login');
      } else {
        console.error('Logout failed:', result.message);
      }
    } catch (error) {
      console.error('Logout error:', error);
    }
  };

  return (
    <AppBar
      sx={{
        height: { xs: 56, sm: 64, md: 66 },
        backgroundColor: '#ffffff',
        color: 'black',
        boxShadow: 'none',
        borderBottom: '1px solid #e0e0e0',
        position: 'sticky',
        top: 0,
        zIndex: theme.zIndex.appBar,
      }}
    >
      <Toolbar
        sx={{
          px: { xs: 2, sm: 3, md: '24px' },
          minHeight: { xs: '56px !important', sm: '64px !important' },
          display: 'flex',
          justifyContent: 'space-between',
        }}
      >
        {/* Left: Logo */}
        <Box sx={{ display: 'flex', alignItems: 'center' }}>
          <Box
            component="img"
            src="/image.png"
            alt="logo"
            sx={{
              width: 40,
              height: 40,
              objectFit: 'contain',
              mr: 1.5,
            }}
          />
          <Typography
            variant="h6"
            sx={{
              fontWeight: 400,
              fontSize: '1.25rem',
              color: 'text.primary',
            }}
          >
            KITCH
          </Typography>
          <Typography
            variant="h6"
            sx={{
              fontWeight: 400,
              fontSize: '1.25rem',
              color: 'primary.main',
              ml: 0.5,
            }}
          >
            PLUS
          </Typography>
        </Box>

        {/* Right: Log Out Button */}
        <Box sx={{ display: 'flex', alignItems: 'center', gap: { xs: 0.8, sm: 1, md: 1.5 } }}>
          <Box
            onClick={handleLogout}
            sx={{
              display: 'flex',
              alignItems: 'center',
              borderRadius: '5px',
              px: 2,
              py: 1,
              cursor: 'pointer',
              transition: 'background-color 0.2s',
              backgroundColor: 'transparent',
              '&:hover': {
                backgroundColor: '#fffcf9d5',
              },
            }}
          >
            <ListItemIcon
              sx={{
                color: 'divider',
                minWidth: 36,
              }}
            >
              <LogoutIcon />
            </ListItemIcon>
            <ListItemText
              primary="Log Out"
              primaryTypographyProps={{
                sx: {
                  color: 'divider',
                  fontSize: '1rem',
                },
              }}
            />
          </Box>
        </Box>
      </Toolbar>
    </AppBar>
  );
};

export default KitchPlusAppBar;