"use client";

import { useEffect, useRef, useState } from "react";
import Image from "next/image";
import Link from "next/link";
import { FiMenu, FiX } from "react-icons/fi";
import { useRouter } from "next/navigation";
import { useAppSelector } from "../../hooks/useAppRedux";
import { UserImage } from "../ui/CustomImage";
import CustomLink from "../ui/CustomLink";

interface AdminHeaderProps {
  isSidebarOpen?: boolean;
  onSidebarToggle?: () => void;
}

export default function AdminHeader({
  isSidebarOpen = false,
  onSidebarToggle,
}: AdminHeaderProps) {
  const [showMobileSearch, setShowMobileSearch] = useState(false);
  const [searchValue, setSearchValue] = useState("");
  const [isScrolled, setIsScrolled] = useState(false);
  const router = useRouter();

  const mobileSearchRef = useRef<HTMLDivElement | null>(null);
  const profile = useAppSelector((state) => state.user.user);

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 1);
    };

    handleScroll();
    window.addEventListener("scroll", handleScroll);

    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  useEffect(() => {
    function handleClickOutside(event: MouseEvent) {
      if (
        mobileSearchRef.current &&
        !mobileSearchRef.current.contains(event.target as Node)
      ) {
        setShowMobileSearch(false);
      }
    }

    if (showMobileSearch) {
      document.addEventListener("mousedown", handleClickOutside);
    }

    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [showMobileSearch]);

  const handleSearchToggle = () => {
    setShowMobileSearch((prev) => {
      if (prev) setSearchValue("");
      return !prev;
    });
  };

  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted || !profile) return null;

  return (
    <header
      className={`
        fixed left-0 top-0 z-50 w-full transition-all duration-300
        ${
          isScrolled
            ? "bg-white/90 shadow-[0_8px_30px_rgba(0,0,0,0.08)] backdrop-blur-xl"
            : "admin-header-glass"
        }
      `}
    >
      <div className="flex h-16 items-center justify-between gap-3 px-4 py-2 lg:h-20">
        <div className="flex items-center gap-3">
          <button
            type="button"
            onClick={onSidebarToggle}
            className="gradient1 flex h-10 w-10 items-center justify-center rounded-md text-white lg:hidden"
            aria-label={isSidebarOpen ? "Close sidebar" : "Open sidebar"}
          >
            {isSidebarOpen ? <FiX size={22} /> : <FiMenu size={22} />}
          </button>

          <CustomLink href="/">
            <Image
              src="/images/logo.svg"
              alt="KleboAi"
              width={83}
              height={67}
              priority
              className="h-12 w-auto lg:h-16.75"
            />
          </CustomLink>
        </div>

        <div className="ml-auto flex items-center gap-2 sm:gap-4">
          <button
            type="button"
            onClick={() => {
              router.push("/admin/profile");
            }}
            className="cursor-pointer relative h-10 w-10 overflow-hidden rounded-full border-2 border-[#8B5CF6] bg-white sm:h-11 sm:w-11"
            aria-label="Admin profile"
          >
            <UserImage
              src={profile.profilePicture}
              alt="Admin Profile"
              className="h-full w-full rounded-full object-cover"
            />
          </button>
        </div>
      </div>
    </header>
  );
}
