<template>
  <div class="auth-page">
    <div class="navbar">
      <div class="navbar-inner">
        <div class="container">
          <AppBrand />
        </div>
      </div>
    </div>

    <div class="contents">
      <div class="auth-form-container">
        <h2>Einloggen</h2>
        <p></p>
        
        <form @submit.prevent="handleLogin" class="auth-form">
          <div v-if="error" class="error-message">
            {{ error }}
          </div>

          <div class="auth-form-group">
            <label for="email">E-Mail-Adresse</label>
            <input
              v-model="loginForm.email"
              type="text"
              id="email"
              size="10"
              class="form-input"
              title="Ihre E-Mail-Adresse eingeben"
            />
            <span class="info">Ihre E-Mail-Adresse eingeben</span>
          </div>

          <div class="auth-form-group">
            <label for="password">Passwort</label>
            <input
              v-model="loginForm.password"
              type="password"
              id="password"
              size="10"
              class="form-input"
              title="Ihr Passwort eingeben"
              @keydown.enter="handleLogin"
            />
            <span class="info">Ihr Passwort eingeben</span>
          </div>

          <div class="auth-form-group">
            <label for="remember">Login merken</label>
            <input
              v-model="rememberMe"
              type="checkbox"
              id="remember"
            />
            <span class="info"></span>
          </div>

          <div class="auth-form-group">
            <label for="action">Aktion</label>
            <select id="action" v-model="loginAction" class="form-input">
              <option value="0">Keine Aktion</option>
              <option value="1">Arbeit beginnen</option>
              <option value="2">Pause beginnen</option>
              <option value="3">Pause beenden</option>
              <option value="4">Feierabend</option>
            </select>
            <span class="info">Wird beim Einloggen ausgeführt</span>
          </div>

          <div class="buttons">
            <button
              type="submit"
              class="btn btn-primary"
              :disabled="authStore.isLoading"
            >
              {{ authStore.isLoading ? 'Wird eingeloggt...' : 'Einloggen' }}
            </button>
          </div>

          <div class="oauth-divider">
            <span>oder</span>
          </div>

          <div class="buttons">
            <button
              type="button"
              @click="handleGoogleLogin"
              class="btn btn-google"
            >
              <svg class="google-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="20px" height="20px">
                <path fill="#FFC107" d="M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12c0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z"/>
                <path fill="#FF3D00" d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z"/>
                <path fill="#4CAF50" d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z"/>
                <path fill="#1976D2" d="M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z"/>
              </svg>
              Mit Google anmelden
            </button>
          </div>

          <div class="buttons">
            <router-link to="/password-forgot" class="link">Passwort vergessen</router-link>
            |
            <router-link to="/register" class="link">Registrieren</router-link>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '../stores/authStore'
import { API_BASE_URL } from '@/config/api'
import AppBrand from '../components/AppBrand.vue'

const API_URL = API_BASE_URL
const router = useRouter()
const authStore = useAuthStore()

const loginForm = ref({
  email: '',
  password: ''
})

const rememberMe = ref(false)
const loginAction = ref('0')
const error = ref('')

const handleLogin = async () => {
  try {
    error.value = ''
    
    const result = await authStore.login({
      email: loginForm.value.email,
      password: loginForm.value.password,
      action: loginAction.value
    })

    // Event auslösen, damit StatusBox sich aktualisiert
    window.dispatchEvent(new CustomEvent('login-completed'))

    // Zeige Warnung, falls Aktion nicht ausgeführt werden konnte
    if (result.actionWarning) {
      error.value = result.actionWarning
      // Trotzdem zum Dashboard weiterleiten (nach kurzer Verzögerung)
      setTimeout(() => {
        router.push('/')
      }, 2000)
    } else {
      // Nach erfolgreichem Login zum Dashboard
      router.push('/')
    }
  } catch (err) {
    error.value = err.message || 'Login fehlgeschlagen. Bitte überprüfen Sie Ihre Eingaben.'
  }
}

const handleGoogleLogin = () => {
  // Redirect zu Google OAuth
  window.location.href = `${API_URL}/auth/google`
}
</script>

<style scoped>
body {
  background-color: #ffffff;
}

.auth-page {
  min-height: 100vh;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.navbar {
  margin: 0;
}

.navbar-inner {
  background-image: none;
  background-color: #f0ffec;
  border-radius: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid #e0ffe0;
}

.contents {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
}

.auth-form-container {
  width: 900px;
  background-color: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 2.5rem 3rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.auth-form-container h2 {
  text-align: center;
  background-color: #f5f5f5;
  padding: 0.75em;
  margin: -2.5rem -2.5rem 2rem -2.5rem;
  font-size: 1.6rem;
  font-weight: 500;
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid #e0e0e0;
}

.auth-form {
  padding: 0;
}

.auth-form-group {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  gap: 1rem;
}

.auth-form-group label {
  width: 12em;
  line-height: 1.5;
  margin: 0;
  font-weight: 500;
  color: #333;
}

.auth-form-group input[type="text"],
.auth-form-group input[type="password"],
.auth-form-group input[type="email"],
.auth-form-group select {
  flex: 1;
  line-height: 1.5;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.auth-form-group input:focus,
.auth-form-group select:focus {
  outline: none;
  border-color: #5bc0de;
  box-shadow: 0 0 0 3px rgba(91, 192, 222, 0.1);
}

.auth-form-group input[type="checkbox"] {
  width: auto;
  margin: 0;
  flex: 0;
}

.auth-form-group .info {
  display: none;
}

.form-input {
  flex: 1;
  min-width: 0;
}

.error-message {
  background-color: #f2dede;
  border: 1px solid #ebccd1;
  color: #a94442;
  padding: 0.75em;
  margin-bottom: 1em;
  border-radius: 4px;
}

.buttons {
  margin-top: 1.5em;
  text-align: center;
}

.buttons .btn {
  margin: 0 3px;
  padding: 10px 24px;
  font-size: 15px;
}

.buttons .btn-primary {
  min-width: 140px;
}

.link {
  color: #5bc0de;
  text-decoration: none;
  cursor: pointer;
  padding: 0 0.75em;
  transition: color 0.2s;
}

.link:hover {
  text-decoration: none;
  color: #31b0d5;
}

.oauth-divider {
  text-align: center;
  margin: 1.5em 0;
  position: relative;
}

.oauth-divider::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background-color: #e0e0e0;
}

.oauth-divider span {
  position: relative;
  background: white;
  padding: 0 1em;
  color: #999;
  font-size: 0.9em;
}

.btn-google {
  width: 100%;
  background-color: white;
  border: 1px solid #ddd;
  color: #444;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 10px 24px;
  font-size: 15px;
  font-weight: 500;
}

.btn-google:hover {
  background-color: #f8f8f8;
  border-color: #ccc;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.google-icon {
  width: 20px;
  height: 20px;
}
</style>
