<script lang="ts">
	import { Badge } from '$lib/components/ui/badge/index.js';
	import { Separator } from '$lib/components/ui/separator/index.js';
	import * as Tooltip from '$lib/components/ui/tooltip/index.js';
	import { cn } from '$lib/utils.js';
	import InfoIcon from '@lucide/svelte/icons/info';
	import StarIcon from '@lucide/svelte/icons/star';

	let {
		active_on_servers,
		recent_on_servers,
		primary_server,
		linkToServer = true,
		class: className
	}: {
		active_on_servers?: string[] | null;
		recent_on_servers?: string[] | null;
		primary_server?: string | null;
		/** Ссылка на `/servers/{alias}` у бейджей */
		linkToServer?: boolean;
		class?: string;
	} = $props();

	const activeServers = $derived(((active_on_servers ?? []) as string[]).filter(Boolean));
	const recentServers = $derived(((recent_on_servers ?? []) as string[]).filter(Boolean));
	const recentOnly = $derived(recentServers.filter((s) => !activeServers.includes(s)));

	const soleActiveTip =
		'Единственный сервер в активных на этом снимке (не приоритет, а однозначность).';

	function serverHref(alias: string): string | undefined {
		if (!linkToServer) return undefined;
		return `/servers/${encodeURIComponent(alias)}`;
	}
</script>

<div class={cn('space-y-2 text-xs', className)}>
	{#if activeServers.length > 0}
		<div class="space-y-1">
			<div class="flex flex-wrap items-center gap-1">
				<span class="text-muted-foreground">Активные</span>
				<Tooltip.Root>
					<Tooltip.Trigger
						class="inline-flex size-3.5 shrink-0 items-center justify-center rounded-sm text-muted-foreground hover:text-foreground"
						aria-label="Пояснение: активные"
					>
						<InfoIcon class="size-3.5" />
					</Tooltip.Trigger>
					<Tooltip.Content side="top" class="max-w-xs">
						<p class="text-xs">
							Серверы, где этот IP есть в списке активных уникальных адресов на момент снимка
							шлюза.
						</p>
					</Tooltip.Content>
				</Tooltip.Root>
			</div>
			<div class="flex flex-wrap items-center gap-1">
				{#each activeServers as srv (srv)}
					{#if primary_server && srv === primary_server && activeServers.length === 1}
						<Tooltip.Root>
							<Tooltip.Trigger class="inline-flex">
								<Badge
									variant="secondary"
									class="font-normal px-2 py-0.5 gap-1"
									href={serverHref(srv)}
								>
									<StarIcon class="size-3 shrink-0 opacity-90" aria-hidden="true" />
									{srv}
								</Badge>
							</Tooltip.Trigger>
							<Tooltip.Content side="bottom" class="max-w-xs">
								<p class="text-xs">{soleActiveTip}</p>
							</Tooltip.Content>
						</Tooltip.Root>
					{:else}
						<Badge variant="secondary" class="font-normal px-2 py-0.5" href={serverHref(srv)}>
							{srv}
						</Badge>
					{/if}
				{/each}
			</div>
		</div>
	{:else}
		<span class="text-muted-foreground">
			{recentOnly.length > 0 ? 'Нет в активных' : '—'}
		</span>
	{/if}

	{#if recentOnly.length > 0}
		{#if activeServers.length > 0}
			<Separator class="my-1" />
		{/if}
		<div class="space-y-1">
			<div class="flex flex-wrap items-center gap-1">
				<span class="text-muted-foreground">Только недавние</span>
				<Tooltip.Root>
					<Tooltip.Trigger
						class="inline-flex size-3.5 shrink-0 items-center justify-center rounded-sm text-muted-foreground hover:text-foreground"
						aria-label="Пояснение: только недавние"
					>
						<InfoIcon class="size-3.5" />
					</Tooltip.Trigger>
					<Tooltip.Content side="top" class="max-w-xs">
						<p class="text-xs">
							Серверы, где IP есть в недавнем списке, но на этом снимке не в активных — например
							недавнее подключение с другого шлюза.
						</p>
					</Tooltip.Content>
				</Tooltip.Root>
			</div>
			<div class="flex flex-wrap items-center gap-1">
				{#each recentOnly as srv (srv)}
					<Badge variant="outline" class="font-normal px-2 py-0.5" href={serverHref(srv)}>
						{srv}
					</Badge>
				{/each}
			</div>
		</div>
	{/if}
</div>
