<script setup>
import Logo from "../../components/landing/LogoWidget.vue";
import { ref, onMounted } from "vue";
import authImage from "../../assets/images/landing/auth-image.svg";

const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || "/api";

const loginError = ref("");

onMounted(() => {
  const params = new URLSearchParams(window.location.search);
  const err = params.get("error");
  if (err) {
    loginError.value = decodeURIComponent(err);
  }
});

function signInWithMicrosoft() {
  window.location.href = `${API_BASE_URL.replace(/\/$/, "")}/auth/microsoft/redirect`;
}
</script>

<template>
  <section
    class="min-h-screen flex items-center lg:items-start lg:py-20 justify-center animate-fadein animate-duration-300 animate-ease-in bg-gradient-to-br from-[var(--menu-bg-color)] to-[var(--menu-bg-color-alt)] dark:from-surface-950 dark:to-surface-950 px-4 sm:px-6 lg:px-8"
  >
    <div
      class="flex w-full h-full justify-center gap-4 sm:gap-8 lg:gap-12 max-w-[100rem] mx-auto"
    >
      <div class="flex flex-col py-8 sm:py-12 lg:py-20 lg:min-w-[30rem]">
        <div class="flex flex-col justify-center grow">
          <div class="max-w-md mx-auto w-full">
            <router-link
              to="/"
              class="flex items-center justify-center lg:justify-start mb-20"
            >
              <Logo />
            </router-link>
            <button
              type="button"
              class="social-button mt-6 w-full flex items-center justify-center gap-2 border-white bg-white text-primary-800 hover:bg-surface-100 hover:text-primary-800 dark:border-white dark:bg-white dark:text-primary-800 dark:hover:bg-surface-100 dark:hover:text-primary-800"
              @click="signInWithMicrosoft"
            >
              <i class="pi pi-microsoft" aria-hidden="true" />
              Sign in with Microsoft
            </button>

            <p v-if="loginError" class="mt-4 text-sm text-red-500 text-center">
              {{ loginError }}
            </p>

            <div
              class="mt-8 text-center lg:text-start block relative text-sm text-white/80"
            >
              ©{{ new Date().getFullYear() }} Build2Connect
            </div>
          </div>
        </div>
      </div>
      <div class="hidden lg:flex h-full py-20">
        <div
          class="h-full w-full lg:max-w-[32.5rem] xl:max-w-[60.5rem] mx-auto flex items-center justify-center shadow-[0px_1px_2px_0px_rgba(18,18,23,0.05)] rounded-3xl overflow-hidden"
        >
          <img
            class="w-auto h-full object-contain object-left"
            :src="authImage"
            alt="Auth Image"
          />
        </div>
      </div>
    </div>
  </section>
</template>
