<script setup lang="ts">
const { signInWithEmail, signInWithGoogle, error } = useAuth()

const isOpen = defineModel<boolean>()
const email = ref('')
const password = ref('')
const loginError = ref<string | null>(null)
const isSubmitting = ref(false)

const handleEmailLogin = async () => {
  try {
    loginError.value = null
    isSubmitting.value = true
    await signInWithEmail(email.value, password.value)
    isOpen.value = false
    // Reset form
    email.value = ''
    password.value = ''
  } catch (err) {
    loginError.value = 'Login failed. Please check your credentials.'
  } finally {
    isSubmitting.value = false
  }
}

const handleGoogleLogin = async () => {
  try {
    loginError.value = null
    isSubmitting.value = true
    await signInWithGoogle()
    isOpen.value = false
  } catch (err) {
    loginError.value = 'Google login failed. Please try again.'
  } finally {
    isSubmitting.value = false
  }
}
</script>

<template>
  <Teleport to="body">
    <div
      v-if="isOpen"
      class="fixed left-0 top-0 z-50 flex min-h-screen w-full items-center justify-center bg-black/60 px-4"
      @click.self="isOpen = false"
    >
      <div class="w-full max-w-md rounded-lg bg-slate-900 p-6 shadow-xl">
      <h2 class="mb-6 text-2xl font-bold text-white">Sign In</h2>
      
      <form @submit.prevent="handleEmailLogin" class="space-y-4">
        <div>
          <label class="block text-sm font-medium text-slate-300">Email</label>
          <input
            v-model="email"
            type="email"
            required
            class="mt-1 w-full rounded-md border border-slate-700 bg-slate-800 px-3 py-2 text-white focus:border-sky-400 focus:outline-none"
          />
        </div>
        
        <div>
          <label class="block text-sm font-medium text-slate-300">Password</label>
          <input
            v-model="password"
            type="password"
            required
            class="mt-1 w-full rounded-md border border-slate-700 bg-slate-800 px-3 py-2 text-white focus:border-sky-400 focus:outline-none"
          />
        </div>
        
        <button
          type="submit"
          :disabled="isSubmitting"
          class="w-full rounded-md bg-sky-600 px-4 py-2 text-white hover:bg-sky-700 disabled:opacity-50"
        >
          {{ isSubmitting ? 'Signing in...' : 'Sign In' }}
        </button>
      </form>

      <div class="my-4 flex items-center">
        <div class="flex-1 border-t border-slate-700"></div>
        <span class="px-3 text-sm text-slate-400">or</span>
        <div class="flex-1 border-t border-slate-700"></div>
      </div>

      <button
        @click="handleGoogleLogin"
        :disabled="isSubmitting"
        class="w-full rounded-md border border-slate-700 bg-slate-800 px-4 py-2 text-white hover:bg-slate-700 disabled:opacity-50"
      >
        Sign in with Google
      </button>

      <div v-if="loginError || error" class="mt-4 text-sm text-red-400">
        {{ loginError || error }}
      </div>
      
        <button
          @click="isOpen = false"
          class="mt-4 text-sm text-slate-400 hover:text-white"
        >
          Cancel
        </button>
      </div>
    </div>
  </Teleport>
</template>