modstagram-next/src/components/TabNavigation.tsx

"use client";

import Link from "next/link";
import { useEffect, useState } from "react";
import BoldIcon from "@/components/ui/BoldIcon";
import { cn } from "@/lib/utils";
import { PAGE_SHELL_CLASS } from "@/constants/pageLayout";
import { useTranslation } from "react-i18next";
import { useTheme } from "@/contexts/ThemeContext";
import { glassBackdropStyle } from "@/lib/glassBackdrop";

const TAB_KEYS = [
  { href: "/", icon: "home-2", labelKey: "tabs.home" },
  { href: "/academy", icon: "teacher", labelKey: "tabs.academy" },
  { href: "/projects", icon: "briefcase", labelKey: "tabs.projects" },
  { href: "/billboards", icon: "flash-circle", labelKey: "tabs.billboards" },
  { href: "/settings", icon: "setting", labelKey: "tabs.settings" },
] as const;

type TabNavigationProps = {
  currentPage: string;
};

export default function TabNavigation({ currentPage }: TabNavigationProps) {
  const { t } = useTranslation("common");
  const { isDark } = useTheme();
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) return null;

  return (
    <nav
      className={cn(
        "fixed bottom-2 left-1/2 z-[55] -translate-x-1/2 pb-2",
        PAGE_SHELL_CLASS
      )}
    >
      <div
        className="glass-panel gentle-transition flex justify-evenly rounded-full border border-[#C3C3C3]/60 p-2.5 shadow-lg dark:border-white/10"
        style={glassBackdropStyle("glass-panel")}
      >
        {TAB_KEYS.map((tab) => {
          const isActive =
            currentPage === tab.href ||
            (tab.href === "/settings" && currentPage.startsWith("/settings")) ||
            (tab.href === "/projects" &&
              (currentPage.startsWith("/projects") ||
                currentPage === "/new-project")) ||
            (tab.href === "/academy" && currentPage.startsWith("/academy"));
          // isActive فقط برای رنگ/هایلایتِ آیکونه — شاملِ زیرصفحه‌ها هم می‌شه (مثلاً
          // /settings/wallet). اگه کلیک روی خودِ همین isActive شرط بشه، وقتی از یه
          // زیرصفحه‌ی تنظیمات روی آیکونِ تنظیمات بزنی، چون isActive از قبل true هست
          // preventDefault صدا زده می‌شه و Link اصلاً navigate نمی‌کنه — کاربر مجبور
          // می‌شد اول یه تبِ دیگه بزنه بعد دوباره تنظیمات، تا واقعاً برگرده به /settings.
          // اینترسپت (برای اسکرول‌به‌بالا/رویدادِ تب) فقط وقتی درسته که دقیقاً همون
          // مسیرِ رَوتِ تب باشیم؛ وگرنه باید بذاریم Link عادی navigate کنه
          const isExactRoot = currentPage === tab.href;

          return (
            <Link
              key={tab.href}
              href={tab.href}
              onClick={(e) => {
                // وقتی تبی که از قبل توش هستیم (دقیقاً همون صفحه‌ی روتش) دوباره زده
                // می‌شه، Next.js چون مسیر عوض نمی‌شه هیچ اسکرول/رفرشی انجام نمی‌ده —
                // طبق درخواست کاربر، مثل اینستاگرام باید صفحه بره بالا و (برای تبِ
                // خانه) جدیدترین پست‌ها هم لود بشن
                if (isExactRoot) {
                  e.preventDefault();
                  window.dispatchEvent(
                    new CustomEvent("app:tab-reselect", {
                      detail: { href: tab.href },
                    })
                  );
                  window.scrollTo({ top: 0, behavior: "smooth" });
                }
              }}
              className="gentle-transition flex flex-col items-center gap-0.5 px-2 py-1 active:scale-95"
            >
              <BoldIcon
                name={tab.icon}
                size={28}
                tinted
                className={cn(
                  isActive
                    ? "text-[#ff107d]"
                    : isDark
                      ? "text-white"
                      : "text-zinc-600"
                )}
              />
              <span
                className={cn(
                  "text-[10px] font-semibold gentle-transition",
                  isActive ? "text-pink-500" : isDark ? "text-neutral-100" : "text-zinc-600"
                )}
              >
                {t(tab.labelKey)}
              </span>
            </Link>
          );
        })}
      </div>
    </nav>
  );
}