<template>
    <h2>{{ $t('socialnetwork.guestbook.title') }}</h2>
    <div>
        <div v-if="guestbookEntries.length === 0">{{ $t('socialnetwork.profile.guestbook.noEntries') }}
        </div>
        <div v-else class="guestbook-entries">
            <div v-for="entry in guestbookEntries" :key="entry.id" class="guestbook-entry">
                <img v-if="entry.image" :src="entry.image.url" alt="Entry Image"
                    style="max-width: 400px; max-height: 400px;" />
                <p v-html="sanitizedContent(entry)"></p>
                <div class="entry-info">
                    <span class="entry-timestamp">{{ new Date(entry.createdAt).toLocaleString() }}</span>
                    <span class="entry-user">
                        <span @click="openProfile(entry.senderUsername)">{{ entry.sender }}</span>
                    </span>
                </div>
            </div>
        </div>
        <div class="pagination">
            <button @click="loadGuestbookEntries(currentPage - 1)" v-if="currentPage !== 1">{{
                $t('socialnetwork.guestbook.prevPage') }}</button>
            <span>{{ $t('socialnetwork.guestbook.page') }} {{ currentPage }} / {{ totalPages }}</span>
            <button @click="loadGuestbookEntries(currentPage + 1)" v-if="currentPage < totalPages">{{
                $t('socialnetwork.guestbook.nextPage')
            }}</button>
        </div>
    </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex';
import apiClient from '@/utils/axios.js';
import DOMPurify from 'dompurify';

export default {
    name: 'GuestbookView',
    data() {
        return {
            guestbookEntries: [],
            currentPage: 1,
            totalPages: 1,
        };
    },
    computed: {
        ...mapGetters(['user']),
    },
    methods: {
        ...mapActions('socialnetwork', ['fetchUserProfile']),
        openProfile(username) {
            this.$router.push({ name: 'profile', params: { username } });
        },
        async loadGuestbookEntries(page) {
            try {
                const response = await apiClient.get(`/api/socialnetwork/guestbook/entries/${this.user.username}/${page}`);
                this.guestbookEntries = response.data.entries;
                this.currentPage = page;
                this.totalPages = response.data.totalPages;
                this.guestbookEntries.forEach((entry) => {
                    if (entry.withImage) {
                        this.fetchGuestbookImage(this.user.username, entry);
                    }
                });
            } catch (error) {
                console.error('Fehler beim Laden der Gästebucheinträge:', error);
            }
        },
        async fetchGuestbookImage(guestbookOwnerName, entry) {
            try {
                const response = await apiClient.get(`/api/socialnetwork/guestbook/image/${this.user.username}/${entry.id}`, {
                    responseType: 'blob',
                });
                entry.image = { url: URL.createObjectURL(response.data) };
            } catch (error) {
                console.error('Error fetching image:', error);
            }
        },
        sanitizedContent(entry) {
            return DOMPurify.sanitize(entry.contentHtml);
        },
    },
    mounted() {
        this.loadGuestbookEntries(1);
    },
}
</script>

<style lang="css" scoped>
.pagination {
    margin-top: 1em;
    background-color: #7BBE55;
    color: #fff;
    padding: 0.5em 0;
}
</style>