'use client';

import { LiveKitRoom, useRoomContext } from '@livekit/components-react';
import { RoomEvent, DataPacket_Kind } from 'livekit-client';
import { useEffect, useState } from 'react';

function DataUI() {
  const room = useRoomContext();
  console.log("🚀 ~ DataUI ~ room:", room)
  const [messages, setMessages] = useState<{ sender: string; text: string }[]>([]);
  const [text, setText] = useState('');

  useEffect(() => {
    if (!room) return;
    const onData = (payload: Uint8Array, participant) => {
      const msg = new TextDecoder().decode(payload);
      setMessages(prev => [...prev, { sender: participant.identity, text: msg }]);
    };
    room.on(RoomEvent.DataReceived, onData);
    return () => room.off(RoomEvent.DataReceived, onData);
  }, [room]);

  const send = () => {
    if (!room || !text.trim()) return;
    const data = new TextEncoder().encode(text);
    console.log("🚀 ~ send ~ data:", data)
    room.localParticipant?.publishData(data, { reliable: true, kind: DataPacket_Kind.RELIABLE });
    setText('');
  };

  return (
    <div>
      <input value={text} onChange={e => setText(e.target.value)} placeholder="Message" />
      <button onClick={send}>Send</button>
      <div>
        {messages.map((m, i) => (<div key={i}><strong>{m.sender}:</strong> {m.text}</div>))}
      </div>
    </div>
  );
}

export default function MyRoomWrapper({ data }: { data: { token: string; wsUrl: string } }) {
    console.log("🚀 ~ MyRoomWrapper ~ data:", process.env.LIVEKIT_URL)
  return (
    <LiveKitRoom serverUrl={process.env.LIVEKIT_URL} token={process.env.LIVEKIT_API_KEY} connect={true}>
      <DataUI />
      {/* other components */}
    </LiveKitRoom>
  );
}