<script setup>
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 },
  conexiones: { type: Array, default: () => [] },
})

// El padre es el dueño de los datos del agente: acá se avisa que cambiaron y
// él recarga. Si cada pestaña mantuviera su propia copia, volver de una a otra
// mostraría estados distintos de lo mismo.
const emit = defineEmits(['recargar'])

function conectar(proveedor) {
  // Navegación normal (no fetch): el backend redirige a Google/Microsoft.
  window.location.href = apiUmind(`/umind/conexiones/conectar?agente_id=${props.agenteId}&proveedor=${proveedor}`)
}

async function desconectar(c) {
  if (!confirm(`¿Desconectar la cuenta ${c.email || c.proveedor}?`)) return
  await api.del(apiUmind(`/umind/conexiones/${c.ID}`))
  emit('recargar')
}
</script>

<template>
  <div>
    <p class="label mb-4">
      Conectá una cuenta de correo para que este agente pueda enviar y leer correo en su nombre.
      Se soporta una cuenta activa a la vez.
    </p>
    <div class="flex gap-2 mb-4">
      <button class="border border-borde hover:border-brand text-sm font-medium px-4 py-2 rounded-lg text-gray-700 dark:text-gray-200 transition-colors" @click="conectar('google')">
        Conectar Google
      </button>
      <button class="border border-borde hover:border-brand text-sm font-medium px-4 py-2 rounded-lg text-gray-700 dark:text-gray-200 transition-colors" @click="conectar('microsoft')">
        Conectar Outlook
      </button>
    </div>
    <div class="card divide-y divide-borde">
      <UiEmptyState
        v-if="conexiones.length === 0"
        titulo="Sin cuentas conectadas"
        detalle="Conectando una cuenta de correo, el agente puede leer y responder mensajes con tu dirección."
      />
      <div v-for="c in conexiones" :key="c.ID" class="p-4 flex items-center justify-between">
        <div>
          <span class="font-medium text-texto capitalize">{{ c.proveedor }}</span>
          <span class="ml-2 text-sm text-tenue">{{ c.email }}</span>
          <span class="ml-2 px-1.5 py-0.5 rounded text-xs" :class="c.activo ? 'badge-ok' : 'badge-neutro'">
            {{ c.activo ? 'activa' : 'inactiva' }}
          </span>
        </div>
        <button class="text-red-500 hover:text-red-700 text-sm" @click="desconectar(c)">Desconectar</button>
      </div>
    </div>
  </div>
</template>
