<!-- components/layout/ProfileDD.vue -->
<script setup lang="ts">
import { MailIcon } from "vue-tabler-icons";
import { useAuth } from "~/composables/useAuth";
import { computed, onMounted } from "vue";

const auth = useAuth();

onMounted(async () => {
  if (!auth.isLoggedIn.value) {
    await auth.fetchUserSession();
  }
});

// Enhanced logout with proper error handling
const logout = async () => {
  await auth.logout();
};

// **TAMBAHAN: Full logout function dengan konfirmasi**
const fullLogout = async () => {
  const confirmed = confirm(
    "Apakah Anda yakin ingin keluar dari semua sesi? Ini akan menghapus semua data lokal dan sesi Keycloak."
  );

  if (!confirmed) return;

  await auth.fullLogout();
};

// **TAMBAHAN: Logout dengan konfirmasi untuk UX yang lebih baik**
const logoutWithConfirmation = async () => {
  const confirmed = confirm("Apakah Anda yakin ingin keluar?");

  if (!confirmed) return;

  await logout();
};

// Get user display info from session
const getUserDisplayInfo = () => {
  if (!auth.user.value)
    return {
      name: "Guest User",
      email: "guest@example.com",
      role: "Guest"
    };

  const user = auth.user.value || {};
  return {
    name: user.name  || "User",
    email: user.email || "No email",
    role: auth.userRoles.value[0] || user.role || "User",
    provider :user.auth_provider
  };
};

const displayInfo = computed(() => getUserDisplayInfo());
const sessionInfo = computed(() => {
  return {
    isAuthenticated: auth.isLoggedIn.value,
    sessionExpires: auth.sessionData.value?.expiresAt || null,
    hasValidToken: !!auth.sessionData.value?.accessToken
  };
});
</script>

<template>
  <v-menu :close-on-content-click="false">
    <template v-slot:activator="{ props }">
      <v-btn class="custom-hover-primary" variant="text" v-bind="props" icon>
        <v-avatar size="35">
          <img
            src="~/assets/images/profile/user-1.jpg"
            width="35"
            alt="User Avatar"
          />
        </v-avatar>
      </v-btn>
    </template>

    <v-sheet rounded="md" width="360" elevation="10">
      <div class="px-8 pt-6">
        <h6 class="text-h5 font-weight-medium">User Profile</h6>
        <div class="d-flex align-center mt-4 pb-6">
          <v-avatar size="80">
            <img src="~/assets/images/profile/user-1.jpg" width="80" />
          </v-avatar>
          <div class="ml-3">
            <h6 class="text-h6 mb-n1">{{ displayInfo.name }}</h6>
            <!-- <span class="text-subtitle-1 font-weight-regular textSecondary">
              {{ displayInfo.role }}
            </span> -->
            <div class="d-flex align-center mt-2">
              <MailIcon size="18" stroke-width="1.5" />
              <span
                class="text-subtitle-1 font-weight-regular textSecondary ml-2"
              >
                {{ displayInfo.email }}
              </span>
            </div>

            <!-- **TAMBAHAN: Tampilkan status session** -->
            <div class="mt-2">
              <v-chip
                :color="sessionInfo.isAuthenticated ? 'success' : 'error'"
                size="small"
                variant="outlined"
              >
                {{ sessionInfo.isAuthenticated ? "Active" : "Inactive" }}
              </v-chip>
            </div>
          </div>
        </div>
      </div>

      <!-- **DIPERBAIKI: Logout buttons section dengan multiple options** -->
      <div class="pt-0 pb-6 px-8">
        <!-- Regular Logout Button -->
        <v-btn
          color="primary"
          variant="outlined"
          block
          @click="logoutWithConfirmation"
          prepend-icon="mdi-logout"
          class="mb-2"
        >
          Logout
        </v-btn>

        <!-- **TAMBAHAN: Full Logout Button** -->
        <v-btn
          v-if="displayInfo.provider === 'keycloak'"
          color="error"
          variant="outlined"
          block
          @click="fullLogout"
          prepend-icon="mdi-logout-variant"
          class="mb-2"
        >
          Full Logout
        </v-btn>
      </div>
    </v-sheet>
  </v-menu>
</template>
