"use client";
import { useState, useEffect } from "react";
import { useAuth } from "@/hooks/use-auth";
import { useMobile } from "@/hooks/use-mobile";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Menu, X, User, LogOut } from "lucide-react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { USER_TYPE } from "@/lib/constants";

const Header = () => {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const isMobile = useMobile();
  const location = usePathname();
  const { user, logoutMutation } = useAuth();

  // Close mobile menu on location change
  useEffect(() => {
    setMobileMenuOpen(false);
  }, [location]);

  // Handler for logout
  const handleLogout = () => {
    logoutMutation.mutate();
  };

  return (
    <header className="sticky top-0 z-50 bg-white shadow-md">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between h-20">
          <div className="flex items-center">
            <div className="flex-shrink-0 flex items-center">
              <Link href="/">
                <span className="text-primary text-2xl font-heading font-bold cursor-pointer">
                  Badagry Museum
                </span>
              </Link>
            </div>
            <nav className="hidden md:ml-10 md:flex space-x-8">
              <Link href="/">
                <span
                  className={`px-3 py-2 rounded-md text-sm font-medium ${
                    location === "/"
                      ? "text-primary font-bold"
                      : "text-neutral-dark hover:text-primary"
                  }`}
                >
                  Home
                </span>
              </Link>
              <Link href="/history">
                <span
                  className={`px-3 py-2 rounded-md text-sm font-medium ${
                    location?.startsWith("/history")
                      ? "text-primary font-bold"
                      : "text-neutral-dark hover:text-primary"
                  }`}
                >
                  History
                </span>
              </Link>
              <Link href="/gallery">
                <span
                  className={`px-3 py-2 rounded-md text-sm font-medium ${
                    location === "/gallery"
                      ? "text-primary font-bold"
                      : "text-neutral-dark hover:text-primary"
                  }`}
                >
                  Gallery
                </span>
              </Link>
              <Link href="/booking">
                <span
                  className={`px-3 py-2 rounded-md text-sm font-medium ${
                    location === "/booking"
                      ? "text-primary font-bold"
                      : "text-neutral-dark hover:text-primary"
                  }`}
                >
                  Book a Visit
                </span>
              </Link>
              <Link href="/community">
                <span
                  className={`px-3 py-2 rounded-md text-sm font-medium ${
                    location === "/community"
                      ? "text-primary font-bold"
                      : "text-neutral-dark hover:text-primary"
                  }`}
                >
                  Community
                </span>
              </Link>
              <Link href="/contact">
                <span
                  className={`px-3 py-2 rounded-md text-sm font-medium ${
                    location === "/contact"
                      ? "text-primary font-bold"
                      : "text-neutral-dark hover:text-primary"
                  }`}
                >
                  Contact
                </span>
              </Link>
              {/* {(user?.userType === USER_TYPE.ATTENDANT ||
                user?.userType === USER_TYPE.ADMIN) && (
                <Link href="/dashboard">
                  <span
                    className={`px-3 py-2 rounded-md text-sm font-medium ${
                      location?.startsWith("/dashboard")
                        ? "text-primary font-bold"
                        : "text-neutral-dark hover:text-primary"
                    }`}
                  >
                    Dashboard
                  </span>
                </Link>
              )} */}
            </nav>
          </div>

          <div className="hidden md:flex items-center justify-end md:flex-1 lg:w-0">
            {user ? (
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <div className="flex items-center gap-2 cursor-pointer">
                    <Avatar className="h-8 w-8">
                      <AvatarImage
                        src={`${user.profileImage}`}
                        alt={user.fullName}
                      />
                      <AvatarFallback className="bg-primary text-white">
                        {user.fullName.charAt(0).toUpperCase()}
                      </AvatarFallback>
                    </Avatar>
                    <span className="text-sm font-medium text-neutral-dark">
                      {user.fullName}
                    </span>
                  </div>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end">
                  <DropdownMenuLabel>My Account</DropdownMenuLabel>
                  <DropdownMenuSeparator />
                  {(user.userType === USER_TYPE.ATTENDANT ||
                    user.userType === USER_TYPE.ADMIN) && (
                    <Link href="/dashboard">
                      <DropdownMenuItem className="cursor-pointer">
                        Dashboard
                      </DropdownMenuItem>
                    </Link>
                  )}
                  <DropdownMenuItem
                    className="cursor-pointer"
                    onClick={handleLogout}
                  >
                    <LogOut className="mr-2 h-4 w-4" />
                    Logout
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            ) : (
              <>
                <Link href="/auth">
                  <span className="whitespace-nowrap text-base font-medium text-neutral-dark hover:text-primary px-4 py-2 cursor-pointer">
                    Sign in
                  </span>
                </Link>
                <Link href="/auth">
                  <Button
                    variant="default"
                    className="ml-4 bg-primary hover:bg-primary-dark"
                  >
                    Register
                  </Button>
                </Link>
              </>
            )}
          </div>

          <div className="flex items-center md:hidden">
            <button
              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
              className="inline-flex items-center justify-center p-2 rounded-md text-neutral-dark hover:text-primary hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary"
            >
              <span className="sr-only">Open main menu</span>
              {mobileMenuOpen ? (
                <X className="block h-8 w-8" aria-hidden="true" />
              ) : (
                <Menu className="block h-8 w-8" aria-hidden="true" />
              )}
            </button>
          </div>
        </div>
      </div>

      {/* Mobile menu */}
      {isMobile && mobileMenuOpen && (
        <div className="md:hidden bg-white shadow-md">
          <div className="px-2 pt-2 pb-3 space-y-1">
            <Link href="/">
              <span
                className={`block px-3 py-2 rounded-md text-base font-medium ${
                  location === "/"
                    ? "text-primary font-bold"
                    : "text-neutral-dark hover:text-primary hover:bg-secondary"
                }`}
              >
                Home
              </span>
            </Link>
            <Link href="/history">
              <span
                className={`block px-3 py-2 rounded-md text-base font-medium ${
                  location?.startsWith("/history")
                    ? "text-primary font-bold"
                    : "text-neutral-dark hover:text-primary hover:bg-secondary"
                }`}
              >
                History
              </span>
            </Link>
            <Link href="/gallery">
              <span
                className={`block px-3 py-2 rounded-md text-base font-medium ${
                  location === "/gallery"
                    ? "text-primary font-bold"
                    : "text-neutral-dark hover:text-primary hover:bg-secondary"
                }`}
              >
                Gallery
              </span>
            </Link>
            <Link href="/booking">
              <span
                className={`block px-3 py-2 rounded-md text-base font-medium ${
                  location === "/booking"
                    ? "text-primary font-bold"
                    : "text-neutral-dark hover:text-primary hover:bg-secondary"
                }`}
              >
                Book a Visit
              </span>
            </Link>
            <Link href="/community">
              <span
                className={`block px-3 py-2 rounded-md text-base font-medium ${
                  location === "/community"
                    ? "text-primary font-bold"
                    : "text-neutral-dark hover:text-primary hover:bg-secondary"
                }`}
              >
                Community
              </span>
            </Link>
            <Link href="/contact">
              <span
                className={`block px-3 py-2 rounded-md text-base font-medium ${
                  location === "/contact"
                    ? "text-primary font-bold"
                    : "text-neutral-dark hover:text-primary hover:bg-secondary"
                }`}
              >
                Contact
              </span>
            </Link>
            {/* {(user?.userType === USER_TYPE.ATTENDANT ||
              user?.userType === USER_TYPE.ADMIN) && (
              <Link href="/dashboard">
                <span
                  className={`block px-3 py-2 rounded-md text-base font-medium ${
                    location?.startsWith("/dashboard")
                      ? "text-primary font-bold"
                      : "text-neutral-dark hover:text-primary hover:bg-secondary"
                  }`}
                >
                  Dashboard
                </span>
              </Link>
            )} */}
          </div>
          <div className="pt-4 pb-3 border-t border-gray-200">
            {user ? (
              <div className="px-4 py-2">
                <div className="flex items-center">
                  <div className="flex-shrink-0">
                    <Avatar className="h-10 w-10">
                      <AvatarImage
                        src={`${user.profileImage}`}
                        alt={user.fullName}
                      />
                      <AvatarFallback className="bg-primary text-white">
                        {user.fullName.charAt(0).toUpperCase()}
                      </AvatarFallback>
                    </Avatar>
                  </div>
                  <div className="ml-3">
                    <div className="text-base font-medium text-neutral-dark">
                      {user.fullName}
                    </div>
                    <div className="text-sm font-medium text-gray-500">
                      {user.email}
                    </div>
                  </div>
                </div>
                <div className="mt-3 space-y-1">
                  <button
                    onClick={handleLogout}
                    className="block w-full text-left px-3 py-2 rounded-md text-base font-medium text-neutral-dark hover:text-primary hover:bg-secondary"
                  >
                    Sign out
                  </button>
                </div>
              </div>
            ) : (
              <div className="px-2 space-y-1">
                <Link href="/auth">
                  <span className="block px-3 py-2 rounded-md text-base font-medium text-neutral-dark hover:text-primary hover:bg-secondary">
                    Sign in
                  </span>
                </Link>
                <Link href="/auth">
                  <span className="block px-3 py-2 rounded-md text-base font-medium text-neutral-dark hover:text-primary hover:bg-secondary">
                    Register
                  </span>
                </Link>
              </div>
            )}
          </div>
        </div>
      )}
    </header>
  );
};

export default Header;
