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

const auth = useAuth();

// Load user data on mount
onMounted(async () => {
  if (!auth.user.value) {
    console.log('ProfileDD: Loading user data...');
    await auth.checkAuth();
  }
});

// Logout with confirmation
const logoutWithConfirmation = async () => {
  try {
    const confirmed = confirm("Apakah Anda yakin ingin keluar?");
    if (!confirmed) return;

    console.log('🚪 Logging out from ProfileDD...');
    await auth.logout();
  } catch (error) {
    console.error("Logout failed:", error);
  }
};

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

  const user = auth.user.value;
  return {
    name: user.name || user.preferred_username || "User",
    email: user.email || "No email",
    role: auth.hasRole('admin') ? 'Admin' : 'User'
  };
});

// Session info
const sessionInfo = computed(() => ({
  isAuthenticated: auth.isAuthenticated.value,
  hasValidSession: !!auth.user.value
}));
</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-1">{{ displayInfo.name }}</h6>
            <span class="text-subtitle-1 mt-2 font-weight-regular textSecondary">
              {{ displayInfo.role }}
            </span>
            <div class="d-flex align-center mt-1">
              <MailIcon size="18" stroke-width="1.5" />
              <span
                class="text-subtitle-1 font-weight-regular textSecondary ml-2"
              >
                {{ displayInfo.email }}
              </span>
            </div>

            <!-- Session status -->
            <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>

      <!-- Logout button -->
      <div class="pt-4 pb-6 px-8">
        <v-btn
          color="primary"
          variant="outlined"
          block
          @click="logoutWithConfirmation"
          prepend-icon="mdi-logout"
          :loading="auth.isLoading.value"
          :disabled="auth.isLoading.value"
        >
          Logout
        </v-btn>
      </div>
    </v-sheet>
  </v-menu>
</template>
