'use client'
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import { useQuery } from '@tanstack/react-query';
import { useDispatch, useSelector } from 'react-redux';
import dynamic from 'next/dynamic';
import { loadStripe } from '@stripe/stripe-js';
import { Elements } from '@stripe/react-stripe-js';
import { FiArrowLeft } from 'react-icons/fi';
import { AppStore } from '@/lib/store';
import { useTranslation } from '@/Utils/Hooks/useTranslate';
import CustomFetch from '@/Utils/APIRequest/AxiosInstance';
import { BrandTerminateJobAPI, CampaignAPI, ChaseUpNotificationAPI, GeneralSettingsAPI, InfluencerArchiveAPI } from '@/Utils/APIRequest/Endpoints';
import { setUnreadCounts, resetUnread, setActiveGroupId } from '@/lib/Features/UnreadCountSlice/unreadCountSlice';
import usePost from '@/Utils/Hooks/usePost';
import { LocalSeenProvider } from '@/Utils/Hooks/useLocalSeen';
import { CustomToast } from '@/Utils/CustomToast';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import SearchInput from '@/Component/Common/Forms/SearchInput';
import GradientButton from '@/Component/Common/Forms/GradientButton';
import CampaignManagementDetail from '@/Component/Brand/MyCampaigns/CampaignDetail/CampaignDetailsTabs/CampaignManagement/CampaignManagementDetail';
import DraftModal from '@/Component/Brand/MyCampaigns/CampaignDetail/CampaignDetailsTabs/CampaignManagement/CampaignManagementDetail/DraftInfo/DraftModal';
import QuotationApproveModal from '@/Component/Brand/MyCampaigns/CampaignDetail/CampaignDetailsTabs/CampaignManagement/CampaignManagementDetail/QuotationApproveModal';
import CompletionRequestModal from '@/Component/Brand/MyCampaigns/CampaignDetail/CampaignDetailsTabs/CampaignManagement/CampaignManagementDetail/CompletionRequestModal';
import CampaignRestrictModal from '@/Component/Brand/MyCampaigns/CampaignDetail/CampaignDetailsTabs/CampaignManagement/CampaignManagementDetail/CampaignRestrictModal';
import DisputeModal from '@/Component/Common/DisputeModal';
import NeedHelpConfirmModal from '@/Component/Common/NeedHelpConfirmModal';
import { flushActiveComposerDraft } from '@/Component/Common/CampaignChatInfo/composerDraftStorage';
import { notifyCometChatRead } from '@/Utils/notifyCometChatRead';
import BrandMessageFilters from './BrandMessageFilters';
import ConversationItem from './ConversationItem';
import InfluencerBanner from './InfluencerBanner';
import PinnedBanner from './PinnedBanner';
import CampaignStrip from './CampaignStrip';
import CampaignActionButtons from './CampaignActionButtons';
import { CONVERSATIONS_PAGE_SIZE, fetchAllConversationsOnce, filterConversationsLocally, mapGroupToConversation, resolveConversationIds, withConversationStatus, type MappedConversation, } from './cometConversations';
import { countCampaignUnreadPeople, countPeopleWithUnread, countPeopleWithUnreadByStatus, getConversationListBadge, getConversationMessagePreview, inferStageFromChatMessage, isActionUnreadEvent, isBrandOwnedActionMessage, isCometGroupLifecycleMessage, shouldCountMessageAsBrandUnread, STAGE_KEYS, } from './stageUtils';

const CampaignChatInfo = dynamic(() => import('@/Component/Common/CampaignChatInfo'), { ssr: false });

const STRIPE_PUBLIC_KEY: any = process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY;
const stripePromise = loadStripe(STRIPE_PUBLIC_KEY);

const BrandMessages = () => {
  const { translations } = useTranslation();
  const router = useRouter();
  const searchParams = useSearchParams();
  const dispatch = useDispatch();
  const userDetails: any = useSelector((state: AppStore) => state.userDetailSlice?.userDetails);
  const unreadCounts = useSelector((state: AppStore) => state.unreadCountSlice?.counts || {});

  const initialCampaignId = searchParams.get('campaignId');
  const [selectedCampaignId, setSelectedCampaignId] = useState<string | 'all'>(initialCampaignId || 'all');
  const [activeFilter, setActiveFilter] = useState('working');
  const [search, setSearch] = useState('');
  const [selectedConversation, setSelectedConversation] = useState<any>(null);
  const [openSideModal, setOpenSideModal] = useState<any>(null);
  const [draftModalOpen, setDraftModalOpen] = useState<any>(null);
  const [approveModalOpen, setApproveModalOpen] = useState<any>(null);
  const [completionRequestModalOpen, setCompletionRequestModalOpen] = useState<any>(null);
  const [disputeModal, setDisputeModal] = useState<any>(null);
  const [needHelpConfirmModal, setNeedHelpConfirmModal] = useState<any>(null);
  const [restrictModalOpen, setRestrictModalOpen] = useState(false);
  const [mediaUploading, setMediaUploading] = useState(false);
  const [uploadLoader, setUploadLoader] = useState(false);
  const [commentDrafts, setCommentDrafts] = useState<Record<string, string>>({});
  const [chaseGroup, setChaseGroup] = useState<any>(null);
  /** Bump after local action/status sends so open chat refetches (sender has no listener echo). */
  const [chatRefreshKey, setChatRefreshKey] = useState(0);
  /** Full list from ChatCustomFetch — fetched once */
  const [allConversationsCache, setAllConversationsCache] = useState<MappedConversation[]>([]);
  /** ManagementDetail status wins over stale CometChat tags after approve/reject */
  const statusOverrideRef = useRef<Record<string, string>>({});
  const [conversationsLoading, setConversationsLoading] = useState(false);
  const [visibleCount, setVisibleCount] = useState(CONVERSATIONS_PAGE_SIZE);
  const [resolvingConversation, setResolvingConversation] = useState(false);
  const listScrollRef = useRef<HTMLDivElement>(null);
  const conversationsFetchedRef = useRef(false);
  const selectedConversationIdRef = useRef<string | null>(null);
  const conversationsCacheRef = useRef<MappedConversation[]>([]);
  const pendingNewConversationRef = useRef<Set<string>>(new Set());
  const refetchDetailRef = useRef<() => void>(() => { });
  const dispatchRef = useRef(dispatch);
  const markMessageReadRef = useRef<(message: any) => void>(() => { });

  dispatchRef.current = dispatch;
  conversationsCacheRef.current = allConversationsCache;

  const [, setIsComponentVisible] = useState(false);

  useEffect(() => {
    if (initialCampaignId) setSelectedCampaignId(initialCampaignId);
  }, [initialCampaignId]);

  // Running campaigns for selector
  const { data: campaignListData } = useQuery({
    queryKey: [`${CampaignAPI}/list`, 'messages-running'],
    queryFn: () =>
      CustomFetch(
        { url: `${CampaignAPI}/list`, params: { page: 1, per_page: 50, sort_by: '', sort: 'DESC', status: 'running' } },
        null,
        false
      ),
    enabled: !!userDetails,
    refetchOnWindowFocus: false,
    select: (data) => data?.data?.data || [],
  });

  const campaigns = useMemo(() => (Array.isArray(campaignListData) ? campaignListData : []), [campaignListData]);

  const selectedCampaign = useMemo(
    () => campaigns.find((c: any) => String(c.id) === String(selectedCampaignId)),
    [campaigns, selectedCampaignId]
  );

  const { data: SettingsData } = useQuery({
    queryKey: [GeneralSettingsAPI],
    queryFn: () => CustomFetch({ url: GeneralSettingsAPI }, null, false),
    refetchOnWindowFocus: false,
    select: (data) => data?.data?.data,
  });
  const commission = parseInt(SettingsData?.find((s: any) => s.type === 'platform_charge')?.value);

  const influencerIdForDetail =
    selectedConversation?.influencer?.id || selectedConversation?.influencerData?.influencer?.id;

  const resolvedCampaignId =
    selectedCampaignId !== 'all'
      ? selectedCampaignId
      : selectedConversation?.campaign?.id || selectedConversation?.campaign_id;

  // Detail API — only when a conversation is selected and IDs are resolved
  const {
    data: ManagementDetailData,
    refetch: refetchDetail,
    isFetching: detailFetching,
  } = useQuery({
    queryKey: [CampaignAPI, 'messages-detail', resolvedCampaignId, influencerIdForDetail],
    queryFn: () =>
      CustomFetch(
        {
          url: `${CampaignAPI}/brand/campaign-influencer?campaign_id=${resolvedCampaignId}&influencer_id=${influencerIdForDetail}`,
        },
        null,
        false
      ),
    enabled: !!(resolvedCampaignId && influencerIdForDetail && selectedConversation),
    refetchOnWindowFocus: false,
    select: (data) => data?.data?.data,
  });

  selectedConversationIdRef.current = selectedConversation?.id ? String(selectedConversation.id) : null;
  refetchDetailRef.current = () => {
    refetchDetail();
  };

  /** Keep list-row stage tag in sync with managementDetail after quote/draft/completion actions */
  const syncConversationStatus = useCallback(
    (guid: string | number | undefined | null, status: string | undefined | null) => {
      if (guid == null || guid === '' || !status) return;
      const id = String(guid);
      statusOverrideRef.current[id] = status;

      setAllConversationsCache((prev) => {
        let changed = false;
        const next = prev.map((c) => {
          if (String(c.id) !== id) return c;
          if (c.status === status) {
            if (c.unreadMessageCount || c.actionUnreadStage) {
              changed = true;
              return { ...c, unreadMessageCount: 0, actionUnreadStage: null };
            }
            return c;
          }
          changed = true;
          return withConversationStatus(c, status);
        });
        return changed ? next : prev;
      });

      setSelectedConversation((prev: MappedConversation | null) => {
        if (!prev || String(prev.id) !== id) return prev;
        if (prev.status === status) {
          if (prev.unreadMessageCount || prev.actionUnreadStage) {
            return { ...prev, unreadMessageCount: 0, actionUnreadStage: null };
          }
          return prev;
        }
        return withConversationStatus(prev, status);
      });
    },
    []
  );

  useEffect(() => {
    const guid = ManagementDetailData?.campaign?.campaignInfluencers?.[0]?.id;
    const status = ManagementDetailData?.campaign?.campaignInfluencers?.[0]?.status;
    if (!guid || !status) return;

    const id = String(guid);
    const prevStatus = conversationsCacheRef.current.find((c) => String(c.id) === id)?.status;
    syncConversationStatus(id, status);

    // Brand approve/reject/chase → clear Redux + CometChat unread for this chat
    dispatch(resetUnread(id));
    const statusChanged = prevStatus && prevStatus !== status;
    const markRead = async () => {
      try {
        const messagesRequest = new CometChat.MessagesRequestBuilder()
          .setGUID(id)
          .setLimit(50)
          .build();
        const messages = await messagesRequest.fetchPrevious();
        await Promise.all(messages.map((msg) => CometChat.markAsRead(msg)));
      } catch (err) {
        console.error(err);
      }
    };
    if (statusChanged || selectedConversationIdRef.current === id) {
      void markRead();
    }
  }, [
    ManagementDetailData?.campaign?.campaignInfluencers?.[0]?.id,
    ManagementDetailData?.campaign?.campaignInfluencers?.[0]?.status,
    dispatch,
    syncConversationStatus,
  ]);

  // Track open chat so global UnreadManager does not count messages while viewing
  useEffect(() => {
    const guid = selectedConversation?.id ? String(selectedConversation.id) : null;
    dispatch(setActiveGroupId(guid));
    return () => {
      dispatch(setActiveGroupId(null));
    };
  }, [selectedConversation?.id, dispatch]);

  // Unread counts from CometChat SDK
  useEffect(() => {
    const fetchUnread = async () => {
      try {
        const counts = await CometChat.getUnreadMessageCountForAllGroups();
        if (counts && typeof counts === 'object') {
          const map: Record<string, number> = {};
          Object.keys(counts).forEach((id) => {
            if (typeof counts[id] === 'number') map[id] = counts[id];
          });
          dispatch(setUnreadCounts(map));
        }
      } catch (e) {
        console.error(e);
      }
    };
    if (userDetails) {
      const t = setTimeout(fetchUnread, 800);
      return () => clearTimeout(t);
    }
  }, [userDetails, dispatch]);

  /** Fetch conversations API once (perPage 1000). Filter/search/pagination are local. */
  const loadConversationsOnce = useCallback(
    async (force = false) => {
      if (!userDetails?.id) return;
      if (conversationsFetchedRef.current && !force) return;

      setConversationsLoading(true);
      try {
        const result = await fetchAllConversationsOnce(userDetails.id);
        const overrides = statusOverrideRef.current;
        setAllConversationsCache(
          result.items.map((item) => {
            const override = overrides[item.id];
            return override ? withConversationStatus(item, override) : item;
          })
        );
        conversationsFetchedRef.current = true;
        setVisibleCount(CONVERSATIONS_PAGE_SIZE);

        // Seed Redux from list unread; skip draft submits + quotation submits (not Unread)
        const unreadFromList: Record<string, number> = {};
        result.items.forEach((item) => {
          if (
            item.actionUnreadStage === STAGE_KEYS.QUOTATION ||
            item.actionUnreadStage === STAGE_KEYS.DRAFT_READY
          ) {
            return;
          }
          const n = Number(item.unreadMessageCount || 0);
          if (n > 0) unreadFromList[item.id] = n;
        });
        if (Object.keys(unreadFromList).length) {
          dispatch(setUnreadCounts(unreadFromList));
        }
      } catch (e) {
        console.error('Failed to fetch CometChat conversations', e);
        setAllConversationsCache([]);
      } finally {
        setConversationsLoading(false);
      }
    },
    [userDetails?.id, dispatch]
  );

  useEffect(() => {
    if (!userDetails?.id) return;
    const t = setTimeout(() => loadConversationsOnce(false), 200);
    return () => clearTimeout(t);
  }, [userDetails?.id, loadConversationsOnce]);

  // Reset local page window when filter / campaign / search changes (no API call)
  useEffect(() => {
    setVisibleCount(CONVERSATIONS_PAGE_SIZE);
    setSelectedConversation(null);
  }, [activeFilter, selectedCampaignId, search]);

  const filteredAll = useMemo(
    () =>
      filterConversationsLocally(allConversationsCache, {
        filter: activeFilter,
        search,
        campaignId: selectedCampaignId,
        unreadCounts,
      }),
    [allConversationsCache, activeFilter, search, selectedCampaignId, unreadCounts]
  );

  const filteredConversations = useMemo(
    () => filteredAll.slice(0, visibleCount),
    [filteredAll, visibleCount]
  );

  const conversationsHasMore = visibleCount < filteredAll.length;

  const loadMoreConversations = useCallback(() => {
    if (conversationsLoading || !conversationsHasMore) return;
    setVisibleCount((prev) => prev + CONVERSATIONS_PAGE_SIZE);
  }, [conversationsLoading, conversationsHasMore]);

  useEffect(() => {
    const el = listScrollRef.current;
    if (!el) return;
    const onScroll = () => {
      if (el.scrollTop + el.clientHeight >= el.scrollHeight - 120) {
        loadMoreConversations();
      }
    };
    el.addEventListener('scroll', onScroll, { passive: true });
    if (
      conversationsHasMore &&
      !conversationsLoading &&
      el.scrollHeight <= el.clientHeight + 40
    ) {
      loadMoreConversations();
    }
    return () => el.removeEventListener('scroll', onScroll);
  }, [
    loadMoreConversations,
    conversationsHasMore,
    conversationsLoading,
    filteredConversations.length,
  ]);

  useEffect(() => {
    let listenerID = 'BrandMessagesListListener';
    let CometChatRef: any = null;

    const insertNewConversation = async (
      guid: string,
      message: any,
      preview: string,
      sentAt: number,
      inferredStatus: string | null,
      isActionEvent: boolean,
      isBrandAction: boolean
    ) => {
      if (pendingNewConversationRef.current.has(guid)) return;
      if (conversationsCacheRef.current.some((c) => c.id === guid)) return;
      pendingNewConversationRef.current.add(guid);
      try {
        const group = await CometChatRef.getGroup(guid);
        const isActive =
          selectedConversationIdRef.current && guid === selectedConversationIdRef.current;
        const mapped = mapGroupToConversation(group, {
          message: preview || '',
          updatedAt: sentAt,
          inferredStatus,
          actionUnreadStage:
            !isActive && !isBrandAction && isActionEvent && inferredStatus ? inferredStatus : null,
          unreadMessageCount:
            isActive || isBrandAction
              ? 0
              : shouldCountMessageAsBrandUnread(message) || isActionEvent
                ? 1
                : 0,
        });
        if (!mapped) return;
        const override = statusOverrideRef.current[guid];
        const item = override ? withConversationStatus(mapped, override) : mapped;
        setAllConversationsCache((prev) => {
          if (prev.some((c) => c.id === guid)) return prev;
          return [item, ...prev];
        });
      } catch (err) {
        console.error('Failed to load new conversation', err);
      } finally {
        pendingNewConversationRef.current.delete(guid);
      }
    };

    const bumpConversation = (message: any) => {
      // Ignore CometChat group lifecycle actions (member added / scope changed, etc.)
      if (isCometGroupLifecycleMessage(message)) return;
      const receiverType = message?.receiverType || message?.getReceiverType?.();
      if (receiverType !== 'group' && receiverType !== CometChatRef?.RECEIVER_TYPE?.GROUP) return;
      const rawId = message?.receiverId || message?.getReceiverId?.() || message?.receiver || '';
      const guid = String(rawId).replace(/^group_/, '');
      if (!guid) return;
      const sentAtRaw = message?.sentAt || message?.getSentAt?.() || Math.floor(Date.now() / 1000);
      const sentAt = Number(sentAtRaw) > 1e12 ? Math.floor(Number(sentAtRaw) / 1000) : Number(sentAtRaw);
      const preview = getConversationMessagePreview(message);
      const inferredStatus = inferStageFromChatMessage(message);
      const isBrandAction = isBrandOwnedActionMessage(message);
      const isActionEvent = isActionUnreadEvent(message);

      const exists = conversationsCacheRef.current.some((c) => c.id === guid);
      if (!exists) {
        void insertNewConversation(
          guid,
          message,
          preview,
          sentAt,
          inferredStatus,
          isActionEvent,
          isBrandAction
        );
        if (isBrandAction || (selectedConversationIdRef.current && guid === selectedConversationIdRef.current)) {
          dispatchRef.current(resetUnread(guid));
          markMessageReadRef.current(message);
          if (selectedConversationIdRef.current && guid === selectedConversationIdRef.current) {
            refetchDetailRef.current?.();
          }
        }
        return;
      }

      setAllConversationsCache((prev) => {
        const idx = prev.findIndex((c) => c.id === guid);
        if (idx < 0) return prev;
        const isActive =
          selectedConversationIdRef.current && guid === selectedConversationIdRef.current;
        const prevItem = prev[idx];
        let nextTags = prevItem.tags;
        if (inferredStatus) {
          const cleaned = (Array.isArray(prevItem.tags) ? prevItem.tags : []).filter(
            (t) => !Object.values(STAGE_KEYS).includes(t as any)
          );
          cleaned.push(inferredStatus);
          nextTags = cleaned;
        }
        const updated = {
          ...prevItem,
          message: preview || prevItem.message,
          updatedAt: sentAt || prevItem.updatedAt,
          status: inferredStatus || prevItem.status,
          tags: nextTags,
          // Brand actions never create unread; clear pending action after brand acts
          actionUnreadStage:
            isActive || isBrandAction
              ? null
              : isActionEvent && inferredStatus
                ? inferredStatus
                : prevItem.actionUnreadStage ?? null,
          unreadMessageCount:
            isActive || isBrandAction
              ? 0
              : shouldCountMessageAsBrandUnread(message)
                ? Number(prevItem.unreadMessageCount || 0) + 1
                : Number(prevItem.unreadMessageCount || 0),
        };
        const next = [...prev];
        next.splice(idx, 1);
        return [updated, ...next];
      });

      if (isBrandAction || (selectedConversationIdRef.current && guid === selectedConversationIdRef.current)) {
        dispatchRef.current(resetUnread(guid));
        markMessageReadRef.current(message);
        if (selectedConversationIdRef.current && guid === selectedConversationIdRef.current) {
          refetchDetailRef.current?.();
        }
      }
    };

    const init = async () => {
      try {
        const { CometChat: CC } = await import('@cometchat/chat-sdk-javascript');
        CometChatRef = CC;
        markMessageReadRef.current = (message: any) => {
          try {
            CC.markAsRead(message);
          } catch (err) {
            console.error(err);
          }
        };
        CC.addMessageListener(
          listenerID,
          new CC.MessageListener({
            onTextMessageReceived: bumpConversation,
            onMediaMessageReceived: bumpConversation,
            onCustomMessageReceived: bumpConversation,
          })
        );
      } catch (e) {
        console.error(e);
      }
    };
    init();
    return () => {
      if (CometChatRef) CometChatRef.removeMessageListener(listenerID);
    };
  }, []);

  const getConversationActivityAt = useCallback((item: any) => Number(item?.updatedAt || 0), []);
  const getConversationPreview = useCallback((item: any) => item?.message || '', []);

  /** Own sends never hit the inbound listener — keep list preview in sync. */
  const handleOutboundMessage = useCallback(
    (message: any) => {
      const rawId =
        message?.receiverId ||
        message?.getReceiverId?.() ||
        message?.receiver ||
        selectedConversationIdRef.current ||
        '';
      const guid = String(rawId).replace(/^group_/, '');
      if (!guid) return;
      const preview = getConversationMessagePreview(message);
      const sentAtRaw = message?.sentAt || message?.getSentAt?.() || Math.floor(Date.now() / 1000);
      const sentAt =
        Number(sentAtRaw) > 1e12 ? Math.floor(Number(sentAtRaw) / 1000) : Number(sentAtRaw);

      setAllConversationsCache((prev) => {
        const idx = prev.findIndex((c) => c.id === guid);
        if (idx < 0) return prev;
        const prevItem = prev[idx];
        const updated = {
          ...prevItem,
          message: preview || prevItem.message,
          updatedAt: sentAt || prevItem.updatedAt,
          unreadMessageCount: 0,
          actionUnreadStage: null,
        };
        const next = [...prev];
        next.splice(idx, 1);
        return [updated, ...next];
      });
      dispatch(resetUnread(guid));
    },
    [dispatch]
  );

  const handleSelectConversation = useCallback(
    async (item: MappedConversation) => {
      let next: MappedConversation = {
        ...item,
        campaign: {
          ...item.campaign,
          id:
            selectedCampaignId !== 'all'
              ? selectedCampaignId
              : item.campaign?.id,
          slug: selectedCampaign?.slug || item.campaign?.slug,
          campaign_name: selectedCampaign?.campaign_name || item.campaign?.campaign_name,
        },
      };
      setSelectedConversation(next);
      setResolvingConversation(true);
      dispatch(resetUnread(item.id));
      setAllConversationsCache((prev) =>
        prev.map((c) =>
          c.id === item.id ? { ...c, unreadMessageCount: 0, actionUnreadStage: null } : c
        )
      );

      try {
        // Prefer metadata.influencer.id + campaign uuid from tags (already on mapped item)
        const { influencerId, campaignId } = await resolveConversationIds(next, {
          fallbackCampaignId:
            selectedCampaignId !== 'all' ? selectedCampaignId : next.campaign?.id,
          brandUserId: userDetails?.id,
        });

        const matchedCampaign =
          campaigns.find((c: any) => String(c.id) === String(campaignId)) || selectedCampaign;

        next = {
          ...next,
          influencer: {
            ...next.influencer,
            id: influencerId || next.influencer?.id,
          },
          campaign: {
            ...next.campaign,
            id: campaignId || matchedCampaign?.id || next.campaign?.id,
            slug: matchedCampaign?.slug || next.campaign?.slug,
            campaign_name: matchedCampaign?.campaign_name || next.campaign?.campaign_name
          },
        };
        setSelectedConversation(next);
      } catch (e) {
        console.error('Failed to resolve conversation ids', e);
      } finally {
        setResolvingConversation(false);
        // Brand is opening the chat — sender_id is the influencer.
        notifyCometChatRead({
          campaign_id: next.campaign?.id,
          sender_id: next.influencer?.id,
        });
      }
    },
    [dispatch, selectedCampaignId, selectedCampaign, userDetails?.id, campaigns]
  );

  const getCampaignConversationCount = (campaign: any) => {
    const id = String(campaign?.id || '');
    if (!id) return campaign?.hired ?? 0;
    return allConversationsCache.filter(
      (c) =>
        c.status !== STAGE_KEYS.QUOTATION &&
        (String(c.campaign?.id || '') === id || c.tags?.includes(id))
    ).length;
  };

  const getCampaignUnreadCount = (campaign: any) =>
    countCampaignUnreadPeople(allConversationsCache, unreadCounts, campaign?.id, null);

  /** Campaign strip totals exclude Quotation-stage chats */
  const allCampaignsTotal = allConversationsCache.filter(
    (c) => c.status !== STAGE_KEYS.QUOTATION
  ).length;

  /** Same as Unread filter — excludes unapproved quotation submits */
  const allCampaignsUnread = useMemo(
    () => countPeopleWithUnread(allConversationsCache, unreadCounts, null),
    [allConversationsCache, unreadCounts]
  );

  /** Scope filter badges by campaign id in tags */
  const conversationsForFilterBadges = useMemo(() => {
    if (selectedCampaignId === 'all') return allConversationsCache;
    const id = String(selectedCampaignId);
    return allConversationsCache.filter(
      (c) => String(c.campaign?.id || '') === id || c.tags?.includes(id)
    );
  }, [allConversationsCache, selectedCampaignId]);

  const unreadPeopleByStatus = useMemo(
    () => countPeopleWithUnreadByStatus(conversationsForFilterBadges, unreadCounts),
    [conversationsForFilterBadges, unreadCounts]
  );

  const unreadFilterCount = useMemo(
    () => countPeopleWithUnread(conversationsForFilterBadges, unreadCounts, null),
    [conversationsForFilterBadges, unreadCounts]
  );

  const isLoading = conversationsLoading;

  const listRefetch = useCallback(() => {
    conversationsFetchedRef.current = false;
    loadConversationsOnce(true);
    refetchDetail();
  }, [loadConversationsOnce, refetchDetail]);

  // Chase up
  const { isPending: chasePending, mutate: chaseMutate } = usePost(
    `${ChaseUpNotificationAPI}/${resolvedCampaignId}`,
    null,
    null,
    'patch'
  );

  useEffect(() => {
    const guid = ManagementDetailData?.campaign?.campaignInfluencers?.[0]?.id;
    if (!guid) return;
    CometChat.getGroup(guid).then(setChaseGroup).catch(() => setChaseGroup(null));
  }, [ManagementDetailData?.campaign?.campaignInfluencers?.[0]?.id]);

  const sendChase = (objKey: string) => {
    if (!chaseGroup || !ManagementDetailData) return;
    const campaign = ManagementDetailData.campaign;
    const influencer = ManagementDetailData.influencerDetails;
    const objBrand: any = {
      waiting_for_quotations: translations?.youChasedForQuotation,
      drafting_deliverables: translations?.youChasedForDraft,
      posting_deliverables: translations?.youChasedForPost,
    };
    const objInfluencer: any = {
      waiting_for_quotations: `${campaign?.users?.first_name} ${campaign?.users?.last_name} ${translations?.chasedForQuotation}`,
      drafting_deliverables: `${campaign?.users?.first_name} ${campaign?.users?.last_name} ${translations?.chasedForDraft}`,
      posting_deliverables: `${campaign?.users?.first_name} ${campaign?.users?.last_name} ${translations?.chasedForPost}`,
    };
    const typeMap: any = {
      waiting_for_quotations: 'quotation',
      drafting_deliverables: 'drafts',
      posting_deliverables: 'posts',
    };
    const customMessage = new CometChat.CustomMessage(chaseGroup.guid, CometChat.RECEIVER_TYPE.GROUP, 'status', {
      brandMessage: objBrand[objKey],
      influencerMessage: objInfluencer[objKey],
      adminMessage: objInfluencer[objKey],
    });
    customMessage.setCategory('custom' as any);
    CometChat.sendMessage(customMessage).then((sent: any) => {
      // Own chase never hits inbound listener — update list preview, no unread
      handleOutboundMessage(sent);
      chaseMutate({ influencer_id: influencer?.id, type: typeMap[objKey] } as any);
      CustomToast('success', translations?.chasedMessageSent);
      setChatRefreshKey((k) => k + 1);
    });
  };

  const { mutate: archiveMutate } = usePost(
    ManagementDetailData?.campaign?.campaignInfluencers?.[0]?.id
      ? `${InfluencerArchiveAPI}/${ManagementDetailData.campaign.campaignInfluencers[0].id}`
      : null,
    null,
    (response) => {
      if (response?.status == 200 || response?.status == 201) {
        // CustomToast('success', translations?.archive ?? 'Archived');
        listRefetch();
        refetchDetail();
      }
    },
    'patch'
  );

  const campaignInfluencerId = ManagementDetailData?.campaign?.campaignInfluencers?.[0]?.id;
  const { mutate: terminateMutate } = usePost(
    campaignInfluencerId ? `${BrandTerminateJobAPI}/${campaignInfluencerId}` : null,
    null,
    (response) => {
      if (response?.status == 200 || response?.status == 201) {
        CustomToast('success', translations?.terminated ?? 'Terminated');
        listRefetch();
        refetchDetail();
      }
    },
    'patch'
  );

  const refetchDetailAndChat = useCallback(() => {
    refetchDetail();
    setChatRefreshKey((k) => k + 1);
  }, [refetchDetail]);

  /** Same conditional Need Help options as ManagementDetail */
  const brandNeedHelpOptions = useMemo(() => {
    if (!ManagementDetailData) return [];
    const status = ManagementDetailData?.campaign?.campaignInfluencers?.[0]?.status;
    const campaignInfluencer = ManagementDetailData?.campaign?.campaignInfluencers?.[0];
    const brandNeedHelpStatuses = ['drafting_deliverables', 'draft_available', 'posting_deliverables'];
    const hideInfluencerArchiveStatuses = ['quotation_available', 'waiting_for_quotations'];
    const options: { id: string; label: string; onClick: () => void }[] = [];

    const canRaiseDispute =
      campaignInfluencer?.is_archived == false &&
      (campaignInfluencer?.status == 'closed' || campaignInfluencer?.status == 'completion_request') &&
      !campaignInfluencer?.dispute?.is_brand_despute;

    const raiseDisputeOption = {
      id: 'raise_dispute',
      label: translations?.raiseDispute ?? 'Raise Dispute',
      onClick: () => setDisputeModal({ ...ManagementDetailData, disputeReason: 'Dispute' }),
    };

    if (status && brandNeedHelpStatuses.includes(status)) {
      options.push({
        id: 'request_customer_support',
        label: translations?.requestHelpFromCustomerService ?? 'Request help from customer service',
        onClick: () =>
          setNeedHelpConfirmModal({
            type: 'request_customer_support',
            onConfirm: () =>
              setDisputeModal({
                ...ManagementDetailData,
                disputeReason:
                  translations?.requestHelpFromCustomerService ?? 'Request help from customer service',
              }),
          }),
      });
    }

    if (status && hideInfluencerArchiveStatuses.includes(status) && !campaignInfluencer?.is_archived) {
      options.push({
        id: 'hide_influencer',
        label: translations?.hideThisInfluencer ?? 'Hide this influencer',
        onClick: () =>
          setNeedHelpConfirmModal({
            type: 'hide_influencer',
            onConfirm: () => archiveMutate(),
          }),
      });
    }

    if (status === 'drafting_deliverables') {
      options.push({
        id: 'hide_influencer_terminate',
        label: translations?.hideThisInfluencer ?? 'Hide this influencer',
        onClick: () =>
          setNeedHelpConfirmModal({
            type: 'terminate_and_hide',
            onConfirm: () => {
              if (campaignInfluencerId) terminateMutate();
            },
          }),
      });
    }

    if (campaignInfluencer?.status === 'completion_request') {
      options.push({
        id: 'work_incomplete',
        label: translations?.workSubmittedIsIncomplete ?? 'Work submitted is incomplete',
        onClick: () =>
          setNeedHelpConfirmModal({
            type: 'request_revision',
            onConfirm: () =>
              setDisputeModal({ ...ManagementDetailData, disputeReason: 'Work submitted is incomplete' }),
            onRequestRevision: () =>
              setCompletionRequestModalOpen({
                id: campaignInfluencer?.id,
                ManagementDetailDataRefetch: refetchDetailAndChat,
                type: 'rejected',
                amount: campaignInfluencer?.influencer_budget,
                currency: ManagementDetailData?.campaign?.currency,
              }),
          }),
      });
      if (canRaiseDispute) options.push(raiseDisputeOption);
    } else if (canRaiseDispute) {
      options.push(raiseDisputeOption);
    }

    return options;
  }, [
    ManagementDetailData,
    translations,
    archiveMutate,
    terminateMutate,
    campaignInfluencerId,
    refetchDetailAndChat,
  ]);

  const openTraditionalView = () => {
    if (!ManagementDetailData || !selectedConversation) return;
    const campaign = ManagementDetailData?.campaign;
    // Persist messages-page composer text before unmounting it for the sidebar chat
    flushActiveComposerDraft(campaign?.campaignInfluencers?.[0]?.id);
    setOpenSideModal({
      slug: campaign?.slug ?? selectedConversation?.campaign?.slug,
      status: campaign?.campaignInfluencers?.[0]?.status ?? selectedConversation?.status,
      campaignDetailId: campaign?.id ?? selectedConversation?.campaign?.id,
      influencerData: {
        ...selectedConversation,
        influencer: ManagementDetailData?.influencerDetails || selectedConversation?.influencer,
      },
      sectionInfluencer: filteredConversations,
      currentIndex: filteredConversations.findIndex((c) => c.id === selectedConversation.id),
    });
    setIsComponentVisible(true);
  };

  const openDraft = async (draft?: any) => {
    // Always refetch so newly uploaded drafts appear without switching conversations
    const result = await refetchDetail();
    const freshDetail = result?.data ?? ManagementDetailData;
    const draftInfoData = freshDetail?.campaign?.campaignInfluencers?.[0];
    const pending = draftInfoData?.drafts?.filter((d: any) => d.status === 'pending') || [];
    const draftItem =
      (draft?.id && pending.find((d: any) => String(d.id) === String(draft.id))) ||
      draft ||
      pending[0];
    if (!draftItem) return;
    setDraftModalOpen({ item: draftItem, draftInfoData });
  };

  const handleApproveQuotation = () => {
    setApproveModalOpen({
      id: ManagementDetailData?.campaign?.id,
      influencerId: ManagementDetailData?.influencerDetails?.id,
      ManagementDetailDataRefetch: refetchDetailAndChat,
      amount: ManagementDetailData?.campaign?.campaignInfluencers?.[0]?.influencer_budget,
      currency: ManagementDetailData?.campaign?.campaignInfluencers?.[0]?.currency,
      ManagementDetailData,
      commission,
    });
  };

  const handleCompletion = (type: 'closed' | 'rejected') => {
    setCompletionRequestModalOpen({
      id: ManagementDetailData?.campaign?.campaignInfluencers?.[0]?.id,
      ManagementDetailDataRefetch: refetchDetailAndChat,
      type,
      amount: ManagementDetailData?.campaign?.campaignInfluencers?.[0]?.influencer_budget,
      currency: ManagementDetailData?.campaign?.currency,
    });
  };

  // Mark read when selecting conversation
  useEffect(() => {
    const guid = ManagementDetailData?.campaign?.campaignInfluencers?.[0]?.id;
    if (!guid) return;
    dispatch(resetUnread(guid));
    setAllConversationsCache((prev) =>
      prev.map((c) =>
        c.id === String(guid) ? { ...c, unreadMessageCount: 0, actionUnreadStage: null } : c
      )
    );
    const markAsRead = async () => {
      try {
        const messagesRequest = new CometChat.MessagesRequestBuilder().setGUID(guid).setLimit(50).build();
        const messages = await messagesRequest.fetchPrevious();
        await Promise.all(messages.map((msg) => CometChat.markAsRead(msg)));
      } catch (err) {
        console.error(err);
      }
    };
    markAsRead();
  }, [ManagementDetailData?.campaign?.campaignInfluencers?.[0]?.id, dispatch]);

  const emptyState = useMemo(() => {
    if (isLoading || filteredConversations.length > 0) return null;
    if (activeFilter === 'working') {
      return {
        title: translations?.noWorkingChats ?? 'No working chats',
        cta: translations?.viewAllChats ?? 'View all chats',
        onClick: () => setActiveFilter('all'),
      };
    }
    if (activeFilter === 'unread') {
      return {
        title: translations?.noUnreadChats ?? 'No Unread chats',
        cta: translations?.viewWorkingChats ?? 'View working chats',
        onClick: () => setActiveFilter('working'),
      };
    }
    if (activeFilter === STAGE_KEYS.DRAFTING) {
      return {
        title: translations?.noDraftingChats ?? 'No drafting chats',
        cta: translations?.viewWorkingChats ?? 'View working chats',
        onClick: () => setActiveFilter('working'),
      };
    }
    if (activeFilter === STAGE_KEYS.DRAFT_READY) {
      return {
        title: translations?.noDraftReadyChats ?? 'No drafts ready',
        cta: translations?.viewWorkingChats ?? 'View working chats',
        onClick: () => setActiveFilter('working'),
      };
    }
    if (activeFilter === STAGE_KEYS.QUOTATION) {
      return {
        title: translations?.noQuotationChats ?? 'No quotations',
        cta: translations?.recruitCreators ?? 'Recruit Creators',
        onClick: () => {
          if (selectedCampaign) {
            router.push(
              `/brand/my-campaigns/${selectedCampaign.slug}?tab=${encodeURIComponent('Influencer Pool')}&id=${selectedCampaign.id}&innerTab=${encodeURIComponent('Applicants')}`
            );
          } else {
            router.push('/brand/my-campaigns/list?status=running');
          }
        },
      };
    }
    return {
      title: translations?.noDataFound ?? 'No conversations',
      cta: null,
      onClick: undefined,
    };
  }, [filteredConversations.length, isLoading, activeFilter, translations, selectedCampaign, router]);

  const showCampaignActions = selectedCampaignId !== 'all' && !!selectedCampaign;

  return (
    <LocalSeenProvider>
      <div className="flex flex-col lg:h-[calc(100vh-9rem)] md:h-[calc(100vh-8.5rem)] h-[calc(100vh-5rem)]">
        {/* Campaign selector */}
        <div className="lg:flex items-center gap-2 mb-3 min-w-0 max-md:pl-2">
          <CampaignStrip
            campaigns={campaigns}
            selectedCampaignId={selectedCampaignId}
            translations={translations}
            campaignPath={userDetails?.campaign_path}
            allCampaignsTotal={allCampaignsTotal}
            allCampaignsUnread={allCampaignsUnread}
            getCampaignConversationCount={getCampaignConversationCount}
            getCampaignUnreadCount={getCampaignUnreadCount}
            onSelectAll={() => {
              setSelectedCampaignId('all');
              setSelectedConversation(null);
              router.replace('/brand/messages');
            }}
            onSelectCampaign={(campaign) => {
              setSelectedCampaignId(String(campaign.id));
              setSelectedConversation(null);
              router.replace(`/brand/messages?campaignId=${campaign.id}&slug=${campaign.slug}`);
            }}
          />
          <CampaignActionButtons
            customClass="max-lg:hidden"
            translations={translations}
            showCampaignActions={showCampaignActions}
            onCreateCampaign={() => router.push('/brand/my-campaigns/create-campaign')}
            onOpenManagement={() =>
              router.push(
                `/brand/my-campaigns/${selectedCampaign.slug}?tab=${encodeURIComponent('Campaign Management')}&id=${selectedCampaign.id}`
              )
            }
            onRecruitCreators={() =>
              router.push(
                `/brand/my-campaigns/${selectedCampaign.slug}?tab=${encodeURIComponent('Influencer Pool')}&id=${selectedCampaign.id}&innerTab=${encodeURIComponent('Applicants')}`
              )
            }
          />
        </div>

        {/* Campaign context title */}
        <div className="mb-3 flex items-center gap-2 justify-between max-md:px-2">
          <h2 className="text-base font-semibold text-neutral-800">{selectedCampaignId === 'all' ? translations?.allCampaigns : selectedCampaign?.campaign_name}</h2>
          <CampaignActionButtons
            customClass="lg:hidden"
            translations={translations}
            showCampaignActions={showCampaignActions}
            onCreateCampaign={() => router.push('/brand/my-campaigns/create-campaign')}
            onOpenManagement={() =>
              router.push(
                `/brand/my-campaigns/${selectedCampaign.slug}?tab=${encodeURIComponent('Campaign Management')}&id=${selectedCampaign.id}`
              )
            }
            onRecruitCreators={() =>
              router.push(
                `/brand/my-campaigns/${selectedCampaign.slug}?tab=${encodeURIComponent('Influencer Pool')}&id=${selectedCampaign.id}&innerTab=${encodeURIComponent('Applicants')}`
              )
            }
          />
        </div>

        {/* Main split — below md: list OR chat; md+: both */}
        <div className="flex flex-1 min-h-0 lg:border border-t border-lightGray md:rounded-2xl overflow-hidden bg-white">
          {/* Left list */}
          <div
            className={`w-full 2xl:max-w-md lg:max-w-[25rem] lg:border-r border-lightGray flex-col min-h-0 ${selectedConversation ? 'hidden lg:flex' : 'flex'
              }`}
          >
            <div className="sm:p-3 px-2 py-3 border-b border-lightGray">
              <div className="relative">
                <SearchInput
                  setSearch={setSearch}
                  inputProps={{ placeholder: translations?.searchByNameOrMessage ?? 'Search by name or message...' }}
                />
              </div>
              <div className="mt-3">
                <BrandMessageFilters
                  translations={translations}
                  activeFilter={activeFilter}
                  onFilterChange={setActiveFilter}
                  unreadPeopleByStatus={unreadPeopleByStatus}
                  unreadFilterCount={unreadFilterCount}
                  onQuotationExternalLink={
                    showCampaignActions
                      ? () => {
                          router.push(
                            `/brand/my-campaigns/${selectedCampaign.slug}?tab=${encodeURIComponent('Influencer Pool')}&id=${selectedCampaign.id}&innerTab=${encodeURIComponent('Applicants')}`
                          );
                        }
                      : undefined
                  }
                />
              </div>
            </div>
            <div ref={listScrollRef} className="flex-1 overflow-y-auto">
              {isLoading ? (
                <div className="p-6 text-sm text-neutral-400 text-center">{translations?.loading ?? 'Loading...'}</div>
              ) : emptyState ? (
                <div className="p-8 flex flex-col items-center text-center gap-3">
                  <div className="w-14 h-14 rounded-2xl bg-neutral-100 flex items-center justify-center text-2xl">💬</div>
                  <p className="font-medium text-neutral-600">{emptyState.title}</p>
                  {emptyState.cta && (
                    <GradientButton customClass="!h-9 !px-4 text-xs" onClick={emptyState.onClick}>
                      {emptyState.cta}
                    </GradientButton>
                  )}
                </div>
              ) : (
                <>
                  {filteredConversations.map((item) => (
                    <ConversationItem
                      key={item.id}
                      item={item}
                      isSelected={selectedConversation?.id === item.id}
                      unreadCount={getConversationListBadge(item, unreadCounts)}
                      lastMessagePreview={getConversationPreview(item)}
                      lastMessageAt={getConversationActivityAt(item)}
                      translations={translations}
                      showCampaignName={selectedCampaignId === 'all'}
                      onClick={() => handleSelectConversation(item)}
                    />
                  ))}
                  {conversationsHasMore && (
                    <div className="p-3 text-center text-xs text-neutral-400">
                      {translations?.scrollForMore ?? 'Scroll for more'}
                    </div>
                  )}
                </>
              )}
            </div>
          </div>

          {/* Right chat */}
          <div
            className={`flex-1 flex-col min-w-0 min-h-0 ${selectedConversation ? 'flex' : 'hidden'
              } lg:flex`}
          >
            {selectedConversation && ManagementDetailData ? (
              <>
                <InfluencerBanner
                  setSelectedConversation={setSelectedConversation}
                  ManagementDetailData={ManagementDetailData}
                  translations={translations}
                  onViewProfile={openTraditionalView}
                  showNeedHelp={ManagementDetailData?.campaign?.status === 'running'}
                  needHelpOptions={brandNeedHelpOptions}
                  onChaseDraft={() => sendChase('drafting_deliverables')}
                  onChasePublish={() => sendChase('posting_deliverables')}
                  chasePending={chasePending}
                />
                <PinnedBanner
                  ManagementDetailData={ManagementDetailData}
                  translations={translations}
                  onApproveQuotation={handleApproveQuotation}
                  onArchive={() => archiveMutate()}
                  onOpenDraft={openDraft}
                  onOpenDraftsList={() => openDraft()}
                  onConfirmCompletion={() => handleCompletion('closed')}
                  onRejectCompletion={() => handleCompletion('rejected')}
                />
                <div className="flex-1 min-h-0 overflow-hidden">
                  {/* Only one composer at a time — sidebar chat unmounts this so drafts sync via localStorage */}
                  {!openSideModal ? (
                    <CampaignChatInfo
                      key={`messages-chat-${ManagementDetailData?.campaign?.campaignInfluencers?.[0]?.id || selectedConversation?.id}`}
                      ManagementDetailData={ManagementDetailData}
                      translations={translations}
                      mediaUploading={mediaUploading}
                      setMediaUploading={setMediaUploading}
                      MainListRefetch={listRefetch}
                      setOpenSideModal={setOpenSideModal}
                      draftModalOpen={draftModalOpen}
                      disputeModal={disputeModal}
                      completionRequestModalOpen={completionRequestModalOpen}
                      isFromMessages={true}
                      chatRefreshKey={chatRefreshKey}
                      onOutboundMessage={handleOutboundMessage}
                    />
                  ) : (
                    <div className="h-full flex items-center justify-center text-neutral-400 text-sm px-6 text-center">
                      {translations?.chatOpenInSidebar ?? 'Chat is open in the sidebar'}
                    </div>
                  )}
                </div>
              </>
            ) : selectedConversation && (resolvingConversation || detailFetching) ? (
              <div className="flex-1 flex items-center justify-center text-neutral-400 text-sm">
                {translations?.loading ?? 'Loading...'}
              </div>
            ) : selectedConversation && !ManagementDetailData ? (
              <div className="flex-1 flex items-center justify-center text-neutral-400 text-sm px-6 text-center">
                {translations?.unableToLoadConversation ??
                  'Unable to load this conversation. Try again or open it from Campaign Management.'}
              </div>
            ) : (
              <div className="flex-1 flex items-center justify-center text-neutral-400 text-sm">
                {translations?.selectConversation ?? 'Select a conversation'}
              </div>
            )}
          </div>
        </div>

        {openSideModal && (
          <CampaignManagementDetail
              openSideModal={openSideModal}
              setOpenSideModal={setOpenSideModal}
              MainListRefetch={listRefetch}
              setIsComponentVisible={setIsComponentVisible}
              translations={translations}
              setRestrictModalOpen={setRestrictModalOpen}
              onConversationStatusChange={syncConversationStatus}
            />
        )}

        {draftModalOpen && (
          <DraftModal
            draftModalOpen={draftModalOpen}
            setDraftModalOpen={setDraftModalOpen}
            refetch={refetchDetailAndChat}
            draftInfoData={ManagementDetailData?.campaign?.campaignInfluencers?.[0]}
            setUploadLoader={setUploadLoader}
            ManagementDetailData={ManagementDetailData?.campaign}
            translations={translations}
            commentText={commentDrafts[draftModalOpen?.item?.id] || ''}
            setCommentText={(text) =>
              setCommentDrafts((prev) => ({ ...prev, [draftModalOpen?.item?.id]: text }))
            }
            setOpenSideModal={setOpenSideModal}
          />
        )}

        {approveModalOpen && (
          <QuotationApproveModal
            approveModalOpen={approveModalOpen}
            setApproveModalOpen={setApproveModalOpen}
            commission={commission}
            translations={translations}
            setRestrictModalOpen={setRestrictModalOpen}
            MainListRefetch={listRefetch}
          />
        )}

        {completionRequestModalOpen && (
          <Elements stripe={stripePromise}>
            <CompletionRequestModal
              completionRequestModalOpen={completionRequestModalOpen}
              setCompletionRequestModalOpen={setCompletionRequestModalOpen}
              refetch={refetchDetailAndChat}
              setOpenSideModal={setOpenSideModal}
              commission={commission}
              translations={translations}
              campaignDetailInfluencer={ManagementDetailData?.campaign?.campaignInfluencers?.[0]}
            />
          </Elements>
        )}

        {disputeModal && (
          <DisputeModal
            modal={disputeModal}
            setModal={setDisputeModal}
            refetch={refetchDetailAndChat}
            translations={translations}
          />
        )}
        {needHelpConfirmModal && (
          <NeedHelpConfirmModal modal={needHelpConfirmModal} setModal={setNeedHelpConfirmModal} translations={translations} />
        )}
        {restrictModalOpen && (
          <CampaignRestrictModal
            setRestrictModalOpen={setRestrictModalOpen}
            restrictModalOpen={restrictModalOpen}
            translations={translations}
          />
        )}
      </div>
    </LocalSeenProvider>
  );
};

export default BrandMessages;