'use client';

import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import IconButton from "@mui/material/IconButton";
import Stack from "@mui/material/Stack";
import Toolbar from "@mui/material/Toolbar";
import useMediaQuery from "@mui/material/useMediaQuery";
import { styled, Theme } from "@mui/material/styles";
import MenuIcon from '@mui/icons-material/Menu';
import DarkModeIcon from '@mui/icons-material/DarkMode';
import LightModeIcon from '@mui/icons-material/LightMode';
import { useCustomizerStore } from "../store/useCustomizerStore";

import Notifications from "./Notification";
import Profile from "./Profile";
import Search from "./Search";
import Navigation from "./Navigation";
import MobileRightSidebar from "./MobileRightSidebar";

const AppBarStyled = styled(AppBar)(({ theme }) => ({
  boxShadow: "none",
  background: theme.palette.background.paper,
  justifyContent: "center",
  backdropFilter: "blur(4px)",
  zIndex: theme.zIndex.drawer + 1,
}));

const ToolbarStyled = styled(Toolbar)(({ theme }) => ({
  width: "100%",
  color: theme.palette.text.secondary,
}));

const Header = () => {
  const lgUp = useMediaQuery((theme: Theme) => theme.breakpoints.up("lg"));
  const lgDown = useMediaQuery((theme: Theme) => theme.breakpoints.down("lg"));

  const {
    activeMode,
    toggleSidebar,
    toggleMobileSidebar,
    setDarkMode,
    isHydrated
  } = useCustomizerStore();

  if (!isHydrated) {
    return null;
  }

  return (
    <AppBarStyled position="sticky" color="default">
      <ToolbarStyled>
        {/* ------------------------------------------- */}
        {/* Toggle Button Sidebar (Fluxo 2) */}
        {/* ------------------------------------------- */}
        <IconButton
          color="inherit"
          aria-label="menu"
          onClick={lgUp ? toggleSidebar : toggleMobileSidebar}
        >
          <MenuIcon />
        </IconButton>

        {/* ------------------------------------------- */}
        {/* Search & Navigation */}
        {/* ------------------------------------------- */}
        <Search />
        {lgUp && <Navigation />}

        <Box flexGrow={1} />

        <Stack spacing={1} direction="row" alignItems="center">

          {/* ------------------------------------------- */}
          {/* Theme Toggle (Dark/Light) */}
          {/* ------------------------------------------- */}
          <IconButton
            size="large"
            color="inherit"
            onClick={() => setDarkMode(activeMode === "light" ? "dark" : "light")}
            aria-label="alternar tema"
          >
            {activeMode === "light" ? (
              <DarkModeIcon />
            ) : (
              <LightModeIcon />
            )}
          </IconButton>

          <Notifications />

          {/* ------------------------------------------- */}
          {/* Mobile Right Sidebar & Profile */}
          {/* ------------------------------------------- */}
          {lgDown && <MobileRightSidebar />}
          <Profile />
        </Stack>
      </ToolbarStyled>
    </AppBarStyled>
  );
};

export default Header;