"use client";

import { useEffect, useRef, useState } from "react";
import Image from "next/image";
import Link from "next/link";
import { FiMenu, FiSearch, FiX } from "react-icons/fi";
import { useRouter } from "next/navigation";

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

  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;
    });
  };

  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 sm:px-6 lg:px-10">
        <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>

          <Link href="/admin/dashboard">
            <Image
              src="/images/logo.svg"
              alt="KleboAi"
              width={83}
              height={67}
              priority
              className="h-12 w-auto lg:h-16.75"
            />
          </Link>
        </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"
            >
              <Image
                src="/images/user.png"
                alt="Admin Profile"
                fill
                sizes="(max-width: 640px) 40px, 44px"
                className="object-cover"
              />
            </button>
        </div>
      </div>
    </header>
  );
}