document.addEventListener('DOMContentLoaded', () => {
    const scopeSelect = document.getElementById('scopeSelect');
    const parentSelect = document.getElementById('parentSelect');
    const licenceInput = document.getElementById('licenceInput');
    const dateFromInput = document.getElementById('dateFromInput');
    const dateToInput = document.getElementById('dateToInput');
    const directionInput = document.getElementById('directionInput');
    const documentTypeInput = document.getElementById('documentTypeInput');
    const endPointInput = document.getElementById('endPointInput');
    const searchInput = document.getElementById('searchInput');
    const pageSizeSelect = document.getElementById('pageSizeSelect');
    const searchBtn = document.getElementById('searchBtn');
    const clearBtn = document.getElementById('clearBtn');
    const prevPageBtn = document.getElementById('prevPageBtn');
    const nextPageBtn = document.getElementById('nextPageBtn');
    const tableBody = document.getElementById('usageTableBody');
    const paginationSummary = document.getElementById('paginationSummary');
    const usageError = document.getElementById('usageError');
    const usageInfo = document.getElementById('usageInfo');

    let currentPage = 1;
    let totalRows = 0;

    const formatDate = (value) => {
        if (!value) return '';
        const dt = new Date(value);
        if (Number.isNaN(dt.getTime())) return value;
        return dt.toISOString().slice(0, 19).replace('T', ' ');
    };

    function setError(message) {
        usageError.textContent = message;
        usageError.classList.remove('d-none');
    }

    function clearError() {
        usageError.textContent = '';
        usageError.classList.add('d-none');
    }

    function setInfo(message) {
        usageInfo.textContent = message;
        usageInfo.classList.remove('d-none');
    }

    function clearInfo() {
        usageInfo.textContent = '';
        usageInfo.classList.add('d-none');
    }

    function updateScopeInputs() {
        const scope = scopeSelect.value;
        parentSelect.disabled = scope !== 'parent';
        licenceInput.disabled = scope !== 'licence';
    }

    function buildQueryParams(pageOverride = null) {
        const params = new URLSearchParams();
        params.set('scope', scopeSelect.value);
        params.set('page', String(pageOverride || currentPage));
        params.set('page_size', pageSizeSelect.value);
        if (parentSelect.value) params.set('parent_name', parentSelect.value);
        if (licenceInput.value.trim()) params.set('licence_number', licenceInput.value.trim());
        if (dateFromInput.value) params.set('date_from', dateFromInput.value);
        if (dateToInput.value) params.set('date_to', dateToInput.value);
        if (directionInput.value.trim()) params.set('direction', directionInput.value.trim());
        if (documentTypeInput.value.trim()) params.set('document_type', documentTypeInput.value.trim());
        if (endPointInput.value.trim()) params.set('end_point', endPointInput.value.trim());
        if (searchInput.value.trim()) params.set('search', searchInput.value.trim());
        return params;
    }

    function renderRows(rows) {
        tableBody.innerHTML = '';
        if (!rows || rows.length === 0) {
            const row = document.createElement('tr');
            row.innerHTML = '<td colspan="13" class="text-center text-muted">No records found for this filter set.</td>';
            tableBody.appendChild(row);
            return;
        }
        rows.forEach((item) => {
            const tr = document.createElement('tr');
            tr.innerHTML = `
                <td>${formatDate(item.timestamp_utc)}</td>
                <td>${item.parent_name || ''}</td>
                <td>${item.licence_no || ''}</td>
                <td>${item.company_name || ''}</td>
                <td>${item.end_point || ''}</td>
                <td>${item.direction || ''}</td>
                <td>${item.document_type || ''}</td>
                <td>${item.credit_used ?? 0}</td>
                <td>${item.guid || ''}</td>
                <td>${item.erp_document_number || ''}</td>
                <td>${item.identifier_id || ''}</td>
                <td>${item.magma_runset || ''}</td>
                <td>${(item.local_status || '') + ' / ' + (item.central_sync_status || '')}</td>
            `;
            tableBody.appendChild(tr);
        });
    }

    function renderPagination(page, pageSize, total) {
        const pageCount = Math.max(1, Math.ceil(total / pageSize));
        paginationSummary.textContent = `Page ${page} of ${pageCount} (${total} total rows)`;
        prevPageBtn.disabled = page <= 1;
        nextPageBtn.disabled = page >= pageCount;
    }

    async function fetchRows(pageOverride = null) {
        clearError();
        clearInfo();
        const params = buildQueryParams(pageOverride);
        const response = await fetch(`/api/api_submissions_usage_rows?${params.toString()}`);
        const payload = await response.json();
        if (!response.ok) {
            throw new Error(payload.error || `Request failed (${response.status})`);
        }
        if (payload.available === false) {
            renderRows([]);
            renderPagination(1, Number(pageSizeSelect.value), 0);
            setInfo(payload.message || 'API submissions data is not available yet.');
            return;
        }
        currentPage = payload.page || 1;
        totalRows = payload.total_rows || 0;
        renderRows(payload.rows || []);
        renderPagination(currentPage, payload.page_size || Number(pageSizeSelect.value), totalRows);
    }

    searchBtn.addEventListener('click', async () => {
        currentPage = 1;
        try {
            await fetchRows(1);
        } catch (err) {
            setError(err.message);
        }
    });

    clearBtn.addEventListener('click', async () => {
        scopeSelect.value = 'all';
        parentSelect.value = '';
        licenceInput.value = '';
        dateFromInput.value = '';
        dateToInput.value = '';
        directionInput.value = '';
        documentTypeInput.value = '';
        endPointInput.value = '';
        searchInput.value = '';
        pageSizeSelect.value = '50';
        updateScopeInputs();
        currentPage = 1;
        try {
            await fetchRows(1);
        } catch (err) {
            setError(err.message);
        }
    });

    prevPageBtn.addEventListener('click', async () => {
        if (currentPage <= 1) return;
        try {
            await fetchRows(currentPage - 1);
        } catch (err) {
            setError(err.message);
        }
    });

    nextPageBtn.addEventListener('click', async () => {
        const pageSize = Number(pageSizeSelect.value);
        const pageCount = Math.max(1, Math.ceil(totalRows / pageSize));
        if (currentPage >= pageCount) return;
        try {
            await fetchRows(currentPage + 1);
        } catch (err) {
            setError(err.message);
        }
    });

    scopeSelect.addEventListener('change', updateScopeInputs);
    updateScopeInputs();

    const urlParams = new URLSearchParams(window.location.search);
    if (urlParams.get('scope')) scopeSelect.value = urlParams.get('scope');
    if (urlParams.get('parent_name')) parentSelect.value = decodeURIComponent(urlParams.get('parent_name'));
    if (urlParams.get('licence_number')) licenceInput.value = urlParams.get('licence_number');
    if (urlParams.get('end_point')) endPointInput.value = urlParams.get('end_point');
    updateScopeInputs();
    searchBtn.click();
});