<script lang="ts">
	import '../app.css';
	import Sidebar from '$lib/components/Sidebar.svelte';
	import { createSvelteAuthClient } from '@mmailaender/convex-better-auth-svelte/svelte';
	import { authClient } from '$lib/auth';
	// Importar polyfill ANTES de qualquer outro código que possa usar Jitsi
	import '$lib/utils/jitsiPolyfill';
	import { useQuery } from 'convex-svelte';
	import { api } from '@sgse-app/backend/convex/_generated/api';
	import { aplicarTema, aplicarTemaPadrao } from '$lib/utils/temas';

	const { children } = $props();

	createSvelteAuthClient({ authClient });

	// Buscar usuário atual para aplicar tema
	const currentUser = useQuery(api.auth.getCurrentUser, {});

	// Aplicar tema quando o usuário for carregado
	$effect(() => {
		if (typeof document === 'undefined') return;

		const htmlElement = document.documentElement;

		// Aguardar um pouco para garantir que o DOM está pronto
		const timeoutId = setTimeout(() => {
			if (currentUser?.data?.temaPreferido) {
				// Usuário logado com tema preferido - aplicar tema salvo
				aplicarTema(currentUser.data.temaPreferido);
			} else if (currentUser !== undefined) {
				// Se a query terminou (mesmo que não haja usuário), aplicar tema padrão
				if (!htmlElement.getAttribute('data-theme')) {
					aplicarTemaPadrao();
				}
			}
		}, 50);

		return () => clearTimeout(timeoutId);
	});

	// Aplicar tema padrão imediatamente ao carregar (antes de verificar usuário)
	$effect(() => {
		if (typeof document !== 'undefined') {
			// Se não há tema aplicado ainda, aplicar o padrão imediatamente
			const htmlElement = document.documentElement;
			if (!htmlElement.getAttribute('data-theme')) {
				aplicarTemaPadrao();
			}
		}
	});
</script>

<div>
	<div class="flex">
		<Sidebar>{@render children()}</Sidebar>
	</div>
</div>
