document.addEventListener('DOMContentLoaded', function() {
    const fetchBtn = document.getElementById('fetch-btn');
    const dropArea = document.getElementById('drop-area');
    const fileInput = document.getElementById('file-input');
    const previewContainer = document.getElementById('preview-container');
    const dropContent = document.getElementById('drop-content');

    // Drag and drop functionality
    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
        dropArea.addEventListener(eventName, preventDefaults, false);
    });

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

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

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

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

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

    dropArea.addEventListener('drop', handleDrop, false);
    dropArea.addEventListener('click', () => fileInput.click());

    fileInput.addEventListener('change', handleFiles);

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

    function handleFiles(e) {
        const files = e.target.files;
        if (!files.length) return;

        dropContent.classList.add('hidden');
        previewContainer.classList.remove('hidden');
        previewContainer.innerHTML = '<p class="col-span-3 text-sm text-gray-500">Selected images:</p>';

        Array.from(files).forEach(file => {
            if (!file.type.match('image.*')) return;

            const reader = new FileReader();
            reader.onload = function(e) {
                const preview = document.createElement('div');
                preview.className = 'relative group';
                preview.innerHTML = `
                    <img src="${e.target.result}" class="w-full h-32 object-cover rounded-lg" alt="${file.name}">
                    <button class="absolute top-1 right-1 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                        <i data-feather="x" class="w-4 h-4"></i>
                    </button>
                `;
                preview.querySelector('button').addEventListener('click', () => {
                    preview.remove();
                    if (previewContainer.childElementCount <= 1) {
                        dropContent.classList.remove('hidden');
                        previewContainer.classList.add('hidden');
                    }
                });
                previewContainer.appendChild(preview);
                feather.replace();
            };
            reader.readAsDataURL(file);
        });
    }
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