import React, { useState, useEffect } from "react";
import {
  AppBar, Menu, MenuItem, Avatar, IconButton,
  Box, Stack, Drawer, List
} from "@mui/material";
import { useTheme } from "@mui/material/styles";
import useMediaQuery from "@mui/material/useMediaQuery";
import MenuIcon from "@mui/icons-material/Menu";

import NavButton from "./NavButton";
import NavButtonMobile from "./NavButtonMobile";
import MinedriveLogo from "../assets/minedrive.png";
// import DefaultAvatar from "../assets/avatar_default.png";

// import { checkAuthorization, login, logout } from "../services/Authorization";

export default function Navbar() {
  // const [anchorProfile, setAnchorProfile] = useState(null);
  const [drawerOpen, setDrawerOpen] = useState(false);

  // const [user, setUser] = useState(null);

  const data = [
    { name: "Home" },
  ];

  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down("md"));

  // Beim Laden prüfen, ob User eingeloggt ist
  // useEffect(() => {
  //   (async () => {
  //     try {
  //       const auth = await checkAuthorization();
  //       setUser(auth);
  //     } catch (err) {
  //       setUser(null);
  //     }
  //   })();
  // }, []);

  // Mobile Drawer Steuerung
  const toggleDrawer = (open) => () => setDrawerOpen(open);

  // Menü öffnen / schließen
  // const handleMenuOpen = (setter) => (event) => setter(event.currentTarget);
  // const handleMenuClose = (setter) => () => setter(null);

  // Login
  // const handleLogin = async () => {
  //   try {
  //     const response = await login();
  //     console.log("Login erfolgreich:", response);
  //   } catch (err) {
  //     console.error("Login fehlgeschlagen:", err);
  //   }
  // };

  // Logout
  // const handleLogout = async () => {
  //   try {
  //     await logout();
  //     setUser(null);
  //     handleMenuClose(setAnchorProfile)();
  //     window.location.reload();
  //   } catch (err) {
  //     console.error("Logout fehlgeschlagen:", err);
  //   }
  // };

  return (
    <AppBar
      position="static"
      color="secondary"
      sx={{ borderBottom: "2px solid", borderColor: "secondary.main", padding: "0 16px" }}
    >
      <Box
        sx={{
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          position: "relative",
          height: "64px",
        }}
      >
        {/* Linke Seite: Logo */}
        <Box sx={{ display: "flex", alignItems: "center" }}>
          <Box
            component="img"
            src={MinedriveLogo}
            alt="Minedrive Logo"
            sx={{ height: { xs: "30px", sm: "40px" }, width: "auto", marginRight: "16px" }}
          />
        </Box>

        {/* Navigation (Desktop) */}
        {!isMobile && (
          <Box
            sx={{
              position: "absolute",
              left: "50%",
              transform: "translateX(-50%)",
            }}
          >
            <Stack direction="row" spacing={2}>
              {data.map((item) => (
                <NavButton
                  key={item.name}
                  label={item.name}
                  menuItems={item.children}
                  path={item.path}
                />
              ))}
            </Stack>
          </Box>
        )}

        {/* Mobile Navigation: Burger Menü */}
        {isMobile && (
          <IconButton
            onClick={toggleDrawer(true)}
            sx={{ marginLeft: "auto", color: "white" }}
          >
            <MenuIcon />
          </IconButton>
        )}

        {/* Rechte Seite: Avatar + Dropdown */}
        {/* <Box>
          <IconButton
            onClick={handleMenuOpen(setAnchorProfile)}
            sx={{
              marginLeft: "16px",
              borderRadius: "50%",
              padding: "4px",
              border: "2px solid",
              borderColor: (theme) => theme.palette.primary.main,
            }}
          >
            <Avatar
              src={user ? DefaultAvatar : "/default_avatar.png"} //TODO: Change to actual player avatar
              sx={{ width: 40, height: 40 }}
            />
          </IconButton>

          <Menu
            anchorEl={anchorProfile}
            open={Boolean(anchorProfile)}
            onClose={handleMenuClose(setAnchorProfile)}
          > */}
            {/* Wenn user vorhanden => zeige My Account und Logout */}
            {/* {user && (
              <>
                <MenuItem onClick={handleMenuClose(setAnchorProfile)}>My Account</MenuItem>
                <MenuItem onClick={handleLogout}>Logout</MenuItem>
              </>
            )} */}

            {/* Kein User => nur "Login" */}
            {/* {!user && (
              <MenuItem onClick={handleLogin}>Login</MenuItem>
            )}
          </Menu>
        </Box> */}
      </Box>

      {/* Drawer (Mobile Navigation) */}
      <Drawer anchor="left" open={drawerOpen} onClose={toggleDrawer(false)}>
        <Box sx={{ width: 250, paddingTop: 2 }}>
          <List>
            {data.map((item) => (
              <NavButtonMobile
                key={item.name}
                label={item.name}
                menuItems={item.children}
                path={item.path}
                onClick={toggleDrawer(false)}
              />
            ))}
          </List>
        </Box>
      </Drawer>
    </AppBar>
  );
}
