// src/components/AppBar/KitchPlusAppBar.jsx
import React, { useEffect, useState, useContext } from 'react';
import {
    AppBar,
    Toolbar,
    Typography,
    Box,
    IconButton,
    Divider,
    Avatar,
    useTheme,
    useMediaQuery,
} from '@mui/material';
import { useLocation, useNavigate } from 'react-router-dom';
import MenuIcon from '@mui/icons-material/Menu';
import HomeIcon from '@mui/icons-material/Home';
import { useRestaurant } from '../../contexts/RestaurantContext';
import authService from '../../services/authService';
import { UserContext } from '../../contexts/UserContext'; // ✅ استدعاء UserContext

const KitchPlusAppBar = ({ onDrawerToggle, sidebarOpen, isMobile }) => {
    const location = useLocation();
    const navigate = useNavigate();
    const theme = useTheme();
    const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
    const isMediumScreen = useMediaQuery(theme.breakpoints.between('sm', 'md'));
    const { restaurantId } = useRestaurant();

    const { user } = useContext(UserContext); // ✅ استخدم الـ Context بدلاً من localStorage
    const [restaurantLogo, setRestaurantLogo] = useState('/images/default-restaurant.png');

    useEffect(() => {
        const fetchRestaurantLogo = async () => {
            if (!restaurantId) return;
            const res = await authService.getRestaurantById(restaurantId);
            if (res.success && res.data) {
                setRestaurantLogo(res.data.image_url);
            }
        };
        fetchRestaurantLogo();
    }, [restaurantId]);

    return (
        <AppBar
            sx={{
                height: { xs: 56, sm: 64, md: 66 },
                backgroundColor: '#F6F6F6',
                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 side */}
                <Box
                    sx={{
                        display: 'flex',
                        alignItems: 'center',
                        gap: 2,
                        mr: 2,
                    }}
                >
                    {(isMobile || isMediumScreen) && (
                        <IconButton color="inherit" edge="start" onClick={onDrawerToggle}>
                            <MenuIcon />
                        </IconButton>
                    )}

                    <Typography variant="h6" sx={{ fontWeight: '500' }}>
                        Welcome to KitchPlus
                    </Typography>
                </Box>

                {/* Right side */}
                <Box sx={{ display: 'flex', alignItems: 'center', gap: { xs: 0.8, sm: 1, md: 1.5 } }}>
                    {location.pathname === '/dashboard' && <Divider orientation="vertical" flexItem sx={{ height: 40 }} />}

                    <IconButton
                        color="#667085"
                        size={isSmallScreen ? 'small' : 'medium'}
                        onClick={() => navigate('/restaurant')}
                    >
                        <HomeIcon fontSize={isSmallScreen ? 'medium' : 'medium'} />
                    </IconButton>

                    <Divider orientation="vertical" flexItem sx={{ height: 40 }} />

                    <Avatar
                        alt="Restaurant Logo"
                        src={restaurantLogo}
                        sx={{ width: { xs: 28, sm: 32, md: 40 }, height: { xs: 28, sm: 32, md: 40 } }}
                    />

                    {!isSmallScreen && (
                        <Typography
                            variant="body1"
                            sx={{
                                ml: 1,
                                color: '#61677F',
                                fontSize: { xs: 12, sm: 13, md: 14 },
                                whiteSpace: 'nowrap',
                                overflow: 'visible',
                                textOverflow: 'clip',
                                maxWidth: 200,
                            }}
                        >
                            {user?.email || 'Admin@gmail.com'}
                        </Typography>
                    )}
                </Box>
            </Toolbar>
        </AppBar>
    );
};

export default KitchPlusAppBar;