<template>
  <div v-if="user" class="cata-user-info">
    <div class="cata-outline-box rounded-lg p-4">
      <div class="flex items-center gap-3">
        <!-- Avatar clickeable para verificar sesión -->
        <button
          class="user-avatar cata-outline-box cursor-pointer"
          @click="handleCheckSession"
          title="Verificar estado de sesión"
        >
          <span class="cata-text text-xl font-semibold">
            {{ userInitial }}
          </span>
        </button>

        <!-- Info del usuario -->
        <div class="flex-1 min-w-0">
          <h3 class="cata-text font-semibold text-base sm:text-lg truncate">
            {{ user.name || user.username }}
          </h3>
          <p class="cata-text text-xs sm:text-sm opacity-60 truncate">
            {{ user.email }}
          </p>
        </div>

        <!-- Botones de acción -->
        <div class="flex items-center gap-2">
          <!-- Botón de cambio de tema -->
          <button
            class="cata-button p-2 flex items-center justify-center flex-shrink-0"
            @click="toggleTheme"
            :title="isDark ? 'Cambiar a modo claro' : 'Cambiar a modo oscuro'"
          >
            <UIcon :name="isDark ? 'i-lucide-sun' : 'i-lucide-moon'" class="w-4 h-4" />
          </button>

          <!-- Botón de home -->
          <button
            class="cata-button p-2 flex items-center justify-center flex-shrink-0"
            @click="goToHome"
            title="Ir al inicio del ecosistema Nucleo"
          >
            <UIcon name="i-lucide-home" class="w-4 h-4" />
          </button>

          <!-- Botón de logout -->
          <button
            class="cata-button p-2 flex items-center justify-center flex-shrink-0"
            @click="handleLogout"
            title="Cerrar sesión"
          >
            <UIcon name="i-lucide-log-out" class="w-4 h-4" />
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const { user, checkSessionStatus } = useAuthentik()
const colorMode = useColorMode()

// Estado del tema
const isDark = computed(() => colorMode.value === 'dark')

// Obtener la inicial del usuario
const userInitial = computed(() => {
  if (!user.value) return '?'
  const name = user.value.name || user.value.username || user.value.email || '?'
  return name.charAt(0).toUpperCase()
})

// Cambiar tema
const toggleTheme = () => {
  colorMode.preference = isDark.value ? 'light' : 'dark'
}

// Ir al home del ecosistema
const goToHome = () => {
  window.open('https://inicio.nucleoriofrio.com', '_blank')
}

// Verificar estado de sesión
const handleCheckSession = async () => {
  await checkSessionStatus()
}

// Manejar logout
const handleLogout = () => {
  // Redirigir al endpoint de logout de Authentik
  window.location.href = '/outpost.goauthentik.io/sign_out'
}
</script>

<style scoped>
.cata-user-info {
  width: 100%;
}

.user-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-color: color-mix(in srgb, var(--cata-primary) 5%, transparent);
  border: none;
}

.dark .user-avatar {
  background-color: color-mix(in srgb, var(--cata-primary) 10%, transparent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--cata-primary) 20%, transparent);
}

.user-avatar:hover {
  background-color: color-mix(in srgb, var(--cata-primary) 10%, transparent);
}

.dark .user-avatar:hover {
  background-color: color-mix(in srgb, var(--cata-primary) 15%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--cata-primary) 30%, transparent);
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .user-avatar {
    width: 2rem;
    height: 2rem;
  }

  .user-avatar .cata-text {
    font-size: 1rem;
  }
}
</style>
