"use client";

import { useSidebar } from "@/src/context/admin/SidebarContext";
import Image from "next/image";
import Link from "next/link";
import React, { useState } from "react";
import { useSession } from "@/src/hooks/admin/useSession";
import { UserButton } from "@/src/components/auth/user-menu";
import { useRouter } from "next/navigation";

const AppHeader: React.FC = () => {
  const [isApplicationMenuOpen, setApplicationMenuOpen] = useState(false);
  const { isExpanded, isHovered } = useSidebar();
  const { user } = useSession();
  const router = useRouter();

  const toggleApplicationMenu = () => {
    setApplicationMenuOpen(!isApplicationMenuOpen);
  };

  return (
    <header className="sticky top-0 flex w-full bg-white border-gray-200 z-50 dark:border-gray-800 dark:bg-gray-900 lg:border-b">
      <div className="flex flex-col items-center justify-between grow lg:flex-row lg:px-6">
        {/* Logo */}
        <div
          className={`py-0 flex ${
            !isExpanded && !isHovered ? "lg:justify-center" : "justify-start"
          }`}
        >
          <Link href="/">
            <Image
              className="dark:hidden relative top-0"
              src={`/logo.png`}
              alt="Logo"
              width={100} // slightly bigger
              height={50}
            />
            <Image
              className="hidden dark:block relative top-0"
              src={`/logo.png`}
              alt="Logo"
              width={110}
              height={50}
            />
          </Link>
        </div>

        {/* Shortcut Buttons & User */}
        <div className="flex items-center gap-3 lg:gap-4 ml-auto">
          {/* Shortcut buttons */}
          <div className="flex gap-2">
            <button
              className="px-3 py-1 text-sm font-medium bg-teal-100 text-teal-800 rounded-lg hover:bg-teal-200 transition"
              onClick={() =>
                router.push("/admin/application-list/hip")
              }
            >
              HIP
            </button>
            <button className="px-3 py-1 text-sm font-medium bg-blue-100 text-blue-800 rounded-lg hover:bg-blue-200 transition"  onClick={() =>
                router.push("/admin/application-list/fthb")
              }>
              FTHB
            </button>
            <button className="px-3 py-1 text-sm font-medium bg-purple-100 text-purple-800 rounded-lg hover:bg-purple-200 transition" onClick={() =>
                router.push("/admin/application-list/tmr")}>
              TM
            </button>
          </div>

          {/* User / Sign In */}
          <div className="flex items-center gap-2 2xsm:gap-3">
          {user ? (
              <UserButton user={user} isLoading={false} />
            ) : (
              <Link
                href="/auth/signin"
                className="border border-[#009689] text-white bg-[#009689] hover:bg-[#e8f0ff] hover:border-[#e8f0ff] hover:text-[#5b75d2] transition-colors"
              >
                Sign In
              </Link>
            )}
           
          </div>

          {/* Mobile toggle button */}
          <button
            onClick={toggleApplicationMenu}
            className="flex items-center justify-center w-10 h-10 text-gray-700 rounded-lg hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800 lg:hidden"
          >
            <svg
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                fillRule="evenodd"
                clipRule="evenodd"
                d="M5.99902 10.4951C6.82745 10.4951 7.49902 11.1667 7.49902 11.9951V12.0051C7.49902 12.8335 6.82745 13.5051 5.99902 13.5051C5.1706 13.5051 4.49902 12.8335 4.49902 12.0051V11.9951C4.49902 11.1667 5.1706 10.4951 5.99902 10.4951ZM17.999 10.4951C18.8275 10.4951 19.499 11.1667 19.499 11.9951V12.0051C19.499 12.8335 18.8275 13.5051 17.999 13.5051C17.1706 13.5051 16.499 12.8335 16.499 12.0051V11.9951C16.499 11.1667 17.1706 10.4951 17.999 10.4951ZM13.499 11.9951C13.499 11.1667 12.8275 10.4951 11.999 10.4951C11.1706 10.4951 10.499 11.1667 10.499 11.9951V12.0051C10.499 12.8335 11.1706 13.5051 11.999 13.5051C12.8275 13.5051 13.499 12.8335 13.499 12.0051V11.9951Z"
                fill="currentColor"
              />
            </svg>
          </button>
        </div>
      </div>
    </header>
  );
};

export default AppHeader;