class ActivityLog extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.maxLogs = 8;
    }

    connectedCallback() {
        this.render();
        this.attachEvents();
        
        // Add initial log
        this.addLog("System initialized. Welcome, Architect.", true);
    }

    attachEvents() {
        document.addEventListener('add-log-entry', (e) => {
            this.addLog(e.detail.message);
        });
    }

    addLog(msg, isSystem = false) {
        const list = this.shadowRoot.getElementById('log-list');
        const item = document.createElement('div');
        
        const time = new Date().toISOString().split('T')[1].split('.')[0];
        
        item.innerHTML = `
            <div class="flex gap-2 text-xs font-mono ${isSystem ? 'text-ai-green' : 'text-slate-400'}">
                <span class="text-slate-600">[${time}]</span>
                <span class="${isSystem ? 'font-bold' : ''}">${msg}</span>
            </div>
        `;
        
        list.appendChild(item);

        // Keep only max logs
        if (list.children.length > this.maxLogs) {
            list.removeChild(list.firstChild);
        }
        
        // Auto scroll to bottom
        this.shadowRoot.getElementById('log-container').scrollTop = this.shadowRoot.getElementById('log-container').scrollHeight;
    }

    render() {
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: flex;
                    flex-direction: column;
                    height: 100%;
                    overflow: hidden;
                }
                #log-container {
                    flex: 1;
                    overflow-y: auto;
                    padding-right: 4px;
                    font-family: 'Courier New', Courier, monospace;
                }
                /* Scrollbar for the component */
                #log-container::-webkit-scrollbar {
                    width: 4px;
                }
                #log-container::-webkit-scrollbar-thumb {
                    background: #334155;
                    border-radius: 2px;
                }
                .entry {
                    margin-bottom: 0.5rem;
                    padding-bottom: 0.5rem;
                    border-bottom: 1px solid rgba(255,255,255,0.05);
                    animation: fadeIn 0.3s ease-out;
                }
                @keyframes fadeIn {
                    from { opacity: 0; transform: translateX(-5px); }
                    to { opacity: 1; transform: translateX(0); }
                }
            </style>
            <div id="log-container">
                <div id="log-list">
                    <!-- Logs go here -->
                </div>
            </div>
        `;
    }
}

customElements.define('activity-log', ActivityLog);