'use client';
import React, { useEffect, useRef, useState } from 'react';
import { Room } from 'livekit-client';

export default function RoomClient({ roomName = 'interview-room' }: { roomName?: string }) {
  const roomRef = useRef<Room | null>(null);
  const [status, setStatus] = useState('idle');

  useEffect(() => {
    let cancelled = false;
    (async () => {
      try {
        setStatus('fetching token');
        const res = await fetch(`/api/token?room=${roomName}`);
        const data = await res.json();
        const { token, wsUrl } = data;
        console.log("🚀 ~ useEffect ~ token:", data)
        if (cancelled) return;

        setStatus('creating room');
        const room = new Room();
        roomRef.current = room;

        // connect is instance method
        await room.connect(wsUrl, token);
        setStatus('connected');

        // publish microphone
        try {
          const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
          const track = stream.getAudioTracks()[0];
          await room.localParticipant.publishTrack(track);
        } catch (e) {
          console.warn('microphone publish failed', e);
        }

        console.log("🚀 ~ useEffect ~ room:", room)
        // data channel example
        room.dataChannels.open('app');
        room.dataChannels.on('message', (data) => {
          const text = typeof data === 'string' ? data : new TextDecoder().decode(data as ArrayBuffer);
          console.log('data message', text);
        });
      } catch (e) {
        console.error(e);
        setStatus('error');
      }
    })();

    return () => {
      cancelled = true;
      roomRef.current?.disconnect();
    };
  }, [roomName]);

  return <div>Interview Room — status: {status}</div>;
}