// API base URL
const API_BASE = '/api/v1/client';

const vaCreditsTableBody = document.getElementById("vaCreditTableBody");
const vaCreditsEmptyState = document.getElementById("vaEmptyCreditState");

function formatDateTime(dateTimeStr) {
    const date = new Date(dateTimeStr);
    return date.toLocaleDateString();
    // return date.toLocaleDateString() + ' ' + date.toLocaleTimeString();
}

function createCreditRow(credit) {
    return `
        <tr data-credit-id="${credit.id}">
            <td><span class="status ${credit.status.toLowerCase()}">${credit.status}</span></td>
            <td>${formatDateTime(credit.date)}</td>
            <td>${credit.comment}</td>
            <td>$${credit.creditAmount}</td>
        </tr>
    `;
}


async function loadCreditsData() {
    const res = await fetchWithAuth(`${API_BASE}/credits`);
    if (!res) return;

    const result = await res.json();
    if (!result.success) return;
    console.log("Credits Result:", result);

    const { data } = result;

    console.log("Credits Data:", data);

    const allCredits = data || [];

    if (allCredits.length === 0) {
        vaCreditsTableBody.innerHTML = "";
        vaCreditsEmptyState.style.display = "block";
        return;
    }

    vaCreditsEmptyState.style.display = "none";

    vaCreditsTableBody.innerHTML = allCredits
        .map((credit) => createCreditRow(credit))
        .join("");

    let totalCredits = 0;
    let availableCredits = 0;

    allCredits.forEach(credit => {
        totalCredits += parseFloat(credit.creditAmount);
        if (credit.status.toLowerCase() === 'pending') {
            availableCredits += parseFloat(credit.creditAmount);
        }
    });


    document.getElementById("vaTotalCredits").textContent = `$${totalCredits}`;
    document.getElementById("vaAvailableCredits").textContent = `$${availableCredits}`;
}

// Initial load
loadCreditsData();