"use client";
import React, { useContext, useEffect, useState } from "react";
import { PropsHeader } from "./interface";
import { usePathname } from "next/dist/client/components/navigation";
import { useSelector } from "react-redux";
import { RootState } from "@/redux/store";
import { ContextBaseLayout } from "../../BaseLayout";
import Image from "next/image";
import icons from "@/constant/images/icons";
import { ChevronDown } from "lucide-react";
import clsx from "clsx";
import MenuProfile from "../MenuProfile";

const Header = ({ title, breadcrumb }: PropsHeader) => {
  const pathname = usePathname();
  const { infoUser } = useSelector((state: RootState) => state.user);
  const context = useContext(ContextBaseLayout);

  const [openProfile, setOpenProfile] = useState(false);

  //Đóng menu mobile khi đổi route
  useEffect(() => {
    if (window.innerWidth < 1280) {
      context.setOpenMenuMobile?.(false);
    }
  }, [pathname]);

  const toggleFullScreen = () => {
    if (!document.fullscreenElement) {
      document.documentElement.requestFullscreen();
    } else {
      document.exitFullscreen();
    }
  };

  return (
    <div className="h-full w-full px-6 flex items-center justify-between bg-white relatives">
      <div className="flex items-center gap-4">
        {/* Nút bấm Mobile: Mở menu mobile */}
        <div
          className="xl:hidden cursor-pointer"
          onClick={() => context?.setOpenMenuMobile?.(!context?.openMenuMobile)}
        >
          <Image src={icons.hamburger} alt="menu" width={20} height={20} />
        </div>
        {/* Nút bấm Desktop: Thu gọn/Mở rộng sidebar */}
        <div
          className="hidden xl:block cursor-pointer"
          onClick={() => context?.setShowFull?.(!context?.showFull)}
        >
          <Image src={icons.hamburger} alt="menu" width={20} height={20} />
        </div>
        {breadcrumb ? (
          breadcrumb
        ) : (
          <h4 className="text-[18px] font-bold text-[#141416]">{title}</h4>
        )}
      </div>

      <div className="flex items-center gap-7">
        <div className="cursor-pointer" onClick={toggleFullScreen}>
          <Image src={icons.full_screen} alt="" width={24} height={24} />
        </div>

        <div
          className="relative flex items-center gap-2 cursor-pointer"
          onClick={() => setOpenProfile(!openProfile)}
        >
          <div className="w-10 h-10 rounded-full border-2 border-blue-500 overflow-hidden">
            <Image
              src={
                infoUser?.avatar
                  ? `${process.env.NEXT_PUBLIC_IMAGE}/${infoUser.avatar}`
                  : icons.avatar
              }
              alt="avatar"
              width={40}
              height={40}
            />
          </div>
          <p className="hidden md:block text-sm font-semibold text-[#171832]">
            {infoUser?.fullname || "User admin"}
          </p>
          <ChevronDown
            size={16}
            className={clsx(
              "transition-transform",
              openProfile && "rotate-180",
            )}
          />

          {openProfile && (
            <div className="absolute right-0 top-[120%] z-50">
              <MenuProfile onClose={() => setOpenProfile(false)} />
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default Header;