// Global Application Interactions

document.addEventListener('DOMContentLoaded', () => {
    // Initialize Lucide Icons
    if (window.lucide) {
        window.lucide.createIcons();
    }

    // Modal Handling
    const modalOverlays = document.querySelectorAll('.modal-overlay');
    
    // Function to open modal
    window.openModal = (modalId) => {
        const modal = document.getElementById(modalId);
        if (modal) {
            modal.classList.add('active');
            document.body.style.overflow = 'hidden';
        }
    };

    // Function to close modal
    window.closeModal = (modalId) => {
        const modal = document.getElementById(modalId);
        if (modal) {
            modal.classList.remove('active');
            document.body.style.overflow = '';
        }
    };

    // Close modal on overlay click
    modalOverlays.forEach(overlay => {
        overlay.addEventListener('click', (e) => {
            if (e.target === overlay) {
                closeModal(overlay.id);
            }
        });
    });

    // Close modal on Escape key
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') {
            const activeModal = document.querySelector('.modal-overlay.active');
            if (activeModal) {
                closeModal(activeModal.id);
            }
        }
    });

    // Simple Form Submission Simulation
    const forms = document.querySelectorAll('form');
    forms.forEach(form => {
        // Skip login/register forms which already have actions
        if (form.action.includes('.html')) return;

        form.addEventListener('submit', (e) => {
            e.preventDefault();
            const submitBtn = form.querySelector('button[type="submit"]');
            const originalContent = submitBtn.innerHTML;
            
            // Show loading state
            submitBtn.disabled = true;
            submitBtn.innerHTML = `
                <div class="flex items-center gap-2">
                    <svg class="animate-spin h-5 w-5 text-current" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                    Przetwarzanie...
                </div>
            `;

            setTimeout(() => {
                // Success state
                submitBtn.innerHTML = `
                    <div class="flex items-center gap-2">
                        <i data-lucide="check-circle" class="w-5 h-5"></i>
                        Gotowe!
                    </div>
                `;
                if (window.lucide) window.lucide.createIcons();
                
                setTimeout(() => {
                    const activeModal = document.querySelector('.modal-overlay.active');
                    if (activeModal) closeModal(activeModal.id);
                    
                    // Reset button
                    submitBtn.disabled = false;
                    submitBtn.innerHTML = originalContent;
                    form.reset();
                    if (window.lucide) window.lucide.createIcons();
                    
                    // Custom notification could be added here
                }, 1000);
            }, 1000);
        });
    });
});