<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.new_password_title") }}</p>

        <q-form
          ref="formRef"
          class="full-width"
          autocomplete="off"
          @submit="onSubmit"
        >
          <DefaultPasswordInput
            v-model="form.password"
            v-model:error="validationErrors.password"
            :label="$t('common.terms.password')"
            :rules="[inputRules.required, inputRules.password]"
            :hint="$t('auth.password_hint')"
          />
          <DefaultPasswordInput
            v-model="form.password_confirmation"
            v-model:error="validationErrors.password_confirmation"
            :label="$t('auth.confirm_password')"
            :rules="[inputRules.required, (v) => v === form.password || $t('validation.rules.same_password')]"
          />

          <q-btn
            class="full-width q-mt-sm login-btn"
            color="violet-normal"
            :label="$t('auth.confirm')"
            type="submit"
            unelevated
            :loading
          >
            <template #loading><q-spinner /></template>
          </q-btn>
        </q-form>

        <a href="#" class="login-link q-mt-md" @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 { ref, useTemplateRef } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useInputRules } from "src/composables/useInputRules";
import { useSubmitHandler } from "src/composables/useSubmitHandler";
import { useAuth } from "src/composables/useAuth";
import { userStore } from "src/stores/user";
import { resetPassword } from "src/api/auth";

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

const router = useRouter();
const route  = useRoute();
const { inputRules } = useInputRules();
const { setAuthDataFromPayload } = useAuth();
const store = userStore();

const HOME_BY_TIPO = {
  administrador: "DashboardPage",
  associado:     "CarteirinhaPage",
  parceiro:      "ValidarCarteirinhaPage",
};

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

const formRef = useTemplateRef("formRef");

const {
  loading,
  validationErrors,
  execute: submitForm,
} = useSubmitHandler({
  onSuccess: async (response) => {
    await setAuthDataFromPayload(response.data.payload);
    const home = HOME_BY_TIPO[store.userTipo] ?? "CarteirinhaPage";
    router.push({ name: home });
  },
  formRef,
});

const form = ref({
  password: null,
  password_confirmation: null,
});

const onSubmit = async () => {
  await submitForm(() =>
    resetPassword(email, codigo, form.value.password, form.value.password_confirmation)
  );
};

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 20px;
  text-align: center;
}

.login-btn {
  height: 44px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.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>
