<!--
  Event log filter controls.
  Compact pill-based severity & source toggles, date range presets, search.
  Severity pills double as stats display when counts are provided.
-->
<script lang="ts">
	import { t } from '$lib/i18n';
	import type { EventLogStats } from '$lib/types';

	interface Props {
		severities: string[];
		sources: string[];
		dateRange: string;
		searchText: string;
		stats?: EventLogStats;
		onseveritieschange: (v: string[]) => void;
		onsourceschange: (v: string[]) => void;
		ondaterangechange: (v: string) => void;
		onsearchchange: (v: string) => void;
		onclear: () => void;
	}

	const {
		severities,
		sources,
		dateRange,
		searchText,
		stats,
		onseveritieschange,
		onsourceschange,
		ondaterangechange,
		onsearchchange,
		onclear
	}: Props = $props();

	const allSeverities = ['info', 'warn', 'error'] as const;
	const allSources = ['deploy', 'container', 'proxy', 'system'] as const;

	const dateRangeOptions = [
		{ value: '1h', labelKey: 'events.filter.lastHour' },
		{ value: '24h', labelKey: 'events.filter.last24h' },
		{ value: '7d', labelKey: 'events.filter.last7d' },
		{ value: 'all', labelKey: 'events.filter.allTime' }
	] as const;

	// Severity pill styling
	const severityStyles: Record<string, { active: string; inactive: string; dot: string }> = {
		info: {
			active: 'bg-blue-100 text-blue-700 ring-1 ring-blue-300 dark:bg-blue-900/40 dark:text-blue-300 dark:ring-blue-700',
			inactive: 'bg-[var(--surface-card-hover)] text-[var(--text-tertiary)] line-through decoration-1',
			dot: 'bg-blue-500'
		},
		warn: {
			active: 'bg-amber-100 text-amber-700 ring-1 ring-amber-300 dark:bg-amber-900/40 dark:text-amber-300 dark:ring-amber-700',
			inactive: 'bg-[var(--surface-card-hover)] text-[var(--text-tertiary)] line-through decoration-1',
			dot: 'bg-amber-500'
		},
		error: {
			active: 'bg-red-100 text-red-700 ring-1 ring-red-300 dark:bg-red-900/40 dark:text-red-300 dark:ring-red-700',
			inactive: 'bg-[var(--surface-card-hover)] text-[var(--text-tertiary)] line-through decoration-1',
			dot: 'bg-red-500'
		}
	};

	const activeFilterCount = $derived(
		(severities.length < allSeverities.length ? 1 : 0) +
		(sources.length < allSources.length ? 1 : 0) +
		(dateRange !== 'all' ? 1 : 0) +
		(searchText.trim() !== '' ? 1 : 0)
	);

	function toggleSeverity(sev: string): void {
		const next = severities.includes(sev)
			? severities.filter((s) => s !== sev)
			: [...severities, sev];
		if (next.length > 0) onseveritieschange(next);
	}

	function toggleSource(src: string): void {
		const next = sources.includes(src)
			? sources.filter((s) => s !== src)
			: [...sources, src];
		if (next.length > 0) onsourceschange(next);
	}
</script>

<div class="space-y-3">
	<!-- Row 1: Severity pills (with counts) + search -->
	<div class="flex items-center gap-2 flex-wrap">
		<!-- Severity toggle pills -->
		{#each allSeverities as sev}
			{@const active = severities.includes(sev)}
			{@const style = severityStyles[sev]}
			<button
				type="button"
				class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium transition-all duration-150 select-none cursor-pointer
					{active ? style.active : style.inactive}"
				onclick={() => toggleSeverity(sev)}
			>
				<span class="h-1.5 w-1.5 rounded-full {active ? style.dot : 'bg-[var(--text-tertiary)] opacity-40'}"></span>
				{$t(`events.severity.${sev}`)}
				{#if stats}
					<span class="tabular-nums font-semibold {active ? '' : 'opacity-50'}">{stats[sev as keyof EventLogStats] ?? 0}</span>
				{/if}
			</button>
		{/each}

		<!-- Divider -->
		<div class="h-4 w-px bg-[var(--border-primary)] mx-0.5 hidden sm:block"></div>

		<!-- Source toggle pills -->
		{#each allSources as src}
			{@const active = sources.includes(src)}
			<button
				type="button"
				class="inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-medium transition-all duration-150 select-none cursor-pointer
					{active
						? 'bg-[var(--surface-card)] text-[var(--text-primary)] ring-1 ring-[var(--border-primary)] shadow-[var(--shadow-sm)]'
						: 'bg-[var(--surface-card-hover)] text-[var(--text-tertiary)] line-through decoration-1'}"
				onclick={() => toggleSource(src)}
			>
				{$t(`events.source.${src}`)}
			</button>
		{/each}

		<!-- Spacer -->
		<div class="flex-1"></div>

		<!-- Clear filters -->
		{#if activeFilterCount > 0}
			<button
				type="button"
				class="inline-flex items-center gap-1 rounded-full px-2 py-1 text-xs font-medium text-[var(--text-tertiary)] hover:text-[var(--text-primary)] hover:bg-[var(--surface-card-hover)] transition-colors"
				onclick={onclear}
			>
				<svg class="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
					<path d="M18 6 6 18"/><path d="m6 6 12 12"/>
				</svg>
				{$t('events.filter.clear')}
			</button>
		{/if}
	</div>

	<!-- Row 2: Date range + search -->
	<div class="flex items-center gap-2 flex-wrap">
		<!-- Date range pills -->
		<div class="inline-flex items-center rounded-lg bg-[var(--surface-card-hover)] p-0.5">
			{#each dateRangeOptions as opt}
				<button
					type="button"
					class="rounded-md px-2.5 py-1 text-xs font-medium transition-all duration-150
						{dateRange === opt.value
							? 'bg-[var(--surface-card)] text-[var(--text-primary)] shadow-[var(--shadow-sm)]'
							: 'text-[var(--text-tertiary)] hover:text-[var(--text-secondary)]'}"
					onclick={() => ondaterangechange(opt.value)}
				>
					{$t(opt.labelKey)}
				</button>
			{/each}
		</div>

		<!-- Search -->
		<div class="relative flex-1 min-w-[180px] max-w-sm">
			<svg class="absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-[var(--text-tertiary)]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
				<circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" />
			</svg>
			<input
				type="text"
				placeholder={$t('events.filter.search')}
				value={searchText}
				oninput={(e) => onsearchchange((e.target as HTMLInputElement).value)}
				class="w-full rounded-lg border border-[var(--border-primary)] bg-[var(--surface-card)] py-1.5 pl-8 pr-3 text-xs text-[var(--text-primary)] placeholder:text-[var(--text-tertiary)] focus:border-[var(--color-brand-400)] focus:outline-none focus:ring-1 focus:ring-[var(--color-brand-400)] transition-colors"
			/>
		</div>
	</div>
</div>
