// Cookie Banner Management
(function() {
    'use strict';

    // Cookie Banner Class
    class CookieBanner {
        constructor() {
            this.cookieKey = 'odoo_expertos_cookies';
            this.banner = null;
            this.init();
        }

        init() {
            // Check if user has already made a choice
            const cookieChoice = localStorage.getItem(this.cookieKey);
            
            // If no choice has been made, show the banner
            if (!cookieChoice) {
                this.createBanner();
                // Use requestAnimationFrame for better timing
                requestAnimationFrame(() => {
                    requestAnimationFrame(() => {
                        this.showBanner();
                    });
                });
            }
        }

        createBanner() {
            // Create banner HTML
            const bannerHTML = `
                <div class="cookie-banner" id="cookieBanner">
                    <div class="cookie-banner-content">
                        <div class="cookie-banner-text">
                            <h3>Política de Cookies</h3>
                            <p>Utilizamos cookies para mejorar tu experiencia de aprendizaje en nuestra plataforma de formación Odoo. 
                               Las cookies nos ayudan a personalizar el contenido, recordar tu progreso y mejorar nuestros cursos.</p>
                        </div>
                        <div class="cookie-banner-buttons">
                            <button class="cookie-btn cookie-btn-accept" onclick="cookieBannerInstance.acceptCookies()">
                                Aceptar
                            </button>
                            <button class="cookie-btn cookie-btn-reject" onclick="cookieBannerInstance.rejectCookies()">
                                Rechazar
                            </button>
                            <button class="cookie-btn cookie-btn-configure" onclick="cookieBannerInstance.configureCookies()">
                                Configurar
                            </button>
                        </div>
                    </div>
                </div>
            `;

            // Add banner to the page
            document.body.insertAdjacentHTML('beforeend', bannerHTML);
            this.banner = document.getElementById('cookieBanner');
            
            // Add CSS for cookie banner
            this.addBannerStyles();
        }

        showBanner() {
            if (this.banner) {
                this.banner.classList.add('active');
            }
        }

        hideBanner() {
            if (this.banner) {
                this.banner.classList.remove('active');
                // Remove banner from DOM after animation
                setTimeout(() => {
                    if (this.banner && this.banner.parentNode) {
                        this.banner.parentNode.removeChild(this.banner);
                    }
                }, 500);
            }
        }

        acceptCookies() {
            this.saveCookieChoice({
                accepted: true,
                analytics: true,
                marketing: true,
                functional: true,
                timestamp: new Date().toISOString()
            });
            this.hideBanner();
            this.enableCookies();
        }

        rejectCookies() {
            this.saveCookieChoice({
                accepted: false,
                analytics: false,
                marketing: false,
                functional: false,
                timestamp: new Date().toISOString()
            });
            this.hideBanner();
            this.disableCookies();
        }

        configureCookies() {
            // Create configuration modal
            const configHTML = `
                <div class="cookie-config-modal" id="cookieConfigModal">
                    <div class="cookie-config-content">
                        <h2>Configurar Cookies</h2>
                        <div class="cookie-config-section">
                            <h3>Cookies Esenciales</h3>
                            <p>Necesarias para el funcionamiento básico del sitio.</p>
                            <label class="cookie-switch">
                                <input type="checkbox" checked disabled>
                                <span class="slider"></span>
                            </label>
                        </div>
                        <div class="cookie-config-section">
                            <h3>Cookies de Análisis</h3>
                            <p>Nos ayudan a entender cómo utilizas nuestra plataforma de formación.</p>
                            <label class="cookie-switch">
                                <input type="checkbox" id="analyticsCookie">
                                <span class="slider"></span>
                            </label>
                        </div>
                        <div class="cookie-config-section">
                            <h3>Cookies de Marketing</h3>
                            <p>Utilizadas para mostrarte cursos relevantes.</p>
                            <label class="cookie-switch">
                                <input type="checkbox" id="marketingCookie">
                                <span class="slider"></span>
                            </label>
                        </div>
                        <div class="cookie-config-buttons">
                            <button class="cookie-btn cookie-btn-accept" onclick="cookieBannerInstance.saveConfiguration()">
                                Guardar Preferencias
                            </button>
                            <button class="cookie-btn cookie-btn-reject" onclick="cookieBannerInstance.closeConfiguration()">
                                Cancelar
                            </button>
                        </div>
                    </div>
                </div>
            `;

            document.body.insertAdjacentHTML('beforeend', configHTML);
            
            // Add styles for modal
            const style = document.createElement('style');
            style.textContent = `
                .cookie-config-modal {
                    position: fixed;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background: rgba(0,0,0,0.8);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    z-index: 10000;
                    animation: fadeIn 0.3s ease;
                }
                
                .cookie-config-content {
                    background: var(--bg-dark);
                    border: 2px solid var(--primary-color);
                    border-radius: 10px;
                    padding: 2rem;
                    max-width: 500px;
                    width: 90%;
                    max-height: 80vh;
                    overflow-y: auto;
                    animation: slideUp 0.3s ease;
                }
                
                .cookie-config-content h2 {
                    color: var(--primary-color);
                    margin-bottom: 1.5rem;
                }
                
                .cookie-config-section {
                    margin-bottom: 1.5rem;
                    padding-bottom: 1.5rem;
                    border-bottom: 1px solid rgba(255,107,53,0.2);
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                }
                
                .cookie-config-section:last-of-type {
                    border-bottom: none;
                }
                
                .cookie-config-section h3 {
                    color: var(--white);
                    font-size: 1.1rem;
                    margin-bottom: 0.5rem;
                }
                
                .cookie-config-section p {
                    color: var(--text-color);
                    font-size: 0.9rem;
                    margin-bottom: 0;
                    flex: 1;
                    margin-right: 1rem;
                }
                
                .cookie-switch {
                    position: relative;
                    display: inline-block;
                    width: 50px;
                    height: 24px;
                }
                
                .cookie-switch input {
                    opacity: 0;
                    width: 0;
                    height: 0;
                }
                
                .slider {
                    position: absolute;
                    cursor: pointer;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background-color: var(--light-bg);
                    transition: .4s;
                    border-radius: 24px;
                }
                
                .slider:before {
                    position: absolute;
                    content: "";
                    height: 16px;
                    width: 16px;
                    left: 4px;
                    bottom: 4px;
                    background-color: white;
                    transition: .4s;
                    border-radius: 50%;
                }
                
                input:checked + .slider {
                    background-color: var(--primary-color);
                }
                
                input:checked + .slider:before {
                    transform: translateX(26px);
                }
                
                input:disabled + .slider {
                    opacity: 0.6;
                    cursor: not-allowed;
                }
                
                .cookie-config-buttons {
                    margin-top: 2rem;
                    display: flex;
                    gap: 1rem;
                    justify-content: center;
                }
                
                @keyframes fadeIn {
                    from { opacity: 0; }
                    to { opacity: 1; }
                }
                
                @keyframes slideUp {
                    from { transform: translateY(20px); opacity: 0; }
                    to { transform: translateY(0); opacity: 1; }
                }
            `;
            document.head.appendChild(style);
        }

        saveConfiguration() {
            const analytics = document.getElementById('analyticsCookie').checked;
            const marketing = document.getElementById('marketingCookie').checked;
            
            this.saveCookieChoice({
                accepted: true,
                analytics: analytics,
                marketing: marketing,
                functional: true,
                timestamp: new Date().toISOString()
            });
            
            this.closeConfiguration();
            this.hideBanner();
            
            // Enable/disable cookies based on preferences
            if (analytics || marketing) {
                this.enableCookies();
            } else {
                this.disableCookies();
            }
        }

        closeConfiguration() {
            const modal = document.getElementById('cookieConfigModal');
            if (modal && modal.parentNode) {
                modal.parentNode.removeChild(modal);
            }
        }

        saveCookieChoice(choice) {
            localStorage.setItem(this.cookieKey, JSON.stringify(choice));
        }
        
        addBannerStyles() {
            const style = document.createElement('style');
            style.textContent = `
                .cookie-banner {
                    position: fixed;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    background: #1a1a1a;
                    border-top: 3px solid #FF6B35;
                    padding: 1.5rem;
                    transform: translateY(100%);
                    transition: transform 0.5s ease;
                    z-index: 9999;
                    box-shadow: 0 -4px 20px rgba(0,0,0,0.5);
                }
                
                .cookie-banner.active {
                    transform: translateY(0);
                }
                
                .cookie-banner-content {
                    max-width: 1200px;
                    margin: 0 auto;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    flex-wrap: wrap;
                    gap: 1rem;
                }
                
                .cookie-banner-text {
                    flex: 1;
                    min-width: 300px;
                }
                
                .cookie-banner-text h3 {
                    color: #FF6B35;
                    margin: 0 0 0.5rem 0;
                    font-size: 1.2rem;
                }
                
                .cookie-banner-text p {
                    color: #e0e0e0;
                    margin: 0;
                    font-size: 0.9rem;
                    line-height: 1.5;
                }
                
                .cookie-banner-text a {
                    color: #FF6B35;
                    text-decoration: underline;
                }
                
                .cookie-banner-buttons {
                    display: flex;
                    gap: 1rem;
                    flex-wrap: wrap;
                }
                
                .cookie-btn {
                    padding: 0.75rem 1.5rem;
                    border: none;
                    border-radius: 5px;
                    font-size: 0.9rem;
                    font-weight: 600;
                    cursor: pointer;
                    transition: all 0.3s ease;
                    text-transform: uppercase;
                    letter-spacing: 0.5px;
                }
                
                .cookie-btn-accept {
                    background: #FF6B35;
                    color: white;
                }
                
                .cookie-btn-accept:hover {
                    background: #e55a28;
                    transform: translateY(-2px);
                    box-shadow: 0 4px 10px rgba(255,107,53,0.4);
                }
                
                .cookie-btn-reject {
                    background: transparent;
                    color: #FF6B35;
                    border: 2px solid #FF6B35;
                }
                
                .cookie-btn-reject:hover {
                    background: #FF6B35;
                    color: white;
                }
                
                .cookie-btn-configure {
                    background: #333;
                    color: #e0e0e0;
                }
                
                .cookie-btn-configure:hover {
                    background: #444;
                }
                
                @media (max-width: 768px) {
                    .cookie-banner-content {
                        flex-direction: column;
                        text-align: center;
                    }
                    
                    .cookie-banner-buttons {
                        justify-content: center;
                        width: 100%;
                    }
                    
                    .cookie-btn {
                        font-size: 0.8rem;
                        padding: 0.6rem 1.2rem;
                    }
                }
            `;
            document.head.appendChild(style);
        }

        enableCookies() {
            // Here you would enable your analytics, marketing cookies etc.
            console.log('Cookies enabled');
        }

        disableCookies() {
            // Here you would disable non-essential cookies
            console.log('Non-essential cookies disabled');
        }
    }

    // Initialize cookie banner when DOM is ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', function() {
            window.cookieBannerInstance = new CookieBanner();
        });
    } else {
        window.cookieBannerInstance = new CookieBanner();
    }
})();