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