script.js

// Shared JavaScript across all pages
document.addEventListener('DOMContentLoaded', () => {
    // Initialize Supabase client when page loads
    let supabase = null;

    // GitHub OAuth flow
    document.getElementById('githubAuth').addEventListener('click', () => {
        // Redirect to GitHub OAuth
        window.location.href = `https://github.com/login/oauth/authorize?client_id=${encodeURIComponent('YOUR_GITHUB_CLIENT_ID')}&scope=${encodeURIComponent('repo,admin:repo_hook')}&redirect_uri=${encodeURIComponent(window.location.origin + '/auth/github/callback')}`;
    });
    // Supabase connection
    document.getElementById('supabaseConnect').addEventListener('click', async () => {
        const url = document.getElementById('supabaseUrl').value;
        const key = document.getElementById('supabaseKey').value;
        
        if (!url || !key) {
            alert('Please enter both Supabase URL and API Key');
            return;
        }

        try {
            supabase = createClient(url, key);
            
            // Test connection by making a simple request
            const { data, error } = await supabase.from('profiles').select('*').limit(1);
            
            if (error) throw error;
            
            // Connection successful
            document.getElementById('supabaseConnect').classList.add('hidden');
            document.getElementById('supabaseStatus').classList.remove('hidden');
            
            // If GitHub is also connected, show config panel
            if (localStorage.getItem('githubToken')) {
                document.getElementById('configPanel').classList.remove('hidden');
                loadRepositories();
            }
        } catch (error) {
            alert('Supabase connection failed: ' + error.message);
        }
    });
// Repository selection
    document.getElementById('repoSelect').addEventListener('change', (e) => {
        if (e.target.value) {
            simulateLoadBranches(e.target.value);
        }
    });
    // File upload handling
    const dropZone = document.getElementById('dropZone');
    const fileInput = document.getElementById('fileInput');
    const fileList = document.getElementById('fileList');
    const fileItems = document.getElementById('fileItems');
    let uploadedFiles = [];

    // Handle drag and drop
    dropZone.addEventListener('click', () => fileInput.click());
    
    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
        dropZone.addEventListener(eventName, preventDefaults, false);
    });

    function preventDefaults(e) {
        e.preventDefault();
        e.stopPropagation();
    }

    ['dragenter', 'dragover'].forEach(eventName => {
        dropZone.addEventListener(eventName, highlight, false);
    });

    ['dragleave', 'drop'].forEach(eventName => {
        dropZone.addEventListener(eventName, unhighlight, false);
    });

    function highlight() {
        dropZone.classList.add('border-indigo-500', 'bg-indigo-50');
    }

    function unhighlight() {
        dropZone.classList.remove('border-indigo-500', 'bg-indigo-50');
    }

    dropZone.addEventListener('drop', handleDrop, false);
    fileInput.addEventListener('change', handleFiles, false);

    function handleDrop(e) {
        const dt = e.dataTransfer;
        const files = dt.files;
        handleFiles({ target: { files } });
    }

    function handleFiles(e) {
        const files = e.target.files;
        const allowedTypes = ['.js', '.ts', '.jsx', '.tsx', '.sql', '.json'];
        
        Array.from(files).forEach(file => {
            const ext = '.' + file.name.split('.').pop().toLowerCase();
            if (!allowedTypes.includes(ext)) {
                alert(`File type ${ext} is not allowed`);
                return;
            }
            
            uploadedFiles.push(file);
            updateFileList();
        });
    }

    function updateFileList() {
        if (uploadedFiles.length === 0) {
            fileList.classList.add('hidden');
            return;
        }
        
        fileItems.innerHTML = '';
        uploadedFiles.forEach((file, index) => {
            const li = document.createElement('li');
            li.className = 'flex items-center justify-between py-1';
            li.innerHTML = `
                <span>${file.name} (${(file.size / 1024).toFixed(2)} KB)</span>
                <button data-index="${index}" class="text-red-500 hover:text-red-700">
                    <i data-feather="trash-2" class="w-4 h-4"></i>
                </button>
            `;
            fileItems.appendChild(li);
        });
        
        fileList.classList.remove('hidden');
        feather.replace();
        
        // Add event listeners to delete buttons
        document.querySelectorAll('#fileItems button').forEach(btn => {
            btn.addEventListener('click', (e) => {
                const index = e.target.closest('button').dataset.index;
                uploadedFiles.splice(index, 1);
                updateFileList();
            });
        });
    }

    // Save configuration
    document.getElementById('saveConfig').addEventListener('click', () => {
        const repo = document.getElementById('repoSelect').value;
        const branch = document.getElementById('branchSelect').value;
        const hookUrl = document.getElementById('hookUrl').value;
        
        if (repo && branch && hookUrl) {
            if (uploadedFiles.length > 0) {
                // Upload files along with config
                const formData = new FormData();
                uploadedFiles.forEach(file => {
                    formData.append('files', file);
                });
                formData.append('repo', repo);
                formData.append('branch', branch);
                formData.append('hookUrl', hookUrl);
                
                // In a real app, send to backend
                alert('Configuration and files saved successfully!');
            } else {
                alert('Configuration saved successfully!');
            }
        } else {
            alert('Please complete all configuration fields');
        }
    });
});
async function loadRepositories() {
    try {
        const response = await fetch('https://api.github.com/user/repos', {
            headers: {
                'Authorization': `token ${localStorage.getItem('githubToken')}`
            }
        });
        
        if (!response.ok) throw new Error('Failed to fetch repositories');
        
        const repos = await response.json();
        const select = document.getElementById('repoSelect');
        
        select.innerHTML = '<option value="">Select a repository</option>';
        repos.forEach(repo => {
            const option = document.createElement('option');
            option.value = repo.full_name;
            option.textContent = repo.name;
            select.appendChild(option);
        });
        
        select.disabled = false;
    } catch (error) {
        alert('Error loading repositories: ' + error.message);
    }
}
// Handle GitHub OAuth callback
if (window.location.pathname === '/auth/github/callback') {
    const code = new URLSearchParams(window.location.search).get('code');
    
    if (code) {
        // Exchange code for access token
        fetch('/api/github-auth', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ code })
        })
        .then(response => response.json())
        .then(data => {
            localStorage.setItem('githubToken', data.access_token);
            window.location.href = '/'; // Redirect back to main page
        })
        .catch(error => {
            console.error('GitHub auth failed:', error);
            alert('GitHub authentication failed');
        });
    }
}
function checkConnectionStatus() {
    const githubConnected = !document.getElementById('github