<script setup lang="ts">
definePageMeta({
  icon: 'mdi-security',
  title: 'Auth',
  drawerIndex: 4,
})

const { data, status, getCsrfToken, getProviders, signOut } = useAuth()
const runtimeConfig = useRuntimeConfig();

const providers = await getProviders()
const csrfToken = await getCsrfToken()
const handleLogout = async () => {
  try {
    // const returnTo = encodeURIComponent('http://localhost:3000/auth/login');
    const returnTo = encodeURIComponent(window.location.origin);

    const logoutUrl = `${runtimeConfig.public.keycloakIssuer}/protocol/openid-connect/logout?client_id=${runtimeConfig.public.keycloakClient}&post_logout_redirect_uri=${returnTo}`;
    window.open(logoutUrl, '_blank');    // Sign out dari aplikasi sebelum redirect
    await signOut({ callbackUrl: '/auth/login' });

  } catch (error) {
    console.error('Logout failed:', error);
  }
};
</script>

<template>
  <v-card>
    <v-card-item>
      <v-card-title>Authentication Overview</v-card-title>
      <v-card-subtitle>See all available authentication & session information
        below</v-card-subtitle>
    </v-card-item>

    <v-card-text>
      <pre v-if="status"><span>Status:</span> {{ status }}</pre>
      <pre v-if="data"><span>Data:</span> {{ data }}</pre>
      <pre v-if="csrfToken"><span>CSRF Token:</span> {{ csrfToken }}</pre>
      <pre v-if="providers"><span>Providers:</span> {{ providers }}</pre>
    </v-card-text>

    <v-card-actions>
      <v-btn text="Logout" @click="handleLogout"></v-btn>
    </v-card-actions>
  </v-card>
</template>
