class AgenticNotebook extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.cells = [];
    }

    static get observedAttributes() {
        return ['cells'];
    }

    attributeChangedCallback(name, oldValue, newValue) {
        if (name === 'cells') {
            this.cells = JSON.parse(newValue);
            this.render();
        }
    }

    render() {
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    width: 100%;
                }
                
                .notebook-header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 1.5rem;
                }
                
                .add-cell-btn {
                    transition: all 0.2s ease;
                }
                
                .add-cell-btn:hover {
                    transform: translateY(-1px);
                }
                .cells-container {
                    display: flex;
                    flex-direction: column;
                    gap: 1.5rem;
                    padding: 0 1rem;
                }
</style>
            
            <div class="notebook-container">
                <div class="notebook-header">
                    <h1 class="text-2xl font-bold text-gray-800">Agentic Research Notebook</h1>
                    <button class="add-cell-btn flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg shadow hover:bg-blue-700">
                        <i data-feather="plus"></i>
                        Add Cell
                    </button>
                </div>
                
                <div class="cells-container">
                    ${this.cells.map((cell, index) => `
                        <agentic-cell
                            id="${cell.id}"
                            agent-type="${cell.agentType}"
                            input="${cell.input}"
                            output='${JSON.stringify(cell.output)}'
                            status="${cell.status}"
                            timestamp="${cell.timestamp}"
                            ${index > 0 ? 'has-previous' : ''}
                        ></agentic-cell>
                    `).join('')}
                </div>
            </div>
        `;
        
        // Add event listener for the add cell button
        const addCellBtn = this.shadowRoot.querySelector('.add-cell-btn');
        addCellBtn.addEventListener('click', () => this.addNewCell());
        
        // Initialize feather icons
        if (window.feather) {
            window.feather.replace();
        }
    }
    
    addNewCell() {
        const newCellId = `cell-${Date.now()}`;
        const newCell = {
            id: newCellId,
            agentType: 'researcher',
            input: '',
            output: null,
            status: 'idle',
            timestamp: new Date().toISOString()
        };
        
        this.cells.push(newCell);
        this.setAttribute('cells', JSON.stringify(this.cells));
    }
}

customElements.define('agentic-notebook', AgenticNotebook);