<template>
    <div class="min-h-screen flex items-center justify-center bg-gray-100">
      <div class="w-full max-w-md bg-white p-8 rounded-2xl shadow-xl">
        <h1 class="text-2xl font-bold text-center mb-6">Login to Your Account</h1>
  
        <form @submit.prevent="loginWithEmail" class="space-y-4">
          <input
            v-model="email"
            type="email"
            placeholder="Email"
            class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            required
          />
          <input
            v-model="password"
            type="password"
            placeholder="Password"
            class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            required
          />
          <button
            type="submit"
            :disabled="loading"
            class="w-full bg-blue-600 text-white py-2 rounded-md hover:bg-blue-700 transition disabled:opacity-50"
          >
            {{ loading ? 'Logging in...' : 'Login with Email' }}
          </button>
        </form>
  
        <div class="mt-6 border-t pt-4">
          <p class="text-center text-gray-500 mb-4">or login with</p>
  
          <div class="space-y-3">
            <button
              @click="loginWithOAuth('google')"
              class="w-full flex items-center justify-center bg-red-500 text-white py-2 rounded-md hover:bg-red-600 transition"
            >
              Google
            </button>
            <button
              @click="loginWithOAuth('github')"
              class="w-full flex items-center justify-center bg-gray-800 text-white py-2 rounded-md hover:bg-gray-900 transition"
            >
              GitHub
            </button>
            <button
              @click="loginWithOAuth('facebook')"
              class="w-full flex items-center justify-center bg-blue-700 text-white py-2 rounded-md hover:bg-blue-800 transition"
            >
              Facebook
            </button>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'
  import { Client, Account } from 'appwrite'
  
  const router = useRouter()
  const email = ref('')
  const password = ref('')
  const loading = ref(false)
  
  // ✅ Appwrite config
  const client = new Client()
  client
    .setEndpoint('https://cloud.appwrite.io/v1') // ✅ Fixed typo (removed double https)
    .setProject('67e1445400053dca1d9b') // Replace with your real project ID
  
  const account = new Account(client)
  
  // ✅ Login handler
  const loginWithEmail = async () => {
  loading.value = true
  try {
    const session = await account.createEmailPasswordSession(email.value, password.value)
    console.log('Session:', session)
    alert('Login successful!')
    router.push('/Dashboard') // ✅ route to Dashboard
  } catch (error) {
    console.error('Login Error:', error.message)
    alert(error.message || 'Login failed. Please try again.')
  } finally {
    loading.value = false
  }
}

//   ----------------if user already logged in-------------
onMounted(async () => {
  try {
    const session = await account.getSession('current')  // Check if session exists
    if (session) {
      router.push('/Dashboard')  // Redirect to Dashboard if session exists
    }
  } catch (error) {
    console.log('No active session found.')
  }
})
// ----------------------------------------------------------
  // ✅ OAuth login
  const loginWithOAuth = async (provider) => {
    try {
      account.createOAuth2Session(
        provider,
        'http://localhost:3000/Dashboard', // success redirect
        'http://localhost:3000/SignIn'     // failure redirect
      )
    } catch (error) {
      console.error(`OAuth login failed: ${error.message}`)
      alert('OAuth login failed.')
    }
  }
  </script>
  