document.addEventListener('DOMContentLoaded', function () {
    const shortenForm = document.getElementById('shortenForm');
    if (shortenForm) {
        shortenForm.addEventListener('submit', function (e) {
            e.preventDefault();
            const url = document.getElementById('url').value;
            fetch('shorten.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: 'url=' + encodeURIComponent(url),
            })
            .then(response => response.json())
            .then(data => {
                const resultDiv = document.getElementById('result');
                const shortUrlLink = document.getElementById('shortUrlLink');
                if (data.short_url) {
                    shortUrlLink.href = data.short_url;
                    shortUrlLink.textContent = data.short_url;
                    resultDiv.style.display = 'block';
                } else {
                    alert(data.error || 'An error occurred.');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('An error occurred.');
            });
        });
    }
});