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

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

          <div v-if="resetLink" class="reset-link-container">
            <p><strong>Bitte kopieren Sie diesen Link oder klicken Sie darauf:</strong></p>
            <a :href="resetLink" class="reset-link">{{ resetLink }}</a>
            <button @click="copyResetLink" class="btn btn-secondary" style="margin-top: 10px;">
              Link kopieren
            </button>
          </div>

          <div class="auth-form-group">
            <label for="email">E-Mail-Adresse</label>
            <input
              v-model="email"
              type="email"
              id="email"
              class="form-input"
              :disabled="!!success"
              required
            />
            <span class="info">Ihre registrierte E-Mail-Adresse</span>
          </div>

          <div class="buttons">
            <button
              v-if="!success"
              type="submit"
              class="btn btn-primary"
              :disabled="authStore.isLoading"
            >
              {{ authStore.isLoading ? 'Wird gesendet...' : 'Reset-Link senden' }}
            </button>
          </div>

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

<script setup>
import { ref } from 'vue'
import { useAuthStore } from '../stores/authStore'
import AppBrand from '../components/AppBrand.vue'

const authStore = useAuthStore()
const email = ref('')
const error = ref('')
const success = ref('')

const resetLink = ref('')

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

    const result = await authStore.requestPasswordReset(email.value)
    
    if (result.resetToken) {
      // Development: Zeige Reset-Link direkt an
      const baseUrl = window.location.origin
      resetLink.value = `${baseUrl}/password-reset?token=${result.resetToken}`
      success.value = 'Reset-Link wurde generiert (Development-Modus):'
    } else {
      success.value = 'Falls ein Account mit dieser E-Mail existiert, wurde ein Reset-Link gesendet.'
    }
  } catch (err) {
    error.value = err.message || 'Fehler beim Senden des Reset-Links'
  }
}

const copyResetLink = async () => {
  try {
    await navigator.clipboard.writeText(resetLink.value)
    alert('Link in Zwischenablage kopiert!')
  } catch (err) {
    console.error('Fehler beim Kopieren:', err)
    // Fallback für ältere Browser
    const textArea = document.createElement('textarea')
    textArea.value = resetLink.value
    document.body.appendChild(textArea)
    textArea.select()
    document.execCommand('copy')
    document.body.removeChild(textArea)
    alert('Link in Zwischenablage kopiert!')
  }
}
</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;
}

.reset-link-container {
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  padding: 1em;
  margin-bottom: 1em;
  border-radius: 4px;
}

.reset-link-container p {
  margin: 0 0 0.5em 0;
  color: #333;
}

.reset-link {
  display: block;
  color: #5bc0de;
  word-break: break-all;
  padding: 0.5em;
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-decoration: none;
  font-family: monospace;
  font-size: 0.9em;
}

.reset-link:hover {
  background: #f0f0f0;
}

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

.buttons .btn {
  margin: 0 3px;
  padding: 10px 24px;
  font-size: 15px;
  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;
}
</style>
