<script lang="ts">
  import { goto } from "$app/navigation";
  import { page } from "$app/state";
  import ChatListItem from "$lib/components/ChatListItem.svelte";
  import DiscoverResultItem from "$lib/components/search/DiscoverResultItem.svelte";
  import SearchMessageItem from "$lib/components/search/SearchMessageItem.svelte";
  import EmptyState from "$lib/components/ui/EmptyState.svelte";
  import Spinner from "$lib/components/ui/Spinner.svelte";
  import { search } from "$lib/stores/search.svelte";
  import { ui } from "$lib/stores/ui.svelte";

  const activeChatId = $derived(
    page.params.chatId ? Number(page.params.chatId) : null
  );

  const hasChats = $derived(search.chatHits.length > 0);
  const hasPeers = $derived(search.peerHits.length > 0);
  const hasMessages = $derived(search.messageHits.length > 0);
  const empty = $derived(
    !(search.loading || hasChats || hasPeers || hasMessages)
  );

  function openChat(chatId: number) {
    search.close();
    goto(`/app/${chatId}`);
  }

  function openHit(chatId: number, messageId: number) {
    ui.requestJump(chatId, messageId);
    search.close();
    goto(`/app/${chatId}`);
  }
</script>

<div class="search-results custom-scroll">
  {#if hasChats}
    <div class="section-label">Чаты</div>
    {#each search.chatHits as chat (chat.chat_id)}
      <ChatListItem
        {chat}
        selected={chat.chat_id === activeChatId}
        onclick={() => openChat(chat.chat_id)}
      />
    {/each}
  {/if}

  {#if hasPeers}
    <div class="section-label">Контакты и каналы</div>
    {#each search.peerHits as item (item.chat_id)}
      <DiscoverResultItem {item} onclick={() => openChat(item.chat_id)} />
    {/each}
  {/if}

  {#if search.loading && !hasMessages}
    <div class="loading"><Spinner /></div>
  {:else if hasMessages}
    <div class="section-label">Сообщения</div>
    {#each search.messageHits as hit (`${hit.chat_id}:${hit.message_id}`)}
      <SearchMessageItem
        {hit}
        onclick={() => openHit(hit.chat_id, hit.message_id)}
      />
    {/each}
  {/if}

  {#if empty}
    <EmptyState title="Ничего не найдено" />
  {/if}
</div>

<style lang="scss">
  .search-results {
    overflow-y: auto;
    flex: 1;
    padding: 0.25rem 0.4375rem;
  }

  .section-label {
    padding: 0.625rem 0.75rem 0.375rem;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
  }

  .loading {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
  }
</style>
