<template>
    <div class="user-administration">
      <h1>Benutzerverwaltung</h1>
      
      <h2>{{ formTitle }}</h2>
      <form @submit.prevent="saveUser">
        <label for="name">Name:</label>
        <input id="name" v-model="currentUser.name" required />
        
        <label for="email">Email:</label>
        <input id="email" v-model="currentUser.email" type="email" required />
        
        <label for="password">Passwort:</label>
        <input id="password" v-model="currentUser.password" type="password" :required="isCreating" />
        
        <div>
            <label for="active">Aktiv:</label>
            <input id="active" v-model="currentUser.active" type="checkbox" />
        </div>
        
        <button type="submit">{{ isCreating ? 'Erstellen' : 'Aktualisieren' }}</button>
      </form>
      
      <button v-if="!isCreating" @click="resetForm">Zurück zu Benutzer erstellen</button>
      
      <div v-if="users.length">
        <h2>Vorhandene Benutzer</h2>
        <ul>
          <li v-for="user in users" :key="user.id" @click="editUser(user)">
            {{ user.name }} ({{ user.email }})
          </li>
        </ul>
      </div>
    </div>
  </template>
  
  <script>
  import axios from '@/axios';
  
  export default {
    name: 'UserAdministration',
    data() {
      return {
        users: [],
        currentUser: {
          name: '',
          email: '',
          password: '',
          active: false
        },
        isCreating: true
      };
    },
    computed: {
      formTitle() {
        return this.isCreating ? 'Benutzer erstellen' : 'Benutzer bearbeiten';
      }
    },
    methods: {
      async fetchUsers() {
        try {
          const response = await axios.get('/users');
          this.users = response.data;
        } catch (error) {
          console.error('Fehler beim Abrufen der Benutzer:', error);
        }
      },
      async saveUser() {
        if (this.isCreating) {
          await this.createUser();
        } else {
          await this.updateUser();
        }
        this.resetForm();
        this.fetchUsers();
      },
      async createUser() {
        try {
          await axios.post('/users', this.currentUser);
        } catch (error) {
          console.error('Fehler beim Erstellen des Benutzers:', error);
        }
      },
      async updateUser() {
        try {
          await axios.put(`/users/${this.currentUser.id}`, this.currentUser);
        } catch (error) {
          console.error('Fehler beim Aktualisieren des Benutzers:', error);
        }
      },
      editUser(user) {
        this.currentUser = { ...user, password: '' };
        this.isCreating = false;
      },
      resetForm() {
        this.currentUser = {
          name: '',
          email: '',
          password: '',
          active: false
        };
        this.isCreating = true;
      }
    },
    mounted() {
      this.fetchUsers();
    }
  };
  </script>
  
  <style scoped>
  .user-administration {
    padding: 20px;
  }
  
  .user-administration h1,
  .user-administration h2 {
    margin-bottom: 20px;
  }
  
  .user-administration form {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
  }
  
  .user-administration label {
    margin-top: 10px;
  }
  
  .user-administration input[type="text"],
  .user-administration input[type="email"],
  .user-administration input[type="password"] {
    padding: 5px;
    font-size: 16px;
  }
  
  .user-administration ul {
    list-style-type: none;
    padding: 0;
  }
  
  .user-administration li {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
  }
  
  .user-administration li:hover {
    background-color: #f0f0f0;
  }
  </style>
  