<!-- #region StatsBar [C:3] [TYPE Component] [SEMANTICS ui,dataset,stats,filter] -->
<!-- @BRIEF Compact filter pills showing aggregate counts (All, Without mapping, Mapped, Linked). -->
<!-- @RATIONALE Converted from card tiles (p-3, text-2xl) to compact pills (rounded-full px-3 py-1 text-sm) to fix oversized buttons complaint. -->
<!-- @REJECTED Card-tile filter buttons rejected — were too visually heavy at 12px padding + 24px font, dominating the page top. -->
<!-- @RELATION BINDS_TO -> [EXT:frontend:environmentContextStore] -->
<!-- @UX_STATE Loading -> 4 skeleton pills pulsing. -->
<!-- @UX_STATE Loaded -> pills with numbers, active filter highlighted. -->
<!-- @UX_STATE Filtered -> selected pill has filled background; parent reloads with filter param. -->
<!-- @UX_REACTIVITY Props -> stats, activeFilter, isLoading -->
<!-- @UX_REACTIVITY Events -> onfilter(filterKey) emitted on pill click -->
<script lang="ts">
  import { t } from "$lib/i18n/index.svelte.js";

  let { stats = null, activeFilter = null, isLoading = false, onfilter } = $props();

  const tiles = [
    { key: "all", label: "all", getCount: (s) => s?.total ?? 0 },
    { key: "unmapped", label: "without_mapping", getCount: (s) => s?.unmapped_count ?? 0 },
    { key: "mapped", label: "with_mapping", getCount: (s) => s?.mapped_count ?? 0 },
    { key: "linked", label: "linked_to_dashboards", getCount: (s) => s?.linked_count ?? 0 },
  ];

  function handleTileClick(key) {
    if (activeFilter === key) {
      onfilter?.(null);
    } else {
      onfilter?.(key);
    }
  }
</script>

<div class="flex flex-wrap gap-2 mb-4" role="group" aria-label="Dataset filters">
  {#each tiles as tile (tile.key)}
    {#if isLoading}
      <div class="h-8 w-24 bg-gray-200 rounded-full animate-pulse" aria-busy="true"></div>
    {:else}
      <button
        class="inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-sm transition-all {activeFilter === tile.key ? 'bg-primary text-white shadow-sm' : 'bg-white border border-gray-300 text-gray-600 hover:border-gray-400 hover:text-gray-800'}"
        onclick={() => handleTileClick(tile.key)}
        aria-pressed={activeFilter === tile.key}
        title={$t.datasets?.[tile.key === 'all' ? 'filter_all_tip' : tile.key === 'unmapped' ? 'filter_unmapped_tip' : tile.key === 'mapped' ? 'filter_mapped_tip' : 'filter_linked_tip']}
      >
        <span>{$t.datasets?.[tile.label] ?? tile.label}</span>
        <span class="font-semibold tabular-nums">{tile.getCount(stats)}</span>
      </button>
    {/if}
  {/each}
</div>
<!-- #endregion StatsBar -->