<template>
  <!-- Page Title -->
  <section class="page-title bg-transparent">
    <div class="container">
      <div class="page-title-row">
        <div class="page-title-content">
          <h1>Giriş</h1>
        </div>
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb">
            <li class="breadcrumb-item"><NuxtLink to="/">Ana Sayfa</NuxtLink></li>
            <li class="breadcrumb-item active" aria-current="page">Giriş</li>
          </ol>
        </nav>
      </div>
    </div>
  </section>

  <section id="content">
    <div class="content-wrap">
      <div class="container">
        <div class="row g-5 justify-content-center">
          <div class="col-md-6 col-lg-5">
            <div class="card mb-0 p-2 border-default bg-contrast-100">
              <div class="card-body p-4">
                <h3 class="mb-4">Hesabınıza giriş yapın</h3>

                <form class="row mb-0" @submit.prevent="onSubmit">
                  <div class="col-12 form-group">
                    <label for="login-email">E-posta</label>
                    <input
                      id="login-email"
                      v-model="email"
                      type="email"
                      class="form-control"
                      :class="{ 'is-invalid': fieldError.email }"
                      autocomplete="email"
                      placeholder="ornek@email.com"
                    >
                    <div v-if="fieldError.email" class="invalid-feedback">{{ fieldError.email }}</div>
                  </div>
                  <div class="col-12 form-group">
                    <label for="login-password">Şifre</label>
                    <input
                      id="login-password"
                      v-model="password"
                      type="password"
                      class="form-control"
                      :class="{ 'is-invalid': fieldError.password }"
                      autocomplete="current-password"
                    >
                    <div v-if="fieldError.password" class="invalid-feedback">{{ fieldError.password }}</div>
                  </div>
                  <div class="col-12 form-group">
                    <div ref="turnstileWrapRef" class="turnstile-form-widget">
                      <NuxtTurnstile
                        ref="turnstileRef"
                        v-model="turnstileToken"
                        :options="{ theme: 'light' }"
                      />
                    </div>
                  </div>
                  <div class="col-12 form-group">
                    <button
                      type="submit"
                      class="btn btn-secondary w-100 m-0"
                      :disabled="loading"
                    >
                      {{ loading ? 'Giriş yapılıyor...' : 'Giriş yap' }}
                    </button>
                  </div>
                </form>

                <div class="divider divider-center my-4">
                  <span>veya</span>
                </div>

                <div class="d-flex flex-column gap-2">
                  <button
                    type="button"
                    class="btn btn-outline-secondary"
                    :disabled="loading"
                    @click="signInWith('github')"
                  >
                    <Icon name="mdi:github" class="me-2" size="1.25em" />
                    GitHub ile giriş yap
                  </button>
                  <button
                    type="button"
                    class="btn btn-outline-secondary"
                    :disabled="loading"
                    @click="signInWith('google')"
                  >
                    <Icon name="mdi:google" class="me-2" size="1.25em" />
                    Google ile giriş yap
                  </button>
                </div>

                <p class="mt-4 mb-0 text-center">
                  Hesabınız yok mu?
                  <NuxtLink to="/auth/register">Kayıt olun</NuxtLink>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useLogin } from '~/composables/useLogin'
import { useTurnstileScale } from '~/composables/useTurnstileScale'

const turnstileWrapRef = ref<HTMLElement | null>(null)
useTurnstileScale(turnstileWrapRef)

const {
  email,
  password,
  turnstileToken,
  turnstileRef,
  fieldError,
  loading,
  onSubmit,
  signInWith,
} = useLogin()
</script>
