import { useQuery } from '@/features/query/react-query';
import {
  VendorSidebar as VendorSidebarView,
  type VendorSidebarProps,
} from '@/components/ui/layout/VendorSidebar/VendorSidebar';

export function VendorSidebar(props: VendorSidebarProps) {
  const { data: msgData } = useQuery({
    queryKey: ['vendor-unread-messages-badge'],
    queryFn: async () => {
      const res = await fetch('/api/vendor/purchase-messages');
      const json = (await res.json()) as {
        ok: boolean;
        data?: { items: Array<{ unreadCount: number }> };
      };
      return json.ok ? json.data! : { items: [] };
    },
    refetchInterval: 60_000,
    staleTime: 30_000,
    enabled: !props.demo && props.currentPath !== '/vendor/messages',
  });
  const unreadTotal = msgData?.items.reduce((sum, item) => sum + item.unreadCount, 0) ?? 0;

  return <VendorSidebarView {...props} unreadTotal={unreadTotal} />;
}