import '@livekit/components-styles';

import { LiveKitRoom, VideoConference } from '@livekit/components-react';
import { useState, useEffect } from 'react';

export function HuddleApp() {
  const [connection, setConnection] = useState<{ token: string; serverUrl: string } | null>(null);

  useEffect(() => {
    return window.electronHuddle.onConnect((data) => {
      setConnection(data);
    });
  }, []);

  const handleDisconnected = () => {
    window.electronWindow.closeHuddle();
  };

  if (!connection) {
    return (
      <div className="flex h-screen items-center justify-center bg-background text-foreground">
        <p className="text-muted-foreground text-sm">Connecting to huddle...</p>
      </div>
    );
  }

  return (
    <LiveKitRoom
      token={connection.token}
      serverUrl={connection.serverUrl}
      connect={true}
      audio={true}
      video={false}
      onDisconnected={handleDisconnected}
      data-lk-theme="default"
      style={{ height: '100vh' }}
    >
      <VideoConference />
    </LiveKitRoom>
  );
}