script.js

// Global configuration
const API_BASE_URL = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1' 
    ? 'http://localhost:7860' 
    : `http://${window.location.hostname}:7860`;

// Form submission handler
document.getElementById('generationForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    
    const formData = new FormData(e.target);
    const data = Object.fromEntries(formData);
    
    // Show loading state
    const submitButton = e.target.querySelector('button[type="submit"]');
    const originalText = submitButton.innerHTML;
    submitButton.innerHTML = '<i data-feather="loader" class="animate-spin inline w-5 h-5 mr-2"></i>Generating...';
    feather.replace();
    
    try {
        // Simulate API call to Swarm UI
        const response = await generateImage(data);
        
        // Display results
        displayGeneratedImage(response);
        
        // Show results section
        document.getElementById('results').classList.remove('hidden');
        
    } catch (error) {
        console.error('Generation failed:', error);
        alert('Failed to generate image. Please check if Swarm UI is running.');
    } finally {
        // Restore button state
        submitButton.innerHTML = originalText;
        feather.replace();
    }
});

// Mock image generation function (replace with actual Swarm UI API call)
async function generateImage(parameters) {
    // This is a mock implementation - replace with actual API call
    console.log('Generation parameters:', parameters);
    
    // Simulate API delay
    await new Promise(resolve => setTimeout(resolve, 2000));
    
    // Return mock response with placeholder image
    return {
        image_url: `http://static.photos/abstract/640x360/${Math.floor(Math.random() * 1000)}`,
        parameters: parameters
    };
}

// Display generated image
function displayGeneratedImage(response) {
    const container = document.getElementById('generatedImage');
    container.innerHTML = `
        <div class="text-center">
            <img src="${response.image_url}" 
                 alt="Generated image" 
                 class="generated-image max-w-full h-auto mx-auto"
            >
            <div class="mt-4 text-sm text-gray-400">
                Generated with ${response.parameters.model} • ${response.parameters.steps} steps
            </div>
        </div>
    `;
}

// Initialize real-time connection status
function checkConnectionStatus() {
    fetch(`${API_BASE_URL}/sdapi/v1/options`)
        .then(response => {
            if (response.ok) {
                updateStatus('connected', 'Connected to Swarm UI');
            } else {
                updateStatus('disconnected', 'Swarm UI not responding');
            }
        })
        .catch(error => {
            updateStatus('disconnected', 'Cannot connect to Swarm UI');
        });
}

function updateStatus(status, message) {
    const navbar = document.querySelector('custom-navbar');
    if (navbar && navbar.shadowRoot) {
        const statusElement = navbar.shadowRoot.querySelector('#connectionStatus');
        if (statusElement) {
            statusElement.className = `inline-flex items-center px-3 py-1 rounded-full text-xs font-medium ${
                status === 'connected' 
                    ? 'bg-green-500/20 text-green-400 border border-green-500/30' 
                    : 'bg-red-500/20 text-red-400 border border-red-500/30'
            }`;
            statusElement.innerHTML = `
                <i data-feather="${status === 'connected' ? 'check-circle' : 'x-circle'}" class="w-3 h-3 mr-1"></i>
                ${message}
            `;
            feather.replace();
        }
    }
}

// Auto-check connection status on page load
document.addEventListener('DOMContentLoaded', () => {
    checkConnectionStatus();
    // Check every 30 seconds
    setInterval(checkConnectionStatus, 30000);
});

// Mobile menu toggle (handled by navbar component)
document.addEventListener('click', (e) => {
    if (e.target.closest('[data-mobile-menu-toggle]')) {
        const navbar = document.querySelector('custom-navbar');
        if (navbar) {
            const mobileMenu = navbar.shadowRoot.querySelector('#mobileMenu');
        if (mobileMenu) {
            mobileMenu.classList.toggle('hidden');
        }
    }
});

// Add smooth scrolling for anchor links
document.addEventListener('click', (e) => {
    if (e.target.matches('a[href^="#"]')) {
        e.preventDefault();
        const target = document.querySelector(e.target.getAttribute('href'));
        if (target) {
            target.scrollIntoView({ behavior: 'smooth' });
        }
    }
});

// Form validation enhancement
document.querySelectorAll('input, textarea, select').forEach(element => {
    element.addEventListener('invalid', (e) => {
        e.target.classList.add('border-red-500');
    });
    
    element.addEventListener('input', (e) => {
        e.target.classList.remove('border-red-500');
    });
});

// Auto-save form data to localStorage
function autoSaveForm() {
    const form = document.getElementById('generationForm');
    const formData = new FormData(form);
    const data = Object.fromEntries(formData);
    localStorage.setItem('aiDiffusionForm', JSON.stringify(data));
}

// Load saved form data
function loadSavedForm() {
    const saved = localStorage.getItem('aiDiffusionForm');
    if (saved) {
        const data = JSON.parse(saved);
        Object.keys(data).forEach(key => {
            const element = form.querySelector(`[name="${key}"]`);
            if (element) {
                element.value = data[key];
            }
        });
    }
}

// Initialize auto-save
document.querySelectorAll('#generationForm input, #generationForm textarea, #generationForm select').forEach(element => {
    element.addEventListener('change', autoSaveForm);
    element.addEventListener('input', autoSaveForm);
});

// Load saved data on page load
document.addEventListener('DOMContentLoaded', loadSavedForm);