<script lang="ts">
	import { base } from '$app/paths';
	import { page } from '$app/state';
	import { api, ApiError, type App, type QueueSummary } from '$lib/api';

	let slug = $derived(page.params.slug ?? '');
	let app = $state<App | null>(null);
	let queues = $state<QueueSummary[]>([]);
	let loading = $state(false);
	let error = $state<string | null>(null);

	async function loadApp() {
		try {
			app = await api.apps.get(slug);
		} catch (e) {
			error = e instanceof ApiError ? e.message : String(e);
		}
	}

	async function loadQueues() {
		loading = true;
		error = null;
		try {
			queues = await api.queues.list(slug);
		} catch (e) {
			error = e instanceof ApiError ? e.message : String(e);
		} finally {
			loading = false;
		}
	}

	$effect(() => {
		void slug;
		void loadApp();
		void loadQueues();
	});
</script>

<svelte:head>
	<title>Queues — {app?.name ?? slug} — PiCloud</title>
</svelte:head>

<header>
	<a class="back" href="{base}/apps/{slug}">← Back to {app?.name ?? slug}</a>
	<h1>Queues</h1>
	<p class="subtle">
		Per-app durable queues. Producers call <code>queue::enqueue(name, msg)</code>;
		consumers register a <code>queue:receive</code> trigger. v1.1.9.
	</p>
</header>

{#if error}
	<p class="error">{error}</p>
{/if}

{#if loading && queues.length === 0}
	<p class="muted">Loading…</p>
{:else if queues.length === 0}
	<p class="muted">
		No queues in this app yet. A queue is created implicitly the first time a
		message is enqueued. Register a <code>queue:receive</code> trigger from the
		Triggers tab to consume messages.
	</p>
{:else}
	<table class="queues">
		<thead>
			<tr>
				<th>Queue</th>
				<th class="num">Total</th>
				<th class="num">Pending</th>
				<th class="num">Claimed</th>
				<th></th>
			</tr>
		</thead>
		<tbody>
			{#each queues as q (q.queue_name)}
				<tr>
					<td><code>{q.queue_name}</code></td>
					<td class="num">{q.total}</td>
					<td class="num">{q.pending}</td>
					<td class="num">{q.claimed}</td>
					<td>
						<a href="{base}/apps/{slug}/queues/{encodeURIComponent(q.queue_name)}">
							drilldown →
						</a>
					</td>
				</tr>
			{/each}
		</tbody>
	</table>
{/if}

<style>
	header {
		margin-bottom: 1rem;
	}
	.back {
		font-size: 0.875rem;
		color: var(--color-link);
	}
	h1 {
		margin: 0.25rem 0;
	}
	.subtle {
		color: var(--color-muted);
		font-size: 0.875rem;
	}
	.error {
		color: var(--color-error, #c00);
	}
	.muted {
		color: var(--color-muted);
	}
	table.queues {
		width: 100%;
		border-collapse: collapse;
	}
	table.queues th,
	table.queues td {
		text-align: left;
		padding: 0.5rem;
		border-bottom: 1px solid var(--color-border, #eee);
	}
	.num {
		text-align: right;
		font-variant-numeric: tabular-nums;
	}
</style>
