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";

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);

	React.useEffect(() => {
		dispatch(fetchAdminProfile());
	}, [dispatch]);
	return (
		<Box
			sx={{
				width: "100%",
				height: "84px",
				backgroundColor: "#1C1C1C",
				padding: { xs: "20px 12px", sm: "20px 24px" }, 
				display: "flex",
				alignItems: "center",
				justifyContent: "space-between",
				flexDirection: { xs: "column", sm: "row" },
			}}
		>
			<Stack
				direction="row"
				spacing={3}
				alignItems="center"
				justifyContent="flex-end"
				sx={{
					width: "100%",
					justifyContent: { xs: "center", sm: "flex-end" },
					marginTop: { xs: 2, sm: 0 },
				}}
			>
				{/* Search Bar */}
				<Box
					sx={{
						// width: { xs: "100%", sm: "360px" },
						height: "44px",

						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={{
						display: { xs: "none", sm: "flex" }, // Hide on mobile, show on larger screens
					}}
				>
					<NotificationsNoneIcon onClick={toggleNotifications} />
					<Avatar
						alt="User Avatar"
						src="/avatar.png"
						sx={{ width: 36, height: 36 }}
					/>
					<Typography variant="body1" sx={{ color: "#FFFFFF" }}>
						{user?.name || "No Admin"}
					</Typography>

					<OptionsMenu />
				</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="h6" color="text.primary">
						Notifications
					</Typography> */}
						<Typography variant="body2" color="text.secondary">
							No notifications yet
						</Typography>
					</Box>
				)}
			</Stack>
		</Box>
	);
}