document.addEventListener("DOMContentLoaded", function() {
    const form = document.getElementById('guestbook-form');
    const entriesContainer = document.getElementById('guestbook-entries');
    const captchaCanvas = document.getElementById('captcha-canvas');
    const refreshCaptchaButton = document.getElementById('refresh-captcha');
    const captchaInput = document.getElementById('captcha-input');
    const imageInput = document.getElementById('image');
    const GUESTBOOK_KEY = 'guestbookEntries';

    let currentCaptcha = '';

    // Function to generate a random CAPTCHA string
    function generateCaptcha() {
        const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
        let captcha = '';
        for (let i = 0; i < 6; i++) {
            captcha += chars.charAt(Math.floor(Math.random() * chars.length));
        }
        return captcha;
    }

    // Function to draw CAPTCHA on canvas
    function drawCaptcha(captcha) {
        const ctx = captchaCanvas.getContext('2d');
        ctx.clearRect(0, 0, captchaCanvas.width, captchaCanvas.height);
        ctx.font = '20px Arial';
        ctx.fillStyle = '#000';
        ctx.fillText(captcha, 10, 30);
    }

    // Function to refresh the CAPTCHA image
    function refreshCaptcha() {
        currentCaptcha = generateCaptcha();
        drawCaptcha(currentCaptcha);
    }

    // Load and display existing entries
    function loadEntries() {
        const entries = JSON.parse(localStorage.getItem(GUESTBOOK_KEY)) || [];
        entriesContainer.innerHTML = '';

        entries.reverse().forEach((entry) => {
            const entryElement = document.createElement('div');
            entryElement.className = 'entry';

            const nameElement = document.createElement('h4');
            if (entry.name === 'Anonymous') {
                nameElement.className = 'anonymous';
            }
            nameElement.textContent = entry.name;
            entryElement.appendChild(nameElement);

            const messageElement = document.createElement('p');
            messageElement.innerHTML = formatMessage(entry.message);
            entryElement.appendChild(messageElement);

            if (entry.image) {
                const imageElement = document.createElement('img');
                imageElement.src = entry.image;
                entryElement.appendChild(imageElement);
            }

            entriesContainer.appendChild(entryElement);
        });
    }

    // Format message: add green text for lines starting with '>'
    function formatMessage(message) {
        return message.split('\n').map(line => {
            if (line.startsWith('>')) {
                return `<span class="anonymous">${line}</span>`;
            }
            return line;
        }).join('<br>');
    }

    // Handle form submission
    form.addEventListener('submit', function(event) {
        event.preventDefault();

        // Set default name to "Anonymous" if the name field is empty
        let name = document.getElementById('name').value.trim();
        if (!name) {
            name = 'Anonymous';
        }

        const message = document.getElementById('message').value.trim();
        const captchaValue = captchaInput.value.trim();
        const imageFile = imageInput.files[0];

        if (name && message && captchaValue === currentCaptcha) {
            const entries = JSON.parse(localStorage.getItem(GUESTBOOK_KEY)) || [];

            if (imageFile) {
                const reader = new FileReader();
                reader.onload = function() {
                    const image = reader.result;
                    entries.unshift({ name, message, image });
                    localStorage.setItem(GUESTBOOK_KEY, JSON.stringify(entries));

                    form.reset(); // Clear the form fields
                    document.getElementById('name').value = 'Anonymous'; // Reset the name field to "Anonymous"
                    loadEntries(); // Refresh the entries display
                    refreshCaptcha(); // Generate a new CAPTCHA after successful submission
                };
                reader.readAsDataURL(imageFile);
            } else {
                entries.unshift({ name, message, image: null });
                localStorage.setItem(GUESTBOOK_KEY, JSON.stringify(entries));

                form.reset(); // Clear the form fields
                document.getElementById('name').value = 'Anonymous'; // Reset the name field to "Anonymous"
                loadEntries(); // Refresh the entries display
                refreshCaptcha(); // Generate a new CAPTCHA after successful submission
            }
        } else {
            alert('CAPTCHA is incorrect. Please try again.');
        }
    });

    // Refresh CAPTCHA on page load and on refresh button click
    refreshCaptcha();
    refreshCaptchaButton.addEventListener('click', refreshCaptcha);

    // Initial load
    loadEntries();
});