document.addEventListener('DOMContentLoaded', () => {
    const root = document.getElementById('root');
    
    // Mock data for cells
    const initialCells = [
        {
            id: 'cell-1',
            agentType: 'researcher',
            input: 'Find recent breakthroughs in quantum computing',
            output: {
                type: 'markdown',
                content: '## Quantum Computing Breakthroughs (2023)\n\n1. **IBM Quantum Heron Processor** - 133-qubit processor with improved error rates\n2. **Google Quantum Supremacy 2.0** - Demonstrated 70-qubit processor\n3. **Microsoft Topological Qubits** - More stable qubit design\n4. **Quantum Networking** - First multi-node quantum network demonstrated',
                tools_used: [
                    { name: 'arXiv Search', icon: 'search', status: 'success', latency: '420ms' },
                    { name: 'Research Summarizer', icon: 'file-text', status: 'success', latency: '320ms' }
                ],
                metadata: {
                    version_hash: 'sha256:9f86d081884c7d659a2feaa0c55ad015a3bf4f1b2b0b822cd15d6c15b0f00a08',
                    source_citations: [
                        {
                            title: 'IBM Quantum Heron Processor Announcement',
                            url: 'https://research.ibm.com/blog/quantum-heron-processor',
                            description: 'Official announcement of the 133-qubit processor'
                        },
                        {
                            title: 'Nature: Quantum Computing Advances 2023',
                            url: 'https://www.nature.com/quantum-2023',
                            description: 'Comprehensive review of quantum computing milestones'
                        }
                    ],
                    verification_score: 0.92,
                    requires_human_check: true,
                    human_check_status: 'approved'
                }
            },
            status: 'success',
            timestamp: new Date(Date.now() - 3600000).toISOString()
},
        {
            id: 'cell-2',
            agentType: 'analyst',
            input: 'Summarize the key points from cell-1 into bullet points',
            output: {
                type: 'markdown',
                content: '- IBM released 133-qubit processor\n- Google demonstrated 70-qubit processor\n- Microsoft developed more stable qubit design\n- Multi-node quantum networks achieved',
                tools_used: [
                    { name: 'Text Summarizer', icon: 'align-left', status: 'success', latency: '210ms' }
                ],
                metadata: {
                    version_hash: 'sha256:5e884898da28047151d0e56f8dc6292773603d0d6aabbdd62a11ef721d1542d8',
                    source_citations: [],
                    verification_score: 0.85,
                    requires_human_check: false
                }
            },
            status: 'success',
            timestamp: new Date(Date.now() - 1800000).toISOString()
},
        {
            id: 'cell-3',
            agentType: 'data-visualizer',
            input: 'Create a comparison table of quantum processors from cell-1',
            output: {
                type: 'table',
                content: {
                    headers: ['Company', 'Qubits', 'Key Feature'],
                    rows: [
                        ['IBM', '133', 'Improved error rates'],
                        ['Google', '70', 'Supremacy 2.0'],
                        ['Microsoft', 'N/A', 'Topological stability']
                    ]
                },
                tools_used: [
                    { name: 'Table Generator', icon: 'grid', status: 'success', latency: '380ms' },
                    { name: 'Data Validator', icon: 'check-circle', status: 'success', latency: '290ms' }
                ],
                metadata: {
                    version_hash: 'sha256:a591a6d40bf420404a011733cfb7b190d62c65bf0bcda32b57b277d9ad9f146e',
                    source_citations: [],
                    verification_score: 0.78,
                    requires_human_check: true,
                    human_check_status: 'pending'
                }
            },
            status: 'success',
            timestamp: new Date(Date.now() - 900000).toISOString()
}
    ];

    // Create notebook with initial cells
    const notebook = document.createElement('agentic-notebook');
    notebook.setAttribute('cells', JSON.stringify(initialCells));
    root.appendChild(notebook);
});

// Mock run function for cells
function mockRunCell(cellId) {
    const cell = document.querySelector(`agentic-cell[id="${cellId}"]`);
    if (!cell) return;

    // Show loading state
    cell.setAttribute('status', 'loading');
    
    // Simulate API call delay
    setTimeout(() => {
        // Update with mock response
        const randomSuccess = Math.random() > 0.1; // 90% success rate
        const timestamp = new Date().toISOString();
        
        if (randomSuccess) {
            const agentType = cell.getAttribute('agent-type');
            let output;
            
            if (agentType === 'researcher') {
                output = {
                    type: 'markdown',
                    content: '## Updated Research Results\n\nNew findings suggest quantum error correction is improving faster than expected.'
                };
            } else if (agentType === 'analyst') {
                output = {
                    type: 'markdown',
                    content: '- Quantum error correction improving rapidly\n- New benchmarks show 2x improvement'
                };
            } else if (agentType === 'data-visualizer') {
                output = {
                    type: 'table',
                    content: {
                        headers: ['Metric', 'Improvement'],
                        rows: [
                            ['Error Rate', '50% reduction'],
                            ['Speed', '2x faster'],
                            ['Stability', '3x more stable']
                        ]
                    }
                };
            }
            
            cell.setAttribute('output', JSON.stringify(output));
            cell.setAttribute('status', 'success');
        } else {
            cell.setAttribute('status', 'error');
        }
        
        cell.setAttribute('timestamp', timestamp);
    }, 1500);
}