import { Grid } from 'antd';
import { useChatBar } from './ChatBarContext';
import MiniChatWindow from './MiniChatWindow';
import MinimizedChat from './MinimizedChat';

const { useBreakpoint } = Grid;

export default function ChatBar() {
  const screens = useBreakpoint();
  const isMobile = !screens.md;
  const { windows, closeChat, toggleExpanded } = useChatBar();

  if (windows.length === 0) return null;

  return (
    <div
      style={{
        position: 'fixed',
        bottom: isMobile ? 56 : 0, // Above mobile bottom nav
        right: 16,
        display: 'flex',
        gap: 8,
        alignItems: 'flex-end',
        zIndex: 1000,
        pointerEvents: 'none', // Allow clicks to pass through gaps
      }}
    >
      {windows.map((w) =>
        w.isExpanded ? (
          <div key={w.videoId} style={{ pointerEvents: 'auto' }}>
            <MiniChatWindow
              window={w}
              onToggle={() => toggleExpanded(w.videoId)}
              onClose={() => closeChat(w.videoId)}
            />
          </div>
        ) : (
          <div key={w.videoId} style={{ pointerEvents: 'auto' }}>
            <MinimizedChat
              window={w}
              onExpand={() => toggleExpanded(w.videoId)}
              onClose={() => closeChat(w.videoId)}
            />
          </div>
        )
      )}
    </div>
  );
}
