"use client";

import React from "react";
import {
  Menu,
  MenuItem,
  IconButton,
  ListItemIcon,
  Typography,
  Button,
  CircularProgress,
} from "@mui/material";
import AccountCircleIcon from "@mui/icons-material/AccountCircle";
import SettingsIcon from "@mui/icons-material/Settings";
import LogoutIcon from "@mui/icons-material/Logout";
import { useDispatch, useSelector } from "react-redux";
import { selectIsLoggedIn, selectStatus } from "@/app/redux/auth/selectors";
import { logout } from "@/app/redux/auth/authSlice";
import { AppDispatch } from "@/app/redux/types";
import { useRouter } from "next/navigation";

export default function AccountMenu() {
  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
  const open = Boolean(anchorEl);

  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const dispatch = useDispatch<AppDispatch>();
  const router = useRouter();

  const handleGoToSettings = () => {
    router.push("/dashboard/settings");
    handleClose();
  };

  // Select relevant state from your auth slice
  const isLoggedIn = useSelector(selectIsLoggedIn);
  const authStatus = useSelector(selectStatus);

  // Determine if we're currently in the process of logging out
  const isLoggingOut = authStatus === "loading";

  const handleLogout = async () => {
    // Dispatch the logout thunk - redirection will be handled by the epic
    await dispatch(logout());
  };

  // Only show the logout button if the user is logged in
  if (!isLoggedIn) {
    return null;
  }

  return (
    <>
      <IconButton onClick={handleClick} color="inherit">
        <AccountCircleIcon />
      </IconButton>

      <Menu
        anchorEl={anchorEl}
        open={open}
        onClose={handleClose}
        onClick={handleClose}
        transformOrigin={{ horizontal: "right", vertical: "top" }}
        anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
      >
        <MenuItem>
          <ListItemIcon>
            <AccountCircleIcon fontSize="small" />
          </ListItemIcon>
          <Typography variant="inherit">Account</Typography>
        </MenuItem>

        <MenuItem onClick={handleGoToSettings}>
          <ListItemIcon>
            <SettingsIcon fontSize="small" />
          </ListItemIcon>
          <Typography variant="inherit">Settings</Typography>
        </MenuItem>

        <MenuItem>
          <ListItemIcon>
            <LogoutIcon fontSize="small" />
          </ListItemIcon>
          <Button
            variant="contained"
            color="secondary"
            onClick={handleLogout}
            disabled={isLoggingOut}
            startIcon={
              isLoggingOut ? (
                <CircularProgress size={20} color="inherit" />
              ) : null
            }
          >
            {isLoggingOut ? "Logging Out..." : "Logout"}
          </Button>
        </MenuItem>
      </Menu>
    </>
  );
}