<script setup>
definePageMeta({
  layout: 'page'
})

const isSubmitting = ref(false)
const errorMessage = ref('')
const statusMessage = ref('')
const showPassword = ref(false)

const form = reactive({
  email: '',
  password: ''
})

/**
 * 회원 로그인 제출 가능 여부
 * @returns {boolean} 제출 가능 여부
 */
const canSubmitSignIn = computed(() => Boolean(form.email.trim()) && Boolean(form.password))

/**
 * 로그인 입력값을 검증한다.
 * @returns {boolean} 검증 통과 여부
 */
const validateSignIn = () => {
  errorMessage.value = ''
  statusMessage.value = ''

  if (!form.email.trim() || !form.password) {
    errorMessage.value = '이메일과 비밀번호를 입력해 주세요.'
    return false
  }

  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) {
    errorMessage.value = '이메일 형식이 올바르지 않습니다.'
    return false
  }

  return true
}

/**
 * 로그인 요청을 처리한다.
 * @returns {Promise<void>}
 */
const submitSignIn = async () => {
  if (!validateSignIn()) {
    return
  }

  isSubmitting.value = true

  try {
    await $fetch('/api/auth/login', {
      method: 'POST',
      body: {
        email: form.email.trim(),
        password: form.password
      }
    })
    statusMessage.value = '로그인되었습니다. 잠시 후 이동합니다.'
    await navigateTo('/')
  } catch (error) {
    errorMessage.value = error?.data?.message || '로그인에 실패했습니다.'
  } finally {
    isSubmitting.value = false
  }
}
</script>

<template>
  <section class="auth-signin min-h-screen bg-[#0a0b0d] text-[#f5f7fa] [color-scheme:dark]">
    <div class="mx-auto flex min-h-screen w-full max-w-[1280px] items-center px-5 py-12 sm:px-10 lg:px-16">
      <div class="w-full max-w-[430px] p-5 sm:p-8">
        <p class="text-2xl font-semibold leading-tight">
          로그인
        </p>
        <p class="mt-2 text-sm text-[#9ba3af]">
          가입한 이메일과 비밀번호로 로그인하세요.
        </p>

        <form class="mt-8 space-y-5" @submit.prevent="submitSignIn">
          <div class="space-y-1.5">
            <label class="text-xs text-[#d8dee6]">이메일</label>
            <input
              v-model="form.email"
              class="auth-form-input h-10 w-full rounded-[8px] border border-[#1a212a] bg-transparent px-3 text-sm outline-none transition-colors focus:border-[#2f6feb]"
              type="email"
              autocomplete="email"
            >
          </div>

          <div class="space-y-1.5">
            <label class="text-xs text-[#d8dee6]">비밀번호</label>
            <div class="flex items-center rounded-[8px] border border-[#1a212a] transition-colors focus-within:border-[#2f6feb]">
              <input
                v-model="form.password"
                class="auth-form-input h-10 min-w-0 flex-1 bg-transparent px-3 text-sm outline-none"
                :type="showPassword ? 'text' : 'password'"
                autocomplete="current-password"
              >
              <AuthPasswordVisibilityToggle v-model="showPassword" />
            </div>
          </div>

          <button
            class="h-9 rounded-[8px] bg-[#2f6feb] px-8 text-xs font-medium text-white transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-40"
            type="submit"
            :disabled="isSubmitting || !canSubmitSignIn"
          >
            로그인
          </button>
        </form>

        <p v-if="errorMessage" class="mt-4 text-xs text-[#e5acb1]" aria-live="polite">
          {{ errorMessage }}
        </p>
        <p v-if="statusMessage" class="mt-4 text-xs text-[#9fc4ff]" aria-live="polite">
          {{ statusMessage }}
        </p>

        <p class="mt-6 text-sm text-[#9ba3af]">
          계정이 없으신가요?
          <NuxtLink class="text-[#7eb8ff] hover:opacity-80" to="/signup">
            회원가입
          </NuxtLink>
        </p>
        <p class="mt-3 text-sm text-[#9ba3af]">
          <NuxtLink class="text-[#7eb8ff] hover:opacity-80" to="/forgot-password">
            비밀번호를 잊으셨나요?
          </NuxtLink>
        </p>
        <NuxtLink class="mt-2 inline-flex text-xs text-[#9ba3af] hover:opacity-80" to="/">
          홈으로 돌아가기
        </NuxtLink>
      </div>
    </div>
  </section>
</template>
