sgse-app/apps/web/src/lib/components/MenuProtection.svelte

<script lang="ts">
  import { useQuery } from "convex-svelte";
  import { api } from "@sgse-app/backend/convex/_generated/api";
  import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
  import { authStore } from "$lib/stores/auth.svelte";
  import { loginModalStore } from "$lib/stores/loginModal.svelte";
  import { onMount } from "svelte";
  import { goto } from "$app/navigation";

  interface MenuProtectionProps {
    menuPath: string;
    requireGravar?: boolean;
    children?: any;
    redirectTo?: string;
  }

  let {
    menuPath,
    requireGravar = false,
    children,
    redirectTo = "/",
  }: MenuProtectionProps = $props();

  let verificando = $state(true);
  let temPermissao = $state(false);
  let motivoNegacao = $state("");

  // Query para verificar permissões (só executa se o usuário estiver autenticado)
  const permissaoQuery = $derived(
    authStore.usuario
      ? useQuery(api.menuPermissoes.verificarAcesso, {
          usuarioId: authStore.usuario._id as Id<"usuarios">,
          menuPath: menuPath,
        })
      : null
  );

  onMount(() => {
    verificarPermissoes();
  });

  $effect(() => {
    // Re-verificar quando o status de autenticação mudar
    if (authStore.autenticado !== undefined) {
      verificarPermissoes();
    }
  });

  $effect(() => {
    // Re-verificar quando a query carregar
    if (permissaoQuery?.data) {
      verificarPermissoes();
    }
  });

  function verificarPermissoes() {
    // Dashboard e Solicitar Acesso são públicos
    if (menuPath === "/" || menuPath === "/solicitar-acesso") {
      verificando = false;
      temPermissao = true;
      return;
    }

    // Se não está autenticado
    if (!authStore.autenticado) {
      verificando = false;
      temPermissao = false;
      motivoNegacao = "auth_required";
      
      // Abrir modal de login e salvar rota de redirecionamento
      const currentPath = window.location.pathname;
      loginModalStore.open(currentPath);
      
      // NÃO redirecionar, apenas mostrar o modal
      // O usuário verá a mensagem "Verificando permissões..." enquanto o modal está aberto
      return;
    }

    // Se está autenticado, verificar permissões
    if (permissaoQuery?.data) {
      const permissao = permissaoQuery.data;

      // Se não pode acessar
      if (!permissao.podeAcessar) {
        verificando = false;
        temPermissao = false;
        motivoNegacao = "access_denied";
        return;
      }

      // Se requer gravação mas não tem permissão
      if (requireGravar && !permissao.podeGravar) {
        verificando = false;
        temPermissao = false;
        motivoNegacao = "write_denied";
        return;
      }

      // Tem permissão!
      verificando = false;
      temPermissao = true;
    } else if (permissaoQuery?.error) {
      verificando = false;
      temPermissao = false;
      motivoNegacao = "error";
    }
  }
</script>

{#if verificando}
  <div class="flex items-center justify-center min-h-screen">
    <div class="text-center">
      {#if motivoNegacao === "auth_required"}
        <div class="p-4 bg-warning/10 rounded-full inline-block mb-4">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-warning" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
          </svg>
        </div>
        <h2 class="text-2xl font-bold text-base-content mb-2">Acesso Restrito</h2>
        <p class="text-base-content/70 mb-4">
          Esta área requer autenticação.<br />
          Por favor, faça login para continuar.
        </p>
      {:else}
        <span class="loading loading-spinner loading-lg text-primary"></span>
        <p class="mt-4 text-base-content/70">Verificando permissões...</p>
      {/if}
    </div>
  </div>
{:else if temPermissao}
  {@render children?.()}
{:else}
  <div class="flex items-center justify-center min-h-screen">
    <div class="text-center">
      <div class="p-4 bg-error/10 rounded-full inline-block mb-4">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-error" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
        </svg>
      </div>
      <h2 class="text-2xl font-bold text-base-content mb-2">Acesso Negado</h2>
      <p class="text-base-content/70">Você não tem permissão para acessar esta página.</p>
    </div>
  </div>
{/if}