<script lang="ts">
	import { resolve } from '$app/paths';
	import type { RevisionRow } from '$lib/api/types.js';
	import { formatDateTime } from '$lib/modules/display.js';
	import { Button } from '$lib/ui/core/button/index.js';
	import {
		Card,
		CardContent,
		CardHeader,
		CardTitle,
		CardDescription
	} from '$lib/ui/core/card/index.js';
	import AppDataTable from '$lib/ui/patterns/data-table/app-data-table.svelte';
	import ArrowRight from '@lucide/svelte/icons/arrow-right';
	import ExternalLink from '@lucide/svelte/icons/external-link';

	type Props = {
		items: RevisionRow[];
		loading?: boolean;
		initialLoading?: boolean;
		error?: string | null;
	};

	let { items, loading = false, initialLoading = false, error = null }: Props = $props();

	const columns = [
		{
			id: 'id',
			label: 'ID',
			sortable: true,
			sortValue: (rev: RevisionRow) => rev.id
		},
		{
			id: 'created',
			label: 'Создана',
			sortable: true,
			sortValue: (rev: RevisionRow) => rev.created_at ?? ''
		},
		{
			id: 'prefixes',
			label: 'Префиксов',
			sortable: true,
			sortValue: (rev: RevisionRow) => rev.materialized_prefix_count ?? 0
		},
		{ id: 'actions', label: '', class: 'w-10' }
	] as const;
</script>

<Card>
	<CardHeader
		class="flex flex-col gap-3 border-b py-3 sm:flex-row sm:items-center sm:justify-between"
	>
		<div class="min-w-0 flex-1">
			<CardTitle class="text-base">Последние ревизии</CardTitle>
			<CardDescription>Снимки конфигурации BIRD после обновления модулей</CardDescription>
		</div>
		<Button variant="outline" size="sm" href={resolve('/operations')}>
			Все
			<ArrowRight class="size-3.5" />
		</Button>
	</CardHeader>
	<CardContent class="p-4 pt-0">
		<AppDataTable
			columns={[...columns]}
			rows={items}
			rowKey={(rev) => rev.id}
			loading={initialLoading || loading}
			{error}
			emptyTitle="Нет ревизий"
			emptyDescription="Ревизии появятся после обновления модулей."
		>
			{#snippet cell({ row: rev, column })}
				{#if column.id === 'id'}
					<span class="font-mono text-xs">{rev.id.slice(0, 8)}…</span>
				{:else if column.id === 'created'}
					<span class="text-sm whitespace-nowrap text-muted-foreground">
						{formatDateTime(rev.created_at)}
					</span>
				{:else if column.id === 'prefixes'}
					<span class="tabular-nums">{rev.materialized_prefix_count}</span>
				{:else if column.id === 'actions'}
					<Button variant="ghost" size="icon-sm" href={resolve('/operations')}>
						<ExternalLink class="size-3.5" />
					</Button>
				{/if}
			{/snippet}
		</AppDataTable>
	</CardContent>
</Card>
