<script setup>
import { onMounted } from 'vue'

const { isAuthenticated, userProfile, isInitialized, initKeycloak, logout } = useKeycloak()

//stub
const recentLogins = ref([
  { user: 'admin_user', time: '2 mins ago', ip: '192.168.1.10' }
])

onMounted(async () => {
  const auth = await initKeycloak()
  if (!auth) {
    navigateTo('/oauth')
  }
})

const handleLogout = () => {
  logout()
}

const handleNavigate = (path) => {
  navigateTo(path)
}
</script>

<template>
  <div>
    <div v-if="!isInitialized" class="global-loader-wrapper">
      <div class="spinner lg"></div>
      <p style="color: #8b949e; margin-top: 1rem; font-size: 0.95rem;">
        Connecting to Keycloak...
      </p>
    </div>

    <div v-else-if="isAuthenticated" class="settings-container">
      <Header 
        :user-profile="userProfile" 
        active-tab="welcome"
        @logout="handleLogout"
        @navigate="handleNavigate"
      />

      <main class="settings-main-content">
        <section class="settings-panel">
          <div class="panel-header archivo-black">
            <span>PORTAL OVERVIEW</span>
          </div>
          
          <div class="panel-body grid-layout">
            <div class="welcome-left-col">
              <div class="image-wrapper">
                <img 
                  src="/welcome7.png" 
                  alt="Welcome to Mod Portal" 
                  class="welcome-image"
                />
              </div>
              <h2 class="welcome-text">
                Welcome to the <em>new</em> mod portal!
              </h2>
            </div>

            <div class="logins-right-col">
              <div class="logins-card">
                <div class="logins-header archivo-black">
                  RECENT LOGINS
                </div>
                <ul class="logins-list">
                  <li v-for="(log, idx) in recentLogins" :key="idx" class="login-item">
                    <div class="login-user">{{ log.user }}</div>
                    <div class="login-details">
                      <span>{{ log.ip }}</span> &bull; 
                      <span class="login-time">{{ log.time }}</span>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </section>
      </main>
    </div>
  </div>
</template>