<template>
  <div class="login-page">
    <GnEmptyState
      icon="ph-user-circle"
      title="Authentication Required"
      description="Please sign in via gnexus-auth to continue."
    >
      <template #action>
        <GnButton variant="primary" @click="handleLogin">
          <template #icon>
            <i class="ph ph-sign-in" />
          </template>
          Sign In
        </GnButton>
      </template>
    </GnEmptyState>
  </div>
</template>

<script setup>
import { onMounted } from "vue";
import { useRouter } from "vue-router";
import { GnEmptyState, GnButton } from "gnexus-ui-kit/vue";
import { useAuthStore } from "../../../stores/auth.js";

const router = useRouter();
const authStore = useAuthStore();

onMounted(() => {
  // If already authenticated, go home
  if (authStore.isAuthenticated) {
    router.replace({ name: "areas-favorites" });
  }
});

function handleLogin() {
  const returnTo = window.location.hash || "#/";
  window.location.href = `/auth/login?return_to=${encodeURIComponent(returnTo)}`;
}
</script>

<style scoped>
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1rem;
}
</style>