class CustomSidebar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: flex;
                    flex-direction: column;
                    padding: 1.5rem;
                    gap: 2rem;
                    overflow-y: auto;
                    background: rgba(30, 41, 59, 0.5);
                }
                h3 {
                    font-size: 0.875rem;
                    text-transform: uppercase;
                    letter-spacing: 0.05em;
                    color: #94a3b8;
                    margin-bottom: 1rem;
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                }
                .control-group {
                    margin-bottom: 1.5rem;
                }
                label {
                    display: block;
                    font-size: 0.75rem;
                    margin-bottom: 0.5rem;
                    color: #cbd5e1;
                }
                input[type="text"], textarea, select {
                    width: 100%;
                    background: #0f172a;
                    border: 1px solid #334155;
                    color: white;
                    padding: 0.5rem;
                    border-radius: 0.375rem;
                    font-size: 0.875rem;
                    margin-bottom: 0.5rem;
                    box-sizing: border-box;
                }
                input[type="text"]:focus, textarea:focus, select:focus {
                    outline: none;
                    border-color: #6366f1;
                    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
                }
                input[type="range"] {
                    width: 100%;
                    accent-color: #6366f1;
                }
                .range-value {
                    font-size: 0.75rem;
                    float: right;
                    color: #6366f1;
                }
                button.btn-block {
                    width: 100%;
                    padding: 0.5rem;
                    background: #334155;
                    color: white;
                    border: none;
                    border-radius: 0.375rem;
                    cursor: pointer;
                    transition: all 0.2s;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    gap: 0.5rem;
                }
                button.btn-block:hover {
                    background: #475569;
                }
                button.btn-danger {
                    background: rgba(239, 68, 68, 0.1);
                    color: #f87171;
                    border: 1px solid rgba(239, 68, 68, 0.2);
                }
                button.btn-danger:hover {
                    background: rgba(239, 68, 68, 0.2);
                }
            </style>

            <div class="control-group">
                <h3><i data-feather="database"></i> Session</h3>
                <label>Session ID</label>
                <input type="text" id="session-id" value="session_001">
            </div>

            <div class="control-group">
                <h3><i data-feather="terminal"></i> Agent Settings</h3>
                <label>System Prompt</label>
                <textarea id="system-prompt" rows="3">You are an advanced AI agent. Use tools when needed.</textarea>
                
                <label>Max Tokens <span class="range-value" id="tokens-val">512</span></label>
                <input type="range" min="128" max="2048" value="512" id="max-tokens">

                <label>Temperature <span class="range-value" id="temp-val">0.7</span></label>
                <input type="range" min="0" max="1" step="0.1" value="0.7" id="temperature">
                
                <label>Top-p <span class="range-value" id="topp-val">0.95</span></label>
                <input type="range" min="0" max="1" step="0.05" value="0.95" id="top-p">
            </div>

            <div class="control-group" style="margin-top: auto;">
                <button id="clear-mem" class="btn-block btn-danger">
                    <i data-feather="trash-2"></i> Clear Memory
                </button>
            </div>
        `;

        // Event Listeners for Range Sliders
        this.shadowRoot.getElementById('max-tokens').addEventListener('input', (e) => {
            this.shadowRoot.getElementById('tokens-val').textContent = e.target.value;
        });
        this.shadowRoot.getElementById('temperature').addEventListener('input', (e) => {
            this.shadowRoot.getElementById('temp-val').textContent = e.target.value;
        });
        this.shadowRoot.getElementById('top-p').addEventListener('input', (e) => {
            this.shadowRoot.getElementById('topp-val').textContent = e.target.value;
        });

        // Clear Memory Logic
        this.shadowRoot.getElementById('clear-mem').addEventListener('click', () => {
            if(window.MemoryDB) window.MemoryDB.clear();
        });

        // Replace Icons
        feather.replace();
    }
}
customElements.define('custom-sidebar', CustomSidebar);