<script setup>
import { ref } from 'vue'
import { api } from '../../lib/api.js'
import { apiUmind } from '../../lib/contexto.js'
import UiEmptyState from '../../components/ui/UiEmptyState.vue'

const props = defineProps({
  agenteId: { type: Number, required: true },
  sesiones: { type: Array, default: () => [] },
})

// El historial se pide al abrir cada conversación, no de entrada: cargar todas
// las conversaciones completas para mostrar una lista sería traer de más.
const historial = ref([])
const sesionActiva = ref(null)

async function verHistorial(sessionId) {
  sesionActiva.value = sessionId
  const r = await api.get(apiUmind(`/umind/historial?agente_id=${props.agenteId}&session_id=${sessionId}`))
  historial.value = r.items || []
}
</script>

<template>
  <div class="grid grid-cols-3 gap-4">
    <div class="col-span-1 card divide-y divide-borde max-h-[28rem] overflow-y-auto">
      <UiEmptyState
        v-if="sesiones.length === 0"
        titulo="Nadie escribió todavía"
        detalle="Acá vas a ver todo lo que le preguntan y qué contestó."
      />
      <button
        v-for="s in sesiones"
        :key="s.session_id"
        class="w-full text-left p-3 hover:bg-elevado text-sm"
        :class="sesionActiva === s.session_id ? 'bg-gray-50 dark:bg-gray-800' : ''"
        @click="verHistorial(s.session_id)"
      >
        <div class="text-texto truncate">{{ s.content }}</div>
        <div class="text-xs text-tenue mt-0.5">{{ s.session_id }}</div>
      </button>
    </div>
    <div class="col-span-2 card p-4 max-h-[28rem] overflow-y-auto space-y-2">
      <p v-if="!sesionActiva" class="text-sm text-tenue">Elegí una conversación de la izquierda.</p>
      <div
        v-for="m in historial"
        :key="m.ID"
        class="max-w-[80%] px-3 py-2 rounded-lg text-sm"
        :class="m.role === 'user' ? 'bg-brand text-white ml-auto' : 'bg-elevado text-texto'"
      >
        {{ m.content }}
      </div>
    </div>
  </div>
</template>
