<template>
  <div class="login-view min-h-screen flex items-center justify-center relative overflow-hidden">
    <!-- Background Image with filters -->
    <div class="absolute inset-0 z-0">
      <img 
        src="/sf_mobile_garage_1.png" 
        alt="Garage Background" 
        class="w-full h-full object-cover brightness-50 blur-md"
      />
      <div class="absolute inset-0 bg-gradient-to-br from-sf-blue/30 to-sf-green/30"></div>
    </div>

    <!-- Login Card -->
    <div class="relative z-10 w-full max-w-md mx-4">
      <div class="bg-white/10 backdrop-blur-xl rounded-3xl shadow-2xl border border-white/20 p-8">
        <!-- Branding Logo -->
        <div class="flex justify-center mb-8">
          <img 
            src="/sf_logo_ok.png" 
            alt="Service Finder Logo" 
            class="h-20 w-auto mix-blend-multiply"
          />
        </div>

        <!-- Title -->
        <h1 class="text-3xl font-bold text-center text-white mb-2">
          BELÉPÉS A GARÁZSBA
        </h1>
        <p class="text-center text-white/80 mb-8">
          Add meg a hitelesítő adataidat a folytatáshoz
        </p>

        <!-- Login Form -->
        <form @submit.prevent="handleLogin" class="space-y-6">
          <!-- Email Input -->
          <div>
            <label for="email" class="block text-sm font-medium text-white mb-2">
              E-mail cím
            </label>
            <div class="relative">
              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <svg class="h-5 w-5 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"></path>
                </svg>
              </div>
              <input
                id="email"
                v-model="email"
                type="email"
                required
                class="w-full pl-10 pr-4 py-3 bg-white/20 border border-white/30 rounded-xl text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-sf-blue focus:border-transparent transition"
                placeholder="pelda@email.hu"
              />
            </div>
          </div>

          <!-- Password Input -->
          <div>
            <label for="password" class="block text-sm font-medium text-white mb-2">
              Jelszó
            </label>
            <div class="relative">
              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <svg class="h-5 w-5 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
                </svg>
              </div>
              <input
                id="password"
                v-model="password"
                type="password"
                required
                class="w-full pl-10 pr-4 py-3 bg-white/20 border border-white/30 rounded-xl text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-sf-green focus:border-transparent transition"
                placeholder="••••••••"
              />
            </div>
          </div>

          <!-- Remember Me & Forgot Password -->
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <input
                id="remember"
                v-model="rememberMe"
                type="checkbox"
                class="h-4 w-4 text-sf-blue focus:ring-sf-blue border-white/30 rounded"
              />
              <label for="remember" class="ml-2 block text-sm text-white">
                Emlékezz rám
              </label>
            </div>
            <a href="#" class="text-sm text-white hover:text-sf-green transition">
              Elfelejtetted a jelszavad?
            </a>
          </div>

          <!-- Submit Button -->
          <button
            type="submit"
            class="w-full py-3 px-4 bg-gradient-to-r from-sf-blue to-sf-green text-white font-bold rounded-xl hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sf-blue transition-all shadow-lg"
          >
            BELÉPÉS A GARÁZSBA
          </button>

          <!-- Divider -->
          <div class="relative my-6">
            <div class="absolute inset-0 flex items-center">
              <div class="w-full border-t border-white/30"></div>
            </div>
            <div class="relative flex justify-center text-sm">
              <span class="px-4 bg-transparent text-white/70">vagy</span>
            </div>
          </div>

          <!-- Alternative Actions -->
          <div class="space-y-4">
            <button
              type="button"
              class="w-full py-3 px-4 bg-white/10 border border-white/30 text-white rounded-xl hover:bg-white/20 transition flex items-center justify-center"
            >
              <svg class="w-5 h-5 mr-3" viewBox="0 0 24 24" fill="currentColor">
                <path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.666-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.787-.94 1.324-2.245 1.171-3.54-1.133.052-2.518.754-3.334 1.701-.735.85-1.389 2.207-1.208 3.514 1.26.091 2.544-.596 3.371-1.675z"/>
              </svg>
              Folytatás Apple ID-val
            </button>
            <button
              type="button"
              class="w-full py-3 px-4 bg-white/10 border border-white/30 text-white rounded-xl hover:bg-white/20 transition flex items-center justify-center"
            >
              <svg class="w-5 h-5 mr-3" viewBox="0 0 24 24" fill="currentColor">
                <path d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"/>
              </svg>
              Folytatás Google-fiókkal
            </button>
          </div>

          <!-- Registration Link -->
          <p class="text-center text-white/80 text-sm mt-8">
            Még nincs fiókod?
            <router-link to="/register" class="text-sf-green font-semibold hover:underline ml-1">
              Regisztrálj most!
            </router-link>
          </p>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/authStore'

const email = ref('')
const password = ref('')
const rememberMe = ref(false)
const router = useRouter()
const authStore = useAuthStore()

const handleLogin = async () => {
  try {
    await authStore.login({
      email: email.value,
      password: password.value,
      remember: rememberMe.value
    })
    // Redirect to home or intended route
    router.push('/')
  } catch (error) {
    console.error('Login failed:', error)
    // In a real app, show error message to user
    alert('Bejelentkezés sikertelen. Kérjük ellenőrizd az adatokat.')
  }
}
</script>

<style scoped>
.login-view {
  font-family: 'Inter', sans-serif;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}
</style>