"use client";

import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
import { Menu, ShieldCheck, X } from "lucide-react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useLocale, useTranslations } from "next-intl";
import { useEffect, useRef, 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 { buildAdminUrl } from "@/lib/admin-routing";
import { getLocalizedPath, stripLocalePrefix } from "@/lib/locale";
import { toast } from "@/lib/toast";
import { cn } from "@/lib/utils";

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

const disabledDesktopNavItemClassName =
  "relative z-10 inline-flex cursor-not-allowed items-center justify-center rounded-pill px-3.5 py-2 text-sm font-medium text-foreground/55 xl:px-4";

const disabledMobileNavItemClassName =
  "relative inline-flex cursor-not-allowed items-center justify-center rounded-nested px-4 py-3 text-sm font-medium text-foreground/55";

type SiteHeaderProps = {
  lightLogoUrl?: string | null;
  darkLogoUrl?: string | null;
  defaultLocale: "de" | "en" | "ar";
  /**
   * Server-computed via `isSuperAdmin()` in the parent layout — this client
   * component only decides whether to *render* the Admin shortcut link from
   * this flag. It performs no auth check itself and the flag grants no
   * access; the real guard lives on each admin page/action server-side.
   */
  isSuperAdmin?: boolean;
};

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({
  defaultLocale,
  onNavigate,
  mobile = false,
}: {
  defaultLocale: "de" | "en" | "ar";
  onNavigate?: () => void;
  mobile?: boolean;
}) {
  const locale = useLocale();
  const pathname = usePathname();
  const t = useTranslations("navigation");
  const currentPath = stripLocalePrefix(pathname);
  const isArabic = locale === "ar";
  const activeIndicatorLayoutId = mobile ? "mobile-site-nav-active-pill" : "site-nav-active-pill";

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

          if (item.disabled) {
            return (
              <span
                key={item.key}
                aria-disabled="true"
                className={cn(
                  mobile ? disabledMobileNavItemClassName : `${disabledDesktopNavItemClassName} group`,
                  isArabic ? "tracking-normal" : "",
                )}
              >
                {mobile ? (
                  <span>{itemLabel}</span>
                ) : (
                  <>
                    <span className="transition-opacity duration-150 group-hover:opacity-0 group-focus-within:opacity-0">
                      {itemLabel}
                    </span>
                    <span
                      className={cn(
                        "pointer-events-none absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100",
                        isArabic ? "tracking-normal" : "tracking-[0.08em]",
                      )}
                    >
                      {soonLabel}
                    </span>
                  </>
                )}
              </span>
            );
          }

          return (
            <Link
              key={item.key}
              href={getLocalizedPath(locale, itemPath, defaultLocale)}
              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={activeIndicatorLayoutId}
                  className="absolute inset-0 -z-10 rounded-pill bg-primary shadow-xs"
                  transition={{ type: "spring", stiffness: 420, damping: 34, mass: 0.7 }}
                />
              ) : null}
              {itemLabel}
            </Link>
          );
        })()
      ))}
    </>
  );
}

export function SiteHeader({
  lightLogoUrl,
  darkLogoUrl,
  defaultLocale,
  isSuperAdmin = false,
}: SiteHeaderProps) {
  const [isOpen, setIsOpen] = useState(false);
  const [isScrolled, setIsScrolled] = useState(false);
  const [logoReplayKey, setLogoReplayKey] = useState(0);
  const logoClickTimesRef = useRef<number[]>([]);
  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 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";
  const adminButtonClassName =
    "inline-flex h-9 items-center gap-1.5 rounded-pill border border-border/70 bg-background/80 px-3 text-sm font-medium text-foreground/80 backdrop-blur-chrome transition-colors hover:bg-accent hover:text-foreground";
  const mobileAdminButtonClassName =
    "flex h-10 w-10 items-center justify-center rounded-pill border border-border/70 bg-background text-foreground/80 shadow-xs transition-colors hover:bg-accent hover:text-foreground";
  const adminHref = buildAdminUrl("/");

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

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

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

  const handleLogoClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
    setLogoReplayKey((value) => value + 1);

    const now = Date.now();
    const recentClicks = logoClickTimesRef.current.filter((time) => now - time < 1200);
    const nextClicks = [...recentClicks, now];

    logoClickTimesRef.current = nextClicks;

    if (nextClicks.length < 3) {
      return;
    }

    logoClickTimesRef.current = [];
    event.preventDefault();
    toast(t("logoTripleClick"));
  };

  return (
    <motion.header layoutRoot 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, "/", defaultLocale)}
              className="inline-flex items-center gap-2.5 rounded-pill px-1 py-1 sm:gap-3 lg:py-2"
              onClick={handleLogoClick}
            >
              <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={false}
              animate={isScrolled ? { y: -1, scale: 0.985 } : { y: 0, scale: 1 }}
              transition={reducedMotion ? { duration: 0 } : { duration: 0.3, 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 defaultLocale={defaultLocale} />
            </motion.nav>
          </div>

          <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-3 hidden items-center justify-end gap-2 lg:flex",
              isScrolled ? "pointer-events-none invisible" : "",
            )}
          >
            <div className={desktopControlRailClassName}>
              <LocaleToggle
                locale={locale}
                defaultLocale={defaultLocale}
                className={desktopControlButtonClassName}
              />
              <SoundToggle
                ariaLabel={t("soundMute")}
                mutedAriaLabel={t("soundUnmute")}
                mutedToastLabel={t("soundMuted")}
                unmutedToastLabel={t("soundEnabled")}
                variant="ghost"
                className={desktopControlButtonClassName}
              />
              <ThemeToggle
                ariaLabel={t("themeToggle")}
                lightToastLabel={t("themeLight")}
                darkToastLabel={t("themeDark")}
                variant="ghost"
                className={desktopControlButtonClassName}
              />
            </div>
            {isSuperAdmin ? (
              <a href={adminHref} aria-label="Open admin dashboard" className={adminButtonClassName}>
                <ShieldCheck className="h-4 w-4" />
                <span className="hidden xl:inline">Admin</span>
              </a>
            ) : null}
          </motion.div>

          <motion.div
            initial={false}
            animate={{ opacity: 1, x: 0, scale: 1, filter: "blur(0px)" }}
            transition={reducedMotion ? { duration: 0 } : { duration: 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);
                    const itemLabel = t(item.key);
                    const isArabic = locale === "ar";

                    return (
                      <motion.div
                        key={item.key}
                        variants={{
                          open: { opacity: 1, y: 0 },
                          closed: { opacity: 0, y: -8 },
                        }}
                        transition={{ duration: 0.18, ease: "easeOut" }}
                      >
                        {item.disabled ? (
                          <div
                            aria-disabled="true"
                            className="flex cursor-not-allowed items-center justify-between rounded-nested px-4 py-3 text-sm font-medium text-foreground/55"
                          >
                            <div className={cn("inline-flex items-center justify-center", isArabic ? "tracking-normal" : "")}>
                              <span>{itemLabel}</span>
                            </div>
                            <span className="text-xs uppercase tracking-[0.18em] opacity-40">
                              0{navItems.findIndex((navItem) => navItem.key === item.key) + 1}
                            </span>
                          </div>
                        ) : (
                          <Link
                            href={getLocalizedPath(locale, itemPath, defaultLocale)}
                            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>{itemLabel}</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}
                      defaultLocale={defaultLocale}
                      className={mobileControlButtonClassName}
                    />
                    <div className="flex items-center gap-2">
                      <SoundToggle
                        ariaLabel={t("soundMute")}
                        mutedAriaLabel={t("soundUnmute")}
                        mutedToastLabel={t("soundMuted")}
                        unmutedToastLabel={t("soundEnabled")}
                        variant="ghost"
                        className={mobileControlButtonClassName}
                      />
                      <ThemeToggle
                        ariaLabel={t("themeToggle")}
                        lightToastLabel={t("themeLight")}
                        darkToastLabel={t("themeDark")}
                        variant="ghost"
                        className={mobileControlButtonClassName}
                      />
                      {isSuperAdmin ? (
                        <a
                          href={adminHref}
                          aria-label="Open admin dashboard"
                          className={mobileAdminButtonClassName}
                        >
                          <ShieldCheck className="h-4 w-4" />
                        </a>
                      ) : null}
                    </div>
                  </div>
                </motion.div>
              </motion.div>
            </Container>
          </motion.div>
        ) : null}
      </AnimatePresence>
    </motion.header>
  );
}