document.addEventListener('DOMContentLoaded', () => {
    // --- DOM Element References ---
    const parentFilterDropdown = document.getElementById('parentFilterDropdown');
    const parentSearchInput = document.getElementById('parentSearchInput');
    const clearFiltersBtn = document.getElementById('clearFiltersBtn');
    const dataContainer = document.getElementById('dataContainer');
    const loadingIndicator = document.getElementById('loadingIndicator');
    const errorIndicator = document.getElementById('errorIndicator');
    const initialMessage = document.getElementById('initialMessage');

    // Store original options for the search filter
    const originalOptions = Array.from(parentFilterDropdown.options);
    let debounceTimeout = null;

    // --- Core Data Fetching Function ---
    async function fetchCustomerData(parentName) {
        // Show initial message if no parent is selected
        if (!parentName) {
            dataContainer.innerHTML = ''; // Clear previous results
            initialMessage.classList.remove('d-none');
            errorIndicator.classList.add('d-none');
            loadingIndicator.classList.add('d-none');
            dataContainer.appendChild(initialMessage);
            return;
        }

        // --- Show Loading State ---
        initialMessage.classList.add('d-none');
        errorIndicator.classList.add('d-none');
        loadingIndicator.classList.remove('d-none');
        dataContainer.innerHTML = ''; // Clear previous results
        dataContainer.appendChild(loadingIndicator);

        try {
            const apiUrl = `/api/customer_data_by_parent?parent_name=${encodeURIComponent(parentName)}`;
            const response = await fetch(apiUrl);

            if (!response.ok) {
                const errorData = await response.json();
                throw new Error(errorData.error || `Error: ${response.status}`);
            }

            const data = await response.json();
            renderData(data);
            await fetchAndRenderParentApiUsage(parentName);

        } catch (error) {
            console.error("Fetch error:", error);
            showError(error.message);
        } finally {
            loadingIndicator.classList.add('d-none');
        }
    }

    async function fetchAndRenderParentApiUsage(parentName, year = '') {
        try {
            const params = new URLSearchParams();
            params.set('parent_name', parentName);
            if (year) {
                params.set('year', year);
            }
            const response = await fetch(`/api/customer_api_usage_by_parent?${params.toString()}`);
            if (!response.ok) {
                return;
            }
            const data = await response.json();
            renderParentApiUsage(data);
        } catch (error) {
            console.error('Parent API usage summary failed:', error);
        }
    }

    function renderParentApiUsage(data) {
        if (!dataContainer || !data || data.available === false || !Array.isArray(data.provider_summaries) || data.provider_summaries.length === 0) {
            return;
        }
        const existing = document.getElementById('parent-api-usage-summary');
        if (existing) existing.remove();
        const selectedYear = Number(data.selected_year || new Date().getUTCFullYear());
        const yearLabels = data.available_year_labels || {};
        const yearOptions = (data.available_years || [])
            .map(y => {
                const label = yearLabels[String(y)] || y;
                return `<option value="${y}" ${Number(y) === selectedYear ? 'selected' : ''}>${label}</option>`;
            })
            .join('');
        const rowsHtml = data.provider_summaries.map((row) => {
            const pct = Number(row.usage_percent || 0);
            let badgeClass = 'bg-success';
            if (pct >= 90) {
                badgeClass = 'bg-danger';
            } else if (pct >= 80) {
                badgeClass = 'bg-warning text-dark';
            }
            const verboseUrl = `/api_submissions_usage?scope=parent&parent_name=${encodeURIComponent(data.parent_name || '')}&end_point=${encodeURIComponent(row.end_point || '')}`;
            return `
                <tr>
                    <td>${row.end_point || 'unknown'}</td>
                    <td class="text-end">${Number(row.ytd_credits_used || 0)}</td>
                    <td class="text-end">${Number(row.current_month_credits_used || 0)}</td>
                    <td class="text-end">${Number(row.ytd_credit_limit || 0)}</td>
                    <td class="text-center"><span class="badge ${badgeClass}">${pct.toFixed(2)}%</span></td>
                    <td class="text-end"><a class="btn btn-sm btn-outline-primary" href="${verboseUrl}">Verbose</a></td>
                </tr>
            `;
        }).join('');

        const card = document.createElement('div');
        card.id = 'parent-api-usage-summary';
        card.className = 'card mb-3';
        card.innerHTML = `
            <div class="card-body py-2">
                <div class="d-flex justify-content-between align-items-end mb-2">
                    <div class="fw-bold">API Credits (Parent Headline)</div>
                    <div style="min-width: 180px;">
                        <label class="form-label mb-1 small">Licence Year</label>
                        <select id="parent-api-usage-year-select" class="form-select form-select-sm">${yearOptions}</select>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table table-sm table-bordered mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Provider (end_point)</th>
                                <th class="text-end">YTD Used</th>
                                <th class="text-end">Month Used</th>
                                <th class="text-end">YTD Limit</th>
                                <th class="text-center">Usage %</th>
                                <th class="text-end">Details</th>
                            </tr>
                        </thead>
                        <tbody>${rowsHtml}</tbody>
                    </table>
                </div>
            </div>
        `;
        dataContainer.insertBefore(card, dataContainer.firstChild);
        const yearSelect = document.getElementById('parent-api-usage-year-select');
        if (yearSelect) {
            yearSelect.addEventListener('change', () => {
                fetchAndRenderParentApiUsage(data.parent_name || '', yearSelect.value);
            });
        }
    }

    // --- Data Rendering Function ---
    function renderData(data) {
        dataContainer.innerHTML = ''; // Clear any indicators

        // Create Parent Header
        const header = document.createElement('h3');
        header.className = 'mb-3 border-bottom pb-2';
		
		const formatDate = (dateStr, useTimeOnlyForToday = false) => {
        if (dateStr === null || dateStr === undefined || dateStr === "") {
            return 'Never';
        }
        const dateObj = new Date(dateStr);
        if (isNaN(dateObj.getTime())) {
            return dateStr;
        }
        if (useTimeOnlyForToday) {
            const today = new Date();
            if (dateObj.getFullYear() === today.getFullYear() &&
                dateObj.getMonth() === today.getMonth() &&
                dateObj.getDate() === today.getDate()) {
                return dateObj.toLocaleTimeString();
            }
        }
        return dateObj.toLocaleString();
		};
		
		const displayName = data.cancelled == 1 
            ? `${data.parent_name} (Cancelled)` 
            : data.parent_name;

        // Create the Salesforce link or display a fallback message
        const sfdcLinkHtml = data.sfdc_id
            ? `<a href="https://cindercone.my.salesforce.com/${data.sfdc_id}" target="_blank" rel="noopener noreferrer">Salesforce</a>`
            : 'No SFDC ID';

        // Create the Freshdesk link or display a fallback message
        const fdLinkHtml = data.fd_id
            ? `<a href="https://cindercone-support.freshdesk.com/a/companies/${data.fd_id}" target="_blank" rel="noopener noreferrer">Freshdesk</a>`
            : 'No FD ID';

        // Use .innerHTML to render the anchor tags correctly
        header.innerHTML = `${displayName} (${sfdcLinkHtml}, ${fdLinkHtml})`;

        dataContainer.appendChild(header);

        // Check if there are any customers
        if (!data.customers || data.customers.length === 0) {
            const noCustomersMessage = document.createElement('div');
            noCustomersMessage.className = 'alert alert-warning';
            noCustomersMessage.textContent = 'No associated customers found for this parent company.';
            dataContainer.appendChild(noCustomersMessage);
            return;
        }

        // Create Customer List Container
        const listGroup = document.createElement('div');
        listGroup.className = 'list-group';

        data.customers.forEach(customer => {
            const link = document.createElement('a');
            link.className = 'list-group-item list-group-item-action';
            const url = new URL('/magma_detail', window.location.origin);
            url.searchParams.set('licence_number', customer.licence_number);
            link.href = url.toString();

            link.innerHTML = `
                <div class="d-flex w-100 justify-content-between">
                    <h5 class="mb-1">${customer.company_name || 'N/A'}</h5>
                    <small>Last Seen: ${formatDate(customer.last_seen, true)}</small>
                </div>
                <p class="mb-1">
                    <strong>Licence:</strong> ${customer.licence_number || 'N/A'} | 
                    <strong>Magma Version:</strong> ${customer.magma_version || 'N/A'}
                    <strong>Runset Count:</strong> ${customer.runset_count ?? 0}
					<strong>PC:</strong> ${customer.computer_name || 'N/A'}
					<strong>DB:</strong> ${customer.DB_Machine_Name || 'N/A'}
					<strong>DB Size:</strong> ${customer.DB_dbsize || 'N/A'}
                </p>
            `;
            listGroup.appendChild(link);
        });
        dataContainer.appendChild(listGroup);
    }
    
    // --- Helper to show error messages ---
    function showError(message) {
        dataContainer.innerHTML = '';
        errorIndicator.textContent = message;
        errorIndicator.classList.remove('d-none');
        dataContainer.appendChild(errorIndicator);
    }

    // --- Event Listeners ---

    // Handle manual selection from dropdown
    parentFilterDropdown.addEventListener('change', () => {
        const selectedParent = parentFilterDropdown.value;
        parentSearchInput.value = selectedParent; // Sync search input
        fetchCustomerData(selectedParent);
    });

    // Handle typing in the search box with debouncing
    parentSearchInput.addEventListener('input', () => {
        const searchTerm = parentSearchInput.value.toLowerCase();
        
        parentFilterDropdown.innerHTML = '';
        const filteredOptions = originalOptions.filter(option =>
            option.value === "" || option.textContent.toLowerCase().includes(searchTerm)
        );

        filteredOptions.forEach(option => {
            parentFilterDropdown.add(option.cloneNode(true));
        });

        if (filteredOptions.length > 1) {
            parentFilterDropdown.value = filteredOptions[1].value;
        } else {
            parentFilterDropdown.value = "";
        }

        clearTimeout(debounceTimeout);
        debounceTimeout = setTimeout(() => {
            fetchCustomerData(parentFilterDropdown.value);
        }, 400); 
    });
    
    // Allow 'Enter' key to trigger search immediately
    parentSearchInput.addEventListener('keyup', (e) => {
        if (e.key === 'Enter') {
            clearTimeout(debounceTimeout);
            fetchCustomerData(parentFilterDropdown.value);
        }
    });

    // Clear all filters and reset the view
    clearFiltersBtn.addEventListener('click', () => {
        clearTimeout(debounceTimeout);
        parentSearchInput.value = '';
        parentFilterDropdown.innerHTML = ''; 
        originalOptions.forEach(opt => parentFilterDropdown.add(opt.cloneNode(true)));
        parentFilterDropdown.value = '';
        fetchCustomerData('');
    });
	
	if (parentSearchInput.value) {
        const event = new Event('input', {
            bubbles: true,
            cancelable: true,
        });
        parentSearchInput.dispatchEvent(event);
    }
});