"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useLocale } from "next-intl";
import clsx from "clsx";

import { Badge, Icon, Typography } from "@/components/ui";
import { useChats } from "@/providers/chats-provider";
import { ROUTES } from "@/shared/constants/client-routes";
import { NavItem, navItems } from "@/shared/constants/navigation";
import { stripLocale } from "@/shared/utils/path";

import styles from "./NavigationBar.module.scss";

const getBadge = (item: NavItem, totalUnreadCount: number) => {
  if (item.badgeId === "unreadCount") return totalUnreadCount;
  return null;
};

export default function NavigationBar() {
  const pathname = usePathname();
  const locale = useLocale();
  const pathnameWithoutLocale = stripLocale(pathname, locale);
  const { totalUnreadCount } = useChats();

  // Hide navigation bar on retaining funnel, portraits pages, and video guides pages
  const isRetainingFunnel = pathnameWithoutLocale.startsWith("/retaining");
  const isPortraitsPage = pathnameWithoutLocale.startsWith("/portraits");
  const isVideoGuidesPage = pathnameWithoutLocale.startsWith("/video-guides");

  if (isRetainingFunnel || isPortraitsPage || isVideoGuidesPage) return null;

  return (
    <>
      {/* Blur background under tab bar */}
      <div className={styles.blurBackground} />

      <nav className={styles.container}>
        {navItems.map(item => {
          const isActive =
            item.href === ROUTES.home()
              ? pathnameWithoutLocale === item.href
              : pathnameWithoutLocale.startsWith(item.href);

          const badge = getBadge(item, totalUnreadCount);

          return (
            <Link
              key={item.key}
              href={item.href}
              className={clsx(styles.item, { [styles.active]: isActive })}
            >
              <Icon name={item.icon} color={isActive ? "#007AFF" : "#8A8D93"}>
                {!!badge && (
                  <Badge className={styles.badge}>
                    <Typography
                      weight="medium"
                      size="xs"
                      color="white"
                      className={styles.badgeContent}
                    >
                      {badge > 99 ? "99+" : badge}
                    </Typography>
                  </Badge>
                )}
              </Icon>
              <Typography weight="medium" className={styles.label}>
                {item.label}
              </Typography>
            </Link>
          );
        })}
      </nav>
    </>
  );
}
