<script setup lang="ts">
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { GnButton, GnLoginCard, useToast } from "gnexus-ui-kit/vue";
import { useAuth } from "../stores/auth";
import { useI18n } from "vue-i18n";

const auth = useAuth();
const router = useRouter();
const route = useRoute();
const toast = useToast();
const { t } = useI18n();

const submitting = ref(false);
const error = ref<string | null>(null);

async function onSubmit({ username, password }: { username: string; password: string }) {
  submitting.value = true;
  error.value = null;
  try {
    await auth.login(username, password);
    const redirect = typeof route.query.redirect === "string" ? route.query.redirect : "/";
    await router.push(redirect);
    toast.success({ title: t("auth.loginTitle"), text: `Welcome, ${auth.user.value?.nickname}` });
  } catch {
    error.value = t("auth.error");
  } finally {
    submitting.value = false;
  }
}
</script>

<template>
  <div class="auth-page">
    <GnLoginCard
      :title="t('auth.loginTitle')"
      logo-icon="ph-bug"
      :username-label="t('auth.email')"
      :password-label="t('auth.password')"
      :submit-text="t('auth.submit')"
      :loading="submitting"
      :error="error ?? undefined"
      :signup-href="undefined"
      signup-text=""
      @submit="onSubmit"
    />
    <p class="auth-page-alt">
      {{ t("auth.needAccount") }}
      <RouterLink to="/register">
        <GnButton variant="secondary" size="sm">{{ t("nav.register") }}</GnButton>
      </RouterLink>
    </p>
  </div>
</template>

<style scoped>
.auth-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
}
.auth-page-alt {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  opacity: 0.8;
}
.auth-page-alt a {
  text-decoration: none;
}
</style>