<!-- #region LogFilterBar [C:3] [TYPE Component] [SEMANTICS log, filter, level, source, toolbar] -->
<!-- @BRIEF Component component: components/tasks/LogFilterBar.svelte -->
<!-- @LAYER UI -->
<!--
@RELATION USES -> [EXT:frontend:App]

@SEMANTICS: log, filter, ui
@PURPOSE: Compact filter toolbar for logs — level, source, and text search in a single dense row.
@LAYER UI
@UX_STATE: Idle -> Shows filter controls
@UX_STATE: Active -> Filters applied, clear button visible
-->
<script lang="ts">
  let {
    availableSources = [],
    selectedLevel = $bindable(""),
    selectedSource = $bindable(""),
    searchText = $bindable(""),
    onfilterchange = () => {},
  } = $props();

  const levelOptions = [
    { value: "", label: "All" },
    { value: "DEBUG", label: "Debug" },
    { value: "INFO", label: "Info" },
    { value: "WARNING", label: "Warn" },
    { value: "ERROR", label: "Error" },
  ];

  function handleLevelChange(event) {
    selectedLevel = event.target.value;
    onfilterchange({
      level: selectedLevel,
      source: selectedSource,
      search: searchText,
    });
  }

  function handleSourceChange(event) {
    selectedSource = event.target.value;
    onfilterchange({
      level: selectedLevel,
      source: selectedSource,
      search: searchText,
    });
  }

  function handleSearchChange(event) {
    searchText = event.target.value;
    onfilterchange({
      level: selectedLevel,
      source: selectedSource,
      search: searchText,
    });
  }

  function clearFilters() {
    selectedLevel = "";
    selectedSource = "";
    searchText = "";
    onfilterchange({ level: "", source: "", search: "" });
  }

  let hasActiveFilters = $derived(
    selectedLevel || selectedSource || searchText,
  );
</script>

<div class="flex items-center gap-2 px-3 py-2 bg-white border-b border-gray-200">
  <div class="flex items-center gap-2 flex-1 min-w-0">
    <!-- Level filter -->
    <select
      class="bg-white text-gray-600 border border-gray-300 rounded-md px-2 py-1.5 text-xs cursor-pointer shrink-0 appearance-none pr-6 focus:outline-none focus:ring-2 focus:ring-primary-ring focus:border-primary-ring"
      style="background-image: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E&quot;); background-repeat: no-repeat; background-position: right 0.375rem center;"
      value={selectedLevel}
      onchange={handleLevelChange}
      aria-label="Filter by level"
    >
      {#each levelOptions as option}
        <option value={option.value}>{option.label}</option>
      {/each}
    </select>

    <!-- Source filter -->
    <select
      class="bg-white text-gray-600 border border-gray-300 rounded-md px-2 py-1.5 text-xs cursor-pointer shrink-0 appearance-none pr-6 focus:outline-none focus:ring-2 focus:ring-primary-ring focus:border-primary-ring"
      style="background-image: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E&quot;); background-repeat: no-repeat; background-position: right 0.375rem center;"
      value={selectedSource}
      onchange={handleSourceChange}
      aria-label="Filter by source"
    >
      <option value="">All Sources</option>
      {#each availableSources as source}
        <option value={source}>{source}</option>
      {/each}
    </select>

    <!-- Search input -->
    <div class="relative flex-1 min-w-0">
      <svg
        class="absolute left-2 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none"
        xmlns="http://www.w3.org/2000/svg"
        width="14"
        height="14"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
      >
        <circle cx="11" cy="11" r="8" />
        <path d="M21 21l-4.35-4.35" />
      </svg>
      <input
        type="text"
        class="w-full bg-white text-gray-900 border border-gray-300 rounded-md py-1.5 px-2 pl-7 text-xs placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-ring focus:border-primary-ring"
        placeholder="Search..."
        value={searchText}
        oninput={handleSearchChange}
        aria-label="Search logs"
      />
    </div>
  </div>

  {#if hasActiveFilters}
    <button
      class="flex items-center justify-center p-1.5 bg-white border border-gray-300 rounded-md text-gray-400 shrink-0 cursor-pointer transition-all hover:text-red-500 hover:border-red-300 hover:bg-red-50"
      onclick={clearFilters}
      aria-label="Clear filters"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="12"
        height="12"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
      >
        <path d="M18 6L6 18M6 6l12 12" />
      </svg>
    </button>
  {/if}
</div>
<!-- #endregion LogFilterBar -->
