<!-- #region ColumnFilterPopover [C:3] [TYPE Component] [SEMANTICS dashboard, filter, popover, column] -->
<!-- @ingroup Routes -->
<!-- @BRIEF Reusable column filter dropdown for dashboard grid — search input, select-all, clear, and checkbox list. -->
<!-- @LAYER UI -->
<!-- @UX_STATE Closed -> Popover hidden. -->
<!-- @UX_STATE Open -> Popover visible at positioned coordinates with search + options. -->
<script lang="ts">
  import { t } from "$lib/i18n/index.svelte.js";
  import { Button } from "$lib/ui";

  let {
    filterValues = $bindable(new Set<string>()),
    searchText = $bindable(""),
    options = [] as string[],
    position = { left: 0, top: 0 },
    widthPx = 256,
    showSearch = true,
    staticOptions = [] as string[],
    onToggleFilter,
    onClear,
  } = $props<{
    filterValues: Set<string>;
    searchText: string;
    options: string[];
    position: { left: number; top: number };
    widthPx?: number;
    showSearch?: boolean;
    staticOptions?: string[];
    onToggleFilter?: (_value: string, _checked: boolean) => void;
    onClear?: () => void;
  }>();
</script>

<div
  class="fixed z-50 rounded-lg border border-border bg-surface-card shadow-lg p-3"
  style="left: {position.left}px; top: {position.top}px; width: {widthPx}px;"
>
  {#if showSearch}
    <input
      type="text"
      class="w-full rounded border border-border-strong px-2 py-1 text-xs"
      placeholder={$t.dashboard?.search}
      bind:value={searchText}
    />
    <div class="mt-2 flex items-center justify-between text-xs">
      <Button variant="ghost" size="sm" onclick={() => {
        // Select all currently visible options
        for (const v of options) filterValues.add(v);
      }}>{$t.dashboard?.select_all}</Button>
      <Button variant="ghost" size="sm" onclick={() => onClear?.()}>
        {$t.common?.clear || "Clear"}
      </Button>
    </div>
  {/if}
  <div class="mt-2 max-h-44 overflow-auto space-y-1 text-xs">
    {#each (showSearch ? options : staticOptions) as value}
      <label class="flex items-center gap-2">
        <input
          type="checkbox"
          checked={filterValues.has(value)}
          onchange={(event) => onToggleFilter?.(value, (event.target as HTMLInputElement).checked)}
        />
        <span class="truncate">{value}</span>
      </label>
    {/each}
  </div>
</div>
<!-- #endregion ColumnFilterPopover -->