script.js

// Browser compatibility test
function testCompatibility() {
    const requiredFeatures = {
        'Promise': window.Promise,
        'fetch': window.fetch,
        'Web Components': window.customElements,
        'Shadow DOM': 'attachShadow' in Element.prototype,
        'ES6 Modules': 'noModule' in HTMLScriptElement.prototype,
        'CSS Variables': window.CSS && CSS.supports('color', 'var(--test)')
    };

    const missingFeatures = Object.entries(requiredFeatures)
        .filter(([_, supported]) => !supported)
        .map(([name]) => name);

    if (missingFeatures.length > 0) {
        const warning = document.createElement('div');
        warning.className = 'compatibility-warning';
        warning.innerHTML = `
            <div class="warning-content">
                <h3>⚠️ Compatibility Warning</h3>
                <p>Your browser is missing these required features:</p>
                <ul>${missingFeatures.map(f => `<li>${f}</li>`).join('')}</ul>
                <p>Please update your browser or use a modern alternative like Chrome, Firefox, or Edge.</p>
            </div>
        `;
        document.body.prepend(warning);
        return false;
    }
    return true;
}
// Database tables with more complete default data
const dbTables = [
    { 
        table_name: 'documents', 
        table_schema: 'Stores document metadata including OCR processing info',
        row_count: 50430,
        columns: [
            'id', 'doc_id', 'file_path', 'file_type', 'content',
            'file_hash', 'processing_time_seconds', 'file_size_bytes',
            'ocr_date'
        ]
    },
    { 
        table_name: 'users', 
        table_schema: 'Contains user account information and permissions',
        row_count: 15
    },
    { 
        table_name: 'sessions', 
        table_schema: 'Tracks active user sessions and login history',
        row_count: 28
    }
];
// Function to fetch tables with better error handling
async function fetchTables() {
    try {
        // First try local fallback
        const localResponse = await fetch('/api/tables.json');
        if (localResponse.ok) {
            const data = await localResponse.json();
            return data.tables || dbTables;
        }
        
        // If local fails, use default data
        console.warn('Using default table data - local API not available');
        return dbTables;
    } catch (error) {
        console.error('Table fetch error:', error);
        showError('Using default table data - could not connect to API');
        return dbTables;
    }
}
// Function to display tables in UI
function displayTables(tables) {
    const tablesContainer = document.querySelector('.divide-y');
    if (!tablesContainer) return;

    tablesContainer.innerHTML = '';
    
    tables.forEach(table => {
        const tableElement = document.createElement('div');
        tableElement.className = 'p-6 hover:bg-gray-50 transition cursor-pointer group';
        tableElement.innerHTML = `
            <div class="flex justify-between items-center">
                <div>
                    <div class="flex items-center space-x-3">
                        <div class="bg-indigo-100 p-2 rounded-lg">
                            <i data-feather="database" class="text-indigo-600 w-4 h-4"></i>
                        </div>
                        <div>
                            <h3 class="font-medium text-gray-800">${table.table_name}</h3>
                            <p class="text-sm text-gray-500">${table.table_schema || 'No description available'}</p>
                        </div>
                    </div>
                </div>
                <div class="flex items-center space-x-4">
                    <span class="text-xs bg-gray-100 px-2 py-1 rounded text-gray-600">
                        ${table.row_count || '?'} rows
                    </span>
                    <i data-feather="chevron-right" class="text-gray-400 group-hover:text-indigo-500 transition"></i>
                </div>
            </div>
        `;
        tablesContainer.appendChild(tableElement);
    });
feather.replace();
}

// Function to show error message
function showError(message) {
    const errorElement = document.createElement('div');
    errorElement.className = 'bg-red-50 text-red-600 p-4 rounded-lg mb-6';
    errorElement.textContent = message;
    document.querySelector('.max-w-4xl').prepend(errorElement);
}
// Initialize the application
document.addEventListener('DOMContentLoaded', async () => {
    // Check compatibility first
    if (!testCompatibility()) {
        console.error('Browser missing required features');
        return;
    }
console.log('Application initialized');
    
    const loading = document.getElementById('loading');
    try {
        const tables = await fetchTables();
        displayTables(tables);
    } catch (error) {
        console.error('Initialization error:', error);
        showError('Using default table data - could not initialize');
        displayTables(dbTables);
    } finally {
        if (loading) loading.style.display = 'none';
    }
});
// Search functionality
document.getElementById('searchInput')?.addEventListener('input', function(e) {
    const searchTerm = e.target.value.toLowerCase();
    const tablesContainer = document.querySelector('.divide-y');
    if (!tablesContainer) return;
    
    const allTables = tablesContainer.querySelectorAll('div.p-6');
    allTables.forEach(table => {
        const name = table.querySelector('h3').textContent.toLowerCase();
        const desc = table.querySelector('p').textContent.toLowerCase();
        if (name.includes(searchTerm) || desc.includes(searchTerm)) {
            table.style.display = 'block';
        } else {
            table.style.display = 'none';
        }
    });
});