document.addEventListener('DOMContentLoaded', () => {
    const dateElement = document.getElementById('current-date');
    const eventsList = document.getElementById('events-list');
    const timeCommentElement = document.getElementById('time-comment');
    const today = new Date();

    // Date display
    const options = { year: 'numeric', month: 'long', day: 'numeric' };
    dateElement.textContent = today.toLocaleDateString('zh-TW', options);

    // Query to API
    fetch('/api/query')
        .then(response => response.json())
        .then(events => {
            eventsList.innerHTML = '';

            if (events == null || events.length == 0 || events.length == undefined) {
                eventsList.innerHTML = '<p>今天沒有已記載的重大事件。</p>';
                timeCommentElement.classList.add('hide');
                return;
            }

            events.forEach(event => {
                const card = document.createElement('div');
                card.className = 'event-card';

                const title = document.createElement('div');
                title.className = 'event-title';
                title.textContent = event.title;

                const year = document.createElement('span');
                year.className = 'event-year';
                year.textContent = `(${event.year} 年)`;

                const description = document.createElement('p');
                description.textContent = event.description;

                title.appendChild(year);
                card.appendChild(title);
                card.appendChild(description);
                eventsList.appendChild(card);
                timeCommentElement.classList.remove('hide');
            });
        })
        .catch(error => {
            console.error('Fetch error:', error);
            eventsList.innerHTML = '<p style="color: red;">載入歷史事件失敗。請檢查 API。</p>';
        });
});