<script lang="ts">
import { goto } from '$app/navigation';
import { onMount } from 'svelte';
import { m } from '$lib/paraglide/messages.js';

let { data } = $props();

// On desktop/tablet the layout shell with EntityNav is visible.
// On mobile this page IS the entity picker — tapping an entity pushes
// the user to that route so the browser back button returns here.
onMount(() => {
	if (window.matchMedia('(min-width: 768px)').matches) {
		goto('/admin/users', { replaceState: true });
	}
});
</script>

<svelte:head>
	<title>{m.page_title_admin()}</title>
</svelte:head>

<!-- Mobile entity picker (md+ viewports redirect to /admin/users on mount) -->
<div class="flex flex-1 flex-col bg-surface">
	<div class="border-b border-line px-4 py-4">
		<h1 class="font-sans text-lg font-bold text-ink">{m.admin_heading()}</h1>
	</div>

	<nav class="divide-y divide-line" aria-label={m.admin_heading()}>
		{#if data.canManageUsers}
			<a href="/admin/users" class="flex items-center justify-between px-4 py-4 hover:bg-muted">
				<div>
					<div class="font-sans text-sm font-bold text-ink">{m.admin_tab_users()}</div>
					<div class="mt-0.5 font-sans text-xs text-ink-3">{data.userCount}</div>
				</div>
				<span class="text-ink-3">›</span>
			</a>
		{/if}

		{#if data.canManagePermissions}
			<a href="/admin/groups" class="flex items-center justify-between px-4 py-4 hover:bg-muted">
				<div>
					<div class="font-sans text-sm font-bold text-ink">{m.admin_tab_groups()}</div>
					<div class="mt-0.5 font-sans text-xs text-ink-3">{data.groupCount}</div>
				</div>
				<span class="text-ink-3">›</span>
			</a>
		{/if}

		{#if data.canManageUsers}
			<a href="/admin/invites" class="flex items-center justify-between px-4 py-4 hover:bg-muted">
				<div>
					<div class="font-sans text-sm font-bold text-ink">{m.admin_tab_invites()}</div>
					<div class="mt-0.5 font-sans text-xs text-ink-3">{data.inviteCount}</div>
				</div>
				<span class="text-ink-3">›</span>
			</a>
		{/if}

		{#if data.canManageTags}
			<a href="/admin/tags" class="flex items-center justify-between px-4 py-4 hover:bg-muted">
				<div>
					<div class="font-sans text-sm font-bold text-ink">{m.admin_tab_tags()}</div>
					<div class="mt-0.5 font-sans text-xs text-ink-3">{data.tagCount}</div>
				</div>
				<span class="text-ink-3">›</span>
			</a>
		{/if}

		{#if data.canRunMaintenance}
			<a href="/admin/system" class="flex items-center justify-between px-4 py-4 hover:bg-muted">
				<div>
					<div class="font-sans text-sm font-bold text-ink">{m.admin_tab_system()}</div>
				</div>
				<span class="text-ink-3">›</span>
			</a>
		{/if}
	</nav>
</div>
