<script lang="ts">
	import ProtectedRoute from '$lib/components/ProtectedRoute.svelte';
	import { goto } from '$app/navigation';
	import { resolve } from '$app/paths';
	import { Home, User, ArrowLeft, Info } from 'lucide-svelte';
</script>

<ProtectedRoute allowedRoles={['ti_master', 'admin']} maxLevel={1}>
	<!-- Breadcrumb -->
	<div class="breadcrumbs mb-4 text-sm">
		<ul>
			<li>
				<a href={resolve('/')} class="text-primary hover:text-primary-focus">
					<Home class="h-4 w-4" strokeWidth={2} />
					Dashboard
				</a>
			</li>
			<li>
				<a href={resolve('/ti')} class="text-primary hover:text-primary-focus">TI</a>
			</li>
			<li class="font-semibold">Personalizar Permissões</li>
		</ul>
	</div>

	<!-- Header -->
	<div class="mb-6">
		<div class="mb-2 flex items-center gap-3">
			<div class="bg-info/10 rounded-xl p-3">
				<User class="text-info h-8 w-8" strokeWidth={2} />
			</div>
			<div class="flex-1">
				<h1 class="text-base-content text-3xl font-bold">Funcionalidade descontinuada</h1>
				<p class="text-base-content/60 mt-1">
					Agora as permissões são configuradas por ação em cada perfil no painel de permissões.
				</p>
			</div>
			<button class="btn gap-2" onclick={() => goto(resolve('/ti'))}>
				<ArrowLeft class="h-5 w-5" strokeWidth={2} />
				Voltar
			</button>
		</div>
	</div>
	<div class="alert alert-info shadow-lg">
		<Info class="h-6 w-6 shrink-0 stroke-current" strokeWidth={2} />
		<span>
			A personalização por usuário foi substituída por <strong>permissões por ação</strong>
			por perfil. Utilize o
			<a href={resolve('/ti/painel-permissoes')} class="link link-primary">Painel de Permissões</a> para
			configurar.
		</span>
	</div>
</ProtectedRoute>
