const pb = new PocketBase('https://db.out.jafre.li');
const messageContainer = document.getElementById('messages');
const messageForm = document.getElementById('messageForm');

// Funktion, um die letzten 10 Nachrichten zu laden
async function loadMessages() {
    const result = await pb.collection('message_board').getList(1, 8, {
        sort: '-created', // Sortiert nach Erstellungsdatum absteigend
    });

    messageContainer.innerHTML = ''; // Löscht vorherige Inhalte

    result.items.forEach((item) => {
        const messageElement = document.createElement('div');
        messageElement.className = 'message';
        messageElement.innerHTML = `
            <strong>${item.name}</strong>
            <p>${item.message}</p>
            <small>${new Date(item.created).toLocaleString()}</small>
        `;
        messageContainer.appendChild(messageElement);
    });
}

// Event-Listener für das Formular
messageForm.addEventListener('submit', async (e) => {
    e.preventDefault();

    const name = document.getElementById('name').value;
    const message = document.getElementById('message').value;

    try {
        await pb.collection('message_board').create({ name, message });
        loadMessages(); // Aktualisiert die Nachrichtenanzeige
        messageForm.reset(); // Löscht das Formular
    } catch (error) {
        console.error('Error creating message:', error);
    }
});

// Nachrichten beim Laden der Seite anzeigen
loadMessages();

const messageInput = document.getElementById('message');
const charCount = document.getElementById('charCount');

// Event-Listener für Eingaben im Textfeld
messageInput.addEventListener('input', () => {
    const currentLength = messageInput.value.length;
    charCount.textContent = `${currentLength} / 100`;
});