<script setup>
import GoogleWidget from "../../components/auth/GoogleWidget.vue";
import AppleWidget from "../../components/auth/AppleWidget.vue";
import LogoWidget from "../../components/landing/LogoWidget.vue";
import Checkbox from "primevue/checkbox";
import InputText from "primevue/inputtext";
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";

import { api, ensureCsrf } from "../../services/api";
import { hydrateUser } from "../../composables/useAuth";

const router = useRouter();
const route = useRoute();

const email = ref("");
const password = ref("");
const remember = ref(false);

const submitting = ref(false);

const validationMessage = ref("");

async function onSubmit(event) {
  event.preventDefault();
  validationMessage.value = "";
  submitting.value = true;
  try {
    await ensureCsrf();
    await api.post("/login", {
      email: email.value,
      password: password.value,
      remember: remember.value,
    });
    await hydrateUser();

    const target = typeof route.query.redirect === "string"
      ? route.query.redirect
      : "/dashboard";
    router.replace(target);
  } catch (error) {
    const body = error?.response?.data;
    validationMessage.value =
      body?.message ||
      body?.errors?.email?.[0] ||
      "Could not authenticate. Try again.";
  } finally {
    submitting.value = false;
  }
}
</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 max-w-[100rem] mx-auto"
  >
    <div class="flex w-full h-full justify-center gap-12">
      <div class="flex flex-col py-20 lg:min-w-[30rem]">
        <router-link
          :to="{ name: 'dashboard' }"
          class="flex items-center justify-center lg:justify-start mb-8"
        >
          <LogoWidget />
        </router-link>
        <div class="flex flex-col justify-center grow">
          <div class="max-w-md mx-auto w-full">
            <h5 class="title-h5 text-center lg:text-left">Login</h5>
            <p class="body-small mt-3.5 text-center lg:text-left">
              Demo: demo@example.com / password (see UserSeeder)
            </p>
            <button type="button" class="social-button mt-8">
              <GoogleWidget /> Sign in with Google
            </button>
            <button type="button" class="social-button mt-4">
              <AppleWidget /> Sign in with Apple
            </button>
            <div class="flex items-center gap-3.5 my-7">
              <span
                class="flex-1 h-[1px] bg-surface-200 dark:bg-surface-800"
              />
              <span
                class="body-small text-surface-400 dark:text-surface-600"
                >or</span
              >
              <span
                class="flex-1 h-[1px] bg-surface-200 dark:bg-surface-800"
              />
            </div>
            <form @submit.prevent="onSubmit">
              <InputText
                v-model="email"
                type="email"
                class="w-full"
                autocomplete="username"
                placeholder="Email"
              />
              <InputText
                v-model="password"
                type="password"
                class="w-full mt-4"
                autocomplete="current-password"
                placeholder="Password"
              />
              <div class="my-8 flex items-center justify-between">
                <div class="flex items-center gap-2">
                  <Checkbox v-model="remember" input-id="remember" binary />
                  <label for="remember" class="body-small">Remember me</label>
                </div>
              </div>
              <p
                v-if="validationMessage"
                class="text-sm text-red-600 dark:text-red-400 mb-3"
              >
                {{ validationMessage }}
              </p>
              <button
                type="submit"
                class="body-button w-full"
                :disabled="submitting"
              >
                Login
              </button>
            </form>
          </div>
        </div>
        <div
          class="mt-8 text-center lg:text-start block relative text-surface-400 dark:text-surface-500 text-sm"
        >
          ©{{ new Date().getFullYear() }} Maestro
        </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 border border-surface overflow-hidden bg-surface-100 dark:bg-surface-900"
        >
          <div class="flex flex-col items-center gap-4 p-12 text-center" aria-hidden="true">
            <span
              class="inline-flex h-20 w-20 items-center justify-center rounded-full bg-primary-500/15 text-primary"
            >
              <i class="pi pi-lock text-4xl" />
            </span>
            <p class="body-small text-surface-600 dark:text-surface-300 max-w-sm">
              Secure sign-in to your workspace.
            </p>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>
