document.addEventListener('DOMContentLoaded', function() {
    const fetchBtn = document.getElementById('fetch-btn');
    const fileFilterSelect = document.getElementById('file-filter');
    const customFilterSection = document.getElementById('custom-filter-section');
    
    // Show/hide custom file types input based on selection
    fileFilterSelect.addEventListener('change', function() {
        if (this.value === 'custom') {
            customFilterSection.classList.remove('hidden');
        } else {
            customFilterSection.classList.add('hidden');
        }
    });
const repoUrlInput = document.getElementById('repo-url');
    const fileFilterSelect = document.getElementById('file-filter');
    const templateSelect = document.getElementById('template');
    const themeSelect = document.getElementById('theme');
    const previewSection = document.getElementById('preview-section');
    const previewContent = document.getElementById('preview-content');
    const downloadBtn = document.getElementById('download-btn');
    const deployBtn = document.getElementById('deploy-btn');
    fetchBtn.addEventListener('click', async function() {
        const repoUrl = repoUrlInput.value.trim();
        const fileFilter = fileFilterSelect.value;
        
        if (!repoUrl) {
            showAlert('Please enter a GitHub repository URL', 'error');
            return;
        }

        // Validate GitHub URL
        if (!isValidGitHubUrl(repoUrl)) {
            showAlert('Please enter a valid GitHub repository URL', 'error');
            return;
        }

        // Show supported extensions for code filter
        if (fileFilter === 'code') {
            showAlert('Filtering for code files only: .js, .ts, .py, .java, .cpp, .h, .c, .cs, .go, .rb, .php, .swift, .kt, .rs, .sh', 'info');
        }
// Show loading state
        fetchBtn.disabled = true;
        fetchBtn.innerHTML = '<span class="loading-spinner"></span> Processing...';
        
        try {
            // Simulate API call (in a real app, you would call your backend here)
            await simulateApiCall();
            
            // Show preview section
            previewSection.classList.remove('hidden');
            
            // Generate sample preview (in a real app, this would be the actual rendered content)
            generateSamplePreview();
            
            showAlert('Repository fetched successfully!', 'success');
        } catch (error) {
            showAlert('Error fetching repository: ' + error.message, 'error');
        } finally {
            // Reset button state
            fetchBtn.disabled = false;
            fetchBtn.innerHTML = '<i data-feather="download" class="mr-2"></i> Fetch';
            feather.replace();
        }
    });

    downloadBtn.addEventListener('click', function() {
        showAlert('Download started!', 'success');
        // In a real app, this would trigger the download
    });

    deployBtn.addEventListener('click', function() {
        showAlert('Deployment initiated!', 'success');
        // In a real app, this would trigger the deployment
    });

    function isValidGitHubUrl(url) {
        const pattern = /^https:\/\/github\.com\/[a-zA-Z0-9_-]+\/[a-zA-Z0-9_-]+(\/)?$/;
        return pattern.test(url);
    }

    function simulateApiCall() {
        return new Promise((resolve) => {
            setTimeout(resolve, 1500);
        });
    }
    function generateSamplePreview() {
        const template = templateSelect.value;
        const theme = themeSelect.value;
        const fileFilter = fileFilterSelect.value;
// Apply theme class to preview
        previewContent.className = 'border border-gray-200 rounded-lg p-6 min-h-[400px]';
        if (theme === 'dark') {
            previewContent.classList.add('bg-gray-800', 'text-gray-100');
        } else if (theme === 'solarized') {
            previewContent.classList.add('bg-[#fdf6e3]', 'text-[#657b83]');
        } else if (theme === 'monokai') {
            previewContent.classList.add('bg-[#272822]', 'text-[#f8f8f2]');
        }

        // Generate sample content based on template
        let content = '';
        if (template === 'default') {
            content = `
                <h1 class="text-2xl font-bold mb-4">Sample Repository</h1>
                <p class="mb-4">This is a sample preview of how your