import { useEffect, useState } from 'react';
import { getEcho, isRealtimeEnabled, leaveChannel } from '@/shared/realtime/echoClient';
import { realtimeChannels } from '@/shared/realtime/realtimeChannels';

export interface TicketViewer {
  id: string;
  name: string;
  avatar?: string;
}

export function useTicketPresence(ticketId: string | undefined): TicketViewer[] {
  const [viewers, setViewers] = useState<TicketViewer[]>([]);

  useEffect(() => {
    const echo = getEcho();
    if (!isRealtimeEnabled() || !echo || !ticketId) {
      setViewers([]);
      return undefined;
    }

    const channelName = realtimeChannels.ticketPresence(ticketId);
    const channel = echo.join(channelName);

    channel.here((users: TicketViewer[]) => {
      setViewers(users);
    });

    channel.joining((user: TicketViewer) => {
      setViewers((current) => {
        if (current.some((entry) => entry.id === user.id)) {
          return current;
        }
        return [...current, user];
      });
    });

    channel.leaving((user: TicketViewer) => {
      setViewers((current) => current.filter((entry) => entry.id !== user.id));
    });

    return () => {
      leaveChannel(channelName);
      setViewers([]);
    };
  }, [ticketId]);

  return viewers;
}