soft_usite/orchestrator/src/components/Sidebar.vue

<script setup>
import { computed, onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { api } from '../lib/api.js'
import { apiUmind, contexto } from '../lib/contexto.js'

const route = useRoute()
const router = useRouter()

const tenants = ref([])
const clientes = ref([])
const planes = ref([])
const loading = ref(true)
const error = ref('')
const showForm = ref(false)
const editing = ref(null)
const form = ref(vacio())

// El tenant "activo" en la nav es tanto /tenants/:id como cualquier ruta
// anidada de sus agentes (/tenants/:tenantId/agentes/:agenteId).
const tenantActivoId = computed(() => route.params.tenantId || route.params.id)

function vacio() {
  return { nombre: '', dominios_permitidos: '', activo: true, cliente_id: null, plan_id: null }
}

async function cargar() {
  loading.value = true
  error.value = ''
  try {
    const t = await api.get(apiUmind('/umind/tenants'))
    tenants.value = t.items || []
  } catch (e) {
    error.value = e.message
  } finally {
    loading.value = false
  }
}

// Clientes y planes solo los necesita el staff para asignarlos; si el endpoint
// no está disponible (portal del cliente) el formulario sigue funcionando.
async function cargarAsignables() {
  if (contexto.esPortal) return // endpoints de staff: el cliente no los alcanza
  try {
    const [c, p] = await Promise.all([
      api.get('/app/api/clientes/select'),
      api.get('/app/umind-planes/list'),
    ])
    clientes.value = c.registros || c.items || []
    planes.value = p.items || []
  } catch {
    clientes.value = []
    planes.value = []
  }
}

function nuevoTenant() {
  editing.value = null
  form.value = vacio()
  showForm.value = true
}

function editarTenant(t) {
  editing.value = t
  form.value = {
    nombre: t.nombre,
    dominios_permitidos: t.dominios_permitidos,
    activo: t.activo,
    cliente_id: t.cliente_id ?? null,
    plan_id: t.plan_id ?? null,
  }
  showForm.value = true
}

async function guardar() {
  const payload = {
    ...form.value,
    dominios_permitidos: form.value.dominios_permitidos
      .split(',')
      .map((d) => d.trim())
      .filter(Boolean),
  }
  try {
    if (editing.value) {
      await api.put(apiUmind(`/umind/tenants/${editing.value.ID}`), payload)
      showForm.value = false
      await cargar()
    } else {
      const r = await api.post(apiUmind('/umind/tenants'), payload)
      showForm.value = false
      await cargar()
      router.push(`/tenants/${r.id}`)
    }
  } catch (e) {
    error.value = e.message
  }
}

async function eliminar(t) {
  if (!confirm(`¿Eliminar el tenant "${t.nombre}"? Esto borra también sus agentes. No se puede deshacer.`)) return
  await api.del(apiUmind(`/umind/tenants/${t.ID}`))
  if (tenantActivoId.value === String(t.ID)) router.push('/')
  await cargar()
}

defineExpose({ recargar: cargar })
onMounted(() => {
  cargar()
  cargarAsignables()
})
</script>

<template>
  <aside class="w-64 shrink-0 h-screen sticky top-0 flex flex-col border-r border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900">
    <div class="px-4 py-4 border-b border-gray-200 dark:border-gray-800">
      <router-link to="/" class="text-base font-semibold text-gray-800 dark:text-gray-100">
        uMind <span class="text-brand">Studio</span>
      </router-link>
    </div>

    <div v-if="!contexto.esPortal" class="px-3 pt-3">
      <button
        class="w-full bg-brand hover:bg-brand-dark text-white text-sm font-medium px-3 py-2 rounded-lg transition-colors"
        @click="nuevoTenant"
      >
        + Nuevo tenant
      </button>
    </div>

    <p v-if="error" class="px-3 pt-2 text-xs text-red-600 dark:text-red-400">{{ error }}</p>

    <nav class="flex-1 overflow-y-auto px-2 py-3 space-y-0.5">
      <p v-if="loading" class="px-2 text-xs text-gray-400">Cargando...</p>
      <p v-else-if="tenants.length === 0" class="px-2 text-xs text-gray-400">
        {{ contexto.esPortal ? 'Todavía no tenés ningún espacio asignado. Escribinos y lo activamos.' : 'Sin tenants todavía.' }}
      </p>
      <div
        v-for="t in tenants"
        :key="t.ID"
        class="group flex items-center rounded-lg transition-colors"
        :class="tenantActivoId === String(t.ID) ? 'bg-brand/10 dark:bg-brand/20' : 'hover:bg-gray-100 dark:hover:bg-gray-800'"
      >
        <router-link
          :to="`/tenants/${t.ID}`"
          class="flex-1 min-w-0 px-2.5 py-2 text-sm"
          :class="tenantActivoId === String(t.ID) ? 'text-brand-dark dark:text-brand font-medium' : 'text-gray-700 dark:text-gray-300'"
        >
          <div class="truncate">{{ t.nombre }}</div>
          <div class="flex items-center gap-1 mt-0.5">
            <span class="w-1.5 h-1.5 rounded-full" :class="t.activo ? 'bg-green-500' : 'bg-gray-300 dark:bg-gray-600'"></span>
            <span class="text-[11px] text-gray-400 dark:text-gray-500">{{ t.activo ? 'activo' : 'inactivo' }}</span>
          </div>
        </router-link>
        <div v-if="!contexto.esPortal" class="flex opacity-0 group-hover:opacity-100 transition-opacity pr-1.5 gap-0.5">
          <button
            class="p-1 text-gray-400 hover:text-gray-700 dark:hover:text-gray-200"
            title="Editar"
            @click="editarTenant(t)"
          >
            ✎
          </button>
          <button
            class="p-1 text-gray-400 hover:text-red-600"
            title="Eliminar"
            @click="eliminar(t)"
          >
            ✕
          </button>
        </div>
      </div>
    </nav>
  </aside>

  <!-- Modal de alta/edición -->
  <div
    v-if="showForm"
    class="fixed inset-0 bg-black/40 flex items-center justify-center p-4 z-50"
    @click.self="showForm = false"
  >
    <div class="bg-white dark:bg-gray-900 rounded-xl p-6 w-full max-w-lg border border-gray-200 dark:border-gray-800">
      <h2 class="font-semibold text-gray-800 dark:text-gray-100 mb-4">
        {{ editing ? 'Editar tenant' : 'Nuevo tenant' }}
      </h2>
      <p class="text-xs text-gray-500 dark:text-gray-400 mb-3">
        Un tenant es el negocio/sitio dueño de los dominios permitidos. La config de IA, tono y demás se configuran por agente, dentro del tenant.
      </p>
      <form class="space-y-3" @submit.prevent="guardar">
        <div>
          <label class="text-xs text-gray-500 dark:text-gray-400">Nombre</label>
          <input
            v-model="form.nombre"
            required
            class="w-full border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-100 rounded-lg px-3 py-2 text-sm"
          />
        </div>
        <div>
          <label class="text-xs text-gray-500 dark:text-gray-400">Dominios permitidos (separados por coma)</label>
          <input
            v-model="form.dominios_permitidos"
            placeholder="ejemplo.com, www.ejemplo.com"
            required
            class="w-full border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-100 rounded-lg px-3 py-2 text-sm"
          />
        </div>
        <div v-if="clientes.length" class="grid grid-cols-2 gap-3">
          <div>
            <label class="text-xs text-gray-500 dark:text-gray-400">Cliente</label>
            <select
              v-model="form.cliente_id"
              class="w-full border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-100 rounded-lg px-3 py-2 text-sm"
            >
              <option :value="null">— sin asignar —</option>
              <option v-for="c in clientes" :key="c.ID" :value="c.ID">{{ c.nombre }}</option>
            </select>
            <p class="text-[11px] text-gray-400 mt-1">Define quién ve este tenant desde el portal.</p>
          </div>
          <div>
            <label class="text-xs text-gray-500 dark:text-gray-400">Plan</label>
            <select
              v-model="form.plan_id"
              class="w-full border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-100 rounded-lg px-3 py-2 text-sm"
            >
              <option :value="null">— sin plan —</option>
              <option v-for="p in planes" :key="p.ID" :value="p.ID">
                {{ p.nombre }} ({{ p.max_agentes === 0 ? '∞' : p.max_agentes }} agentes)
              </option>
            </select>
            <p class="text-[11px] text-gray-400 mt-1">Límite de agentes y precios de consumo.</p>
          </div>
        </div>
        <label class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
          <input v-model="form.activo" type="checkbox" />
          Activo
        </label>
        <div class="flex justify-end gap-2 pt-2">
          <button type="button" class="px-4 py-2 text-sm text-gray-500 dark:text-gray-400" @click="showForm = false">
            Cancelar
          </button>
          <button type="submit" class="bg-brand hover:bg-brand-dark text-white text-sm font-medium px-4 py-2 rounded-lg">
            Guardar
          </button>
        </div>
      </form>
    </div>
  </div>
</template>