"use client";

import React, { useEffect, useMemo, useRef, useState } from "react";
import { createPortal } from "react-dom";
import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/navigation";
import {
  Bell,
  ChevronDown,
  LayoutDashboard,
  LifeBuoy,
  LogOut,
  Menu,
  Receipt,
  Search,
  Send as SendIcon,
  Settings,
  Shield,
  Tag,
  Ticket,
  UserCircle,
  Users,
  X,
} from "lucide-react";
import type { NotificationType } from "@/types";
import { Container } from "@/components/common/Container";
import { LogoutConfirmModal } from "@/components/app/LogoutConfirmModal";
import { ThemeToggle } from "@/components/theme/ThemeToggle";
import { LanguageDropdown } from "@/components/i18n/LanguageDropdown";
import { useAuth } from "@/hooks/useAuth";
import { useNotifications } from "@/hooks/useNotifications";
import { useProfileInfo } from "@/hooks/queries/useProfile";
import { useTranslation } from "@/hooks/useTranslation";
import { useTypewriter } from "@/hooks/useTypewriter";
import { cn } from "@/lib/utils";

function relativeTime(iso: string, t: (key: string) => string): string {
  const diff = Date.now() - new Date(iso).getTime();
  const mins = Math.floor(diff / 60000);
  if (mins < 1) return t("app.notifications.timeJustNow");
  if (mins < 60) return t("app.notifications.timeMinutesAgo").replace("{n}", String(mins));
  const hrs = Math.floor(mins / 60);
  if (hrs < 24) return t("app.notifications.timeHoursAgo").replace("{n}", String(hrs));
  const days = Math.floor(hrs / 24);
  if (days < 7) return t("app.notifications.timeDaysAgo").replace("{n}", String(days));
  return t("app.notifications.timeWeeksAgo").replace("{n}", String(Math.floor(days / 7)));
}

const TYPE_CONFIG: Record<NotificationType, { icon: React.ElementType; color: string; bg: string }> = {
  transfer: { icon: SendIcon, color: "text-emerald-600 dark:text-emerald-400", bg: "bg-emerald-50 dark:bg-emerald-500/10" },
  security: { icon: Shield,   color: "text-rose-600 dark:text-rose-400",     bg: "bg-rose-50 dark:bg-rose-500/10"     },
  promo:    { icon: Tag,       color: "text-amber-600 dark:text-amber-400",   bg: "bg-amber-50 dark:bg-amber-500/10"   },
  account:  { icon: UserCircle,color: "text-brand-600 dark:text-brand-400",   bg: "bg-brand-50 dark:bg-brand-500/10"   },
  system:   { icon: Bell,      color: "text-slate-600 dark:text-slate-400",   bg: "bg-slate-100 dark:bg-slate-800"     },
};

const APP_NAV_ROUTES = [
  { href: "/dashboard", labelKey: "app.nav.dashboard", icon: LayoutDashboard },
  { href: "/send", labelKey: "app.nav.send", icon: SendIcon },
  { href: "/recipients", labelKey: "app.nav.recipients", icon: Users },
  { href: "/transactions", labelKey: "app.nav.transactions", icon: Receipt },
  { href: "/notifications", labelKey: "app.nav.notifications", icon: Bell },
  { href: "/profile", labelKey: "app.nav.profile", icon: UserCircle },
  { href: "/settings", labelKey: "app.nav.settings", icon: Settings },
  { href: "/coupons", labelKey: "app.nav.coupons", icon: Ticket },
  { href: "/help", labelKey: "app.nav.help", icon: LifeBuoy },
];

interface Props {
  sidebarOpen: boolean;
  onMenuClick: () => void;
}

export function AppHeader({ sidebarOpen, onMenuClick }: Props) {
  const { t, dir } = useTranslation();
  const { user, signOut } = useAuth();
  const { notifications, unreadCount, markRead, markAllRead, markAllUnread } = useNotifications();
  const router = useRouter();

  const NOTIF_PAGE_SIZE = 8;
  const [visibleCount, setVisibleCount] = useState(NOTIF_PAGE_SIZE);
  const [notifOpen, setNotifOpen] = useState(false);
  const [userOpen, setUserOpen] = useState(false);
  const [logoutOpen, setLogoutOpen] = useState(false);
  const [searchOpen, setSearchOpen] = useState(false);
  const [searchQuery, setSearchQuery] = useState("");
  const [searchOpenDesktop, setSearchOpenDesktop] = useState(false);
  const searchDesktopRef = useRef<HTMLDivElement>(null);
  const notifRef = useRef<HTMLDivElement>(null);
  const notifDesktopRef = useRef<HTMLDivElement>(null);
  const notifMobileRef = useRef<HTMLDivElement>(null);
  const userRef = useRef<HTMLDivElement>(null);
  const mobileSearchRef = useRef<HTMLInputElement>(null);

  const filteredRoutes = APP_NAV_ROUTES.filter((r) => {
    const label = t(r.labelKey);
    return (
      label.toLowerCase().includes(searchQuery.toLowerCase()) ||
      r.href.toLowerCase().includes(searchQuery.toLowerCase())
    );
  });

  // Suggestion phrases hint at what the box searches — nav routes, not free text.
  const searchSuggestions = useMemo(
    () => [
      t("app.header.searchPlaceholder"),
      t("common.searchSuggestTry").replace("{value}", t("app.nav.transactions")),
      t("common.searchSuggestTry").replace("{value}", t("app.nav.recipients")),
    ],
    [t],
  );
  const searchPlaceholder = useTypewriter(searchSuggestions, { paused: Boolean(searchQuery) });

  useEffect(() => {
    function onClick(e: MouseEvent) {
      const target = e.target as Node;
      if (searchDesktopRef.current && !searchDesktopRef.current.contains(target)) {
        setSearchOpenDesktop(false);
      }
      // Mobile: the notification drawer is a full-screen modal — only its own
      // close (X) button dismisses it, not an outside tap.
      if (
        !window.matchMedia("(max-width: 1023px)").matches &&
        notifRef.current && !notifRef.current.contains(target) &&
        !notifDesktopRef.current?.contains(target) &&
        !notifMobileRef.current?.contains(target)
      ) {
        setNotifOpen(false);
      }
      if (userRef.current && !userRef.current.contains(target)) {
        setUserOpen(false);
      }
    }
    function onKey(e: KeyboardEvent) {
      if (e.key === "Escape") {
        setNotifOpen(false);
        setUserOpen(false);
        setSearchOpen(false);
        setSearchOpenDesktop(false);
      }
    }
    document.addEventListener("mousedown", onClick);
    document.addEventListener("keydown", onKey);
    return () => {
      document.removeEventListener("mousedown", onClick);
      document.removeEventListener("keydown", onKey);
    };
  }, []);

  // Lock page scroll while the mobile notification drawer is open — the
  // desktop dropdown (lg:) isn't a full-screen overlay, so it's left scrollable.
  useEffect(() => {
    if (!notifOpen || !window.matchMedia("(max-width: 1023px)").matches) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      document.body.style.overflow = prev;
    };
  }, [notifOpen]);

  useEffect(() => {
    if (searchOpen) {
      mobileSearchRef.current?.focus();
    }
  }, [searchOpen]);

  const { data: profileData } = useProfileInfo();
  const profileInfo = profileData?.user_info;
  const imagePaths = profileData?.image_paths;
  const avatarUrl = imagePaths
    ? profileInfo?.image
      ? `${imagePaths.base_url}${imagePaths.path_location}/${profileInfo.image}`
      : `${imagePaths.base_url}${imagePaths.default_image}`
    : null;

  const recent = notifications.slice(0, visibleCount);
  const hasMoreNotifs = visibleCount < notifications.length;
  const readCount = notifications.length - unreadCount;

  function handleNotifListScroll(e: React.UIEvent<HTMLUListElement>) {
    if (!hasMoreNotifs) return;
    const el = e.currentTarget;
    if (el.scrollTop + el.clientHeight >= el.scrollHeight - 80) {
      setVisibleCount((v) => Math.min(v + NOTIF_PAGE_SIZE, notifications.length));
    }
  }
  const initials = user
    ? `${user.firstName.charAt(0)}${user.lastName.charAt(0)}`.toUpperCase() ||
      user.email.charAt(0).toUpperCase()
    : "?";

  function handleSignOut() {
    signOut();
    router.push("/login");
  }

  return (
    <>
      <header className="sticky top-0 z-30 border-b border-slate-200/70 bg-white/85 backdrop-blur-xl dark:border-slate-800/70 dark:bg-slate-950/85">
        <Container className="flex h-16 items-center gap-3">
          {/* Left — hamburger on mobile/tablet; lang + theme on desktop */}
          <div className="flex items-center gap-2">
            {!sidebarOpen && (
              <button
                type="button"
                onClick={onMenuClick}
                aria-label={t("app.header.openNavigation")}
                className="btn-icon text-slate-500 transition-colors hover:bg-slate-100 hover:text-slate-700 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-200"
              >
                <Menu className="icon-lg" />
              </button>
            )}
            <div className="hidden items-center rounded-xl border border-slate-200/70 dark:border-slate-800/60 xl:flex">
              <LanguageDropdown />
            </div>
            <div className="hidden items-center justify-center rounded-xl border border-slate-200/70 dark:border-slate-800/60 xl:flex">
              <ThemeToggle />
            </div>
          </div>

          {/* Center — search (tablet/desktop) */}
          <div className="relative hidden flex-1 max-w-xl mx-auto md:block px-2" ref={searchDesktopRef}>
            <Search className="pointer-events-none absolute start-5 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
            <input
              type="search"
              value={searchQuery}
              onChange={(e) => {
                setSearchQuery(e.target.value);
                setSearchOpenDesktop(true);
              }}
              onFocus={() => setSearchOpenDesktop(true)}
              placeholder={searchPlaceholder}
              aria-label={t("common.search")}
              className="h-10 w-full rounded-full border border-slate-200 bg-slate-50/70 ps-10 pe-4 text-sm outline-none [-webkit-appearance:none] transition-all duration-200 focus:border-brand-400 focus:bg-white focus:ring-4 focus:ring-brand-500/10 dark:border-slate-700 dark:bg-slate-900/50 dark:text-white dark:focus:border-brand-400 dark:focus:bg-slate-900 dark:focus:ring-brand-400/10"
            />

            {searchOpenDesktop && (
              <div className="absolute left-0 right-0 top-14 z-50 rounded-2xl border border-slate-200/80 bg-white/95 p-2 shadow-elevated backdrop-blur-xl animate-scale-in dark:border-slate-700/80 dark:bg-slate-900/95">
                <div className="flex items-center justify-between px-3 py-1.5">
                  <span className="text-2xs font-bold uppercase tracking-wider text-slate-400 dark:text-slate-500">
                    {t("app.header.navigationRoutesLabel")}
                  </span>
                  <button
                    type="button"
                    onClick={() => {
                      setSearchOpenDesktop(false);
                      setSearchQuery("");
                    }}
                    aria-label={t("common.close")}
                    className="flex h-6 w-6 items-center justify-center rounded-full text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-700 dark:hover:bg-slate-800 dark:hover:text-white"
                  >
                    <X className="h-3.5 w-3.5" />
                  </button>
                </div>
                {filteredRoutes.length > 0 ? (
                  <div className="mt-1 space-y-0.5">
                    {filteredRoutes.map((r) => {
                      const Icon = r.icon;
                      return (
                        <button
                          key={r.href}
                          type="button"
                          onClick={() => {
                            router.push(r.href);
                            setSearchOpenDesktop(false);
                            setSearchQuery("");
                          }}
                          className="flex w-full items-center gap-3 rounded-xl px-3 py-2 text-left text-sm font-medium text-slate-700 transition hover:bg-brand-50 hover:text-brand-600 dark:text-slate-300 dark:hover:bg-brand-500/10 dark:hover:text-brand-400"
                        >
                          <span className="grid h-8 w-8 shrink-0 place-items-center rounded-lg bg-slate-100 dark:bg-slate-800">
                            <Icon className="h-4 w-4 text-slate-500 dark:text-slate-400" />
                          </span>
                          <span className="truncate flex-1">{t(r.labelKey)}</span>
                        </button>
                      );
                    })}
                  </div>
                ) : (
                  <div className="px-4 py-6 text-center text-sm text-slate-500 dark:text-slate-400">
                    {t("app.header.noRoutesFound")}
                  </div>
                )}
              </div>
            )}
          </div>

          {/* Right — search icon (mobile) + notif + user */}
          <div className="flex items-center justify-end gap-2 ms-auto md:ms-0">
            {/* Mobile search trigger */}
            <button
              type="button"
              aria-label={t("common.search")}
              onClick={() => setSearchOpen(true)}
              className="btn-icon border border-slate-200/70 text-slate-500 transition-colors hover:bg-slate-100 hover:text-slate-700 dark:border-slate-800/60 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-200 md:hidden"
            >
              <Search className="icon-md" />
            </button>

            <div className="relative" ref={notifRef}>
              <button
                type="button"
                aria-label={t("app.nav.notifications")}
                aria-expanded={notifOpen}
                onClick={() => {
                  setNotifOpen((o) => !o);
                  setUserOpen(false);
                  setVisibleCount(NOTIF_PAGE_SIZE);
                }}
                className="relative btn-icon border border-slate-200/70 text-slate-500 transition-colors hover:bg-slate-100 hover:text-slate-700 dark:border-slate-800/60 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-200"
              >
                <Bell className="icon-md" />
                {unreadCount > 0 && (
                  <span className="absolute -end-0.5 -top-0.5 flex h-4 min-w-[16px] items-center justify-center rounded-full bg-brand-500 px-1 text-[10px] font-bold leading-none text-white tabular-nums ring-2 ring-white dark:ring-slate-950">
                    {unreadCount > 9 ? "9+" : unreadCount}
                  </span>
                )}
              </button>
              {notifOpen && (() => {
                const notifBody = (
                  <>
                    {/* Header */}
                    <div className="border-b border-slate-100 dark:border-slate-800">
                      <div className="flex items-center justify-between px-4 py-3">
                        <div className="flex items-center gap-2.5">
                          <h3 className="text-[length:var(--text-base-fixed)] font-bold text-slate-900 dark:text-white">
                            {t("app.nav.notifications")}
                          </h3>
                        </div>
                        <button
                          type="button"
                          onClick={() => setNotifOpen(false)}
                          aria-label={t("app.header.closeNotifications")}
                          className="rounded-lg p-1.5 text-slate-400 transition hover:bg-slate-100 hover:text-slate-600 dark:hover:bg-slate-800 dark:hover:text-slate-300"
                        >
                          <X className="icon-md" />
                        </button>
                      </div>
                      {notifications.length > 0 && (
                        <div className="flex items-center gap-1 px-4 pb-2.5">
                          {unreadCount > 0 && (
                            <button
                              type="button"
                              onClick={markAllRead}
                              className="rounded-lg px-2.5 py-1.5 text-[length:var(--text-xs-fixed)] font-semibold text-brand-600 transition hover:bg-brand-50 dark:text-brand-400 dark:hover:bg-brand-500/10"
                            >
                              {t("app.notifications.markAllRead")}
                            </button>
                          )}
                          {readCount > 0 && (
                            <button
                              type="button"
                              onClick={markAllUnread}
                              className="rounded-lg px-2.5 py-1.5 text-[length:var(--text-xs-fixed)] font-semibold text-slate-500 transition hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800"
                            >
                              {t("app.notifications.markAllUnread")}
                            </button>
                          )}
                        </div>
                      )}
                    </div>

                    {/* List */}
                    <ul
                      onScroll={handleNotifListScroll}
                      className="flex-1 divide-y divide-slate-100 overflow-y-auto dark:divide-slate-800 lg:max-h-[360px] lg:flex-none"
                    >
                      {recent.length === 0 ? (
                        <li className="p-8 text-center">
                          <Bell className="mx-auto mb-3 h-8 w-8 text-slate-300 dark:text-slate-600" />
                          <p className="text-sm font-medium text-slate-500 dark:text-slate-400">
                            {t("app.notifications.empty")}
                          </p>
                        </li>
                      ) : (
                        <>
                          {recent.map((n) => {
                            const cfg = TYPE_CONFIG[n.type] ?? TYPE_CONFIG.system;
                            const TypeIcon = cfg.icon;
                            // Some sources only send one message string — the "title" is then
                            // just a truncated prefix of the body. Collapse to one line then,
                            // instead of showing the same sentence twice.
                            const titleIsRedundant = n.body.startsWith(n.title.replace(/…$/, ""));
                            return (
                              <li key={n.id}>
                                <button
                                  type="button"
                                  onClick={() => markRead(n.id)}
                                  className="flex w-full gap-3 p-4 text-left transition-colors hover:bg-slate-50/80 dark:hover:bg-slate-800/40"
                                >
                                  <div className={cn("relative mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-full", cfg.bg)}>
                                    <TypeIcon
                                      className={cn(
                                        "h-4.5 w-4.5",
                                        cfg.color,
                                        n.type === "transfer" && dir === "rtl" && "[transform:scaleX(-1)]",
                                      )}
                                      aria-hidden
                                    />
                                    {!n.read && (
                                      <span className="absolute -bottom-0.5 -end-0.5 h-2.5 w-2.5 rounded-full border-2 border-white bg-brand-500 dark:border-slate-900" />
                                    )}
                                  </div>
                                  <div className="min-w-0 flex-1">
                                    {titleIsRedundant ? (
                                      <p className={cn(
                                        "line-clamp-2 text-sm leading-snug",
                                        n.read ? "font-normal text-slate-400 dark:text-slate-500" : "font-medium text-slate-700 dark:text-slate-200",
                                      )}>
                                        {n.body}
                                      </p>
                                    ) : (
                                      <>
                                        <p className={cn(
                                          "text-sm leading-snug",
                                          n.read ? "font-normal text-slate-400 dark:text-slate-500" : "font-medium text-slate-700 dark:text-slate-200",
                                        )}>
                                          {n.title}
                                        </p>
                                        <p className="mt-0.5 line-clamp-2 text-xs leading-relaxed text-slate-500 dark:text-slate-400">
                                          {n.body}
                                        </p>
                                      </>
                                    )}
                                    <p className="mt-1.5 text-2xs font-semibold uppercase tracking-wider text-slate-400 dark:text-slate-500">
                                      {relativeTime(n.createdAt, t)}
                                    </p>
                                  </div>
                                  {!n.read && (
                                    <span className="mt-0.5 shrink-0 self-start rounded-full bg-brand-500/10 px-2 py-0.5 text-2xs font-bold uppercase tracking-wide text-brand-600 dark:text-brand-400">
                                      {t("app.notifications.newBadge")}
                                    </span>
                                  )}
                                </button>
                              </li>
                            );
                          })}
                          {hasMoreNotifs && (
                            <li className="flex items-center justify-center p-4">
                              <div className="h-4 w-4 animate-spin rounded-full border-2 border-slate-300 border-t-brand-600 dark:border-slate-700 dark:border-t-brand-400" />
                            </li>
                          )}
                        </>
                      )}
                    </ul>

                    {/* Footer */}
                    <div className="border-t border-slate-100 bg-slate-50/50 p-2 dark:border-slate-800 dark:bg-slate-900/50">
                      <Link
                        href="/notifications"
                        onClick={() => setNotifOpen(false)}
                        className="block w-full rounded-xl px-4 py-2.5 text-center text-xs font-bold uppercase tracking-wider text-brand-600 transition hover:bg-brand-50 dark:text-brand-400 dark:hover:bg-brand-500/10"
                      >
                        {t("app.notifications.seeAll")}
                      </Link>
                    </div>
                  </>
                );

                return (
                  <>
                    {/* Desktop dropdown — anchored to the bell */}
                    <div
                      ref={notifDesktopRef}
                      role="menu"
                      className="absolute end-0 z-40 mt-2 hidden w-96 overflow-hidden rounded-2xl border border-slate-200/80 bg-white/95 shadow-elevated backdrop-blur-xl animate-scale-in dark:border-slate-700/80 dark:bg-slate-900/95 lg:block"
                    >
                      {notifBody}
                    </div>

                    {/* Mobile full-screen drawer — portaled to escape header stacking/containing-block */}
                    {createPortal(
                      <div className="lg:hidden">
                        <div className="fixed inset-0 z-40 bg-slate-900/50 backdrop-blur-sm" aria-hidden />
                        <div
                          ref={notifMobileRef}
                          role="menu"
                          className="fixed inset-y-0 end-0 z-50 flex w-full flex-col overflow-hidden bg-white shadow-2xl animate-slide-in-right dark:bg-slate-900 rtl:animate-slide-in-left"
                        >
                          {notifBody}
                        </div>
                      </div>,
                      document.body,
                    )}
                  </>
                );
              })()}
            </div>

            <div className="relative" ref={userRef}>
              <button
                type="button"
                aria-label={t("app.header.accountMenu")}
                aria-expanded={userOpen}
                aria-haspopup="menu"
                onClick={() => {
                  setUserOpen((o) => !o);
                  setNotifOpen(false);
                }}
                className="group flex items-center gap-2 rounded-full p-1 pe-2.5 transition-all duration-200 hover:bg-slate-100/80 dark:hover:bg-slate-800/70 focus:outline-none"
              >
                {avatarUrl ? (
                  <Image
                    src={avatarUrl}
                    alt={user?.firstName ?? "avatar"}
                    width={32}
                    height={32}
                    className="h-8 w-8 shrink-0 rounded-full object-cover ring-2 ring-slate-200/80 transition-all duration-200 group-hover:ring-brand-500/50 dark:ring-slate-700/80"
                    unoptimized
                  />
                ) : (
                  <span className="grid h-8 w-8 shrink-0 place-items-center rounded-full bg-gradient-to-br from-brand-500 to-accent-500 text-xs font-bold text-white shadow-sm ring-2 ring-slate-200/80 transition-all duration-200 group-hover:ring-brand-500/50 dark:ring-slate-700/80">
                    {initials}
                  </span>
                )}
                <span className="hidden text-sm font-semibold text-slate-700 transition-colors group-hover:text-slate-900 dark:text-slate-200 dark:group-hover:text-white sm:block">
                  {user?.firstName || user?.email}
                </span>
                <ChevronDown
                  className={cn(
                    "hidden h-3.5 w-3.5 shrink-0 text-slate-400 transition-transform duration-200 group-hover:text-slate-600 dark:group-hover:text-slate-300 sm:block",
                    userOpen && "rotate-180 text-brand-600 dark:text-brand-400",
                  )}
                />
              </button>
              {userOpen && (
                <div
                  role="menu"
                  className="absolute end-0 z-40 mt-2 w-72 sm:w-80 overflow-visible rounded-2xl border border-slate-200/80 bg-white/95 shadow-elevated backdrop-blur-xl animate-scale-in dark:border-slate-700/80 dark:bg-slate-900/95"
                >
                  <div className="border-b border-slate-100 px-4 py-3 dark:border-slate-800">
                    <div className="flex items-center gap-3">
                      {avatarUrl ? (
                        <Image
                          src={avatarUrl}
                          alt={user?.firstName ?? "avatar"}
                          width={40}
                          height={40}
                          unoptimized
                          className="h-10 w-10 shrink-0 rounded-full object-cover ring-2 ring-slate-200/80 dark:ring-slate-700/80"
                        />
                      ) : (
                        <span className="grid h-10 w-10 shrink-0 place-items-center rounded-full bg-gradient-to-br from-brand-500 to-accent-500 text-sm font-bold text-white ring-2 ring-slate-200/80 dark:ring-slate-700/80">
                          {initials}
                        </span>
                      )}
                      <div className="min-w-0">
                        <p className="truncate text-sm font-semibold text-slate-900 dark:text-white">
                          {user?.firstName || user?.email}
                        </p>
                        <p className="truncate text-xs text-slate-500 dark:text-slate-400">
                          {user?.email}
                        </p>
                      </div>
                    </div>
                  </div>

                  <div className="p-1 border-b border-slate-100 dark:border-slate-800">
                    <Link
                      href="/profile"
                      onClick={() => setUserOpen(false)}
                      className="flex items-center gap-2.5 rounded-xl px-3 py-2.5 text-sm font-medium text-slate-700 transition hover:bg-slate-50 dark:text-slate-200 dark:hover:bg-slate-800/70"
                    >
                      <UserCircle className="icon-md text-slate-400" />
                      {t("app.nav.profile")}
                    </Link>
                    <Link
                      href="/settings"
                      onClick={() => setUserOpen(false)}
                      className="flex items-center gap-2.5 rounded-xl px-3 py-2.5 text-sm font-medium text-slate-700 transition hover:bg-slate-50 dark:text-slate-200 dark:hover:bg-slate-800/70"
                    >
                      <Settings className="icon-md text-slate-400" />
                      {t("app.nav.settings")}
                    </Link>
                  </div>

                  {/* Encapsulated Navbar Items (Language & Theme) under Profile Modal on Tablet/Mobile */}
                  <div className="border-b border-slate-100 p-3 dark:border-slate-800 space-y-3 xl:hidden">
                    <div className="space-y-1.5">
                      <span className="text-xs font-semibold text-slate-500 dark:text-slate-400 block whitespace-nowrap">
                        {t("language.switch")}
                      </span>
                      <LanguageDropdown inline />
                    </div>
                    <div className="space-y-1.5">
                      <span className="text-xs font-semibold text-slate-500 dark:text-slate-400 block whitespace-nowrap">
                        {t("common.theme")}
                      </span>
                      <ThemeToggle inline />
                    </div>
                  </div>

                  <div className="p-1">
                    <button
                      type="button"
                      onClick={() => {
                        setUserOpen(false);
                        setLogoutOpen(true);
                      }}
                      className="flex w-full items-center gap-2.5 rounded-xl px-3 py-2.5 text-sm font-medium text-rose-600 transition hover:bg-rose-50 dark:text-rose-400 dark:hover:bg-rose-500/10"
                    >
                      <LogOut className="icon-md" />
                      {t("app.nav.signOut")}
                    </button>
                  </div>
                </div>
              )}
            </div>
          </div>
        </Container>
      </header>

      {/* Mobile search overlay */}
      {searchOpen && (
        <div className="fixed inset-0 z-50 flex flex-col bg-white dark:bg-slate-950 md:hidden animate-fade-in" role="search">
          {/* Top header bar */}
          <div className="flex shrink-0 items-center gap-3 border-b border-slate-200/80 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
            <div className="flex flex-1 items-center gap-2.5 rounded-xl border border-slate-200 bg-slate-50 px-3 py-2.5 outline-none transition-all duration-200 focus-within:border-brand-400 focus-within:bg-white focus-within:ring-4 focus-within:ring-brand-500/10 dark:border-slate-700 dark:bg-slate-900 dark:focus-within:border-brand-400 dark:focus-within:bg-slate-900 dark:focus-within:ring-brand-400/10">
              <Search className="h-4 w-4 shrink-0 text-slate-400" />
              <input
                ref={mobileSearchRef}
                type="search"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                placeholder={searchPlaceholder}
                aria-label={t("common.search")}
                className="w-full flex-1 border-0 bg-transparent p-0 text-sm text-slate-900 outline-none focus:border-0 focus:outline-none focus:ring-0 focus:shadow-none [-webkit-appearance:none] placeholder:text-slate-400 dark:text-white"
              />
            </div>
            <button
              type="button"
              aria-label={t("app.header.closeSearch")}
              onClick={() => setSearchOpen(false)}
              className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-slate-200 text-slate-500 transition hover:bg-slate-100 dark:border-slate-700 dark:text-slate-400 dark:hover:bg-slate-800"
            >
              <X className="h-4 w-4" />
            </button>
          </div>

          {/* Full height scrollable body */}
          <div className="flex-1 overflow-y-auto p-4">
            <div className="px-3 py-1.5 text-2xs font-bold uppercase tracking-wider text-slate-400 dark:text-slate-500">
              {t("app.header.navigationRoutesLabel")}
            </div>
            {filteredRoutes.length > 0 ? (
              <div className="mt-1 space-y-0.5">
                {filteredRoutes.map((r) => {
                  const Icon = r.icon;
                  return (
                    <button
                      key={r.href}
                      type="button"
                      onClick={() => {
                        router.push(r.href);
                        setSearchOpen(false);
                        setSearchQuery("");
                      }}
                      className="flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-left text-sm font-medium text-slate-700 transition hover:bg-brand-50 hover:text-brand-600 dark:text-slate-300 dark:hover:bg-brand-500/10 dark:hover:text-brand-400"
                    >
                      <span className="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-slate-100 dark:bg-slate-800">
                        <Icon className="h-4.5 w-4.5 text-slate-500 dark:text-slate-400" />
                      </span>
                      <span className="truncate flex-1">{t(r.labelKey)}</span>
                    </button>
                  );
                })}
              </div>
            ) : (
              <div className="px-4 py-8 text-center text-sm text-slate-500 dark:text-slate-400">
                {t("app.header.noRoutesFound")}
              </div>
            )}
          </div>
        </div>
      )}

      <LogoutConfirmModal
        open={logoutOpen}
        onClose={() => setLogoutOpen(false)}
        onConfirm={handleSignOut}
      />
    </>
  );
}