/**
 * Reports Page Logic - Aadhaar Pro
 */

document.addEventListener('DOMContentLoaded', () => {
    if (typeof flatpickr !== 'undefined') {
        flatpickr(".date-picker", {
            dateFormat: "Y-m-d",
            allowInput: true
        });
    }
    loadReports();
});

async function loadReports(filters = {}) {
    const listEl = document.getElementById('reports-list');
    if (!listEl) return;

    try {
        let url = '/api/wallet/ledger';
        if (filters.from || filters.to) {
            const params = new URLSearchParams(filters);
            url += `?${params.toString()}`;
        }

        const res = await fetch(url);
        const data = await res.json();

        if (data && data.length > 0) {
            const items = data.map(item => {
                let displayId = item.id ? item.id.substring(0, 8) + '...' : 'N/A';
                if (item.description && item.description.includes('Aadhaar Advance: ')) {
                    const parts = item.description.split('Aadhaar Advance: ');
                    if (parts.length > 1) displayId = parts[1];
                }

                const statusClass = item.type === 'credit' ? 'status-approved' : 'status-rejected';
                const statusIcon = item.type === 'credit' ? 'fa-arrow-down' : 'fa-arrow-up';
                const statusText = item.type === 'credit' ? 'CREDIT' : 'DEBIT';
                const amountPrefix = item.type === 'credit' ? '+' : '-';
                const amountClass = item.type === 'credit' ? 'amount-plus' : 'amount-minus';

                return `
                <div class="request-item">
                    <div class="request-info">
                        <div class="request-amount ${amountClass}">${amountPrefix} ₹${item.amount.toFixed(2)}</div>
                        <div class="request-details">
                            <span><i class="fa-solid fa-file-invoice"></i> ${item.description}</span>
                            <span><i class="fa-solid fa-calendar"></i> ${item.date}</span>
                        </div>
                        <div class="request-details" style="margin-top:4px">
                            <span><i class="fa-solid fa-wallet"></i> Balance: ₹${item.balance_after.toFixed(2)}</span>
                            <span><i class="fa-solid fa-id-badge"></i> ${displayId}</span>
                        </div>
                    </div>
                    <div class="request-status ${statusClass}">
                        <i class="fa-solid ${statusIcon}"></i> ${statusText}
                    </div>
                </div>`;
            }).join('');

            listEl.innerHTML = items;
        } else {
            listEl.innerHTML = `
                <div class="empty-state">
                    <i class="fa-solid fa-folder-open"></i>
                    <h3>No reports found</h3>
                    <p>No transactions for the selected period</p>
                </div>`;
        }
    } catch (err) {
        console.error('Error loading reports:', err);
        listEl.innerHTML = `
            <div class="error-state">
                <i class="fa-solid fa-triangle-exclamation"></i>
                <h3>Failed to load</h3>
                <p>Could not fetch report data</p>
            </div>`;
    }
}

function applyFilter() {
    const from = document.getElementById('from-date').value;
    const to = document.getElementById('to-date').value;
    loadReports({ from, to });
}

window.applyFilter = applyFilter;