HTMLify

document.addEventListener('DOMContentLoaded', () => {
    // --- 1. Intersection Observer for Scroll Animations ---
    const observerOptions = {
        root: null,
        rootMargin: '0px',
        threshold: 0.1 // Trigger when 10% of the element is visible
    };

    const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const element = entry.target;
                const delay = parseFloat(element.getAttribute('data-delay') || '0');
                
                // Apply visibility class after the specified delay
                setTimeout(() => {
                    element.classList.add('visible');
                    
                    // Special handling for dashboard stat cards to count up
                    if (element.classList.contains('stat-card')) {
                        const valueElement = element.querySelector('.stat-value');
                        if (valueElement) {
                            countUp(valueElement, valueElement.getAttribute('data-target'));
                        }
                    }

                    // Special handling for table rows to apply stagger
                    if (element.closest('.table-responsive')) {
                        const rows = element.querySelectorAll('.table-row-animated');
                        rows.forEach((row, index) => {
                            setTimeout(() => {
                                row.style.opacity = 1;
                                row.style.transform = 'scale(1)';
                            }, index * 100); // 100ms stagger between rows
                        });
                    }

                }, delay * 1000);
                
                observer.unobserve(element);
            }
        });
    }, observerOptions);

    document.querySelectorAll('.fade-in-up').forEach(el => {
        observer.observe(el);
    });

    // --- 2. Counter Animation (Stat Cards) ---
    function countUp(element, targetValue) {
        const duration = 1500; // 1.5 seconds
        const startValue = 0;
        let startTime = null;

        const formatValue = (value) => {
            if (value.includes('ms')) return value;
            const num = Math.round(value);
            return num.toLocaleString('en-US');
        };

        const step = (timestamp) => {
            if (!startTime) startTime = timestamp;
            const progress = timestamp - startTime;
            const percentage = Math.min(progress / duration, 1);
            
            // Simple linear interpolation
            let currentValue = startValue + percentage * (parseFloat(targetValue.replace(/[A-Za-z%ms]/g, '')) - startValue);
            
            element.textContent = formatValue(currentValue) + (targetValue.match(/[A-Za-z%ms]/g) || ['']);

            if (percentage < 1) {
                window.requestAnimationFrame(step);
            } else {
                element.textContent = targetValue;
            }
        };

        window.requestAnimationFrame(step);
    }

    // Initialize counts to 0 and let observer trigger the count up
    document.querySelectorAll('.stat-value').forEach(el => {
        el.textContent = '0';
    });

    // --- 3. Query Page Simulation (queries.html) ---
    const runQueryBtn = document.getElementById('runQueryBtn');
    const sqlEditor = document.getElementById('sqlEditor');
    const queryStatus = document.getElementById('queryStatus');
    const resultsBody = document.getElementById('queryResultsBody');
    const rowCountSpan = document.getElementById('rowCount');

    if (runQueryBtn) {
        runQueryBtn.addEventListener('click', () => {
            const sql = sqlEditor.value.trim();
            if (!sql) {
                queryStatus.textContent = "Error: SQL query cannot be empty.";
                return;
            }

            // Simulate execution
            queryStatus.textContent = "Executing...";
            rowCountSpan.textContent = '0';
            resultsBody.innerHTML = '<tr id="loadingRow"><td colspan="3" class="loading-text">Executing query... Please wait.</td></tr>';

            setTimeout(() => {
                // Simulated successful result set
                const simulatedData = [
                    { user_id: 1001, email: 'alice@corp.com', last_login: '2024-05-28 14:22' },
                    { user_id: 1002, email: 'bob@corp.com', last_login: '2024-05-28 14:19' },
                    { user_id: 1003, email: 'charlie@corp.com', last_login: '2024-05-27 09:01' },
                    { user_id: 1004, email: 'diana@corp.com', last_login: '2024-05-28 10:45' },
                ];
                
                resultsBody.innerHTML = '';
                simulatedData.forEach(row => {
                    const tr = document.createElement('tr');
                    tr.className = 'table-row-animated';
                    tr.innerHTML = `
                        <td>${row.user_id}</td>
                        <td>${row.email}</td>
                        <td>${row.last_login}</td>
                    `;
                    resultsBody.appendChild(tr);
                });

                // Re-apply animation logic if necessary, though the observer might handle the parent section
                simulatedData.forEach((_, index) => {
                    const row = resultsBody.children[index];
                    if (row) {
                        setTimeout(() => {
                            row.style.opacity = 1;
                            row.style.transform = 'scale(1)';
                        }, index * 100); 
                    }
                });

                rowCountSpan.textContent = simulatedData.length;
                queryStatus.textContent = `Success! Query executed in ${Math.floor(Math.random() * 50 + 10)}ms.`;

            }, 1500); // 1.5 second delay for simulation
        });
    }

    // --- 4. Table Search Simulation (tables.html) ---
    const tableSearchInput = document.getElementById('tableSearch');
    const tableListBody = document.getElementById('tableListBody');

    if (tableSearchInput && tableListBody) {
        const originalRows = Array.from(tableListBody.children);

        tableSearchInput.addEventListener('input', (e) => {
            const searchTerm = e.target.value.toLowerCase();
            let visibleCount = 0;

            originalRows.forEach(row => {
                const text = row.textContent.toLowerCase();
                if (text.includes(searchTerm)) {
                    row.style.display = '';
                    visibleCount++;
                } else {
                    row.style.display = 'none';
                }
            });

            // Update count display (assuming the section title needs updating)
            const h2 = document.querySelector('.table-list h2');
            if (h2) {
                h2.textContent = `Table Directory (${visibleCount} Items)`;
            }
        });
    }

    // Trigger observer activation on load for elements already in view (like first cards)
    document.querySelectorAll('.fade-in-up.visible').forEach(el => observer.unobserve(el));
});