<template>
    <div>
        <h2>Ausstehende Benutzeranfragen</h2>
        <div v-if="pendingUsers.length > 0">
            <table>
                <thead>
                    <tr>
                        <th>Vorname</th>
                        <th>Nachname</th>
                        <th>Email</th>
                        <th>Aktionen</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="user in pendingUsers" :key="user.id">
                        <td>{{ user.firstName }}</td>
                        <td>{{ user.lastName }}</td>
                        <td>{{ user.email }}</td>
                        <td>
                            <button @click="approveUser(user.id)">Genehmigen</button>
                            <button @click="rejectUser(user.id)">Ablehnen</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div v-else>
            <p>Keine ausstehenden Benutzeranfragen.</p>
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
import apiClient from '../apiClient.js';

export default {
    name: 'PendingApprovalsView',
    data() {
        return {
            pendingUsers: [],
        };
    },
    computed: {
        ...mapGetters(['currentClub']),
    },
    async created() {
        await this.loadPendingApprovals();
    },
    methods: {
        async loadPendingApprovals() {
            try {
                const response = await apiClient.get(`/clubs/pending/${this.currentClub}`);
                this.pendingUsers = response.data.map(entry => entry.user);
            } catch (error) {
                console.error('Fehler beim Laden der ausstehenden Anfragen:', error);
            }
        },
        async approveUser(userId) {
            try {
                await apiClient.post('/clubs/approve', {
                    clubid: this.currentClub,
                    userid: userId,
                });
                this.pendingUsers = this.pendingUsers.filter(user => user.id !== userId);
            } catch (error) {
                console.error('Fehler beim Genehmigen des Benutzers:', error);
            }
        },
        async rejectUser(userId) {
            try {
                await apiClient.post('/clubs/reject', {
                    clubid: this.currentClub,
                    userid: userId,
                });
                this.pendingUsers = this.pendingUsers.filter(user => user.id !== userId);
            } catch (error) {
                console.error('Fehler beim Ablehnen des Benutzers:', error);
            }
        },
    },
};
</script>

<style scoped>
table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

button {
    margin-right: 5px;
    padding: 5px 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}
</style>
