<script lang="ts">
	import { afterNavigate, goto } from '$app/navigation';
	import { page } from '$app/state';
	import * as Tabs from '$lib/components/ui/tabs';
	import { ScrollText, ListTodo, FolderTree } from 'lucide-svelte';
	import { m } from '$lib/i18n/messages';
	import BitacoraTab from './bitacora-tab.svelte';
	import TasksTab from './tasks-tab.svelte';
	import FilesTab from './files-tab.svelte';
	import type { PageData } from './$types';
	import { currentUser, userHasPermission } from '$lib/auth';
	import ErrorState from '$lib/components/dashboard/common/error-state.svelte';

	let { data }: { data: PageData } = $props();

	const canViewAuditLogs = $derived(userHasPermission($currentUser, 'audit_logs.view'));

	let tabValue = $state(data.initialTab);

	$effect(() => {
		tabValue = data.initialTab;
	});

	afterNavigate(() => {
		const raw = page.url.searchParams.get('tab');
		const t = raw === 'tasks' || raw === 'files' ? raw : 'bitacora';
		tabValue = t;
	});

	function onTabValueChange(v: string) {
		const raw = page.url.searchParams.get('tab');
		const fromUrl = raw === 'tasks' || raw === 'files' ? raw : 'bitacora';
		if (v === fromUrl) return;

		const u = new URL(page.url.href);
		if (v === 'tasks' || v === 'files') {
			u.searchParams.set('tab', v);
		} else {
			u.searchParams.delete('tab');
		}
		const qs = u.searchParams.toString();
		void goto(`${u.pathname}${qs ? `?${qs}` : ''}`, {
			replaceState: true,
			noScroll: true,
			keepFocus: true
		});
	}
</script>

{#if !canViewAuditLogs}
	<div
		class="flex h-[calc(100svh-4rem)] flex-col overflow-hidden p-6 group-has-data-[collapsible=icon]/sidebar-wrapper:h-[calc(100svh-3rem)]"
	>
		<ErrorState status={403} />
	</div>
{:else}
<div class="flex flex-col gap-6 overflow-hidden h-[calc(100svh-4rem)] group-has-data-[collapsible=icon]/sidebar-wrapper:h-[calc(100svh-3rem)]">
	<div class="flex items-center justify-between">
		<div>
			<h1 class="text-3xl font-bold tracking-tight">{m['sidebar.audit_logs_title']()}</h1>
			<p class="text-muted-foreground">{m['sidebar.audit_logs_description']()}</p>
		</div>
	</div>

	<Tabs.Root
		bind:value={tabValue}
		onValueChange={onTabValueChange}
		class="flex min-h-0 w-full flex-1 flex-col"
	>
		<Tabs.List class="grid w-full grid-cols-3">
			<Tabs.Trigger value="bitacora">
				<ScrollText class="mr-2 h-4 w-4" />
				{m['sidebar.audit_logs_tab_bitacora']()}
			</Tabs.Trigger>
			<Tabs.Trigger value="tasks">
				<ListTodo class="mr-2 h-4 w-4" />
				{m['sidebar.audit_logs_tab_tasks']()}
			</Tabs.Trigger>
			<Tabs.Trigger value="files">
				<FolderTree class="mr-2 h-4 w-4" />
				{m['sidebar.audit_logs_tab_files']()}
			</Tabs.Trigger>
		</Tabs.List>

		<Tabs.Content value="bitacora" class="mt-6 flex min-h-0 flex-1 flex-col overflow-hidden">
			{#if tabValue === 'bitacora'}
				<BitacoraTab />
			{/if}
		</Tabs.Content>
		<Tabs.Content value="tasks" class="mt-6 flex min-h-0 flex-1 flex-col overflow-hidden">
			{#if tabValue === 'tasks'}
				<TasksTab />
			{/if}
		</Tabs.Content>
		<Tabs.Content value="files" class="mt-6 flex min-h-0 flex-1 flex-col overflow-hidden">
			{#if tabValue === 'files'}
				<FilesTab />
			{/if}
		</Tabs.Content>
	</Tabs.Root>
</div>
{/if}
