<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>
