frontend/src/views/atendimentos/AvaliacoesView.vue

<script setup>
import { computed, onBeforeUnmount, onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import LayoutSistema from "../../layout/LayoutSistema.vue";
import BaseButton from "../../components/base/BaseButton.vue";
import BaseDropdown from "../../components/base/BaseDropdown.vue";
import CampoBusca from "../../components/base/CampoBusca.vue";
import PaginacaoLista from "../../components/base/PaginacaoLista.vue";
import StatCard from "../../components/base/StatCard.vue";
import EmptyState from "../../components/base/EmptyState.vue";
import Spinner from "../../components/base/Spinner.vue";
import ItemAvaliacao from "../../components/atendimentos/ItemAvaliacao.vue";
import { ClipboardList, Star, CircleCheck, Check, Smile, TriangleAlert, ChevronUp, ChevronDown } from "lucide-vue-next";
import BaseIcon from "../../components/base/BaseIcon.vue";
import PageHeaderCard from "../../components/base/PageHeaderCard.vue";
import { avaliarAtendimentosPendentes, estatisticasAvaliacoes } from "../../api/atendimentos.js";
import { queryTexto, useListaAvaliacoes } from "../../composables/useListaAvaliacoes.js";
import { useAsyncState } from "../../composables/useAsyncState.js";
import { useToast } from "../../composables/useToast.js";
import { cancelamentoLabel, pct, resolvidoLabel, sentimentoLabel } from "../../utils/avaliacoes.js";
import { friendlyErrorMessage } from "../../api/client.js";

const opcoesResolucao = Object.entries({ ...resolvidoLabel, ...cancelamentoLabel }).map(([value, label]) => ({
  value,
  label
}));
const opcoesSentimento = Object.entries(sentimentoLabel).map(([value, label]) => ({ value, label }));

const route = useRoute();
const toast = useToast();

const avaliandoLote = ref(false);
const loteResultado = ref(null);
const stats = ref(null);

const filtroSetor = ref(queryTexto(route, "setor"));
const filtroResolvido = ref(queryTexto(route, "resolvido"));
const filtroSentimento = ref(queryTexto(route, "sentimento"));

// o dropdown de "Resolução" mistura dois campos do backend: os status de resolução vão em
// `resolvido`, e "cancelou"/"ameacou" são na verdade StatusCancelamento
const resolvidoParaApi = computed(() =>
  ["sim", "parcial", "nao", "indefinido"].includes(filtroResolvido.value) ? filtroResolvido.value : undefined
);
const statusCancelamentoParaApi = computed(() =>
  filtroResolvido.value === "cancelou" || filtroResolvido.value === "ameacou" ? filtroResolvido.value : undefined
);

function filtrosProprios() {
  return {
    setor: filtroSetor.value || undefined,
    resolvido: resolvidoParaApi.value,
    sentimento: filtroSentimento.value || undefined,
    statusCancelamento: statusCancelamentoParaApi.value
  };
}

const {
  busca: filtroBusca,
  ordenacao: filtroOrdenacao,
  page,
  expandido,
  setores,
  avaliacoes,
  total,
  totalPaginas,
  carregando,
  erro,
  carregarLista,
  aplicarFiltros,
  alternarOrdenacao,
  onBuscaInput,
  onBuscaEnter,
  irParaPagina,
  alternarExpandido,
  verConversa,
  inicializar
} = useListaAvaliacoes({
  montarQueryExtra: () => {
    const query = {};
    if (filtroSetor.value) query.setor = filtroSetor.value;
    if (filtroResolvido.value) query.resolvido = filtroResolvido.value;
    if (filtroSentimento.value) query.sentimento = filtroSentimento.value;
    return query;
  },
  montarFiltrosApi: filtrosProprios,
  aoAplicarFiltros: carregarStats,
  prefixoElemento: "avaliacao",
  mensagemErroLista: "Falha ao carregar avaliações"
});

const progresso = computed(() => {
  const totalAt = stats.value?.totalAtendimentos ?? 0;
  if (!totalAt) return null;
  const feitos = Math.max(0, totalAt - (stats.value?.pendentes ?? 0));
  return { total: totalAt, feitos, pct: Math.round((feitos / totalAt) * 100) };
});

// useAsyncState já descarta respostas antigas; aqui ele só serve de guarda anti-race
const guardaStats = useAsyncState();

async function carregarStats() {
  const epoca = guardaStats.nextId();
  try {
    const resultado = await estatisticasAvaliacoes({
      ...filtrosProprios(),
      busca: filtroBusca.value.trim() || undefined
    });
    if (guardaStats.isStale(epoca)) return;
    stats.value = resultado;
  } catch (err) {
    if (guardaStats.isStale(epoca)) return;
    stats.value = null;
    // sem isto os cartões somem da tela sem nenhuma explicação
    toast.erro("Não foi possível carregar as estatísticas das avaliações.");
    console.warn("[AvaliacoesView] carregarStats:", err);
  }
}

async function avaliarPendentes() {
  if (avaliandoLote.value) return;
  avaliandoLote.value = true;
  loteResultado.value = null;
  erro.value = "";
  try {
    loteResultado.value = await avaliarAtendimentosPendentes({ limite: 10 });
    await Promise.all([carregarStats(), carregarLista()]);
  } catch (err) {
    erro.value = friendlyErrorMessage(err, "Falha ao avaliar pendentes");
  } finally {
    avaliandoLote.value = false;
  }
}

// enquanto houver pendentes, atualiza as estatísticas sozinho para a barra andar
let statsTimer = null;

onMounted(() => {
  carregarStats();
  inicializar();

  statsTimer = setInterval(() => {
    if (document.visibilityState !== "visible") return;
    if (stats.value?.pendentes > 0 && !avaliandoLote.value) carregarStats();
  }, 30_000);
});

onBeforeUnmount(() => {
  if (statsTimer) clearInterval(statsTimer);
});
</script>

<template>
  <LayoutSistema>
    <div class="min-h-[calc(100vh-var(--layout-header-height))] px-4 pt-8 pb-12">
      <div class="mx-auto w-full max-w-[960px] space-y-6">
        <PageHeaderCard
          :icon="Star"
          title="Avaliações de Atendimento (IA)"
          description="Score do atendente, resolução, sentimento do cliente e pontos de melhoria gerados automaticamente."
        >
          <template #actions>
            <BaseButton :loading="avaliandoLote" @click="avaliarPendentes">
              {{ avaliandoLote ? "Avaliando..." : `Avaliar pendentes${stats?.pendentes ? ` (${stats.pendentes})` : ""}` }}
            </BaseButton>
          </template>

          <div v-if="progresso" class="mt-5">
            <div class="flex items-center justify-between text-xs text-muted-foreground">
              <span>
                Progresso das avaliações
                <span v-if="stats.pendentes > 0" class="text-muted-foreground"> — atualiza sozinho a cada 30s</span>
              </span>
              <span class="font-medium text-foreground">
                {{ progresso.feitos }} de {{ progresso.total }} ({{ progresso.pct }}%)
              </span>
            </div>
            <div class="mt-1.5 h-2 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
              <div
                class="h-full rounded-full bg-primary transition-all duration-700"
                :class="{ 'animate-pulse': stats.pendentes > 0 }"
                :style="{ width: `${progresso.pct}%` }"
              />
            </div>
          </div>

          <div v-if="avaliandoLote" class="mt-4 rounded-lg bg-blue-50 px-4 py-3 text-xs text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
            Avaliando um lote de atendimentos com a IA — isso pode levar alguns minutos...
          </div>
          <div v-if="loteResultado" class="mt-4 rounded-lg bg-green-50 px-4 py-3 text-xs text-green-800 dark:bg-green-900/30 dark:text-green-300">
            {{ loteResultado.avaliados }} atendimentos avaliados
            <span v-if="loteResultado.semDialogo">, {{ loteResultado.semDialogo }} sem diálogo para avaliar</span>
            <span v-if="loteResultado.erros?.length">, {{ loteResultado.erros.length }} com erro</span>.
            O restante segue sendo avaliado automaticamente pelo job.
          </div>
          <div v-if="erro" class="mt-4 rounded-lg bg-red-50 px-4 py-3 text-xs text-red-800 dark:bg-red-900/30 dark:text-red-300">
            {{ erro }}
          </div>
        </PageHeaderCard>

        <section v-if="stats" class="grid grid-cols-2 gap-3 md:grid-cols-5">
          <StatCard label="Score médio" :value="stats.scoreMedio ?? '—'" suffix=" / 10" variant="info">
            <template #icon>
              <BaseIcon :icon="Star" class="h-4 w-4" />
            </template>
          </StatCard>
          <StatCard label="Avaliados" :value="stats.avaliados" variant="default">
            <template #icon>
              <BaseIcon :icon="CircleCheck" class="h-4 w-4" />
            </template>
            {{ stats.pendentes }} pendentes
          </StatCard>
          <StatCard label="Problemas resolvidos" :value="pct(stats.resolvido?.sim ?? 0, stats.avaliados)" variant="success">
            <template #icon>
              <BaseIcon :icon="Check" class="h-4 w-4" />
            </template>
            {{ stats.resolvido?.sim ?? 0 }} sim · {{ stats.resolvido?.parcial ?? 0 }} parcial · {{ stats.resolvido?.nao ?? 0 }} não
          </StatCard>
          <StatCard label="Clientes satisfeitos" :value="pct(stats.sentimento?.positivo ?? 0, stats.avaliados)" variant="violet">
            <template #icon>
              <BaseIcon :icon="Smile" class="h-4 w-4" />
            </template>
            {{ stats.sentimento?.negativo ?? 0 }} saíram insatisfeitos
          </StatCard>
          <StatCard label="Cancelamentos" :value="pct(stats.cancelamento?.cancelou ?? 0, stats.avaliados)" variant="danger">
            <template #icon>
              <BaseIcon :icon="TriangleAlert" class="h-4 w-4" />
            </template>
            {{ stats.cancelamento?.cancelou ?? 0 }} cancelaram · {{ stats.cancelamento?.ameacou ?? 0 }} ameaçaram cancelar
          </StatCard>
        </section>

        <section class="rounded-2xl border border-gray-200 bg-background/70 shadow-sm dark:border-gray-700 dark:bg-background/20">
          <div class="flex flex-wrap items-center gap-3 border-b border-gray-200 p-4 dark:border-gray-700">
            <CampoBusca
              v-model="filtroBusca"
              placeholder="Protocolo, cliente, atendente ou data (dd/mm/aaaa)"
              @input="onBuscaInput"
              @enter="onBuscaEnter"
              @limpar="onBuscaEnter"
            />
            <div class="flex shrink-0 items-center gap-2">
              <BaseDropdown
                v-model="filtroSetor"
                rotulo="Setor"
                rotulo-padrao="todos"
                :opcoes="setores.map((s) => ({ value: s.sigla, label: `${s.nome} (${s.total})` }))"
                @change="aplicarFiltros"
              />
              <BaseDropdown
                v-model="filtroResolvido"
                rotulo="Resolução"
                rotulo-padrao="todas"
                :opcoes="opcoesResolucao"
                @change="aplicarFiltros"
              />
              <BaseDropdown
                v-model="filtroSentimento"
                rotulo="Sentimento"
                rotulo-padrao="todos"
                :opcoes="opcoesSentimento"
                @change="aplicarFiltros"
              />
            </div>
            <BaseButton
              variant="secondary"
              size="sm"
              title="Alternar ordem por data da avaliação"
              @click="alternarOrdenacao"
            >
              Data
              <BaseIcon v-if="filtroOrdenacao === 'asc'" :icon="ChevronUp" class="h-3.5 w-3.5" />
              <BaseIcon v-else :icon="ChevronDown" class="h-3.5 w-3.5" />
            </BaseButton>
            <div class="ml-auto text-xs text-muted-foreground">
              {{ total }} avaliações
            </div>
          </div>

          <Spinner v-if="carregando" center label="Carregando avaliações..." />
          <EmptyState
            v-else-if="avaliacoes.length === 0"
            :icon="ClipboardList"
            titulo="Nenhuma avaliação encontrada"
            descricao="Use &quot;Avaliar pendentes&quot; ou aguarde o job automático."
          />

          <div v-else class="space-y-3 p-4">
            <ItemAvaliacao
              v-for="a in avaliacoes"
              :key="a.AtendimentoId"
              :avaliacao="a"
              prefixo-id="avaliacao"
              :expandida="expandido === a.AtendimentoId"
              @toggle="alternarExpandido"
              @ver-conversa="verConversa"
            />
          </div>

          <PaginacaoLista
            :page="page"
            :total-paginas="totalPaginas"
            :desabilitado="carregando"
            @ir="irParaPagina"
          />
        </section>
      </div>
    </div>
  </LayoutSistema>
</template>