"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"));

          return (
            <Link
              key={tab.href}
              href={tab.href}
              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>
  );
}
