frontend/src/views/conversas/ConversasPesquisarView.vue

<script setup>
import { computed, ref } from "vue";
import { useRouter } from "vue-router";
import LayoutSistema from "../../layout/LayoutSistema.vue";
import BaseButton from "../../components/base/BaseButton.vue";
import { useChat } from "../../composables/useChat.js";

const router = useRouter();
const {
  searchConversations,
  setActiveConversation,
  conversationsHasMore,
  conversationsLoading,
  loadMoreConversations
} = useChat();

const draftQuery = ref("");
const query = ref("");
const results = computed(() => searchConversations(query.value));

function buscar() {
  query.value = String(draftQuery.value ?? "");
}

function abrirConversa(id) {
  setActiveConversation(id);
  router.push({ name: "home" });
}
</script>

<template>
  <LayoutSistema>
    <section class="rounded-2xl border border-gray-200 bg-gray-100/50 p-4 shadow-sm backdrop-blur-md dark:border-gray-700 dark:bg-secondary/50">
      <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Pesquisar conversas</h2>

      <div class="mt-3 grid grid-cols-1 gap-2 min-[520px]:grid-cols-[1fr_120px]">
        <div class="relative">
          <svg
            class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400 dark:text-gray-500"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
          >
            <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-4.35-4.35M17 10.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0Z" />
          </svg>
          <input
            v-model="draftQuery"
            placeholder="Buscar por título..."
            class="pl-9"
            @keydown.enter.prevent="buscar"
          />
        </div>
        <BaseButton :disabled="!draftQuery.trim()" @click="buscar">Buscar</BaseButton>
      </div>

      <div class="mt-2.5 flex items-center justify-between gap-3">
        <span class="text-sm text-gray-500 dark:text-gray-400">
          {{ query.trim() ? `${results.length} resultados` : "Digite para filtrar o histórico." }}
        </span>
        <button
          v-if="conversationsHasMore"
          type="button"
          class="shrink-0 text-xs text-primary underline-offset-2 hover:underline disabled:opacity-50"
          :disabled="conversationsLoading"
          @click="loadMoreConversations"
        >
          {{ conversationsLoading ? "Carregando..." : "Carregar mais conversas" }}
        </button>
      </div>

      <div class="mt-3 grid gap-2">
        <button
          v-for="c in results"
          :key="c.id"
          type="button"
          class="rounded-xl border border-gray-200 bg-background/60 p-3 text-left transition-colors hover:border-gray-500 dark:border-gray-700 dark:bg-background/10 dark:hover:border-gray-400"
          @click="abrirConversa(c.id)"
        >
          <div class="text-sm font-semibold text-gray-900 dark:text-gray-100">{{ c.title || "Nova conversa" }}</div>
          <div class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ c.messageCount ?? 0 }} msgs</div>
        </button>

        <div
          v-if="query.trim() && !results.length"
          class="flex flex-col items-center gap-3 py-8 text-center"
        >
          <div class="flex h-14 w-14 items-center justify-center rounded-2xl border border-dashed border-gray-300 dark:border-gray-600">
            <svg class="h-6 w-6 text-gray-400 dark:text-gray-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
              <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-4.35-4.35M17 10.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0Z" />
            </svg>
          </div>
          <div class="text-sm font-medium text-gray-500 dark:text-gray-400">Nenhuma conversa encontrada</div>
          <div class="text-xs text-gray-400 dark:text-gray-500">Tente buscar por outro título.</div>
        </div>
      </div>
    </section>
  </LayoutSistema>
</template>