<template>
    <div class="forgot-password">
      <h2>Passwort vergessen</h2>
      <form @submit.prevent="submitForgotPassword">
        <label for="email">Email-Adresse:</label>
        <input type="email" id="email" v-model="email" required>
        
        <button type="submit">Link zum Zurücksetzen senden</button>
      </form>
      <p>
        <router-link to="/login">Login</router-link>
      </p>
      <p>
        <router-link to="/register">Registrieren</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: 'ForgotPassword',
    data() {
      return {
        email: '',
        dialogTitle: '',
        dialogMessage: '',
        dialogVisible: false
      };
    },
    methods: {
      async submitForgotPassword() {
        try {
          const response = await axios.post('/auth/forgot-password', {
            email: this.email
          });
          this.showDialog('E-Mail gesendet', response.data?.message || 'Ein Link zum Zurücksetzen wurde an Ihre E-Mail-Adresse gesendet.');
          this.email = '';
        } 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>
  .forgot-password {
    max-width: 400px;
    margin: auto;
  }
  form {
    display: flex;
    flex-direction: column;
  }
  label {
    margin-top: 10px;
  }
  button {
    margin-top: 20px;
  }
  .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>
