import * as React from "react";
import Stack from "@mui/material/Stack";
import Avatar from "@mui/material/Avatar";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import InputBase from "@mui/material/InputBase";
import SearchIcon from "@mui/icons-material/Search";
import { useDispatch, useSelector } from "react-redux";
import { AppDispatch, RootState } from "../../redux/store/store";
import { fetchAdminProfile } from "../../redux/slices/profileSlice";
import OptionsMenu from "../OptionsMenu";
import NotificationsNoneIcon from "@mui/icons-material/NotificationsNone";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import { useRef, useState } from "react";
export default function Header() {
	const [showNotifications, setShowNotifications] = React.useState(false);
	const toggleNotifications = () => {
		setShowNotifications((prev) => !prev);
	};
	// const [open, setOpen] = React.useState(true);

	const dispatch = useDispatch<AppDispatch>();
	const { user } = useSelector((state: RootState) => state?.profileReducer);
	const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);

	
	// Use a ref to make the full click area act as anchor
	const menuAnchorRef = useRef<HTMLDivElement | null>(null);
	const [menuOpen, setMenuOpen] = useState(false);

	const handleClick = () => {
		setMenuOpen((prev) => !prev);
	};

	const handleClose = () => {
		setMenuOpen(false);
	};

	React.useEffect(() => {
		dispatch(fetchAdminProfile());
	}, [dispatch]);
	return (
		<Box
			sx={{
				width: "100%",
				// height: "84px",
				minHeight: "70px",
				maxHeight: "84px",
				// backgroundColor: "#1C1C1C",
				padding: { xs: "20px 12px", sm: "20px 24px" },
				display: {
					xs: "none",
					md: "flex",
				},
				marginTop: { xs: "0px", sm: "0px" },
				alignItems: "center",
				justifyContent: "space-between",
				flexDirection: { xs: "column", sm: "row" },
				boxSizing: "border-box",
				overflowX: "hidden",
				flex: "0 0 84px",
				// position: "fixed",
				// top: "0",
				// left: "0",
				// zIndex: 1000,
			}}
		>
			<Stack
				direction="row"
				spacing={3}
				alignItems="center"
				justifyContent="flex-end"
				sx={{
					width: "100%",
					justifyContent: { xs: "center", sm: "flex-end" },
					marginTop: { xs: 0, sm: 0 }, // Remove top margin on mobile
					flexWrap: { xs: "wrap", sm: "nowrap" },
					maxHeight: "100%", // Ensure content doesn't push height
					overflow: "hidden", // Prevent overflow
				}}
			>
				{/* Search Bar */}
				{/* <Box
					sx={{
						// width: { xs: "100%", sm: "360px" },
						height: "40px",

						borderRadius: "8px",
						border: "1px solid #424242",
						display: "flex",
						alignItems: "center",
						padding: "0 12px",
					}}
				>
					<SearchIcon sx={{ color: "#FFFFFF" }} />
					<InputBase
						sx={{
							marginLeft: 1,
							flex: 1,
							color: "#FFFFFF",
							fontSize: { xs: "12px", sm: "14px" },
						}}
					/>
				</Box> */}
			
				{/* Notification and Profile Section */}
				<Stack
					direction="row"
					spacing={2}
					alignItems="center"
					sx={{
						pointer: "cursor",
						display: { xs: "none", sm: "flex" }, // Hide on mobile, show on larger screens
					}}
				>
					{/* <NotificationsNoneIcon
						sx={{ cursor: "pointer" }}
						onClick={toggleNotifications}
					/> */}
					<Box
						ref={menuAnchorRef}
						onClick={handleClick}
						sx={{
							display: "flex",
							alignItems: "center",
							gap: 1,
							cursor: "pointer",
						}}
					>
						{/* Avatar */}
						<Avatar
							alt="User Avatar"
							src="/avatar.png"
							sx={{ width: 36, height: 36 }}
						/>

						{/* Username */}
						<Typography variant="body1">
							{user?.name || "No Adminsss"}
						</Typography>

						{/* Options Menu */}
						<ExpandMoreIcon
							// onClick={handleClick}
							sx={{ cursor: "pointer" }}
						/>
					</Box>
					<OptionsMenu
						anchorEl={menuAnchorRef.current}
						open={menuOpen}
						onClose={handleClose}
					/>
				</Stack>

				{/* {showNotifications && (
					<Box
						sx={{
							p: 2,
							position: "absolute",
							top: "55px",
							right: { xs: "10px", sm: "280px" },
							bgcolor: "#FFFFFF",
							boxShadow: 1,
							borderRadius: 1,
							zIndex: 1300,
							cursor: "pointer",
							width: "250px",
						}}
					>

						<Typography variant="body2" color="text.secondary">
							No notifications yet
						</Typography>
					</Box>
				)} */}
			</Stack>
		</Box>
	);
}
