hedieh-mezon/src/components/layout/Header.tsx

"use client";

import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useEffect, useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faBars, faChevronDown, faUser, faXmark } from "@fortawesome/free-solid-svg-icons";
import {
  businessDashboardUrl,
  customerDashboardUrl,
  navLinks,
} from "@/lib/site-config";

type HeaderSession = {
  name: string;
  isAdmin: boolean;
};

export default function Header() {
  const pathname = usePathname();
  const [open, setOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  const [session, setSession] = useState<HeaderSession | null>(null);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  useEffect(() => {
    const controller = new AbortController();

    fetch("/api/auth/session", {
      credentials: "same-origin",
      signal: controller.signal,
      cache: "no-store",
    })
      .then((response) => (response.ok ? response.json() : { user: null }))
      .then((data: { user?: HeaderSession | null }) => setSession(data.user || null))
      .catch(() => undefined);

    return () => controller.abort();
  }, []);

  useEffect(() => {
    if (!open) return;

    const previousOverflow = document.body.style.overflow;
    const closeOnEscape = (event: KeyboardEvent) => {
      if (event.key === "Escape") setOpen(false);
    };

    document.body.style.overflow = "hidden";
    window.addEventListener("keydown", closeOnEscape);

    return () => {
      document.body.style.overflow = previousOverflow;
      window.removeEventListener("keydown", closeOnEscape);
    };
  }, [open]);

  return (
    <header
      className={`sticky top-0 z-50 transition-colors ${
        pathname === "/" && !scrolled ? "bg-cream" : "bg-white shadow-[0_1px_0_0_#e6e6e6]"
      }`}
    >
      <div className="mx-auto flex h-16 max-w-7xl flex-row-reverse items-center justify-between px-5 sm:px-8 lg:h-20 lg:flex-row">
        <Link href="/" className="flex items-center gap-2" aria-label="هدیه مزون - صفحه اصلی">
          <Image
            src="/images/brand/logo.png"
            alt="هدیه مزون"
            width={112}
            height={55}
            className="h-8 w-auto lg:h-9"
            priority
          />
        </Link>

        <nav className="hidden items-center gap-9 lg:flex" aria-label="پیمایش اصلی">
          {navLinks.map((link) => {
            const active = pathname === link.href;
            return (
              <Link
                key={link.href}
                href={link.href}
                className={`text-[15px] transition-colors hover:text-primary ${
                  active ? "text-primary" : "text-ink"
                }`}
              >
                {link.label}
              </Link>
            );
          })}
        </nav>

        <div dir="ltr" className="flex items-center gap-3 lg:flex-row-reverse lg:gap-4">
          <button
            type="button"
            onClick={() => setOpen((v) => !v)}
            className="grid h-10 w-10 place-items-center rounded-full border border-ink/15 lg:hidden"
            aria-label={open ? "بستن منو" : "باز کردن منو"}
            aria-expanded={open}
            aria-controls="mobile-navigation"
          >
            <FontAwesomeIcon icon={open ? faXmark : faBars} className="text-base" />
          </button>
          {session ? (
            <details dir="rtl" className="group relative">
              <summary className="flex h-10 cursor-pointer list-none items-center gap-2 rounded-full border border-ink/15 px-3 text-sm text-ink transition-colors hover:border-primary hover:text-primary marker:content-none [&::-webkit-details-marker]:hidden">
                <FontAwesomeIcon icon={faUser} aria-hidden="true" className="text-sm" />
                <span>{session.name} عزیز</span>
                <FontAwesomeIcon
                  icon={faChevronDown}
                  aria-hidden="true"
                  className="text-[10px] transition-transform group-open:rotate-180"
                />
              </summary>
              <div className="absolute left-0 top-[calc(100%+10px)] z-50 min-w-44 overflow-hidden rounded-xl border border-border bg-white py-2 shadow-lg shadow-black/5">
                <a
                  href={customerDashboardUrl}
                  className="block px-4 py-2.5 text-sm text-ink transition-colors hover:bg-cream hover:text-primary"
                >
                  پروفایل من
                </a>
                {session.isAdmin && (
                  <a
                    href={businessDashboardUrl}
                    className="block px-4 py-2.5 text-sm text-ink transition-colors hover:bg-cream hover:text-primary"
                  >
                    مدیریت وبسایت
                  </a>
                )}
                <form action="/api/auth/logout" method="post" className="border-t border-border">
                  <button
                    type="submit"
                    className="w-full px-4 py-2.5 text-right text-sm text-ink transition-colors hover:bg-cream hover:text-primary"
                  >
                    خروج
                  </button>
                </form>
              </div>
            </details>
          ) : (
            <a
              href={`${customerDashboardUrl}/login?redirect=%2F`}
              className="grid h-10 w-10 place-items-center rounded-full border border-ink/15 text-ink transition-colors hover:border-primary hover:text-primary"
              aria-label="ورود یا حساب کاربری"
              title="ورود یا حساب کاربری"
            >
              <FontAwesomeIcon icon={faUser} aria-hidden="true" className="text-sm" />
            </a>
          )}
          <Link
            dir="rtl"
            href="/contact"
            className="hidden rounded-full border border-ink/15 px-5 py-2 text-sm transition-colors hover:border-primary hover:text-primary lg:inline-block"
          >
            تماس با ما
          </Link>
        </div>
      </div>

      <button
        type="button"
        aria-label="بستن منوی موبایل"
        aria-hidden={!open}
        tabIndex={open ? 0 : -1}
        onClick={() => setOpen(false)}
        className={`fixed inset-x-0 bottom-0 top-16 z-40 bg-black/15 backdrop-blur-sm transition-opacity duration-300 lg:hidden ${
          open ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"
        }`}
      />

      <div
        id="mobile-navigation"
        aria-hidden={!open}
        inert={!open}
        className={`fixed bottom-0 right-0 top-16 z-50 w-[min(82vw,320px)] border-l border-border bg-white shadow-[-12px_0_30px_rgba(36,31,26,0.08)] transition-transform duration-300 ease-out lg:hidden ${
          open ? "translate-x-0" : "translate-x-full"
        }`}
      >
        <nav
          className="h-full overflow-y-auto bg-white px-5 py-6"
          aria-label="پیمایش موبایل"
        >
          <ul className="flex flex-col gap-1">
            {navLinks.map((link) => (
              <li key={link.href}>
                <Link
                  href={link.href}
                  onClick={() => setOpen(false)}
                  className={`block rounded-lg px-3 py-3 text-[15px] ${
                    pathname === link.href ? "bg-cream-deep/50 text-primary" : "text-ink"
                  }`}
                >
                  {link.label}
                </Link>
              </li>
            ))}
          </ul>
        </nav>
      </div>
    </header>
  );
}