<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>Neues Passwort setzen</h2>
        
        <form @submit.prevent="handleReset" class="auth-form">
          <div v-if="error" class="error-message">
            {{ error }}
          </div>

          <div v-if="success" class="success-message">
            {{ success }}
          </div>

          <div class="auth-form-group">
            <label for="password">Neues Passwort</label>
            <input
              v-model="password"
              type="password"
              id="password"
              class="form-input"
              required
              minlength="6"
              :disabled="!!success"
            />
            <span class="info">Mindestens 6 Zeichen</span>
          </div>

          <div class="auth-form-group">
            <label for="password_confirm">Passwort bestätigen</label>
            <input
              v-model="passwordConfirm"
              type="password"
              id="password_confirm"
              class="form-input"
              required
              :disabled="!!success"
            />
            <span class="info">Passwort wiederholen</span>
          </div>

          <div class="buttons">
            <button
              v-if="!success"
              type="submit"
              class="btn btn-primary"
              :disabled="authStore.isLoading"
            >
              {{ authStore.isLoading ? 'Wird gespeichert...' : 'Passwort zurücksetzen' }}
            </button>
            <router-link
              v-else
              to="/login"
              class="btn btn-primary"
            >
              Zum Login
            </router-link>
          </div>

          <div class="buttons">
            <router-link to="/login" class="link">Zurück zum Login</router-link>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { useAuthStore } from '../stores/authStore'
import AppBrand from '../components/AppBrand.vue'

const route = useRoute()
const authStore = useAuthStore()

const password = ref('')
const passwordConfirm = ref('')
const error = ref('')
const success = ref('')
const resetToken = ref('')

onMounted(() => {
  resetToken.value = route.query.token || ''
  
  if (!resetToken.value) {
    error.value = 'Kein Reset-Token vorhanden. Bitte fordern Sie einen neuen Reset-Link an.'
  }
})

const handleReset = async () => {
  try {
    error.value = ''
    success.value = ''

    if (password.value !== passwordConfirm.value) {
      error.value = 'Passwörter stimmen nicht überein'
      return
    }

    if (password.value.length < 6) {
      error.value = 'Passwort muss mindestens 6 Zeichen lang sein'
      return
    }

    await authStore.resetPassword(resetToken.value, password.value)
    success.value = 'Passwort wurde erfolgreich zurückgesetzt! Sie können sich jetzt einloggen.'
  } catch (err) {
    error.value = err.message || 'Fehler beim Zurücksetzen des Passworts'
  }
}
</script>

<style scoped>
.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 {
  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 {
  outline: none;
  border-color: #5bc0de;
  box-shadow: 0 0 0 3px rgba(91, 192, 222, 0.1);
}

.auth-form-group input:disabled {
  background-color: #f5f5f5;
  cursor: not-allowed;
  opacity: 0.6;
}

.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;
}

.success-message {
  background-color: #dff0d8;
  border: 1px solid #d6e9c6;
  color: #3c763d;
  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;
  min-width: 140px;
  display: inline-block;
  text-align: center;
  text-decoration: none;
}

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

.link:hover {
  text-decoration: none;
  color: #31b0d5;
}
</style>
