"use client";

import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
import { LayoutDashboard, Menu, X } from "lucide-react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useLocale, useTranslations } from "next-intl";
import { useEffect, useState } from "react";

import { Container } from "@/components/layout/container";
import { LocaleToggle } from "@/components/layout/locale-toggle";
import { SiteLogo } from "@/components/layout/site-logo";
import { SoundToggle } from "@/components/sound-toggle";
import { ThemeToggle } from "@/components/theme-toggle";
import { Button } from "@/components/ui/button";
import { getLocalizedPath, stripLocalePrefix } from "@/lib/locale";
import { cn } from "@/lib/utils";

const navItems = [
  { key: "home", path: "" },
  { key: "portfolio", path: "/portfolio" },
  { key: "products", path: "/products" },
  { key: "about", path: "/about" },
  { key: "contact", path: "/contact" },
];

type SiteHeaderProps = {
  isAdmin?: boolean;
  lightLogoUrl?: string | null;
  darkLogoUrl?: string | null;
};

function getDirectionalReveal(direction: "rtl" | "ltr") {
  return direction === "rtl"
    ? {
        initial: { opacity: 0, x: -16, clipPath: "inset(0 0 0 100%)", filter: "blur(10px)" },
        animate: { opacity: 1, x: 0, y: 0, clipPath: "inset(0 0 0 0)", filter: "blur(0px)" },
      }
    : {
        initial: { opacity: 0, x: 16, clipPath: "inset(0 100% 0 0)", filter: "blur(10px)" },
        animate: { opacity: 1, x: 0, y: 0, clipPath: "inset(0 0 0 0)", filter: "blur(0px)" },
      };
}

function isNavItemActive(currentPath: string, itemPath: string) {
  if (itemPath === "/") {
    return currentPath === "/";
  }

  return currentPath === itemPath || currentPath.startsWith(`${itemPath}/`);
}

function NavLinks({
  onNavigate,
  mobile = false,
}: {
  onNavigate?: () => void;
  mobile?: boolean;
}) {
  const locale = useLocale();
  const pathname = usePathname();
  const t = useTranslations("navigation");
  const currentPath = stripLocalePrefix(pathname);

  return (
    <>
      {navItems.map((item) => (
        (() => {
          const itemPath = item.path || "/";
          const isActive = isNavItemActive(currentPath, itemPath);

          return (
            <Link
              key={item.key}
              href={getLocalizedPath(locale, itemPath)}
              className={cn(
                "relative z-10 rounded-pill transition-colors",
                mobile ? "px-4 py-3 text-sm font-medium" : "px-3.5 py-2 text-sm font-medium xl:px-4",
                isActive
                  ? "text-primary-foreground"
                  : "text-foreground/70 hover:text-foreground",
              )}
              onClick={onNavigate}
            >
              {isActive ? (
                <motion.span
                  layoutId="site-header-active-tab"
                  className="absolute inset-0 -z-10 rounded-pill bg-primary shadow-xs"
                  transition={{ type: "spring", stiffness: 380, damping: 30 }}
                />
              ) : null}
              {t(item.key)}
            </Link>
          );
        })()
      ))}
    </>
  );
}

export function SiteHeader({
  isAdmin = false,
  lightLogoUrl,
  darkLogoUrl,
}: SiteHeaderProps) {
  const [isOpen, setIsOpen] = useState(false);
  const [isScrolled, setIsScrolled] = useState(false);
  const [logoReplayKey, setLogoReplayKey] = useState(0);
  const pathname = usePathname();
  const locale = useLocale();
  const t = useTranslations("navigation");
  const reducedMotion = useReducedMotion();
  const isArabic = locale === "ar";
  const languageDirection = isArabic ? "rtl" : "ltr";
  const titleMotion = getDirectionalReveal(languageDirection);
  const subtitleMotion = getDirectionalReveal(languageDirection);
  const navEntranceInitial = reducedMotion ? false : { opacity: 0, y: -14, scale: 0.985, filter: "blur(8px)" };
  const navEntranceVisible = { opacity: 1, y: 0, scale: 1, filter: "blur(0px)" };
  const controlEntranceInitial = reducedMotion
    ? false
    : {
        opacity: 0,
        x: languageDirection === "rtl" ? -18 : 18,
        scale: 0.98,
        filter: "blur(8px)",
      };
  const controlEntranceVisible = { opacity: 1, x: 0, scale: 1, filter: "blur(0px)" };
  const mobileMenuInitial = reducedMotion
    ? false
    : {
        opacity: 0,
        x: languageDirection === "rtl" ? -14 : 14,
        scale: 0.94,
        filter: "blur(8px)",
      };
  const mobileMenuVisible = { opacity: 1, x: 0, scale: 1, filter: "blur(0px)" };
  const brandSubtitle = isArabic
    ? "مــــــطـــــــــــــور ويــــــــــب | فــــــــــــريــــــلانــــــســــــر"
    : "Webdesigner Bremen | Freelancer";
  const desktopControlRailClassName =
    "inline-flex items-center gap-1 rounded-pill border border-border/70 bg-background/80 p-1 backdrop-blur-chrome";
  const desktopControlButtonClassName =
    "h-9 w-9 rounded-pill border border-transparent p-0 text-foreground/80 hover:bg-accent hover:text-foreground";
  const mobileControlButtonClassName =
    "h-10 w-10 rounded-pill border border-border/70 bg-background text-foreground/80 shadow-xs hover:bg-accent hover:text-foreground";

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 24);
    };

    handleScroll();
    window.addEventListener("scroll", handleScroll, { passive: true });

    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);

  return (
    <header className="fixed inset-x-0 top-3 z-40 bg-transparent">
      <Container className="max-w-[88rem] px-5 sm:px-6 lg:px-8">
        <div className="relative grid min-h-[4.5rem] grid-cols-[auto_1fr_auto] items-center gap-3 lg:min-h-[5rem]">
          <motion.div
            initial={false}
            animate={isScrolled ? { opacity: 0, x: -28 } : { opacity: 1, x: 0 }}
            transition={reducedMotion ? { duration: 0 } : { duration: 0.3, ease: [0.22, 1, 0.36, 1] }}
            className={cn(
              "col-start-1 flex items-center justify-self-start",
              isScrolled ? "lg:pointer-events-none lg:invisible" : "",
            )}
          >
            <Link
              href={getLocalizedPath(locale)}
              className="inline-flex items-center gap-2.5 rounded-pill px-1 py-1 sm:gap-3 lg:py-2"
              onClick={() => setLogoReplayKey((value) => value + 1)}
            >
              <SiteLogo
                lightLogoUrl={lightLogoUrl}
                darkLogoUrl={darkLogoUrl}
                alt="mohfarawati"
                priority
                className="relative h-10 opacity-95"
                replayKey={logoReplayKey}
                direction={languageDirection}
              />
              <span
                key={`${locale}-${logoReplayKey}`}
                className="flex flex-col justify-center"
              >
                <motion.span
                  initial={reducedMotion ? false : titleMotion.initial}
                  animate={titleMotion.animate}
                  transition={reducedMotion ? { duration: 0 } : { duration: 0.7, delay: 0.12, ease: [0.22, 1, 0.36, 1] }}
                  className={cn(
                    "text-[1.28rem] font-black leading-[1.2] whitespace-nowrap",
                    isArabic ? "text-right" : "",
                  )}
                  dir={isArabic ? "rtl" : undefined}
                >
                  {isArabic ? (
                    <>
                      <span className="text-[hsl(var(--hero-ink))] dark:text-foreground">مــــحـــمــد</span>
                      {" "}
                      <span className="text-primary">فــــرواتـــي</span>
                    </>
                  ) : (
                    <>
                      <span className="text-[hsl(var(--hero-ink))] dark:text-foreground">MOH</span>
                      {" "}
                      <span className="text-primary">FARAWATI</span>
                    </>
                  )}
                </motion.span>
                <motion.span
                  initial={reducedMotion ? false : subtitleMotion.initial}
                  animate={subtitleMotion.animate}
                  transition={reducedMotion ? { duration: 0 } : { duration: 0.7, delay: 0.34, ease: [0.22, 1, 0.36, 1] }}
                  className={cn(
                    "-mt-0.5 text-[0.65rem] font-light leading-[1.2] tracking-[0.008em] text-foreground/78",
                    isArabic ? "text-right" : "",
                  )}
                  dir={isArabic ? "rtl" : undefined}
                >
                  {brandSubtitle}
                </motion.span>
              </span>
            </Link>
          </motion.div>

          <div className="col-start-2 hidden justify-center lg:flex">
            <motion.nav
              initial={navEntranceInitial}
              animate={
                isScrolled
                  ? { opacity: 1, y: -1, scale: 0.985, filter: "blur(0px)" }
                  : navEntranceVisible
              }
              transition={reducedMotion ? { duration: 0 } : { duration: 0.56, delay: 0.22, ease: [0.22, 1, 0.36, 1] }}
              className={cn(
                "inline-flex items-center gap-1 rounded-pill border border-border/70 bg-background/80 p-1.5 backdrop-blur-chrome",
                isArabic ? "w-auto max-w-none" : "min-w-[27rem] max-w-[42rem]",
              )}
            >
              <NavLinks />
            </motion.nav>
          </div>

          <motion.div
            initial={controlEntranceInitial}
            animate={
              isScrolled
                ? { opacity: 0, x: languageDirection === "rtl" ? -28 : 28, scale: 0.98, filter: "blur(4px)" }
                : controlEntranceVisible
            }
            transition={reducedMotion ? { duration: 0 } : { duration: 0.56, delay: 0.3, ease: [0.22, 1, 0.36, 1] }}
            className={cn(
              "col-start-3 hidden items-center justify-end lg:flex",
              isScrolled ? "pointer-events-none invisible" : "",
            )}
          >
            <div className={desktopControlRailClassName}>
              <LocaleToggle
                locale={locale}
                className={desktopControlButtonClassName}
              />
              <SoundToggle
                ariaLabel={t("soundMute")}
                mutedAriaLabel={t("soundUnmute")}
                variant="ghost"
                className={desktopControlButtonClassName}
              />
              <ThemeToggle
                ariaLabel={t("themeToggle")}
                variant="ghost"
                className={desktopControlButtonClassName}
              />
              {isAdmin ? (
                <Button asChild variant="ghost" size="icon" className={desktopControlButtonClassName}>
                  <Link href="/root" aria-label={t("root")}>
                    <LayoutDashboard className="h-4 w-4 transition-transform duration-300 ease-out hover:scale-110" />
                  </Link>
                </Button>
              ) : null}
            </div>
          </motion.div>

          <motion.div
            initial={mobileMenuInitial}
            animate={mobileMenuVisible}
            transition={reducedMotion ? { duration: 0 } : { duration: 0.52, delay: 0.2, ease: [0.22, 1, 0.36, 1] }}
            className="col-start-3 ml-auto justify-self-end lg:hidden"
          >
            <Button
              type="button"
              onClick={() => setIsOpen((open) => !open)}
              variant="ghost"
              size="icon"
              className="h-11 w-11 rounded-pill border border-border/70 bg-background/80 text-foreground backdrop-blur-chrome hover:bg-accent"
              aria-label={isOpen ? t("closeMenu") : t("openMenu")}
            >
              <motion.span
                animate={{ rotate: isOpen ? 180 : 0, scale: isOpen ? 0.96 : 1 }}
                transition={{ duration: 0.2, ease: "easeOut" }}
                className="flex items-center justify-center"
              >
                {isOpen ? <X className="h-4 w-4" /> : <Menu className="h-4 w-4" />}
              </motion.span>
            </Button>
          </motion.div>
        </div>
      </Container>

      <AnimatePresence initial={false}>
        {isOpen ? (
          <motion.div
            initial={{ opacity: 0, y: -14 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -10 }}
            transition={{ duration: 0.22, ease: "easeOut" }}
            className="bg-transparent lg:hidden"
          >
            <Container className="px-5 pb-2 pt-3 sm:px-6 lg:px-8">
              <motion.div
                initial={{ opacity: 0, scale: 0.98 }}
                animate={{ opacity: 1, scale: 1 }}
                exit={{ opacity: 0, scale: 0.98 }}
                transition={{ duration: 0.2, ease: "easeOut" }}
                className="overflow-hidden rounded-surface border border-border/70 bg-card/95 backdrop-blur-chrome"
              >
                <motion.nav
                  initial="closed"
                  animate="open"
                  exit="closed"
                  variants={{
                    open: {
                      transition: {
                        staggerChildren: 0.04,
                        delayChildren: 0.02,
                      },
                    },
                    closed: {
                      transition: {
                        staggerChildren: 0.03,
                        staggerDirection: -1,
                      },
                    },
                  }}
                  className="flex flex-col gap-1 p-2"
                >
                  {navItems.map((item) => {
                    const itemPath = item.path || "/";
                    const isActive = isNavItemActive(stripLocalePrefix(pathname), itemPath);

                    return (
                      <motion.div
                        key={item.key}
                        variants={{
                          open: { opacity: 1, y: 0 },
                          closed: { opacity: 0, y: -8 },
                        }}
                        transition={{ duration: 0.18, ease: "easeOut" }}
                      >
                        <Link
                          href={getLocalizedPath(locale, itemPath)}
                          className={cn(
                            "flex items-center justify-between rounded-nested px-4 py-3 text-sm font-medium transition-colors",
                            isActive
                              ? "bg-accent text-foreground shadow-xs"
                              : "text-foreground/80 hover:bg-accent/70 hover:text-foreground",
                          )}
                          onClick={() => setIsOpen(false)}
                        >
                          <span>{t(item.key)}</span>
                          <span className="text-xs uppercase tracking-[0.18em] opacity-60">
                            0{navItems.findIndex((navItem) => navItem.key === item.key) + 1}
                          </span>
                        </Link>
                      </motion.div>
                    );
                  })}
                </motion.nav>

                <motion.div
                  initial={{ opacity: 0, y: 10 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={{ opacity: 0, y: 8 }}
                  transition={{ duration: 0.18, ease: "easeOut", delay: 0.04 }}
                  className="border-t border-border/70 bg-background/70 p-2"
                >
                  <div className="flex items-center justify-between gap-2">
                    <LocaleToggle
                      locale={locale}
                      className={mobileControlButtonClassName}
                    />
                    <div className="flex items-center gap-2">
                      <SoundToggle
                        ariaLabel={t("soundMute")}
                        mutedAriaLabel={t("soundUnmute")}
                        variant="ghost"
                        className={mobileControlButtonClassName}
                      />
                      <ThemeToggle
                        ariaLabel={t("themeToggle")}
                        variant="ghost"
                        className={mobileControlButtonClassName}
                      />
                      {isAdmin ? (
                        <Button asChild variant="ghost" size="icon" className={mobileControlButtonClassName}>
                          <Link href="/root" aria-label={t("root")} onClick={() => setIsOpen(false)}>
                            <LayoutDashboard className="h-4 w-4 transition-transform duration-300 ease-out hover:scale-110" />
                          </Link>
                        </Button>
                      ) : null}
                    </div>
                  </div>
                </motion.div>
              </motion.div>
            </Container>
          </motion.div>
        ) : null}
      </AnimatePresence>
    </header>
  );
}