"use client";

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

import NewMessages from "@/components/domains/chat/NewMessages/NewMessages";
import ViewAll from "@/components/domains/chat/ViewAll/ViewAll";
import { useAppUiStore } from "@/providers/app-ui-store-provider";
import { useChats } from "@/providers/chats-provider";
import { ROUTES } from "@/shared/constants/client-routes";
import { stripLocale } from "@/shared/utils/path";

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

export default function GlobalNewMessagesBanner() {
  const { unreadChats } = useChats();

  // Exclude banner on chat-related, settings (profile), and retention funnel pages
  const pathname = usePathname();
  const locale = useLocale();
  const pathnameWithoutLocale = stripLocale(pathname, locale);
  const isExcluded =
    pathnameWithoutLocale.startsWith(ROUTES.chat()) ||
    pathnameWithoutLocale.startsWith(ROUTES.profile()) ||
    pathnameWithoutLocale.startsWith("/retaining");

  const hasHydrated = useAppUiStore(state => state._hasHydrated);
  const { isVisibleAll } = useAppUiStore(state => state.home.newMessages);
  const setHomeNewMessages = useAppUiStore(state => state.setHomeNewMessages);

  if (!hasHydrated || isExcluded || unreadChats.length === 0) return null;

  return (
    <div className={styles.container}>
      {unreadChats.length > 1 && (
        <ViewAll
          count={unreadChats.length}
          isAll={isVisibleAll}
          onClick={() => setHomeNewMessages({ isVisibleAll: !isVisibleAll })}
        />
      )}
      <NewMessages chats={unreadChats} isVisibleAll={isVisibleAll} />
    </div>
  );
}