<template>
  <div
    class="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8"
  >
    <div class="sm:mx-auto sm:w-full sm:max-w-sm">
      <img
        class="mx-auto h-10 w-auto"
        src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade-600"
        alt="Your Company"
      />
      <h2
        class="mt-10 text-center text-2xl/9 font-bold tracking-tight text-gray-900 dark:text-white"
      >
        Sign in to your account
      </h2>
    </div>

    <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
      <form class="space-y-6" @submit.prevent="handleSubmit">
        <div>
          <label
            for="email"
            class="block text-sm/6 font-medium text-gray-900 dark:text-white"
          >
            Email address
          </label>
          <div class="mt-2">
            <input
              v-model="email"
              type="email"
              name="email"
              id="email"
              autocomplete="email"
              required
              class="block w-full rounded-md bg-white dark:bg-white/5 px-3 py-1.5 text-base text-gray-900 dark:text-white outline-1 -outline-offset-1 outline-gray-300 dark:outline-white/10 placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 dark:focus:outline-indigo-500 sm:text-sm/6"
            />
          </div>
        </div>

        <div>
          <div class="flex items-center justify-between">
            <label
              for="password"
              class="block text-sm/6 font-medium text-gray-900 dark:text-white"
            >
              Password
            </label>
          </div>
          <div class="mt-2">
            <input
              v-model="password"
              type="password"
              name="password"
              id="password"
              autocomplete="current-password"
              required
              class="block w-full rounded-md bg-white dark:bg-white/5 px-3 py-1.5 text-base text-gray-900 dark:text-white outline-1 -outline-offset-1 outline-gray-300 dark:outline-white/10 placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 dark:focus:outline-indigo-500 sm:text-sm/6"
            />
          </div>
        </div>

        <!-- Alert message -->
        <div
          v-if="login_show_alert"
          :class="[
            'text-white text-center font-bold p-4 mb-4',
            login_alert_variant,
          ]"
        >
          {{ login_alert_msg }}
        </div>

        <div>
          <button
            type="submit"
            :disabled="login_in_submission"
            class="flex w-full justify-center rounded-md bg-indigo-600 dark:bg-indigo-500 px-3 py-1.5 text-sm/6 font-semibold text-white shadow-xs hover:bg-indigo-500 dark:hover:bg-indigo-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:focus-visible:outline-indigo-500 disabled:opacity-50"
          >
            Sign in
          </button>
        </div>
      </form>

      <p class="mt-10 text-center text-sm/6 text-gray-500 dark:text-gray-400">
        For You master,
        <a
          href="#"
          class="font-semibold text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300"
        >
          Get it Sign up
        </a>
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import useUserStore from '@/stores/user';

import type { LoginValues } from '@/types';

const userStore = useUserStore();

const email = ref('');
const password = ref('');

const login_in_submission = ref(false);
const login_show_alert = ref(false);
const login_alert_variant = ref('bg-blue-500'); // fixed typo
const login_alert_msg = ref('로그인 중입니다. 잠시만 기다려주세요!');

const handleSubmit = async () => {
  const values: LoginValues = {
    email: email.value,
    password: password.value,
  };

  login_in_submission.value = true;
  login_show_alert.value = true;
  login_alert_variant.value = 'bg-blue-500';
  login_alert_msg.value = '로그인 중입니다. 잠시만 기다려주세요!';

  if (!values.email.includes('@')) {
    values.email += '@peer-edu.net';
  }

  try {
    await userStore.authenticate(values);
  } catch (error) {
    login_in_submission.value = false;
    login_alert_variant.value = 'bg-red-500';
    login_alert_msg.value = '아이디 또는 비밀번호가 일치하지 않습니다.';
    return;
  }

  login_alert_variant.value = 'bg-green-500';
  login_alert_msg.value = '로그인에 성공하였습니다!';
  const router = useRouter();
  router.push('/');
};
</script>
