let data = {};

function fetchData() {
    fetch('/api/data').then(r => r.json()).then(d => {
        data = d;
        renderTable();
    });
}

function saveData() {
    fetch('/api/data', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
    });
}

function renderTable() {
    const container = document.getElementById('attendance-table');
    container.innerHTML = '';
    const table = document.createElement('table');
    // Header row
    const thead = document.createElement('thead');
    const headRow = document.createElement('tr');
    headRow.appendChild(document.createElement('th')).innerText = 'Date';
    data.players.forEach((name, i) => {
        const th = document.createElement('th');
        th.innerText = name;
        headRow.appendChild(th);
    });
    // Guest column
    const guestTh = document.createElement('th');
    guestTh.innerText = data.guest || 'Guest';
    headRow.appendChild(guestTh);
    // Guest Name column (per date)
    const guestNameTh = document.createElement('th');
    guestNameTh.innerText = 'Guest Name';
    headRow.appendChild(guestNameTh);
    thead.appendChild(headRow);
    table.appendChild(thead);
    // Body rows
    const tbody = document.createElement('tbody');
    if (!data.guestNames) data.guestNames = {};
    data.dates.forEach((date, rowIdx) => {
        const tr = document.createElement('tr');
        // Date cell
        const dateTd = document.createElement('td');
        dateTd.innerText = date;
        tr.appendChild(dateTd);
        // Player attendance
        [...data.players, data.guest].forEach((player, colIdx) => {
            const td = document.createElement('td');
            td.className = 'clickable';
            const key = `${date}|${colIdx}`;
            if (data.attendance[key]) {
                td.innerText = 'Yes';
                td.classList.add('yes');
            } else {
                td.innerText = '';
            }
            td.onclick = () => {
                if (data.attendance[key]) {
                    delete data.attendance[key];
                } else {
                    data.attendance[key] = true;
                }
                saveData();
                renderTable();
            };
            tr.appendChild(td);
        });
        // Guest Name column (input per date)
        const guestNameTd = document.createElement('td');
        const guestNameInput = document.createElement('input');
        guestNameInput.type = 'text';
        guestNameInput.value = data.guestNames[date] || '';
        guestNameInput.placeholder = 'Enter guest name';
        guestNameInput.onchange = e => {
            data.guestNames[date] = e.target.value;
            saveData();
        };
        guestNameTd.appendChild(guestNameInput);
        tr.appendChild(guestNameTd);
        tbody.appendChild(tr);
    });
    table.appendChild(tbody);
    container.appendChild(table);
}

document.getElementById('add-date').onclick = function() {
    const date = prompt('Enter date (DD/MM/YY):');
    if (date && !data.dates.includes(date)) {
        data.dates.push(date);
        saveData();
        renderTable();
    }
};

window.onload = fetchData;