class CustomCard extends HTMLElement {
    static get observedAttributes() {
        return ['title', 'icon', 'color'];
    }

    constructor() {
        super();
        this.title = this.getAttribute('title') || 'Titre de la carte';
        this.icon = this.getAttribute('icon') || 'info';
        this.color = this.getAttribute('color') || 'primary';
    }

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

    attributeChangedCallback(name, oldValue, newValue) {
        if (oldValue !== newValue) {
            this[name] = newValue;
            this.render();
        }
    }

    getColorScheme() {
        const schemes = {
            primary: {
                bg: 'rgba(46, 125, 50, 0.1)',
                border: 'rgba(46, 125, 50, 0.3)',
                gradient: 'linear-gradient(135deg, rgba(46, 125, 50, 0.2), rgba(76, 175, 80, 0.1))',
                icon: '#4CAF50'
            },
            secondary: {
                bg: 'rgba(33, 150, 243, 0.1)',
                border: 'rgba(33, 150, 243, 0.3)',
                gradient: 'linear-gradient(135deg, rgba(33, 150, 243, 0.2), rgba(21, 101, 192, 0.1))',
                icon: '#2196F3'
            },
            accent: {
                bg: 'rgba(0, 191, 165, 0.1)',
                border: 'rgba(0, 191, 165, 0.3)',
                gradient: 'linear-gradient(135deg, rgba(0, 191, 165, 0.2), rgba(0, 150, 136, 0.1))',
                icon: '#00BFA5'
            }
        };
        
        return schemes[this.color] || schemes.primary;
    }

    render() {
        const colors = this.getColorScheme();
        
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    --card-bg: ${colors.bg};
                    --card-border: ${colors.border};
                    --card-gradient: ${colors.gradient};
                    --card-icon-color: ${colors.icon};
                }
                
                .card {
                    background: var(--card-bg);
                    backdrop-filter: blur(10px);
                    border: 1px solid var(--card-border);
                    border-radius: 20px;
                    padding: 2rem;
                    position: relative;
                    overflow: hidden;
                    transition: all 0.3s ease;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                }
                
                .card::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    height: 4px;
                    background: var(--card-gradient);
                    border-radius: 20px 20px 0 0;
                }
                
                .card:hover {
                    transform: translateY(-5px);
                    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
                    border-color: var(--card-icon-color);
                }
                
                .card-header {
                    display: flex;
                    align-items: center;
                    margin-bottom: 1.5rem;
                }
                
                .card-icon {
                    width: 60px;
                    height: 60px;
                    border-radius: 50%;
                    background: var(--card-gradient);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-right: 1.5rem;
                    flex-shrink: 0;
                    color: white;
                    font-size: 1.5rem;
                    position: relative;
                    overflow: hidden;
                }
                
                .card-icon::after {
                    content: '';
                    position: absolute;
                    top: -50%;
                    left: -50%;
                    width: 200%;
                    height: 200%;
                    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
                    opacity: 0;
                    transition: opacity 0.3s ease;
                }
                
                .card:hover .card-icon::after {
                    opacity: 1;
                }
                
                .card-title {
                    font-family: 'Space Grotesk', sans-serif;
                    font-size: 1.8rem;
                    font-weight: 600;
                    color: #E3F2FD;
                    margin: 0;
                    flex: 1;
                }
                
                .card-content {
                    color: #90CAF9;
                    line-height: 1.8;
                    flex: 1;
                }
                
                .card-content ::slotted(p) {
                    margin-bottom: 1rem;
                    color: #90CAF9;
                }
                
                .card-content ::slotted(ul) {
                    padding-left: 1.5rem;
                    margin: 1rem 0;
                }
                
                .card-content ::slotted(li) {
                    margin-bottom: 0.5rem;
                    color: #64B5F6;
                }
                
                .card-footer {
                    margin-top: 2rem;
                    padding-top: 1.5rem;
                    border-top: 1px solid rgba(255, 255, 255, 0.1);
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }
                
                .card-tags {
                    display: flex;
                    gap: 0.5rem;
                    flex-wrap: wrap;
                }
                
                .card-tag {
                    background: rgba(255, 255, 255, 0.05);
                    border: 1px solid rgba(255, 255, 255, 0.1);
                    border-radius: 20px;
                    padding: 0.25rem 1rem;
                    font-size: 0.8rem;
                    color: #64B5F6;
                    transition: all 0.3s ease;
                }
                
                .card-tag:hover {
                    background: var(--card-icon-color);
                    color: white;
                    transform: scale(1.05);
                }
                
                .card-action {
                    background: var(--card-icon-color);
                    color: white;
                    border: none;
                    padding: 0.75rem 1.5rem;
                    border-radius: 25px;
                    font-family: 'Inter', sans-serif;
                    font-weight: 500;
                    cursor: pointer;
                    transition: all 0.3s ease;
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                }
                
                .card-action:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
                }
                
                .card-action:active {
                    transform: translateY(0);
                }
                
                .card-decoration {
                    position: absolute;
                    top: 0;
                    right: 0;
                    width: 100px;
                    height: 100px;
                    background: radial-gradient(circle, var(--card-icon-color) 0%, transparent 70%);
                    opacity: 0.05;
                    border-radius: 50%;
                    transform: translate(30%, -30%);
                }
                
                @media (max-width: 768px) {
                    .card {
                        padding: 1.5rem;
                    }
                    
                    .card-header {
                        flex-direction: column;
                        text-align: center;
                    }
                    
                    .card-icon {
                        margin-right: 0;
                        margin-bottom: 1rem;
                    }
                    
                    .card-title {
                        font-size: 1.5rem;
                    }
                    
                    .card-footer {
                        flex-direction: column;
                        gap: 1rem;
                    }
                    
                    .card-tags {
                        justify-content: center;
                    }
                }
            </style>
            
            <article class="card">
                <div class="card-decoration"></div>
                
                <div class="card-header">
                    <div class="card-icon">
                        <i data-feather="${this.icon}"></i>
                    </div>
                    <h3 class="card-title">${this.title}</h3>
                </div>
                
                <div class="card-content">
                    <slot></slot>
                </div>
                
                <div class="card-footer">
                    <div class="card-tags">
                        <span class="card-tag">Photosynthèse</span>
                        <span class="card-tag">Biologie</span>
                        <span class="card-tag">${this.color === 'primary' ? 'Phase Lumineuse' : 'Cycle de Calvin'}</span>
                    </div>
                    
                    <button class="card-action" id="learnMore">
                        <span>En savoir plus</span>
                        <i data-feather="arrow-right"></i>
                    </button>
                </div>
            </article>
        `;
        
        // Initialiser les icônes Feather
        if (typeof feather !== 'undefined') {
            feather.replace();
        }
    }

    initInteractions() {
        const card = this.shadowRoot.querySelector('.card');
        const learnMoreBtn = this.shadowRoot.querySelector('#learnMore');
        
        // Animation d'entrée
        setTimeout(() => {
            card.style.opacity = '0';
            card.style.transform = 'translateY(20px)';
            card.style.transition = 'all 0.6s ease';
            
            setTimeout(() => {
                card.style.opacity = '1';
                card.style.transform = 'translateY(0)';
            }, 100);
        }, 100);

        // Bouton "En savoir plus"
        if (learnMoreBtn) {
            learnMoreBtn.addEventListener('click', () => {
                this.dispatchEvent(new CustomEvent('card-action', {
                    detail: { 
                        action: 'learn-more',
                        title: this.title,
                        color: this.color
                    },
                    bubbles: true,
                    composed: true
                }));
                
                // Animation de clic
                learnMoreBtn.style.transform = 'scale(0.95)';
                setTimeout(() => {
                    learnMoreBtn.style.transform = '';
                }, 150);
            });
        }

        // Effets de survol
        card.addEventListener('mouseenter', () => {
            const icon = this.shadowRoot.querySelector('.card-icon i');
            if (icon) {
                icon.style.transform = 'rotate(15deg) scale(1.1)';
                icon.style.transition = 'transform 0.3s ease';
            }
        });

        card.addEventListener('mouseleave', () => {
            const icon = this.shadowRoot.querySelector('.card-icon i');
            if (icon) {
                icon.style.transform = 'rotate(0) scale(1)';
            }
        });

        // Gestion des tags
        const tags = this.shadowRoot.querySelectorAll('.card-tag');
        tags.forEach(tag => {
            tag.addEventListener('click', () => {
                this.dispatchEvent(new CustomEvent('tag-click', {
                    detail: { tag: tag.textContent },
                    bubbles: true,
                    composed: true
                }));
            });
        });
    }
}

customElements.define('custom-card', CustomCard);