<template>
  <q-page class="login-page column items-center justify-center">
    <div class="login-overlay" />

    <div class="login-card column items-center">
      <div class="column items-center fields-card">
        <q-img :src="Logo" class="login-logo q-mb-lg" />

        <UserTypeBadge :tipo="tipo" />

        <p class="login-title">{{ $t("auth.verify_email_title") }}</p>
        <p class="login-description">
          {{ $t("auth.verify_email_description") }}
        </p>

        <p class="email-text q-mb-lg">{{ email }}</p>

        <q-btn
          class="login-btn q-my-lg"
          color="violet-normal"
          :label="$t('auth.enter_code')"
          unelevated
          @click="goToCode"
        />

        <p class="login-hint q-mt-md">
          {{ $t("auth.no_email_hint") }}
          <a href="#" class="login-link" @click.prevent="resend">
            {{ $t("auth.check_spam") }}
          </a>
        </p>

        <a href="#" class="login-link q-mt-sm" @click.prevent="goBack">
          <q-icon name="mdi-arrow-left" size="12px" class="q-mr-xs" />
          {{ $t("auth.back_to_site") }}
        </a>
      </div>
    </div>
  </q-page>
</template>

<script setup>
import { useRouter, useRoute } from "vue-router";

import Logo from "src/assets/logo_serprati.svg";
import UserTypeBadge from "./components/UserTypeBadge.vue";

const router = useRouter();
const route = useRoute();

const email = route.query.email ?? "";
const tipo  = route.query.tipo  ?? "administrador";

const goToCode = () =>
  router.push({ name: "VerifyCodePage", query: { email, tipo } });

const resend = () =>
  router.push({ name: "ForgotPasswordPage", query: { tipo } });

const goBack = () => router.push({ name: "LoginPage" });
</script>

<style lang="scss" scoped>
@use "sass:map";
@use "src/css/quasar.variables.scss" as *;

.login-page {
  min-height: 100dvh;
  background-image: url("src/assets/pessoas_fundo.jpg");
  background-size: cover;
  background-position: center;
  position: relative;
}

.login-overlay {
  position: absolute;
  inset: 0;
  background: rgba(74, 20, 140, 0.48);
  z-index: 0;
}

.login-card {
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 32px);
  min-height: calc(100dvh - 32px);
  background: rgba(255, 255, 255, 0.747);
  border-radius: 16px;
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.15);
}

.fields-card {
  width: 100%;
  max-width: 600px;
  padding: 32px;
  border-radius: 12px;
}

.login-logo {
  width: 380px;
}

.login-title {
  color: map.get($colors, "violet-normal");
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px;
  text-align: center;
}

.login-description {
  color: map.get($colors, "violet-normal");
  font-size: 13px;
  text-align: center;
  margin: 0 0 16px;
}

.email-text {
  color: map.get($colors, "violet-normal");
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  margin: 0;
}

.login-btn {
  height: 36px;
  font-size: 13px;
  font-weight: 600;
  padding: 0 32px;
  letter-spacing: 0.5px;
}

.login-hint {
  color: map.get($colors, "violet-normal");
  font-size: 12px;
  text-align: center;
  margin: 0;
}

.login-link {
  color: map.get($colors, "violet-normal");
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;

  &:hover {
    color: map.get($colors, "violet-normal-hover");
    text-decoration: underline;
  }
}
</style>
