"use client";

import Link from "next/link";
import { useEffect, useState } from "react";
import BoldIcon from "@/components/ui/BoldIcon";
import { cn } from "@/lib/utils";

const tabs = [
  { href: "/", icon: "home-2", label: "خانه" },
  { href: "/academy", icon: "teacher", label: "آموزشگاه" },
  { href: "/projects", icon: "briefcase", label: "پروژه‌ها" },
  { href: "/billboards", icon: "flash-circle", label: "بیلبورد" },
  { href: "/settings", icon: "setting", label: "تنظیمات" },
] as const;

type TabNavigationProps = {
  currentPage: string;
};

export default function TabNavigation({ currentPage }: TabNavigationProps) {
  const [mounted, setMounted] = useState(false);
  const [isDark, setIsDark] = useState(false);

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

  useEffect(() => {
    if (typeof window === "undefined") return;
    const checkTheme = () => {
      const theme = localStorage.getItem("theme");
      const isDarkMode =
        theme === "dark" ||
        (theme === "system" &&
          window.matchMedia("(prefers-color-scheme: dark)").matches);
      setIsDark(isDarkMode);
    };
    checkTheme();
    window.addEventListener("storage", checkTheme);
    return () => window.removeEventListener("storage", checkTheme);
  }, []);

  if (!mounted) return null;

  return (
    <nav className="fixed bottom-2 left-1/2 z-50 w-full max-w-xl -translate-x-1/2 px-4 pb-2">
      <div className="glass-panel gentle-transition flex justify-evenly rounded-full border border-white/40 p-2.5 shadow-lg dark:border-white/10">
        {tabs.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={cn(
                "gentle-transition flex flex-col items-center gap-0.5 rounded-2xl px-2 py-1",
                "hover:bg-black/5 active:scale-95 dark:hover:bg-white/10",
                isActive && "tab-active-glass scale-105"
              )}
            >
              <BoldIcon
                name={tab.icon}
                size={28}
                tinted
                className={cn(
                  isActive
                    ? "text-[#ff107d]"
                    : isDark
                      ? "text-zinc-400"
                      : "text-zinc-600"
                )}
              />
              <span
                className={cn(
                  "text-[10px] font-semibold gentle-transition",
                  isActive ? "text-pink-500" : isDark ? "text-zinc-300" : "text-zinc-600"
                )}
              >
                {tab.label}
              </span>
            </Link>
          );
        })}
      </div>
    </nav>
  );
}
