<script setup>
import { computed } from 'vue'
import UiIcono from '../../components/ui/UiIcono.vue'

// Responde "¿está bien mi asistente?" sin hacer un solo clic.
//
// Antes había que entrar pestaña por pestaña para saberlo: si estaba atendiendo
// en algún lado, si sabía algo, si alguien le había escrito. Tres datos que el
// dueño quiere de un vistazo y que estaban repartidos en tres pantallas.
const props = defineProps({
  canales: { type: Array, default: () => [] },
  documentos: { type: Array, default: () => [] },
  sesiones: { type: Array, default: () => [] },
  eventos: { type: Array, default: () => [] },
})

const emit = defineEmits(['ir'])

const canalesActivos = computed(() => props.canales.filter((c) => c.activo))

// Los tipos vienen en minúscula del backend; "Atendiendo en whatsapp" se lee
// como un error de tipeo.
const NOMBRES_CANAL = { whatsapp: 'WhatsApp', telegram: 'Telegram', web: 'tu web' }
const nombreCanal = (t) => NOMBRES_CANAL[t] || t

const fuentesListas = computed(() => props.documentos.filter((d) => d.estado === 'listo'))

// Dos meses es cuando una fuente empieza a ser sospechosa de estar vieja: es el
// mismo corte que usa la lista de conocimiento, para que no digan cosas
// distintas.
const fuentesViejas = computed(() =>
  fuentesListas.value.filter(
    (d) => d.procesado_at && Date.now() - new Date(d.procesado_at) > 60 * 86400000,
  ),
)

const problemas = computed(() => props.eventos.filter((e) => e.nivel === 'error').length)

// Solo conversaciones de clientes: la bandeja separa las pruebas propias, y si
// este número las incluyera diría una cosa distinta que la lista de al lado.
const reales = computed(() =>
  props.sesiones.filter((s) => !String(s.session_id).startsWith('staff-preview')),
)

// Cada señal dice qué pasa y, cuando algo anda mal, a dónde ir a arreglarlo.
const señales = computed(() => [
  {
    clave: 'canales',
    icono: 'mensaje',
    bien: canalesActivos.value.length > 0,
    texto: canalesActivos.value.length
      ? `Atendiendo en ${canalesActivos.value.map((c) => nombreCanal(c.tipo)).join(' y ')}`
      : 'No está atendiendo en ningún lado',
    destino: 'canales',
  },
  {
    clave: 'conocimiento',
    icono: 'escribir',
    bien: fuentesListas.value.length > 0 && fuentesViejas.value.length === 0,
    texto: !fuentesListas.value.length
      ? 'Todavía no sabe nada de tu negocio'
      : fuentesViejas.value.length
        ? `${fuentesViejas.value.length} de ${fuentesListas.value.length} fuentes están viejas`
        : `Sabe de ${fuentesListas.value.length} ${fuentesListas.value.length === 1 ? 'cosa' : 'cosas'}`,
    destino: 'conocimiento',
  },
  {
    clave: 'conversaciones',
    icono: 'grafico',
    // Que nadie haya escrito todavía no es un problema: es un dato.
    bien: true,
    neutro: reales.value.length === 0,
    texto: reales.value.length
      ? `${reales.value.length} ${reales.value.length === 1 ? 'conversación' : 'conversaciones'}`
      : 'Nadie escribió todavía',
    destino: 'conversaciones',
  },
])
</script>

<template>
  <div class="card p-1 mb-6 flex flex-wrap">
    <button
      v-for="s in señales"
      :key="s.clave"
      class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm hover:bg-elevado transition-colors text-left"
      @click="emit('ir', s.destino)"
    >
      <UiIcono
        :nombre="s.bien ? s.icono : 'alerta'"
        :tam="16"
        :class="s.neutro ? 'text-tenue' : s.bien ? 'text-brand' : 'text-amber-600 dark:text-amber-400'"
      />
      <span :class="s.neutro ? 'text-tenue' : s.bien ? 'text-texto' : 'text-amber-700 dark:text-amber-400 font-medium'">
        {{ s.texto }}
      </span>
    </button>

    <button
      v-if="problemas"
      class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm hover:bg-elevado transition-colors ml-auto"
      @click="emit('ir', 'auditoria')"
    >
      <UiIcono nombre="alerta" :tam="16" class="text-red-600 dark:text-red-400" />
      <span class="text-red-700 dark:text-red-400 font-medium">
        {{ problemas }} {{ problemas === 1 ? 'problema' : 'problemas' }}
      </span>
    </button>
  </div>
</template>
