import { Grid } from 'antd';
import { useAuthStore } from '@/stores/auth.store';
import { useSettingsStore } from '@/stores/settings.store';
import { useChatWidgetStore } from '@/stores/chat-widget.store';
import ChatWidgetFAB from './ChatWidgetFAB';
import ChatPanelTray from './ChatPanelTray';

const { useBreakpoint } = Grid;

export default function RocketChatWidget() {
  const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
  const enableChat = useSettingsStore((s) => s.settings?.enableChat);
  const panelCount = useChatWidgetStore((s) => s.panels.length);
  const screens = useBreakpoint();
  const isMobile = !screens.md;

  // Gate: hide on mobile, when not authenticated, or when chat is disabled
  if (isMobile || !isAuthenticated || !enableChat) return null;

  return (
    <>
      <ChatWidgetFAB />
      {panelCount > 0 && <ChatPanelTray />}
    </>
  );
}
