/**
 * Skeleton Loader - MontaLoja
 * Sistema de loading com placeholders usando Bootstrap 5
 * @version 1.2.0
 */

const SkeletonLoader = {
    
    /**
     * Renderiza um card skeleton genérico
     */
    renderSkeletonCard() {
        return `
        <div class="card skeleton-card h-100" aria-hidden="true">
            <div class="card-img-top placeholder-glow skeleton-image-placeholder">
                <span class="placeholder w-100 h-100"></span>
            </div>
            <div class="card-body">
                <h5 class="card-title placeholder-glow">
                    <span class="placeholder col-6"></span>
                </h5>
                <p class="card-text placeholder-glow">
                    <span class="placeholder col-7"></span>
                    <span class="placeholder col-4"></span>
                </p>
                <a class="btn btn-primary disabled placeholder col-6" aria-disabled="true"></a>
            </div>
        </div>
        `;
    },

    /**
     * Renderiza um card de PRODUTO skeleton (para storefront)
     * Estrutura idêntica ao card de produto real
     */
    renderSkeletonProductCard() {
        return `
        <article class="product-card skeleton-product" aria-hidden="true">
            <div class="product-image">
                <div class="skeleton-shimmer"></div>
                <span class="product-badge skeleton-badge"></span>
                <button class="product-wishlist skeleton-wishlist">
                    <span class="skeleton-icon"></span>
                </button>
            </div>
            <div class="product-info">
                <div class="skeleton-line skeleton-category"></div>
                <div class="skeleton-line skeleton-name"></div>
                <div class="skeleton-line skeleton-name-2"></div>
                <div class="product-rating skeleton-rating-wrapper">
                    <span class="skeleton-star"></span>
                    <span class="skeleton-star"></span>
                    <span class="skeleton-star"></span>
                    <span class="skeleton-star"></span>
                    <span class="skeleton-star"></span>
                    <span class="skeleton-rating-text"></span>
                </div>
                <div class="product-footer">
                    <div class="product-price">
                        <span class="skeleton-line skeleton-price"></span>
                    </div>
                    <button class="btn-add-cart skeleton-btn-cart">
                        <span class="skeleton-cart-icon"></span>
                    </button>
                </div>
            </div>
        </article>
        `;
    },

    /**
     * Renderiza grid de produtos skeleton (para storefront)
     */
    renderSkeletonProductGrid(count = 8) {
        let html = '';
        for (let i = 0; i < count; i++) {
            html += this.renderSkeletonProductCard();
        }
        return html;
    },

    /**
     * Renderiza um item de lista skeleton
     */
    renderSkeletonListItem() {
        return `
        <div class="list-group-item skeleton-list-item d-flex align-items-center" aria-hidden="true">
            <div class="flex-shrink-0 placeholder-glow">
                <span class="placeholder rounded-circle" style="width: 48px; height: 48px; display: block;"></span>
            </div>
            <div class="flex-grow-1 ms-3 placeholder-glow">
                <span class="placeholder col-4 d-block mb-1"></span>
                <span class="placeholder col-6 placeholder-sm"></span>
            </div>
        </div>
        `;
    },

    /**
     * Renderiza uma lista skeleton
     */
    renderSkeletonList(count = 5) {
        let html = '<div class="list-group skeleton-list">';
        for (let i = 0; i < count; i++) {
            html += this.renderSkeletonListItem();
        }
        html += '</div>';
        return html;
    },

    /**
     * Renderiza uma tabela skeleton completa
     */
    renderSkeletonTable(rows = 5, cols = 5) {
        let html = '<div class="table-responsive"><table class="table skeleton-table"><thead><tr class="placeholder-glow">';
        for (let i = 0; i < cols; i++) {
            html += '<th><span class="placeholder col-8"></span></th>';
        }
        html += '</tr></thead><tbody>';
        for (let i = 0; i < rows; i++) {
            html += '<tr class="placeholder-glow">';
            for (let j = 0; j < cols; j++) {
                html += '<td><span class="placeholder col-' + (Math.floor(Math.random() * 4) + 4) + '"></span></td>';
            }
            html += '</tr>';
        }
        html += '</tbody></table></div>';
        return html;
    },

    /**
     * Renderiza grid de cards skeleton
     */
    renderSkeletonGrid(count = 6, colClass = 'col-md-4 col-sm-6') {
        let html = '<div class="row g-3 skeleton-grid">';
        for (let i = 0; i < count; i++) {
            html += '<div class="' + colClass + '">' + this.renderSkeletonCard() + '</div>';
        }
        html += '</div>';
        return html;
    },

    /**
     * Renderiza skeleton de estatísticas
     */
    renderSkeletonStats(count = 4) {
        let html = '<div class="row g-3 skeleton-stats">';
        const colClass = count === 4 ? 'col-md-3 col-sm-6' : 'col-md-4 col-sm-6';
        for (let i = 0; i < count; i++) {
            html += '<div class="' + colClass + '"><div class="card h-100"><div class="card-body placeholder-glow">';
            html += '<span class="placeholder col-6 mb-2 d-block"></span>';
            html += '<span class="placeholder col-4 placeholder-lg d-block mb-2" style="height: 32px;"></span>';
            html += '<span class="placeholder col-8 placeholder-sm"></span>';
            html += '</div></div></div>';
        }
        html += '</div>';
        return html;
    },

    /**
     * Mostra skeleton em um container
     */
    showSkeleton(containerId, type = 'grid', options = {}) {
        const container = document.getElementById(containerId);
        if (!container) {
            console.warn('SkeletonLoader: Container #' + containerId + ' não encontrado');
            return;
        }

        if (!container.hasAttribute('data-original-content')) {
            container.setAttribute('data-original-content', container.innerHTML);
        }

        let html = '';
        const count = options.count || 6;
        const cols = options.cols || 5;
        const rows = options.rows || 5;

        switch (type) {
            case 'products':
                html = this.renderSkeletonProductGrid(count);
                break;
            case 'card':
                html = this.renderSkeletonCard();
                break;
            case 'list':
                html = this.renderSkeletonList(count);
                break;
            case 'table':
                html = this.renderSkeletonTable(rows, cols);
                break;
            case 'grid':
                html = this.renderSkeletonGrid(count, options.colClass || 'col-md-4 col-sm-6');
                break;
            case 'stats':
                html = this.renderSkeletonStats(count);
                break;
            default:
                html = this.renderSkeletonGrid(count);
        }

        container.innerHTML = html;
        container.classList.add('skeleton-loading');
    },

    /**
     * Remove skeleton
     */
    hideSkeleton(containerId, newContent = null) {
        const container = document.getElementById(containerId);
        if (!container) return;
        container.classList.remove('skeleton-loading');
        if (newContent !== null) {
            container.innerHTML = newContent;
        } else if (container.hasAttribute('data-original-content')) {
            container.innerHTML = container.getAttribute('data-original-content');
            container.removeAttribute('data-original-content');
        }
    },

    isLoading(containerId) {
        const container = document.getElementById(containerId);
        return container ? container.classList.contains('skeleton-loading') : false;
    }
};

// CSS para skeletons - Idêntico ao design dos cards de produto
(function() {
    const style = document.createElement('style');
    style.textContent = `
        /* Skeleton base */
        .skeleton-loading { pointer-events: none; }
        
        @keyframes skeleton-shimmer {
            0% { background-position: -200% 0; }
            100% { background-position: 200% 0; }
        }
        
        @keyframes skeleton-pulse {
            0%, 100% { opacity: 0.4; }
            50% { opacity: 0.7; }
        }
        
        /* Skeleton de produto - Idêntico ao .product-card */
        .skeleton-product {
            background: var(--bg-white, #fff);
            border-radius: var(--radius-lg, 16px);
            overflow: hidden;
            border: 1px solid var(--border-light, #E5E7EB);
        }
        
        /* Imagem do produto skeleton */
        .skeleton-product .product-image {
            position: relative;
            aspect-ratio: 1;
            background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        
        .skeleton-product .skeleton-shimmer {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(90deg, 
                transparent 0%, 
                rgba(255,255,255,0.4) 50%, 
                transparent 100%);
            background-size: 200% 100%;
            animation: skeleton-shimmer 1.5s infinite;
        }
        
        /* Badge skeleton */
        .skeleton-product .skeleton-badge {
            width: 50px;
            height: 24px;
            background: rgba(0,0,0,0.08);
            border-radius: 6px;
            animation: skeleton-pulse 1.5s infinite;
        }
        
        /* Wishlist button skeleton */
        .skeleton-product .skeleton-wishlist {
            width: 36px;
            height: 36px;
            background: rgba(255,255,255,0.9);
            border-radius: 50%;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .skeleton-product .skeleton-icon {
            width: 18px;
            height: 18px;
            background: #E5E7EB;
            border-radius: 50%;
            animation: skeleton-pulse 1.5s infinite;
        }
        
        /* Product info skeleton - idêntico ao .product-info */
        .skeleton-product .product-info {
            padding: 16px;
        }
        
        .skeleton-product .skeleton-line {
            background: linear-gradient(90deg, #E5E7EB 0%, #F3F4F6 50%, #E5E7EB 100%);
            background-size: 200% 100%;
            animation: skeleton-shimmer 1.5s infinite;
            border-radius: 4px;
            margin-bottom: 8px;
        }
        
        /* Categoria */
        .skeleton-product .skeleton-category {
            width: 35%;
            height: 12px;
            margin-bottom: 8px;
        }
        
        /* Nome do produto */
        .skeleton-product .skeleton-name {
            width: 85%;
            height: 16px;
            margin-bottom: 4px;
        }
        
        .skeleton-product .skeleton-name-2 {
            width: 60%;
            height: 16px;
            margin-bottom: 12px;
        }
        
        /* Rating skeleton */
        .skeleton-product .skeleton-rating-wrapper {
            display: flex;
            align-items: center;
            gap: 4px;
            margin-bottom: 12px;
        }
        
        .skeleton-product .skeleton-star {
            width: 14px;
            height: 14px;
            background: #E5E7EB;
            border-radius: 2px;
            animation: skeleton-pulse 1.5s infinite;
        }
        
        .skeleton-product .skeleton-rating-text {
            width: 30px;
            height: 12px;
            background: #E5E7EB;
            border-radius: 4px;
            margin-left: 4px;
            animation: skeleton-pulse 1.5s infinite;
        }
        
        /* Footer do produto */
        .skeleton-product .product-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 8px;
        }
        
        /* Preço skeleton */
        .skeleton-product .skeleton-price {
            width: 70px;
            height: 20px;
            margin-bottom: 0;
        }
        
        /* Botão add cart skeleton */
        .skeleton-product .skeleton-btn-cart {
            width: 40px;
            height: 40px;
            border-radius: 12px;
            background: linear-gradient(90deg, #E5E7EB 0%, #F3F4F6 50%, #E5E7EB 100%);
            background-size: 200% 100%;
            animation: skeleton-shimmer 1.5s infinite;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .skeleton-product .skeleton-cart-icon {
            width: 20px;
            height: 20px;
            background: rgba(0,0,0,0.1);
            border-radius: 4px;
        }
        
        /* Skeleton card genérico */
        .skeleton-card .skeleton-image-placeholder {
            height: 180px;
            background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
            background-size: 200% 100%;
            animation: skeleton-shimmer 1.5s infinite;
        }
        
        .placeholder {
            background-color: #dee2e6;
            opacity: 0.7;
        }
        
        /* Responsivo */
        @media (max-width: 768px) {
            .skeleton-product .product-info {
                padding: 12px;
            }
            
            .skeleton-product .skeleton-name {
                height: 14px;
            }
            
            .skeleton-product .skeleton-name-2 {
                display: none;
            }
        }
    `;
    document.head.appendChild(style);
})();

// Export
if (typeof module !== 'undefined' && module.exports) {
    module.exports = SkeletonLoader;
}
