<script setup>
import { ref, onMounted, onUnmounted, watch } from "vue";
import axios from "axios";

// Получение props
const props = defineProps({
  currentPage: String,
});

// Объявление события для обновления страницы
const emit = defineEmits(["update"]);

const login = ref("");
const password = ref("");
const authError = ref(false);
const isLoggedIn = ref(false);

// Показать badge reCAPTCHA
const showRecaptchaBadge = () => {
  setTimeout(() => {
    const badge = document.querySelector(".grecaptcha-badge");
    if (badge) {
      badge.style.display = "block";
    }
  }, 100);
};

// Скрыть badge reCAPTCHA
const hideRecaptchaBadge = () => {
  const badge = document.querySelector(".grecaptcha-badge");
  if (badge) {
    badge.style.display = "none";
  }
};

// Функция авторизации
const auth_my = async () => {
  try {
    // Получение токена reCAPTCHA
    const recaptchaToken = await grecaptcha.execute(
      "6LdfSo8sAAAAAGGhbgIGO51nHgMUALYjcAMOxnOg",
      { action: "login" },
    );

    const response = await axios.post("http://127.0.0.1:8004/login", {
      username: login.value,
      password: password.value,
      recaptcha_token: recaptchaToken,
    });
    if (response.data.message === "Login successful") {
      authError.value = false;
      isLoggedIn.value = true;
      hideRecaptchaBadge();
      emit("update", "rezylt");
    } else {
      authError.value = true;
    }
  } catch (err) {
    authError.value = true;
    console.log(err);
  }
};

// Обработка глобального нажатия Enter
const handleKeyDown = (event) => {
  if (event.key === "Enter") {
    auth_my();
  }
};

// Добавляем глобальный слушатель при монтировании
onMounted(() => {
  window.addEventListener("keydown", handleKeyDown);
  // Показываем badge reCAPTCHA при монтировании
  showRecaptchaBadge();
});

// Удаляем при размонтировании
onUnmounted(() => {
  window.removeEventListener("keydown", handleKeyDown);
});

// Переход на стартовую страницу (сброс данных)
function showStartPage() {
  emit("update", "admin-panel");
  login.value = "";
  password.value = "";
  authError.value = false;
  isLoggedIn.value = false;
  // Показываем badge reCAPTCHA
  showRecaptchaBadge();
}

// Отслеживание перехода на страницу admin-panel
watch(() => props.currentPage, (newPage) => {
  if (newPage === 'admin-panel' && !isLoggedIn.value) {
    showRecaptchaBadge();
  }
});
</script>

<template>
  <div
    v-if="props.currentPage === 'admin-panel'"
    class="p-4 bg-white rounded shadow max-w-md mx-auto mt-10 dark:bg-gray-800 dark:text-neutral-300"
  >
    <h2>Вход для администратора</h2>
    <div class="mb-2">
      <label>Логин:</label>
      <input v-model="login" type="text" class="border p-1 w-full" />
    </div>
    <div class="mb-2">
      <label>Пароль:</label>
      <input v-model="password" type="password" class="border p-1 w-full" />
    </div>
    <button
      @click="auth_my"
      class="mr-2 bg-teal-600 hover:bg-teal-800 text-white px-4 py-2 rounded cursor-pointer"
    >
      Войти
    </button>
    <button
      @click="showStartPage"
      class="dark:bg-gray-600 dark:hover:bg-gray-700 bg-gray-500 hover:bg-gray-600 px-4 py-2 rounded cursor-pointer"
    >
      Отмена
    </button>
    <div v-if="authError" class="mt-2 text-red-600">
      Неверный логин или пароль
    </div>
  </div>
</template>

<style scoped>
.grecaptcha-badge {
  display: block !important;
}
</style>
