<script lang="ts">
import { page } from '$app/state';
import { m } from '$lib/paraglide/messages.js';

type Group = {
	id: string;
	name: string;
	permissions: string[];
};

type User = {
	id: string;
	email: string;
	firstName: string | null;
	lastName: string | null;
	groups: Group[];
};

let {
	users,
	autocollapse = false
}: {
	users: User[];
	autocollapse?: boolean;
} = $props();

let searchQuery = $state('');
let manualCollapse = $state(
	typeof localStorage !== 'undefined' &&
		localStorage.getItem('admin_users_list_collapsed') === 'true'
);
const isCollapsed = $derived(autocollapse || manualCollapse);

$effect(() => {
	if (typeof localStorage !== 'undefined') {
		localStorage.setItem('admin_users_list_collapsed', String(manualCollapse));
	}
});

const filtered = $derived(
	searchQuery.trim() === ''
		? users
		: users.filter((u) =>
				[u.email, u.firstName, u.lastName]
					.filter(Boolean)
					.some((v) => v!.toLowerCase().includes(searchQuery.toLowerCase()))
			)
);
</script>

{#if isCollapsed}
	<!-- Collapsed handle: 32px -->
	<button
		onclick={() => (manualCollapse = false)}
		aria-label={m.admin_btn_expand_list()}
		class="flex w-8 flex-shrink-0 flex-col items-center gap-2 border-r border-line bg-surface pt-2 hover:bg-muted"
	>
		<span class="text-sm font-bold text-ink-2">›</span>
		<span
			class="text-[8px] font-extrabold tracking-widest text-ink-3 uppercase"
			style="writing-mode: vertical-rl; transform: rotate(180deg);"
		>
			{m.admin_tab_users()}
		</span>
	</button>
{:else}
	<div
		class="flex w-[200px] flex-shrink-0 flex-col overflow-hidden border-r border-line bg-surface"
	>
		<!-- Panel header -->
		<div class="flex items-center justify-between border-b border-line px-3 py-2">
			<span class="text-xs font-bold tracking-widest text-ink-3 uppercase">
				{m.admin_users_list_title()}
			</span>
			<div class="flex items-center gap-1">
				<a
					href="/admin/users/new"
					class="inline-flex items-center gap-1 rounded-sm px-2 py-1 text-xs font-medium text-ink-2 transition-colors hover:bg-muted hover:text-ink"
					title={m.admin_btn_new_user()}
					aria-label={m.admin_btn_new_user()}
				>
					<svg
						class="h-3.5 w-3.5"
						fill="none"
						viewBox="0 0 24 24"
						stroke="currentColor"
						stroke-width="2.5"
						aria-hidden="true"
					>
						<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
					</svg>
				</a>
				<button
					onclick={() => (manualCollapse = true)}
					aria-label={m.admin_btn_collapse_list()}
					class="flex h-6 w-6 items-center justify-center rounded-sm text-xs font-bold text-ink-2 transition-colors hover:bg-muted"
				>
					‹
				</button>
			</div>
		</div>

		<!-- Search -->
		<div class="border-b border-line px-3 py-2">
			<input
				type="search"
				bind:value={searchQuery}
				placeholder={m.admin_users_search_placeholder()}
				class="w-full rounded-sm border border-line bg-surface px-2 py-1.5 text-sm text-ink placeholder:text-ink-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
			/>
		</div>

		<!-- Scrollable user list -->
		<div class="flex-1 overflow-y-auto">
			{#if filtered.length === 0}
				<p class="px-4 py-6 text-center text-xs text-ink-3">
					{m.admin_users_empty()}
				</p>
			{:else}
				{#each filtered as user (user.id)}
					{@const isActive = page.url.pathname.startsWith('/admin/users/' + user.id)}
					{@const fullName =
						[user.firstName, user.lastName].filter(Boolean).join(' ') || null}
					<a
						href="/admin/users/{user.id}"
						aria-current={isActive ? 'page' : undefined}
						class="block border-l-2 px-3 py-2.5 transition-colors {isActive
							? 'border-primary bg-primary/10 dark:bg-primary/15'
							: 'border-transparent hover:bg-muted'}"
					>
						<div class="text-sm font-bold text-ink">{user.email}</div>
						{#if fullName}
							<div class="mt-0.5 text-xs text-ink-3">{fullName}</div>
						{/if}
						{#if user.groups.length > 0}
							<div class="mt-1 flex flex-wrap gap-1">
								{#each user.groups as group (group.id)}
									<span class="rounded-sm bg-muted px-1.5 py-0.5 text-[10px] text-ink-3">
										{group.name}
									</span>
								{/each}
							</div>
						{/if}
					</a>
				{/each}
			{/if}
		</div>
	</div>
{/if}
