<script lang="ts">
import { slide } from 'svelte/transition';
import { m } from '$lib/paraglide/messages.js';
import UsersTab from './UsersTab.svelte';
import TagsTab from './TagsTab.svelte';
import GroupsTab from './GroupsTab.svelte';
import SystemTab from './SystemTab.svelte';

let { data, form } = $props();

let activeTab = $state('users');
</script>

<div class="mx-auto max-w-7xl px-4 py-8 font-sans sm:px-6 lg:px-8">
	<div class="mb-8 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
		<h1 class="font-serif text-3xl text-ink">{m.admin_heading()}</h1>

		<!-- Tabs -->
		<div class="flex rounded-lg border border-line bg-surface p-1 shadow-sm">
			<button
				class="rounded-md px-2 py-2 text-sm font-bold tracking-wide uppercase transition sm:px-4 {activeTab ===
				'users'
					? 'bg-primary text-primary-fg'
					: 'text-ink-2 hover:text-ink'}"
				onclick={() => (activeTab = 'users')}>{m.admin_tab_users()}</button
			>
			<button
				class="rounded-md px-2 py-2 text-sm font-bold tracking-wide uppercase transition sm:px-4 {activeTab ===
				'groups'
					? 'bg-primary text-primary-fg'
					: 'text-ink-2 hover:text-ink'}"
				onclick={() => (activeTab = 'groups')}>{m.admin_tab_groups()}</button
			>
			<button
				class="rounded-md px-2 py-2 text-sm font-bold tracking-wide uppercase transition sm:px-4 {activeTab ===
				'tags'
					? 'bg-primary text-primary-fg'
					: 'text-ink-2 hover:text-ink'}"
				onclick={() => (activeTab = 'tags')}>{m.admin_tab_tags()}</button
			>
			<button
				class="rounded-md px-2 py-2 text-sm font-bold tracking-wide uppercase transition sm:px-4 {activeTab ===
				'system'
					? 'bg-primary text-primary-fg'
					: 'text-ink-2 hover:text-ink'}"
				onclick={() => (activeTab = 'system')}>{m.admin_tab_system()}</button
			>
		</div>
	</div>

	{#if form?.message}
		<div class="mb-6 rounded border border-accent/50 bg-accent/20 p-4 text-ink">
			{form.message}
		</div>
	{/if}

	{#if activeTab === 'users'}
		<div in:slide>
			<UsersTab users={data.users} />
		</div>
	{:else if activeTab === 'tags'}
		<div in:slide>
			<TagsTab tags={data.tags} />
		</div>
	{:else if activeTab === 'groups'}
		<div in:slide>
			<GroupsTab groups={data.groups} />
		</div>
	{:else if activeTab === 'system'}
		<div in:slide>
			<SystemTab />
		</div>
	{/if}
</div>
