"use client";

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

const tabs = [
  { href: "/", icon: "home-2", label: "خانه" },
  { href: "/academy", icon: "teacher", label: "آموزشگاه" },
  { href: "/new-post", icon: "add-square", 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 [createTab, setCreateTab] = useState("/new-post");
  const [userTypeS, setUserTypeS] = useState<string | null>(null);
  const [mounted, setMounted] = useState(false);
  const [isDark, setIsDark] = useState(false);

  useEffect(() => {
    setMounted(true);
    if (typeof window !== "undefined") {
      const userType = localStorage.getItem("usertype");
      setUserTypeS(userType);
      setCreateTab(
        userType === "user"
          ? "/new-post"
          : userType === "employer"
            ? "/new-project"
            : "/new-post"
      );
    }
  }, []);

  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, index) => {
          const href = index === 2 ? createTab : tab.href;
          const isActive =
            currentPage === href ||
            (href === "/settings" && currentPage.startsWith("/settings"));

          return (
            <Link
              key={tab.href}
              href={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"
              )}
              onClick={(e) => {
                if (index === 2 && !userTypeS) {
                  e.preventDefault();
                  toast.error("لطفا ابتدا در سایت وارد شوید یا ثبت نام کنید.");
                }
              }}
            >
              <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>
  );
}