<script setup>
import { useUserStore } from "~/stores/user";
import { RecaptchaV2 } from "vue3-recaptcha-v2";

definePageMeta({
  title: "Login",
  layout: "empty",
  middleware: ["dashboard"],
});

const { $swal } = useNuxtApp();
const { siteSettings, loading: siteSettingsLoading } = useSiteSettings();
const username = ref("");
const password = ref("");
const userStore = useUserStore();

const togglePasswordVisibility = ref(false);

// Get login logo with fallback
const getLoginLogo = () => {
  if (siteSettingsLoading.value) {
    return "/img/logo/corradAF-logo.svg";
  }
  return siteSettings.value?.siteLoginLogo || "/img/logo/corradAF-logo.svg";
};

// Get site name with fallback
const getSiteName = () => {
  if (siteSettingsLoading.value) {
    return "Login Logo";
  }
  return siteSettings.value?.siteName || "Login Logo";
};

const login = async () => {
  try {
    const res = await useFetch("/api/auth/login", {
      method: "POST",
      initialCache: false,
      body: JSON.stringify({
        username: username.value,
        password: password.value,
      }),
    });

    const data = res.data.value;

    if (data.statusCode === 200) {
      // Save token to pinia store
      userStore.setUsername(data.data.username);
      userStore.setRoles(data.data.roles);
      userStore.setIsAuthenticated(true);

      $swal.fire({
        position: "center",
        title: "Success",
        text: "Login Success",
        icon: "success",
        timer: 2000,
        showConfirmButton: false,
      });

      window.location.href = "/dashboard";
    } else {
      $swal.fire({
        title: "Error!",
        text: data.message,
        icon: "error",
      });
    }
  } catch (e) {
    console.log(e);
  }
};

const handleWidgetId = (widgetId) => {
  console.log("Widget ID: ", widgetId);
};
const handleErrorCalback = () => {
  console.log("Error callback");
};
const handleExpiredCallback = () => {
  console.log("Expired callback");
};
const handleLoadCallback = (response) => {
  console.log("Load callback", response);
};
</script>

<template>
  <div class="flex-none md:flex justify-center text-center items-center h-screen">
    <div class="w-full md:w-3/4 lg:w-1/2 xl:w-2/6 relative">
      <rs-card class="h-screen md:h-auto px-10 md:px-16 py-12 md:py-20 mb-0">
        <div class="img-container flex justify-center items-center mb-5">
          <img
            src="@/assets/img/logo/lzs-logo.png"
            class="max-w-[180px] max-h-[60px] object-contain"
          />
        </div>
        <p class="text-slate-500 text-lg mb-6">Log masuk ke akaun anda</p>
        <div class="grid grid-cols-2">
          <FormKit
            type="text"
            v-model="username"
            validation="required"
            placeholder="Masukkan ID Pengguna"
            :classes="{
              outer: 'col-span-2',
              label: 'text-left',
              messages: 'text-left',
            }"
            :validation-messages="{
              required: 'ID Pengguna wajib diisi.',
            }"
          >
            <template #prefixIcon>
              <Icon name="ph:user-fill" class="!w-5 !h-5 ml-3 text-gray-500"></Icon>
            </template>
          </FormKit>
          <FormKit
            :type="togglePasswordVisibility ? 'text' : 'password'"
            v-model="password"
            validation="required"
            placeholder="Masukkan Kata Laluan"
            :classes="{
              outer: 'col-span-2',
              label: 'text-left',
              messages: 'text-left',
            }"
            :validation-messages="{
              required: 'Kata Laluan wajib diisi.',
            }"
          >
            <template #prefixIcon>
              <Icon name="ph:lock-key-fill" class="!w-5 !h-5 ml-3 text-gray-500"></Icon>
            </template>
            <template #suffix>
              <div
                class="bg-gray-100 hover:bg-slate-200 dark:bg-slate-700 hover:dark:bg-slate-900 h-full rounded-r-md p-3 flex justify-center items-center cursor-pointer"
                @click="togglePasswordVisibility = !togglePasswordVisibility"
              >
                <Icon
                  v-if="!togglePasswordVisibility"
                  name="ion:eye-outline"
                  size="19"
                ></Icon>
                <Icon v-else name="ion:eye-off-outline" size="19"></Icon>
              </div>
            </template>
          </FormKit>
          <div class="col-span-2 mb-4">
            <RecaptchaV2
              @widget-id="handleWidgetId"
              @error-callback="handleErrorCalback"
              @expired-callback="handleExpiredCallback"
              @load-callback="handleLoadCallback"
            />
          </div>
          <NuxtLink
            class="col-span-2 flex items-center justify-end h-5 mt-1 text-primary hover:underline mb-5"
            to="forgot-password"
          >
            Lupa Kata Laluan?
          </NuxtLink>
          <FormKit
            type="button"
            input-class="w-full"
            outer-class="col-span-2"
            @click="login"
          >
            Log Masuk

            <Icon name="ph:caret-circle-right" class="!w-5 !h-5 ml-1"></Icon>
          </FormKit>
        </div>
      </rs-card>
    </div>
  </div>
</template>
