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 { 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 currentUser = useQuery(api.auth.getCurrentUser, {});
	const permissaoQuery = $derived(
		currentUser?.data
			? useQuery(api.menuPermissoes.verificarAcesso, {
					usuarioId: currentUser.data._id as Id<'usuarios'>,
					menuPath: menuPath
				})
			: null
	);

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

	$effect(() => {
		// Re-verificar quando o status do usuário atual mudar
		verificarPermissoes();
	});

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

	function verificarPermissoes() {
		// Dashboard e abertura de chamados são públicos
		if (menuPath === '/' || menuPath === '/abrir-chamado') {
			verificando = false;
			temPermissao = true;
			return;
		}

		// Se não está autenticado
		if (!currentUser?.data) {
			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 min-h-screen items-center justify-center">
		<div class="text-center">
			{#if motivoNegacao === 'auth_required'}
				<div class="bg-warning/10 mb-4 inline-block rounded-full p-4">
					<svg
						xmlns="http://www.w3.org/2000/svg"
						class="text-warning h-16 w-16"
						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-base-content mb-2 text-2xl font-bold">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="text-base-content/70 mt-4">Verificando permissões...</p>
			{/if}
		</div>
	</div>
{:else if temPermissao}
	{@render children?.()}
{:else}
	<div class="flex min-h-screen items-center justify-center">
		<div class="text-center">
			<div class="bg-error/10 mb-4 inline-block rounded-full p-4">
				<svg
					xmlns="http://www.w3.org/2000/svg"
					class="text-error h-16 w-16"
					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-base-content mb-2 text-2xl font-bold">Acesso Negado</h2>
			<p class="text-base-content/70">Você não tem permissão para acessar esta página.</p>
		</div>
	</div>
{/if}