let flockData = [];

async function loadFlock() {
    const msg = document.getElementById('msg');
    try {
        const [current, history] = await Promise.all([
            API.get('/api/flock/current'),
            API.get('/api/flock'),
        ]);

        document.getElementById('current-count').textContent = current?.chicken_count ?? '—';
        document.getElementById('current-date').textContent  = current ? fmtDate(current.date) : 'No data';

        flockData = history;
        renderTable();
    } catch (err) {
        showMessage(msg, `Failed to load flock data: ${err.message}`, 'error');
    }
}

function renderTable() {
    const tbody = document.getElementById('flock-body');

    if (flockData.length === 0) {
        tbody.innerHTML = '<tr class="empty-row"><td colspan="4">No flock history yet.</td></tr>';
        return;
    }

    tbody.innerHTML = flockData.map(e => `
        <tr data-id="${e.id}">
            <td>${fmtDate(e.date)}</td>
            <td>${e.chicken_count}</td>
            <td class="notes">${e.notes || ''}</td>
            <td class="actions">
                <button class="btn btn-ghost btn-sm" onclick="startEdit(${e.id})">Edit</button>
                <button class="btn btn-danger btn-sm" onclick="deleteEntry(${e.id})">Delete</button>
            </td>
        </tr>
    `).join('');
}

function startEdit(id) {
    const entry = flockData.find(e => e.id === id);
    const row   = document.querySelector(`tr[data-id="${id}"]`);

    row.innerHTML = `
        <td><input type="date" value="${entry.date}"></td>
        <td><input type="number" min="0" value="${entry.chicken_count}" style="width:80px;"></td>
        <td><input type="text" value="${entry.notes || ''}" placeholder="Notes"></td>
        <td class="actions">
            <button class="btn btn-primary btn-sm" onclick="saveEdit(${id})">Save</button>
            <button class="btn btn-ghost btn-sm"   onclick="renderTable()">Cancel</button>
        </td>
    `;
}

async function saveEdit(id) {
    const msg = document.getElementById('msg');
    const row = document.querySelector(`tr[data-id="${id}"]`);
    const [dateInput, countInput, notesInput] = row.querySelectorAll('input');

    try {
        const updated = await API.put(`/api/flock/${id}`, {
            date:          dateInput.value,
            chicken_count: parseInt(countInput.value, 10),
            notes:         notesInput.value.trim() || null,
        });
        const idx = flockData.findIndex(e => e.id === id);
        flockData[idx] = updated;
        renderTable();
        loadFlock();   // refresh current-flock callout
        showMessage(msg, 'Entry updated.');
    } catch (err) {
        showMessage(msg, `Error: ${err.message}`, 'error');
    }
}

async function deleteEntry(id) {
    if (!confirm('Delete this flock entry?')) return;
    const msg = document.getElementById('msg');
    try {
        await API.del(`/api/flock/${id}`);
        flockData = flockData.filter(e => e.id !== id);
        renderTable();
        loadFlock();
        showMessage(msg, 'Entry deleted.');
    } catch (err) {
        showMessage(msg, `Error: ${err.message}`, 'error');
    }
}

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

    setToday(document.getElementById('date'));

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

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

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

    loadFlock();
});