async function loadRecent() {
    const tbody = document.getElementById('recent-body');
    try {
        const eggs = await API.get('/api/eggs');
        const recent = eggs.slice(0, 7);

        if (recent.length === 0) {
            tbody.innerHTML = '<tr class="empty-row"><td colspan="3">No entries yet.</td></tr>';
            return;
        }

        tbody.innerHTML = recent.map(e => `
            <tr>
                <td>${fmtDate(e.date)}</td>
                <td>${e.eggs}</td>
                <td class="notes">${e.notes || ''}</td>
            </tr>
        `).join('');
    } catch (err) {
        tbody.innerHTML = '<tr class="empty-row"><td colspan="3">Could not load recent entries.</td></tr>';
    }
}

document.addEventListener('DOMContentLoaded', () => {
    const form = document.getElementById('log-form');
    const msg  = document.getElementById('msg');

    // Default date to today
    setToday(document.getElementById('date'));

    form.addEventListener('submit', async (e) => {
        e.preventDefault();

        const data = {
            date:  document.getElementById('date').value,
            eggs:  parseInt(document.getElementById('eggs').value, 10),
            notes: document.getElementById('notes').value.trim() || null,
        };

        try {
            await API.post('/api/eggs', data);
            showMessage(msg, 'Entry saved!');
            form.reset();
            setToday(document.getElementById('date'));
            loadRecent();
        } catch (err) {
            showMessage(msg, `Error: ${err.message}`, 'error');
        }
    });

    loadRecent();
});