Header

import { Layout, Button, Dropdown, Avatar, Space, theme, Typography } from "antd";
import { useSelector, useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";
import { MenuFoldOutlined, MenuUnfoldOutlined, UserOutlined, LogoutOutlined, SettingOutlined } from "@ant-design/icons";
import { toggleSidebar } from "../../features/ui/uiSlice";
import { useAuth } from "../../hooks/useAuth.js";
import { NotificationDropdown } from "../Notification";
import SearchGlobal from "../SearchGlobal";

const { Header: AntHeader } = Layout;
const { Text } = Typography;

const Header = () => {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const { sidebarCollapsed, isMobile } = useSelector((state) => state.ui);
  const { isAuthenticated, user, logout } = useAuth();

  // const {
  //   token: { colorBgContainer },
  // } = theme.useToken();

  const handleLogout = async () => {
    await logout();
  };

  const userMenuItems = [
    {
      key: "profile",
      icon: <UserOutlined />,
      label: "Hồ sơ",
      onClick: () => navigate("/system/profile"),
    },
    {
      key: "settings",
      icon: <SettingOutlined />,
      label: "Cài đặt",
      onClick: () => navigate("/system/setting"),
    },
    {
      type: "divider",
    },
    isAuthenticated && {
      key: "logout",
      icon: <LogoutOutlined />,
      label: "Đăng xuất",
      onClick: handleLogout,
    },
  ];

  return (
    <AntHeader
      style={{
        padding: isMobile ? "0 12px" : "0 24px 0 0",
        background: "linear-gradient(135deg, #bb892c 0%, #bb892c 50%, #bb892c 100%)",
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
        borderBottom: "none",
        boxShadow: "0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04)",
        position: "sticky",
        top: 0,
        zIndex: 1000,
        width: "100%",
        height: 64,
        backdropFilter: "blur(8px)",
        transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
      }}
    >
      <Space>
        <Button
          type="text"
          icon={sidebarCollapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
          onClick={() => dispatch(toggleSidebar())}
          variant="filled"
          style={{
            fontSize: "16px",
            width: 64,
            height: 64,
            color: "#fff",
            transition: "all 0.3s ease",
            borderRadius: "8px",
          }}
          onMouseEnter={(e) => {
            e.currentTarget.style.background = "rgba(255, 255, 255, 0.15)";
          }}
          onMouseLeave={(e) => {
            e.currentTarget.style.background = "transparent";
          }}
        />
        {!isMobile && (
          <div style={{ display: "flex", flexDirection: "column", gap: "2px" }}>
            <Text
              strong
              style={{
                fontSize: "18px",
                color: "#fff",
                fontWeight: 600,
                letterSpacing: "0.3px",
                textShadow: "0 1px 2px rgba(0, 0, 0, 0.1)",
                lineHeight: "1.2",
              }}
            >
              Bảng điều khiển
            </Text>
            <Text
              style={{
                fontSize: "12px",
                color: "rgba(255, 255, 255, 0.85)",
                fontWeight: 400,
                letterSpacing: "0.5px",
                textShadow: "0 1px 2px rgba(0, 0, 0, 0.1)",
                lineHeight: "1.2",
              }}
            >
              Hệ thống ERP
            </Text>
          </div>
        )}
      </Space>

      <Space size="middle">
        <SearchGlobal />
        <NotificationDropdown />

        <Dropdown menu={{ items: userMenuItems }} placement="bottomRight" arrow>
          <Space
            style={{
              cursor: "pointer",
              padding: "8px 12px",
              borderRadius: "8px",
              transition: "all 0.3s ease",
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.background = "rgba(255, 255, 255, 0.15)";
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.background = "transparent";
            }}
          >
            <Avatar
              size="small"
              icon={<UserOutlined />}
              src={user?.avatar}
              style={{
                boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
                border: "2px solid rgba(255, 255, 255, 0.3)",
              }}
            />
            {!isMobile && (
              <Text
                style={{
                  color: "#fff",
                  fontWeight: 500,
                  textShadow: "0 1px 2px rgba(0, 0, 0, 0.1)",
                }}
              >
                {user?.name || "Admin User"}
              </Text>
            )}
          </Space>
        </Dropdown>
      </Space>
    </AntHeader>
  );
};

export default Header;