frontend/src/views/conversas/ConversasHistoricoView.vue

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

const router = useRouter();
const { conversations, activeConversationId, setActiveConversation, deleteConversation } = useChat();

const items = computed(() =>
  (conversations.value ?? []).slice().sort((a, b) => Number(b.updatedAt ?? 0) - Number(a.updatedAt ?? 0))
);

function formatarData(ts) {
  try {
    return new Date(Number(ts ?? 0)).toLocaleString("pt-BR", {
      day: "2-digit", month: "2-digit", year: "numeric",
      hour: "2-digit", minute: "2-digit"
    });
  } catch {
    return "";
  }
}

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

function excluirConversa(id) {
  deleteConversation(id);
}
</script>

<template>
  <LayoutSistema>
    <section class="rounded-2xl border border-gray-200 bg-gray-100/50 p-6 shadow-sm backdrop-blur-md dark:border-gray-700 dark:bg-secondary/50">
      <div class="flex items-start justify-between gap-4">
        <div>
          <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Histórico</h2>
          <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ items.length }} conversa{{ items.length === 1 ? '' : 's' }}</p>
        </div>
      </div>

      <div v-if="!items.length" class="mt-8 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="M12 6v6l4 2" />
            <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 1 1-3.2-6.9" />
          </svg>
        </div>
        <div class="text-sm font-medium text-gray-500 dark:text-gray-400">Nenhuma conversa ainda</div>
        <div class="text-xs text-gray-400 dark:text-gray-500">Suas conversas aparecerão aqui após a primeira mensagem.</div>
      </div>

      <div v-else class="mt-4 grid gap-2">
        <div v-for="c in items" :key="c.id" class="grid grid-cols-[1fr_auto] items-stretch gap-2">
          <button
            type="button"
            class="rounded-xl border p-3 text-left transition-colors"
            :class="
              c.id === activeConversationId
                ? 'border-primary/40 bg-primary/5 dark:border-primary/30 dark:bg-primary/10'
                : 'border-gray-200 bg-background/60 hover:border-gray-400 dark:border-gray-700 dark:bg-background/10 dark:hover:border-gray-500'
            "
            @click="abrirConversa(c.id)"
          >
            <div class="flex items-center gap-2">
              <div
                v-if="c.id === activeConversationId"
                class="h-1.5 w-1.5 shrink-0 rounded-full bg-primary"
              />
              <div class="truncate text-sm font-semibold text-gray-900 dark:text-gray-100">{{ c.title || 'Nova conversa' }}</div>
            </div>
            <div class="mt-1 text-xs text-gray-500 dark:text-gray-400">
              {{ formatarData(c.updatedAt) }} · {{ c.messageCount ?? 0 }} msgs
            </div>
          </button>

          <button
            type="button"
            class="rounded-xl border border-gray-200 bg-background/60 px-3 py-2 text-gray-400 transition-colors hover:border-red-300 hover:bg-red-50 hover:text-red-600 dark:border-gray-700 dark:bg-background/10 dark:text-gray-500 dark:hover:border-red-500/40 dark:hover:bg-red-500/10 dark:hover:text-red-400"
            title="Excluir conversa"
            @click="excluirConversa(c.id)"
          >
            <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
              <path stroke-linecap="round" stroke-linejoin="round" d="M3 6h18" />
              <path stroke-linecap="round" stroke-linejoin="round" d="M19 6l-1 14H6L5 6" />
              <path stroke-linecap="round" stroke-linejoin="round" d="M9 6V4h6v2" />
            </svg>
          </button>
        </div>
      </div>
    </section>
  </LayoutSistema>
</template>