import { useEffect, useRef } from 'react';
import { useVoiceStore } from '../stores/voice.ts';
import { Track } from 'livekit-client';
import type { Participant, TrackPublication, Room } from 'livekit-client';

function RemoteAudioTrack({ participant, room }: { participant: Participant; room: Room }) {
  const audioRef = useRef<HTMLAudioElement>(null);

  useEffect(() => {
    const el = audioRef.current;
    if (!el) return;

    let pub: TrackPublication | undefined;

    const attachTrack = () => {
      pub = participant.getTrackPublication(Track.Source.Microphone);
      if (pub?.track && el) {
        pub.track.attach(el);
        el.play().catch(() => {});
      }
    };

    const detachTrack = () => {
      if (pub?.track && el) {
        pub.track.detach(el);
      }
    };

    attachTrack();

    const handlePublished = (publication: TrackPublication) => {
      if (publication.source === Track.Source.Microphone && publication.track) {
        publication.track.attach(el);
        el.play().catch(() => {});
      }
    };

    room.on('trackPublished' as any, handlePublished);

    // If a track is subscribed later
    const handleSubscribed = (track: Track, publication: TrackPublication, trackParticipant: Participant) => {
      if (trackParticipant.identity === participant.identity && publication.source === Track.Source.Microphone) {
        track.attach(el);
        el.play().catch(() => {});
      }
    };
    room.on('trackSubscribed' as any, handleSubscribed);

    return () => {
      detachTrack();
      room.off('trackPublished' as any, handlePublished);
      room.off('trackSubscribed' as any, handleSubscribed);
    };
  }, [participant, room]);

  return <audio ref={audioRef} autoPlay />;
}

export function AudioRenderers() {
  const room = useVoiceStore((s) => s._room);
  // @ts-ignore ponytail: subscribe to trigger re-render when remote users join/leave
  useVoiceStore((s) => s.participants); // @ts-ignore
  
  if (!room) return null;

  const remoteParticipants = Array.from(room.remoteParticipants.values());

  return (
    <div className="hidden">
      {remoteParticipants.map((p) => (
        <RemoteAudioTrack key={p.identity} participant={p} room={room} />
      ))}
    </div>
  );
}