<!-- [DEF:LogFilterBar:Component] -->
<!--
@TIER: STANDARD
@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>
  import { createEventDispatcher } from "svelte";

  let {
    availableSources = [],
    selectedLevel = $bindable(""),
    selectedSource = $bindable(""),
    searchText = $bindable(""),
  } = $props();

  const dispatch = createEventDispatcher();

  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;
    dispatch("filter-change", {
      level: selectedLevel,
      source: selectedSource,
      search: searchText,
    });
  }

  function handleSourceChange(event) {
    selectedSource = event.target.value;
    dispatch("filter-change", {
      level: selectedLevel,
      source: selectedSource,
      search: searchText,
    });
  }

  function handleSearchChange(event) {
    searchText = event.target.value;
    dispatch("filter-change", {
      level: selectedLevel,
      source: selectedSource,
      search: searchText,
    });
  }

  function clearFilters() {
    selectedLevel = "";
    selectedSource = "";
    searchText = "";
    dispatch("filter-change", { level: "", source: "", search: "" });
  }

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

<div
  class="flex items-center gap-1.5 px-3 py-2 bg-terminal-bg border-b border-terminal-surface"
>
  <div class="flex items-center gap-1.5 flex-1 min-w-0">
    <select
      class="bg-terminal-surface text-terminal-text-subtle border border-terminal-border rounded px-2 py-[0.3125rem] text-xs cursor-pointer shrink-0 appearance-none pr-6 focus:outline-none 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='%2364748b' 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>

    <select
      class="bg-terminal-surface text-terminal-text-subtle border border-terminal-border rounded px-2 py-[0.3125rem] text-xs cursor-pointer shrink-0 appearance-none pr-6 focus:outline-none 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='%2364748b' 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>

    <div class="relative flex-1 min-w-0">
      <svg
        class="absolute left-2 top-1/2 -translate-y-1/2 text-terminal-text-muted 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-terminal-surface text-terminal-text-bright border border-terminal-border rounded py-[0.3125rem] px-2 pl-7 text-xs placeholder:text-terminal-text-muted focus:outline-none 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-[0.3125rem] bg-transparent border border-terminal-border rounded text-terminal-text-subtle shrink-0 cursor-pointer transition-all hover:text-log-error hover:border-log-error hover:bg-log-error/10"
      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>
<!-- [/DEF:LogFilterBar:Component] -->
