<script lang="ts">
	import { onMount } from 'svelte';
	import { browser } from '$app/environment';
	import CallWindow from '$lib/components/call/CallWindow.svelte';
	import { obterDadosChamadaDaUrl, notificarJanelaPai } from '$lib/utils/callWindowManager';
	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';

	let dadosChamada = $state<{
		chamadaId: Id<'chamadas'>;
		conversaId: Id<'conversas'>;
		tipo: 'audio' | 'video';
		roomName: string;
		ehAnfitriao: boolean;
	} | null>(null);

	let erro = $state<string | null>(null);

	onMount(() => {
		if (!browser) return;

		// Obter dados da URL
		const dados = obterDadosChamadaDaUrl();

		if (!dados) {
			erro = 'Dados da chamada não encontrados na URL.';
			return;
		}

		dadosChamada = {
			chamadaId: dados.chamadaId as Id<'chamadas'>,
			conversaId: dados.conversaId as Id<'conversas'>,
			tipo: dados.tipo,
			roomName: dados.roomName,
			ehAnfitriao: dados.ehAnfitriao
		};

		// Notificar janela pai que está pronto
		notificarJanelaPai('ready');

		// Detectar fechamento da janela
		window.addEventListener('beforeunload', () => {
			notificarJanelaPai('closed');
		});
	});

	function handleClose(): void {
		notificarJanelaPai('closed');
		window.close();
	}
</script>

<div class="bg-base-100 h-screen w-screen">
	{#if erro}
		<div class="flex h-full w-full items-center justify-center">
			<div class="text-center">
				<div class="alert alert-error max-w-md">
					<svg
						xmlns="http://www.w3.org/2000/svg"
						class="h-6 w-6 shrink-0 stroke-current"
						fill="none"
						viewBox="0 0 24 24"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
						/>
					</svg>
					<span>{erro}</span>
				</div>
				<button class="btn btn-primary mt-4" onclick={handleClose}>Fechar</button>
			</div>
		</div>
	{:else if dadosChamada}
		<CallWindow
			chamadaId={dadosChamada.chamadaId}
			conversaId={dadosChamada.conversaId}
			tipo={dadosChamada.tipo}
			roomName={dadosChamada.roomName}
			ehAnfitriao={dadosChamada.ehAnfitriao}
			onClose={handleClose}
		/>
	{:else}
		<div class="flex h-full w-full items-center justify-center">
			<span class="loading loading-spinner loading-lg"></span>
		</div>
	{/if}
</div>
