class CustomAccordion extends HTMLElement {
    static get observedAttributes() {
        return ['title', 'initially-open'];
    }

    constructor() {
        super();
        this.isOpen = this.getAttribute('initially-open') === 'true';
        this.title = this.getAttribute('title') || 'Titre de l\'accordéon';
    }

    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.render();
        this.initEventListeners();
    }

    attributeChangedCallback(name, oldValue, newValue) {
        if (name === 'title' && oldValue !== newValue) {
            const titleElement = this.shadowRoot.querySelector('.accordion-title');
            if (titleElement) {
                titleElement.textContent = newValue;
            }
        }
        
        if (name === 'initially-open' && oldValue !== newValue) {
            this.isOpen = newValue === 'true';
            this.toggleContent();
        }
    }

    render() {
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    margin-bottom: 1rem;
                }
                
                .accordion-item {
                    background: rgba(26, 44, 66, 0.8);
                    backdrop-filter: blur(10px);
                    border: 1px solid rgba(45, 74, 110, 0.5);
                    border-radius: 12px;
                    overflow: hidden;
                    transition: all 0.3s ease;
                }
                
                .accordion-item:hover {
                    border-color: rgba(76, 175, 80, 0.5);
                    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
                }
                
                .accordion-item.open {
                    border-color: rgba(76, 175, 80, 0.8);
                    box-shadow: 0 10px 30px rgba(76, 175, 80, 0.2);
                }
                
                .accordion-header {
                    padding: 1.5rem;
                    cursor: pointer;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    transition: background-color 0.3s ease;
                }
                
                .accordion-header:hover {
                    background: rgba(76, 175, 80, 0.05);
                }
                
                .accordion-title {
                    font-family: 'Space Grotesk', sans-serif;
                    font-size: 1.3rem;
                    font-weight: 600;
                    color: #E3F2FD;
                    margin: 0;
                    flex: 1;
                }
                
                .accordion-icon {
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                    background: linear-gradient(135deg, rgba(76, 175, 80, 0.2), rgba(33, 150, 243, 0.2));
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #4CAF50;
                    transition: all 0.3s ease;
                    flex-shrink: 0;
                    margin-left: 1rem;
                }
                
                .accordion-content {
                    padding: 0 1.5rem;
                    max-height: 0;
                    overflow: hidden;
                    opacity: 0;
                    transform: translateY(-10px);
                    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                }
                
                .accordion-content.open {
                    padding: 0 1.5rem 1.5rem;
                    max-height: 1000px;
                    opacity: 1;
                    transform: translateY(0);
                }
                
                .content-inner {
                    color: #90CAF9;
                    line-height: 1.8;
                    padding-top: 1rem;
                    border-top: 1px solid rgba(255, 255, 255, 0.1);
                }
                
                .content-inner ::slotted(p) {
                    margin-bottom: 1rem;
                    color: #90CAF9;
                }
                
                .content-inner ::slotted(ul),
                .content-inner ::slotted(ol) {
                    padding-left: 1.5rem;
                    margin: 1rem 0;
                }
                
                .content-inner ::slotted(li) {
                    margin-bottom: 0.5rem;
                    color: #64B5F6;
                }
                
                .content-inner ::slotted(code) {
                    background: rgba(0, 0, 0, 0.2);
                    padding: 0.2rem 0.5rem;
                    border-radius: 4px;
                    font-family: 'Courier New', monospace;
                    font-size: 0.9em;
                    color: #00BFA5;
                }
                
                .content-inner ::slotted(strong) {
                    color: #E3F2FD;
                    font-weight: 600;
                }
                
                .content-inner ::slotted(em) {
                    color: #64B5F6;
                    font-style: italic;
                }
                
                .icon-rotate {
                    transform: rotate(180deg);
                }
                
                @media (max-width: 768px) {
                    .accordion-header {
                        padding: 1.25rem;
                    }
                    
                    .accordion-title {
                        font-size: 1.1rem;
                    }
                    
                    .accordion-content {
                        padding: 0 1.25rem;
                    }
                    
                    .accordion-content.open {
                        padding: 0 1.25rem 1.25rem;
                    }
                }
            </style>
            
            <div class="accordion-item ${this.isOpen ? 'open' : ''}">
                <div class="accordion-header" id="accordionHeader">
                    <h3 class="accordion-title">${this.title}</h3>
                    <div class="accordion-icon" id="accordionIcon">
                        <i data-feather="${this.isOpen ? 'chevron-up' : 'chevron-down'}"></i>
                    </div>
                </div>
                
                <div class="accordion-content ${this.isOpen ? 'open' : ''}" id="accordionContent">
                    <div class="content-inner">
                        <slot></slot>
                    </div>
                </div>
            </div>
        `;
        
        // Initialiser les icônes Feather
        if (typeof feather !== 'undefined') {
            feather.replace();
        }
    }

    initEventListeners() {
        const header = this.shadowRoot.querySelector('#accordionHeader');
        const icon = this.shadowRoot.querySelector('#accordionIcon i');
        
        header.addEventListener('click', () => {
            this.toggle();
            
            // Animation de l'icône
            if (icon) {
                if (this.isOpen) {
                    icon.setAttribute('data-feather', 'chevron-up');
                } else {
                    icon.setAttribute('data-feather', 'chevron-down');
                }
                feather.replace();
            }
        });

        // Animation d'entrée
        setTimeout(() => {
            const item = this.shadowRoot.querySelector('.accordion-item');
            item.style.opacity = '0';
            item.style.transform = 'translateY(10px)';
            item.style.transition = 'all 0.4s ease';
            
            setTimeout(() => {
                item.style.opacity = '1';
                item.style.transform = 'translateY(0)';
            }, 100);
        }, 100);
    }

    toggle() {
        this.isOpen = !this.isOpen;
        const content = this.shadowRoot.querySelector('#accordionContent');
        const item = this.shadowRoot.querySelector('.accordion-item');
        const icon = this.shadowRoot.querySelector('#accordionIcon i');
        
        if (this.isOpen) {
            content.classList.add('open');
            item.classList.add('open');
            if (icon) {
                icon.style.transform = 'rotate(180deg)';
            }
            
            // Émettre un événement personnalisé
            this.dispatchEvent(new CustomEvent('accordion-open', {
                detail: { title: this.title },
                bubbles: true,
                composed: true
            }));
        } else {
            content.classList.remove('open');
            item.classList.remove('open');
            if (icon) {
                icon.style.transform = 'rotate(0)';
            }
            
            this.dispatchEvent(new CustomEvent('accordion-close', {
                detail: { title: this.title },
                bubbles: true,
                composed: true
            }));
        }
    }

    open() {
        if (!this.isOpen) {
            this.toggle();
        }
    }

    close() {
        if (this.isOpen) {
            this.toggle();
        }
    }

    // Méthode publique pour initialiser l'état
    init() {
        this.toggleContent();
    }

    toggleContent() {
        const content = this.shadowRoot.querySelector('#accordionContent');
        const item = this.shadowRoot.querySelector('.accordion-item');
        
        if (this.isOpen) {
            content?.classList.add('open');
            item?.classList.add('open');
        } else {
            content?.classList.remove('open');
            item?.classList.remove('open');
        }
    }
}

customElements.define('custom-accordion', CustomAccordion);