'use client';

import Link from "next/link";
import { useEffect, useRef, useState } from "react";
import { usePathname } from "next/navigation";
import MainLogoSvg from "./svgs/mainlogosvg";
import ChevronDownSvg from "./svgs/chevrondownsvg";

const NAV_ITEMS = [
  { label: "교육 과정 목록", href: "/menu" },
  { label: "학습 자료실", href: "/resources" },
  { label: "공지사항", href: "/notices" },
];

export default function NavBar() {
  const pathname = usePathname();
  const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
  const userMenuRef = useRef<HTMLDivElement | null>(null);
  const userButtonRef = useRef<HTMLButtonElement | null>(null);

  useEffect(() => {
    if (!isUserMenuOpen) return;
    const onDown = (e: MouseEvent) => {
      const t = e.target as Node;
      if (
        userMenuRef.current &&
        !userMenuRef.current.contains(t) &&
        userButtonRef.current &&
        !userButtonRef.current.contains(t)
      ) {
        setIsUserMenuOpen(false);
      }
    };
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") setIsUserMenuOpen(false);
    };
    document.addEventListener("mousedown", onDown);
    document.addEventListener("keydown", onKey);
    return () => {
      document.removeEventListener("mousedown", onDown);
      document.removeEventListener("keydown", onKey);
    };
  }, [isUserMenuOpen]);

  return (
    <header className="bg-[#060958] h-20">
      <div className="mx-auto flex h-full w-full max-w-[1440px] items-center justify-between px-8">
        <div className="flex flex-1 items-center gap-9">
          <Link href="/" aria-label="XR LMS 홈" className="flex items-center gap-2">
            <MainLogoSvg width={46.703} height={36} />
            <span className="text-2xl font-extrabold leading-[1.45] text-white">XR LMS</span>
          </Link>
          <nav className="flex h-full items-center">
            {NAV_ITEMS.map((item) => {
              const isActive = pathname === item.href;
              return (
                <Link
                  key={item.href}
                  href={item.href}
                  className={[
                    "px-4 py-2 text-[16px] font-semibold",
                    isActive ? "text-white" : "text-white/80 hover:text-white",
                  ].join(" ")}
                >
                  {item.label}
                </Link>
              );
            })}
          </nav>
        </div>
        <div className="relative flex items-center gap-2">
          <Link href="/my-courses" className="px-4 py-2 text-[16px] font-semibold text-white hover:text-white">
            내 강좌실
          </Link>
          <button
            ref={userButtonRef}
            type="button"
            onClick={() => setIsUserMenuOpen((v) => !v)}
            aria-haspopup="menu"
            aria-expanded={isUserMenuOpen}
            className="flex items-center gap-1 px-4 py-2 text-[16px] font-semibold text-white cursor-pointer"
          >
            김이름
            <ChevronDownSvg
              width={16}
              height={16}
              className={["transition-transform", isUserMenuOpen ? "rotate-180" : "rotate-0"].join(" ")}
            />
          </button>
          {isUserMenuOpen && (
            <div
              ref={userMenuRef}
              role="menu"
              aria-label="사용자 메뉴"
              className="absolute right-0 top-full mt-2 bg-white rounded-lg shadow-[0_0_8px_0_rgba(0,0,0,0.25)] p-3 z-50"
            >
              <Link
                role="menuitem"
                href="/menu/account"
                className="block w-full h-10 px-2 rounded-lg text-left text-[#333C47] text-[16px] font-medium leading-normal hover:bg-[rgba(236,240,255,0.5)] focus:bg-[rgba(236,240,255,0.5)] outline-none"
                onClick={() => setIsUserMenuOpen(false)}
              >
                내 정보 수정
              </Link>
              <button
                role="menuitem"
                className="w-full h-10 px-2 rounded-lg text-left text-[#333C47] text-[16px] font-medium leading-normal hover:bg-[rgba(236,240,255,0.5)] focus:bg-[rgba(236,240,255,0.5)] outline-none"
              >
                로그아웃
              </button>
            </div>
          )}
        </div>
      </div>
    </header>
  );
}