class CustomSidebar extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
    }

    connectedCallback() {
        this.render();
        this.addEventListeners();
    }

    static get observedAttributes() {
        return ['current-project', 'current-tool'];
    }

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

    render() {
        const currentProject = this.getAttribute('current-project') || 'Espace Codage - Projet 1';
        const currentTool = this.getAttribute('current-tool') || '';

        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    width: 280px;
                    height: 100%;
                    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
                    color: white;
                    padding: 1.5rem;
                    box-sizing: border-box;
                }
                
                .logo {
                    display: flex;
                    align-items: center;
                    margin-bottom: 2rem;
                    font-weight: 600;
                    font-size: 1.25rem;
                }
                
                .logo i {
                    margin-right: 0.75rem;
                }
                
                .section-title {
                    font-size: 0.75rem;
                    text-transform: uppercase;
                    letter-spacing: 0.05em;
                    color: #94a3b8;
                    margin: 1.5rem 0 0.75rem;
                }
                
                .project-item, .tool-item {
                    display: flex;
                    align-items: center;
                    padding: 0.5rem 0.75rem;
                    border-radius: 0.375rem;
                    margin-bottom: 0.25rem;
                    cursor: pointer;
                    transition: all 0.2s;
                }
                
                .project-item:hover, .tool-item:hover {
                    background-color: #334155;
                }
                
                .project-item.active {
                    background-color: #3b82f6;
                }
                
                .tool-item.active {
                    background-color: #334155;
                    border-left: 3px solid #3b82f6;
                }
                
                .project-item i, .tool-item i {
                    margin-right: 0.75rem;
                    width: 20px;
                    text-align: center;
                }
            </style>
            
            <div class="logo">
                <i data-feather="code"></i>
                <span>CodeWhale</span>
            </div>
            
            <div class="section-title">Projets</div>
            <div class="project-item ${currentProject === 'Espace Codage - Projet 1' ? 'active' : ''}" data-project="Espace Codage - Projet 1">
                <i data-feather="folder"></i>
                <span>Espace Codage - Projet 1</span>
            </div>
            <div class="project-item ${currentProject === 'Espace Codage - Projet 2' ? 'active' : ''}" data-project="Espace Codage - Projet 2">
                <i data-feather="folder"></i>
                <span>Espace Codage - Projet 2</span>
            </div>
            
            <div class="section-title">Outils</div>
            <div class="tool-item ${currentTool === 'La Baleine' ? 'active' : ''}" data-tool="La Baleine">
                <i data-feather="cpu"></i>
                <span>La Baleine</span>
            </div>
            <div class="tool-item ${currentTool === 'Rosalinda' ? 'active' : ''}" data-tool="Rosalinda">
                <i data-feather="feather"></i>
                <span>Rosalinda</span>
            </div>
            <div class="tool-item ${currentTool === 'CodeExplainer' ? 'active' : ''}" data-tool="CodeExplainer">
                <i data-feather="book-open"></i>
                <span>CodeExplainer</span>
            </div>
            <div class="tool-item ${currentTool === 'ThemeGenerator' ? 'active' : ''}" data-tool="ThemeGenerator">
                <i data-feather="image"></i>
                <span>ThemeGenerator</span>
            </div>
        `;
        
        feather.replace();
    }

    addEventListeners() {
        this.shadowRoot.addEventListener('click', (e) => {
            const projectItem = e.target.closest('.project-item');
            const toolItem = e.target.closest('.tool-item');
            
            if (projectItem) {
                const project = projectItem.getAttribute('data-project');
                window.appState.currentProject = project;
                window.appState.currentTool = null;
                window.appState.updateUI();
            }
            
            if (toolItem) {
                const tool = toolItem.getAttribute('data-tool');
                window.appState.currentTool = tool;
                
                // Simulate generating some code when a tool is selected
                if (tool === 'ThemeGenerator') {
                    window.appState.generatedCode = `body {\n  background-color: #f8fafc;\n  color: #1e293b;\n}\n\n.button {\n  background-color: #3b82f6;\n  color: white;\n}`;
                    window.appState.codeExplanation = window.appState.generateCodeExplanation(window.appState.generatedCode);
                    window.appState.generatedImage = window.appState.generateImageFromCode(window.appState.generatedCode);
                }
                
                window.appState.updateUI();
            }
        });
    }
}

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