<template>
  <div class="reset-password">
    <h2>Neues Passwort setzen</h2>
    <form @submit.prevent="submitResetPassword">
      <label for="password">Neues Passwort:</label>
      <input type="password" id="password" v-model="password" required minlength="6">
      
      <label for="confirmPassword">Passwort bestätigen:</label>
      <input type="password" id="confirmPassword" v-model="confirmPassword" required minlength="6">
      
      <button type="submit" :disabled="!isFormValid">Passwort zurücksetzen</button>
    </form>
    <p>
      <router-link to="/login">Zurück zum Login</router-link>
    </p>

    <div v-if="dialogVisible" class="dialog">
      <div class="dialog-content">
        <h3>{{ dialogTitle }}</h3>
        <p>{{ dialogMessage }}</p>
        <button type="button" @click="closeDialog">Schließen</button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from '../../axios';

export default {
  name: 'ResetPasswordComponent',
  data() {
    return {
      password: '',
      confirmPassword: '',
      token: '',
      dialogTitle: '',
      dialogMessage: '',
      dialogVisible: false
    };
  },
  computed: {
    isFormValid() {
      return this.password.length >= 6 && 
             this.password === this.confirmPassword && 
             this.token;
    }
  },
  mounted() {
    // Token aus URL-Parameter extrahieren
    const urlParams = new URLSearchParams(window.location.search);
    this.token = urlParams.get('token');
    
    if (!this.token) {
      this.showDialog('Fehler', 'Ungültiger Reset-Link. Bitte fordern Sie einen neuen Link an.');
    }
  },
  methods: {
    async submitResetPassword() {
      if (this.password !== this.confirmPassword) {
        this.showDialog('Fehler', 'Die Passwörter stimmen nicht überein.');
        return;
      }

      try {
        const response = await axios.post('/auth/reset-password', {
          token: this.token,
          password: this.password
        });
        
        this.showDialog('Erfolg', response.data?.message || 'Passwort erfolgreich zurückgesetzt. Sie können sich jetzt anmelden.');
        this.password = '';
        this.confirmPassword = '';
        
        // Nach 3 Sekunden zum Login weiterleiten
        setTimeout(() => {
          this.$router.push('/auth/login');
        }, 3000);
      } catch (err) {
        const message = err?.response?.data?.message || err?.message || 'Ein unbekannter Fehler ist aufgetreten';
        this.showDialog('Fehler', message);
      }
    },
    showDialog(title, message) {
      this.dialogTitle = title;
      this.dialogMessage = message;
      this.dialogVisible = true;
    },
    closeDialog() {
      this.dialogVisible = false;
    }
  }
};
</script>

<style scoped>
.reset-password {
  max-width: 400px;
  margin: auto;
}
form {
  display: flex;
  flex-direction: column;
}
label {
  margin-top: 10px;
}
input {
  margin-top: 5px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
button {
  margin-top: 20px;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}
.dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
}
.dialog-content {
  background: #fff;
  padding: 16px;
  border-radius: 4px;
  max-width: 420px;
  width: 90%;
}
</style>
