/**
 * Lakics Admin Panel - Frontend Integration
 * 
 * This file provides JavaScript functions to integrate the Referencia API
 * with your existing Lakics2025 HTML frontend.
 * 
 * Usage:
 * 1. Include this file in your referenciak.html
 * 2. Call loadReferencias() to fetch and display data
 * 3. Customize the displayReferencias() function to match your HTML structure
 */

// Configuration - Now that Laravel serves the frontend, we can use relative URLs
const API_BASE_URL = ''; // Empty string for relative URLs since everything is served through Laravel

/**
 * Fetch all referencias from the API
 */
async function loadReferencias() {
    try {
        showLoading();
        
        const response = await fetch(`${API_BASE_URL}/api/referenciak`);
        
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        
        const data = await response.json();
        
        if (data.success) {
            displayReferencias(data.data);
        } else {
            showError('Failed to load referencias');
        }
    } catch (error) {
        console.error('Error loading referencias:', error);
        showError('Error loading referencias: ' + error.message);
    } finally {
        hideLoading();
    }
}

/**
 * Display referencias in the HTML
 * Uses the existing card-columns Bootstrap layout
 */
function displayReferencias(referencias) {
    const container = document.getElementById('referencias-container');
    
    if (!container) {
        console.error('Container element with ID "referencias-container" not found');
        return;
    }
    
    // Clear existing content
    container.innerHTML = '';
    
    if (referencias.length === 0) {
        container.innerHTML = '<div class="text-center"><p>Nincsenek referenciák.</p></div>';
        return;
    }
    
    // Create HTML for each referencia using the same styling as the original
    referencias.forEach(referencia => {
        const referenciaElement = createReferenciaElement(referencia);
        container.appendChild(referenciaElement);
    });
}

/**
 * Create HTML element for a single referencia
 * Matches the existing Bootstrap card-columns design
 */
function createReferenciaElement(referencia) {
    const img = document.createElement('img');
    img.src = referencia.image_url;
    img.alt = escapeHtml(referencia.title);
    img.className = 'img-fluid mb-3';
    img.style.cursor = 'pointer';
    img.loading = 'lazy';
    
    // Add click handler for lightbox/modal if desired
    img.addEventListener('click', function() {
        openImageModal(referencia);
    });
    
    // Add error handling
    img.onerror = function() {
        this.style.display = 'none';
    };
    
    return img;
}

/**
 * Open image in modal (optional enhancement)
 */
function openImageModal(referencia) {
    // Create a simple modal overlay
    const modal = document.createElement('div');
    modal.style.cssText = `
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.8);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
        cursor: pointer;
    `;
    
    const modalContent = document.createElement('div');
    modalContent.style.cssText = `
        max-width: 90%;
        max-height: 90%;
        background: white;
        padding: 20px;
        border-radius: 8px;
        text-align: center;
    `;
    
    modalContent.innerHTML = `
        <img src="${referencia.image_url}" 
             alt="${escapeHtml(referencia.title)}" 
             style="max-width: 100%; max-height: 70vh; object-fit: contain;">
        <h4 style="margin-top: 15px; color: #333;">${escapeHtml(referencia.title)}</h4>
        <p style="color: #666; font-size: 0.9em;">Kattintson bárhova a bezáráshoz</p>
    `;
    
    modal.appendChild(modalContent);
    document.body.appendChild(modal);
    
    // Close modal on click
    modal.addEventListener('click', function() {
        document.body.removeChild(modal);
    });
    
    // Prevent closing when clicking on the content
    modalContent.addEventListener('click', function(e) {
        e.stopPropagation();
    });
}

/**
 * Fetch a single referencia by ID
 */
async function loadReferencia(id) {
    try {
        const response = await fetch(`${API_BASE_URL}/api/referenciak/${id}`);
        
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        
        const data = await response.json();
        
        if (data.success) {
            return data.data;
        } else {
            throw new Error('Referencia not found');
        }
    } catch (error) {
        console.error('Error loading referencia:', error);
        throw error;
    }
}

/**
 * Show loading indicator
 */
function showLoading() {
    const container = document.getElementById('referencias-container');
    if (container) {
        container.innerHTML = '<div class="text-center"><p>Referenciák betöltése...</p></div>';
    }
}

/**
 * Hide loading indicator
 */
function hideLoading() {
    // Loading will be replaced by content, so no action needed
}

/**
 * Show error message
 */
function showError(message) {
    const container = document.getElementById('referencias-container');
    if (container) {
        container.innerHTML = `
            <div class="text-center" style="padding: 20px;">
                <p style="color: #d32f2f; background-color: #ffebee; padding: 15px; border-radius: 4px; border: 1px solid #f8bbd9;">
                    Hiba: ${escapeHtml(message)}
                </p>
            </div>`;
    }
}

/**
 * Escape HTML to prevent XSS
 */
function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

/**
 * Format date for display
 */
function formatDate(dateString) {
    const date = new Date(dateString);
    return date.toLocaleDateString('hu-HU', {
        year: 'numeric',
        month: 'long',
        day: 'numeric'
    });
}

/**
 * Initialize on page load
 */
document.addEventListener('DOMContentLoaded', function() {
    // Auto-load referencias if container exists
    if (document.getElementById('referencias-container')) {
        loadReferencias();
    }
});

/**
 * Optional: Refresh data periodically
 * Uncomment if you want auto-refresh functionality
 */
/*
setInterval(() => {
    if (document.getElementById('referencias-container')) {
        loadReferencias();
    }
}, 300000); // Refresh every 5 minutes
*/