<script lang="ts">
	import { page } from '$app/state';
	import Icon from '@iconify/svelte';
	import { navigationStore } from '$lib/navigation';
	import type { NostrEvent } from '$lib/eve';
	import NotePrinter from '$lib/components/NotePrinter.svelte';
	import Avatar from '$lib/components/User/Avatar.svelte';
	import SearchResult from '$lib/components/SearchResult.svelte';
	import ArxletHeader from '$lib/components/ArxletHeader.svelte';

	const searchQuery = $derived(page.url.searchParams.get('q') || '');

	let searchResults: NostrEvent[] = $state([]);

	$effect(() => {
		if (searchQuery)
			window.eve
				.getAllEventsWithFilter({
					search: searchQuery
				})
				.then((results) => (searchResults = results));
	});
</script>

<svelte:head>
	<title>Eve Lite - Search: {searchQuery}</title>
</svelte:head>

<ArxletHeader
	title="Search"
	subtitle={`Searching for "${searchQuery}"`}
	icon="mdi:search"
	iconColor="#aaaaaa"
/>

<div class="p-6 max-w-6xl mx-auto">
	{#if searchQuery}
		<div class="stats shadow bg-base-200 w-full">
			<div class="stat">
				<div class="stat-title">Total Results</div>
				<div class="stat-value text-primary">{searchResults.length}</div>
			</div>
		</div>

		<div class="grid gap-6">
			{#each searchResults as result}
				<SearchResult {result} />
			{/each}
		</div>
	{:else}
		<div class="hero min-h-[60vh]">
			<div class="hero-content text-center">
				<div class="max-w-md">
					<Icon icon="mdi:magnify" class="w-24 h-24 mx-auto mb-6 text-base-content/20" />
					<h1 class="text-3xl font-bold mb-4">No Search Query</h1>
					<p class="text-base-content/70">
						Enter a search term in the search bar above to find information.
					</p>
				</div>
			</div>
		</div>
	{/if}
</div>
