<template>
  <div class="column items-center full-width">
    <q-img
      :src="Logo"
      style="max-width: 379px; max-height: 106px; height: 100%; width: 100%"
    />

    <div class="text-h5 text-weight-regular q-mt-lg text-primary text-center">
      Digite o código de verificação
    </div>

    <div
      class="items-center full-width q-px-lg q-mt-lg"
      style="display: flex; gap: 12px"
    >
      <div class="bg-primary" style="height: 1px; flex: 1"></div>
      <q-icon name="mdi-chevron-down" size="lg" color="warning" />
      <div class="bg-primary" style="height: 1px; flex: 1"></div>
    </div>

    <div
      class="text-body2 text-center text-primary q-px-lg q-mt-md"
      style="font-weight: 400"
    >
      Enviamos um código de 6 dígitos para seu e-mail<br />
      Digite o código para verificar
    </div>

    <div class="row q-gutter-x-sm q-mt-xl justify-center">
      <input
        v-for="(_, index) in 6"
        :key="index"
        :ref="(el) => (inputs[index] = el)"
        v-model="digits[index]"
        type="text"
        inputmode="numeric"
        maxlength="1"
        class="otp-input text-primary text-h5 text-center text-weight-medium"
        :disabled="loading"
        @input="handleInput(index)"
        @keydown="handleKeydown(index, $event)"
        @paste="handlePaste"
      />
    </div>

    <div class="full-width q-px-lg q-mt-xl">
      <q-btn
        class="full-width"
        color="primary-2"
        size="md"
        padding="sm"
        :loading
        @click="emit('resend')"
      >
        <q-icon name="mdi-refresh" class="q-mr-sm" />
        Reenviar E-mail
        <template #loading>
          <q-spinner />
        </template>
      </q-btn>
    </div>

    <div class="q-mt-md text-body2 text-primary">
      Lembrou sua senha?
      <router-link to="/login" class="text-warning text-weight-medium" style="text-decoration: none">
        Faça seu Login
      </router-link>
    </div>
  </div>
</template>

<script setup>
import Logo from "src/assets/images/logo.svg";
import { ref } from "vue";

defineProps({
  loading: Boolean,
});

const emit = defineEmits(["submit", "resend"]);

const digits = ref(["", "", "", "", "", ""]);
const inputs = ref([]);

function handleInput(index) {
  const val = digits.value[index].replace(/\D/g, "").slice(-1);
  digits.value[index] = val;

  if (val && index < 5) {
    inputs.value[index + 1]?.focus();
  }

  const code = digits.value.join("");
  if (code.length === 6) {
    emit("submit", code);
  }
}

function handleKeydown(index, event) {
  if (event.key === "Backspace" && !digits.value[index] && index > 0) {
    inputs.value[index - 1]?.focus();
  }
}

function handlePaste(event) {
  event.preventDefault();
  const text = event.clipboardData.getData("text").replace(/\D/g, "").slice(0, 6);
  text.split("").forEach((char, i) => {
    digits.value[i] = char;
  });
  const nextIndex = Math.min(text.length, 5);
  inputs.value[nextIndex]?.focus();

  if (text.length === 6) {
    emit("submit", text);
  }
}
</script>

<style scoped>
.otp-input {
  width: 44px;
  height: 52px;
  border: none;
  border-bottom: 2px solid #1a5c38;
  background: transparent;
  outline: none;
  font-size: 1.5rem;
}

.otp-input:focus {
  border-bottom-color: #f5a623;
}

.otp-input:disabled {
  opacity: 0.5;
}
</style>
