<!--
  Phase 4: Filter bar for the unified proxy viewer.
  Provides text search, health status dropdown, type dropdown, and clear filters.
-->
<script lang="ts">
	import type { ProxyHealthStatus } from '$lib/types';
	import { t } from '$lib/i18n';
	import { IconSearch, IconX } from '$lib/components/icons';

	interface Props {
		search: string;
		healthFilter: ProxyHealthStatus | 'all';
		typeFilter: 'all' | 'managed' | 'standalone';
		onsearchchange: (value: string) => void;
		onhealthchange: (value: ProxyHealthStatus | 'all') => void;
		ontypechange: (value: 'all' | 'managed' | 'standalone') => void;
		onclear: () => void;
	}

	const {
		search,
		healthFilter,
		typeFilter,
		onsearchchange,
		onhealthchange,
		ontypechange,
		onclear
	}: Props = $props();

	const hasFilters = $derived(
		search.length > 0 || healthFilter !== 'all' || typeFilter !== 'all'
	);
</script>

<div class="flex flex-col gap-3 sm:flex-row sm:items-center">
	<!-- Text search -->
	<div class="relative flex-1">
		<IconSearch
			size={16}
			class="absolute left-3 top-1/2 -translate-y-1/2 text-[var(--text-tertiary)]"
		/>
		<input
			type="text"
			value={search}
			oninput={(e) => onsearchchange(e.currentTarget.value)}
			placeholder={$t('proxies.filter.search')}
			class="w-full rounded-lg border border-[var(--border-primary)] bg-[var(--surface-card)] py-2 pl-9 pr-3 text-sm text-[var(--text-primary)] placeholder:text-[var(--text-tertiary)] transition-colors focus:border-[var(--color-brand-500)] focus:outline-none focus:ring-1 focus:ring-[var(--color-brand-500)]"
		/>
	</div>

	<!-- Health filter -->
	<select
		value={healthFilter}
		onchange={(e) => onhealthchange(e.currentTarget.value as ProxyHealthStatus | 'all')}
		class="rounded-lg border border-[var(--border-primary)] bg-[var(--surface-card)] px-3 py-2 text-sm text-[var(--text-primary)] transition-colors focus:border-[var(--color-brand-500)] focus:outline-none focus:ring-1 focus:ring-[var(--color-brand-500)]"
	>
		<option value="all">{$t('proxies.filter.health')}: {$t('proxies.filter.all')}</option>
		<option value="healthy">{$t('proxies.health.healthy')}</option>
		<option value="unhealthy">{$t('proxies.health.unhealthy')}</option>
		<option value="unknown">{$t('proxies.health.unknown')}</option>
	</select>

	<!-- Type filter -->
	<select
		value={typeFilter}
		onchange={(e) => ontypechange(e.currentTarget.value as 'all' | 'managed' | 'standalone')}
		class="rounded-lg border border-[var(--border-primary)] bg-[var(--surface-card)] px-3 py-2 text-sm text-[var(--text-primary)] transition-colors focus:border-[var(--color-brand-500)] focus:outline-none focus:ring-1 focus:ring-[var(--color-brand-500)]"
	>
		<option value="all">{$t('proxies.filter.type')}: {$t('proxies.filter.all')}</option>
		<option value="managed">{$t('proxies.managed')}</option>
		<option value="standalone">{$t('proxies.standalone')}</option>
	</select>

	<!-- Clear filters -->
	{#if hasFilters}
		<button
			type="button"
			onclick={onclear}
			class="inline-flex items-center gap-1.5 rounded-lg border border-[var(--border-primary)] bg-[var(--surface-card)] px-3 py-2 text-sm text-[var(--text-secondary)] transition-colors hover:bg-[var(--surface-card-hover)] hover:text-[var(--text-primary)]"
		>
			<IconX size={14} />
			{$t('proxies.filter.clear')}
		</button>
	{/if}
</div>
