/* ============================================
   RSL Skeleton Loader Component
   Version: 1.0.0
   Description: Dynamic skeleton generation utilities
   ============================================ */

(function() {
    'use strict';

    // Initialize RSL namespace
    window.RSL = window.RSL || {};

    /**
     * Skeleton Loader Component
     * Provides utilities for generating and managing skeleton loading states
     */
    window.RSL.Skeleton = {

        /**
         * Generate a text line skeleton
         * @param {Object} options - Configuration options
         * @param {string} options.width - Width class (full, 75, 50, 25) or custom CSS value
         * @param {string} options.animation - Animation type (shimmer, pulse, wave, static)
         * @returns {HTMLElement} Skeleton element
         */
        text: function(options) {
            options = options || {};
            var skeleton = document.createElement('div');
            skeleton.className = 'rsl-skeleton rsl-skeleton-text';

            // Add width class or custom width
            if (options.width) {
                if (['full', '75', '50', '25'].indexOf(options.width) !== -1) {
                    skeleton.classList.add('rsl-skeleton-text-' + options.width);
                } else {
                    skeleton.style.width = options.width;
                }
            }

            // Add animation variant
            this._addAnimation(skeleton, options.animation);

            return skeleton;
        },

        /**
         * Generate a title/heading skeleton
         * @param {Object} options - Configuration options
         * @param {string} options.size - Size (sm, md, lg)
         * @param {string} options.animation - Animation type
         * @returns {HTMLElement} Skeleton element
         */
        title: function(options) {
            options = options || {};
            var skeleton = document.createElement('div');
            skeleton.className = 'rsl-skeleton rsl-skeleton-title';

            if (options.size === 'sm') {
                skeleton.classList.add('rsl-skeleton-title-sm');
            } else if (options.size === 'lg') {
                skeleton.classList.add('rsl-skeleton-title-lg');
            }

            this._addAnimation(skeleton, options.animation);

            return skeleton;
        },

        /**
         * Generate a paragraph skeleton (multiple lines)
         * @param {Object} options - Configuration options
         * @param {number} options.lines - Number of lines (default: 3)
         * @param {string} options.animation - Animation type
         * @returns {HTMLElement} Skeleton element
         */
        paragraph: function(options) {
            options = options || {};
            var lines = options.lines || 3;
            var container = document.createElement('div');
            container.className = 'rsl-skeleton-paragraph';

            for (var i = 0; i < lines; i++) {
                var line = this.text({ animation: options.animation });
                if (i === lines - 1) {
                    line.style.width = '60%';
                }
                container.appendChild(line);
            }

            return container;
        },

        /**
         * Generate a circle skeleton (avatar, icon)
         * @param {Object} options - Configuration options
         * @param {string} options.size - Size (sm, md, lg, xl)
         * @param {string} options.animation - Animation type
         * @returns {HTMLElement} Skeleton element
         */
        circle: function(options) {
            options = options || {};
            var skeleton = document.createElement('div');
            skeleton.className = 'rsl-skeleton rsl-skeleton-circle';

            if (options.size && options.size !== 'md') {
                skeleton.classList.add('rsl-skeleton-circle-' + options.size);
            }

            this._addAnimation(skeleton, options.animation);

            return skeleton;
        },

        /**
         * Generate a rectangle skeleton (image, card)
         * @param {Object} options - Configuration options
         * @param {string} options.size - Size (sm, md, lg, xl)
         * @param {string} options.height - Custom height
         * @param {string} options.animation - Animation type
         * @returns {HTMLElement} Skeleton element
         */
        rectangle: function(options) {
            options = options || {};
            var skeleton = document.createElement('div');
            skeleton.className = 'rsl-skeleton rsl-skeleton-rect';

            if (options.size && options.size !== 'md') {
                skeleton.classList.add('rsl-skeleton-rect-' + options.size);
            }

            if (options.height) {
                skeleton.style.height = options.height;
            }

            this._addAnimation(skeleton, options.animation);

            return skeleton;
        },

        /**
         * Generate a button skeleton
         * @param {Object} options - Configuration options
         * @param {string} options.size - Size (sm, md, lg)
         * @param {string} options.animation - Animation type
         * @returns {HTMLElement} Skeleton element
         */
        button: function(options) {
            options = options || {};
            var skeleton = document.createElement('div');
            skeleton.className = 'rsl-skeleton rsl-skeleton-button';

            if (options.size && options.size !== 'md') {
                skeleton.classList.add('rsl-skeleton-button-' + options.size);
            }

            this._addAnimation(skeleton, options.animation);

            return skeleton;
        },

        /**
         * Generate a card skeleton
         * @param {Object} options - Configuration options
         * @param {boolean} options.avatar - Include avatar (default: true)
         * @param {number} options.lines - Number of text lines (default: 3)
         * @param {string} options.animation - Animation type
         * @returns {HTMLElement} Skeleton element
         */
        card: function(options) {
            options = options || {};
            var card = document.createElement('div');
            card.className = 'rsl-skeleton-card';

            // Header with avatar
            if (options.avatar !== false) {
                var header = document.createElement('div');
                header.className = 'rsl-skeleton-card-header';
                header.appendChild(this.circle({ size: 'lg', animation: options.animation }));

                var headerText = document.createElement('div');
                headerText.style.flex = '1';
                headerText.appendChild(this.text({ width: '70%', animation: options.animation }));
                headerText.appendChild(this.text({ width: '50%', animation: options.animation }));

                header.appendChild(headerText);
                card.appendChild(header);
            }

            // Body with text lines
            var body = document.createElement('div');
            body.className = 'rsl-skeleton-card-body';
            body.appendChild(this.paragraph({ lines: options.lines || 3, animation: options.animation }));
            card.appendChild(body);

            return card;
        },

        /**
         * Generate a list item skeleton
         * @param {Object} options - Configuration options
         * @param {boolean} options.avatar - Include avatar (default: true)
         * @param {string} options.animation - Animation type
         * @returns {HTMLElement} Skeleton element
         */
        listItem: function(options) {
            options = options || {};
            var item = document.createElement('div');
            item.className = 'rsl-skeleton-list-item';

            if (options.avatar !== false) {
                item.appendChild(this.circle({ animation: options.animation }));
            }

            var content = document.createElement('div');
            content.className = 'rsl-skeleton-list-item-content';
            content.appendChild(this.text({ width: '60%', animation: options.animation }));
            content.appendChild(this.text({ width: '40%', animation: options.animation }));

            item.appendChild(content);

            return item;
        },

        /**
         * Show skeleton in a container
         * @param {string|HTMLElement} target - Target element or selector
         * @param {Function} generator - Function that returns skeleton elements
         */
        show: function(target, generator) {
            var container = typeof target === 'string' ? document.querySelector(target) : target;
            if (!container) return;

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

            // Clear and add skeleton
            container.innerHTML = '';
            container.setAttribute('aria-busy', 'true');

            var skeleton = generator();
            if (skeleton) {
                if (skeleton instanceof Array) {
                    skeleton.forEach(function(el) {
                        container.appendChild(el);
                    });
                } else {
                    container.appendChild(skeleton);
                }
            }
        },

        /**
         * Hide skeleton and restore original content
         * @param {string|HTMLElement} target - Target element or selector
         */
        hide: function(target) {
            var container = typeof target === 'string' ? document.querySelector(target) : target;
            if (!container) return;

            var original = container.getAttribute('data-skeleton-original');
            if (original !== null) {
                container.innerHTML = original;
                container.removeAttribute('data-skeleton-original');
            }

            container.removeAttribute('aria-busy');
        },

        /**
         * Replace element with skeleton temporarily
         * @param {string|HTMLElement} target - Target element or selector
         * @param {number} duration - Duration in milliseconds (optional)
         * @param {Function} callback - Callback after duration (optional)
         */
        replace: function(target, duration, callback) {
            var element = typeof target === 'string' ? document.querySelector(target) : target;
            if (!element) return;

            var skeleton = this._createMatchingSkeleton(element);
            if (!skeleton) return;

            element.style.display = 'none';
            element.parentNode.insertBefore(skeleton, element);

            if (duration) {
                setTimeout(function() {
                    skeleton.parentNode.removeChild(skeleton);
                    element.style.display = '';
                    if (callback) callback();
                }, duration);
            }

            return skeleton;
        },

        /**
         * Create a skeleton that matches an element's dimensions
         * @private
         */
        _createMatchingSkeleton: function(element) {
            var skeleton = document.createElement('div');
            skeleton.className = 'rsl-skeleton';
            skeleton.style.width = element.offsetWidth + 'px';
            skeleton.style.height = element.offsetHeight + 'px';
            skeleton.setAttribute('data-skeleton-placeholder', 'true');
            return skeleton;
        },

        /**
         * Add animation class to skeleton
         * @private
         */
        _addAnimation: function(element, animation) {
            if (animation === 'pulse') {
                element.classList.remove('rsl-skeleton-shimmer');
                element.classList.add('rsl-skeleton-pulse');
            } else if (animation === 'wave') {
                element.classList.remove('rsl-skeleton-shimmer');
                element.classList.add('rsl-skeleton-wave');
            } else if (animation === 'static' || animation === 'none') {
                element.classList.add('rsl-skeleton-static');
            }
            // Default is shimmer (no additional class needed)
        }
    };

    // Auto-initialize skeletons with data attributes
    document.addEventListener('DOMContentLoaded', function() {
        var skeletons = document.querySelectorAll('[data-skeleton]');

        skeletons.forEach(function(element) {
            var type = element.getAttribute('data-skeleton');
            var animation = element.getAttribute('data-skeleton-animation');
            var size = element.getAttribute('data-skeleton-size');
            var lines = element.getAttribute('data-skeleton-lines');
            var width = element.getAttribute('data-skeleton-width');

            var skeleton;
            var options = { animation: animation, size: size };

            switch(type) {
                case 'text':
                    skeleton = RSL.Skeleton.text({ animation: animation, width: width });
                    break;
                case 'title':
                    skeleton = RSL.Skeleton.title(options);
                    break;
                case 'paragraph':
                    options.lines = lines ? parseInt(lines) : 3;
                    skeleton = RSL.Skeleton.paragraph(options);
                    break;
                case 'circle':
                    skeleton = RSL.Skeleton.circle(options);
                    break;
                case 'rectangle':
                    skeleton = RSL.Skeleton.rectangle(options);
                    break;
                case 'button':
                    skeleton = RSL.Skeleton.button(options);
                    break;
                case 'card':
                    skeleton = RSL.Skeleton.card(options);
                    break;
                case 'list-item':
                    skeleton = RSL.Skeleton.listItem(options);
                    break;
            }

            if (skeleton) {
                element.appendChild(skeleton);
            }
        });
    });

})();
