class CustomSidebar extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .sidebar {
                    background: linear-gradient(to bottom, #3b82f6, #8b5cf6);
                    color: white;
                    transition: width 0.3s;
                    display: flex;
                    flex-direction: column;
                }
                .sidebar-header {
                    padding: 1rem;
                    border-bottom: 1px solid rgba(255,255,255,0.1);
                }
                .module-btn {
                    transition: all 0.2s;
                    display: flex;
                    align-items: center;
                    padding: 0.75rem;
                    border-radius: 0.5rem;
                    margin-bottom: 0.25rem;
                }
                .module-btn:hover {
                    background: rgba(255,255,255,0.1);
                }
                .module-btn.active {
                    background: rgba(255,255,255,0.2);
                    border-left: 4px solid white;
                }
                .settings-select {
                    background: white;
                    color: #1f2937;
                    border-radius: 0.25rem;
                    padding: 0.5rem;
                    font-size: 0.875rem;
                    width: 100%;
                }
            </style>
            <div class="sidebar w-72">
                <div class="sidebar-header">
                    <div class="flex items-center gap-3 mb-4">
                        <div class="w-10 h-10 bg-white rounded-lg flex items-center justify-center font-bold text-blue-600">CC</div>
                        <div>
                            <h1 class="font-bold">CodeCraft</h1>
                            <p class="text-xs opacity-80">Studio Pro</p>
                        </div>
                    </div>
                    <button id="toggle-sidebar" class="text-blue-100 hover:text-white">
                        <i data-feather="x"></i>
                    </button>
                </div>

                <div class="flex-1 overflow-y-auto p-3 space-y-2">
                    <button data-module="generation" class="module-btn active">
                        <span class="text-xl mr-2">⚡</span>
                        <span class="font-medium text-sm">Génération Rapide</span>
                    </button>
                    <button data-module="pricing" class="module-btn">
                        <span class="text-xl mr-2">💰</span>
                        <span class="font-medium text-sm">Pricing SaaS</span>
                    </button>
                    <button data-module="landing" class="module-btn">
                        <span class="text-xl mr-2">🚀</span>
                        <span class="font-medium text-sm">Landing Pro</span>
                    </button>
                    <button data-module="dashboard" class="module-btn">
                        <span class="text-xl mr-2">📊</span>
                        <span class="font-medium text-sm">Dashboard Pro</span>
                    </button>
                    <button data-module="boutique" class="module-btn">
                        <span class="text-xl mr-2">🛍️</span>
                        <span class="font-medium text-sm">Boutique Pro</span>
                    </button>
                    <button data-module="video" class="module-btn">
                        <span class="text-xl mr-2">🎬</span>
                        <span class="font-medium text-sm">Script Vidéo</span>
                    </button>
                </div>

                <div class="p-4 border-t border-blue-500 space-y-3">
                    <div>
                        <label class="text-xs opacity-80">Thème</label>
                        <select class="settings-select mt-1">
                            <option>Brand Blue</option>
                            <option>Dark Mode</option>
                            <option>Light Mode</option>
                        </select>
                    </div>
                    <div>
                        <label class="text-xs opacity-80">Industrie</label>
                        <select class="settings-select mt-1">
                            <option>App Hosting</option>
                            <option>SaaS</option>
                            <option>E-commerce</option>
                            <option>Agence</option>
                        </select>
                    </div>
                    <button class="w-full bg-white bg-opacity-20 hover:bg-opacity-30 p-2 rounded-lg text-sm font-medium transition-all flex items-center justify-center gap-2">
                        <i data-feather="settings"></i>
                        <span>Configuration</span>
                    </button>
                </div>
            </div>
        `;
    }

    connectedCallback() {
        this.shadowRoot.querySelector('#toggle-sidebar').addEventListener('click', () => {
            const sidebar = this.shadowRoot.querySelector('.sidebar');
            sidebar.classList.toggle('w-72');
            sidebar.classList.toggle('w-20');
            
            // Toggle text visibility
            this.shadowRoot.querySelectorAll('.module-btn span:not(:first-child)').forEach(el => {
                el.classList.toggle('hidden');
            });
            
            this.shadowRoot.querySelectorAll('.settings-select, .sidebar-header > div > div:last-child, button span').forEach(el => {
                el.classList.toggle('hidden');
            });
        });

        // Initialize feather icons
        feather.replace();
    }
}

customElements.define('custom-sidebar', CustomSidebar);