new Vue({
    el: '#app',
    data: {
        description: '',
        reportGenerated: false,
        reportFullyGenerated: false,
        reportContent: '',
        sourcesContent: '',
        generateCharts: true,
        showAdvancedOptions: false,
        outputFormat: 'report_table',
        dataFormat: 'Structured data'
    },
    methods: {
        async generateReport() {
            this.reportGenerated = true;
            this.reportFullyGenerated = false;
            this.reportContent = 'Generating report...';
            this.sourcesContent = '';

            try {
                const response = await fetch('https://iresearcher-api.elevatics.cloud/generate_report', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'text/plain'
                    },
                    body: JSON.stringify({
                        description: this.description,
                        user_id: "",
                        user_name: "multi-agent-research",
                        internet: true,
                        output_format: this.outputFormat,
                        data_format: this.dataFormat,
                        generate_charts: this.generateCharts,
                        output_as_md: true
                    })
                });

                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }

                const reader = response.body.getReader();
                const decoder = new TextDecoder();
                let markdown = '';
                let metadata = '';
                let isReadingMetadata = false;

                while (true) {
                    const { value, done } = await reader.read();
                    if (done) {
                        this.reportFullyGenerated = true;
                        break;
                    }
                    
                    const chunk = decoder.decode(value, { stream: true });
                    console.log(chunk);
                    
                    if (chunk.includes('<report-metadata>')) {
                        isReadingMetadata = true;
                        metadata = '';
                    }
                    
                    if (isReadingMetadata) {
                        metadata += chunk;
                        if (chunk.includes('</report-metadata>')) {
                            isReadingMetadata = false;
                            this.processMetadata(metadata);
                        }
                    } else {
                        markdown += chunk;
                        this.renderMarkdown(markdown);
                    }
                }
            } catch (error) {
                this.reportContent = `Error generating report: ${error.message}`;
                this.reportFullyGenerated = false;
            }
        },
        renderMarkdown(markdown) {
            const reportContent = markdown.match(/<report>([\s\S]*)<\/report>/);
            
            if (reportContent) {
                this.reportContent = marked.parse(reportContent[1]);
            } else {
                this.reportContent = marked.parse(markdown);
            }
            
            this.$nextTick(() => {
                const reportContainer = document.getElementById('report-container');
                const links = reportContainer.getElementsByTagName('a');
                Array.from(links).forEach(link => {
                    link.setAttribute('target', '_blank');
                });
                
                const scripts = reportContainer.getElementsByTagName('script');
                Array.from(scripts).forEach(script => {
                    const newScript = document.createElement('script');
                    newScript.textContent = script.textContent;
                    script.parentNode.replaceChild(newScript, script);
                });

                const plots = reportContainer.querySelectorAll('.js-plotly-plot');
                plots.forEach(plot => {
                    Plotly.Plots.resize(plot);
                });
            });
        },
        processMetadata(metadata) {
            const metadataMatch = metadata.match(/all-text-with-urls: (.+)/);
            
            if (metadataMatch) {
                const metadataObj = JSON.parse(metadataMatch[1]);
                
                let sourcesHtml = '<h2>Sources</h2>';
                metadataObj.forEach(([content, url]) => {
                    if (content.trim() !== "") {
                        const snippet = content.length > 400 ? content.substring(0, 400) + '...' : content;
                        sourcesHtml += `
                            <div class="source-item">
                                <a href="${url}" target="_blank" rel="noopener noreferrer" class="source-url">${url}</a>
                                <div class="source-content">
                                    <div class="source-snippet">${marked.parse(snippet)}</div>
                                    <div class="source-full" style="display: none;">${marked.parse(content)}</div>
                                    <div class="expand-indicator"></div>
                                </div>
                            </div>
                        `;
                    }
                });
                this.sourcesContent = sourcesHtml;
            } else {
                this.sourcesContent = '<h2>Sources</h2><p>No source information available.</p>';
            }
            
            // Set up source expansion after updating the content
            this.$nextTick(() => {
                this.setupSourceExpansion();
            });
        },
        downloadHTML() {
            downloadHTMLReport(this.reportContent, this.sourcesContent);
        },
        toggleAdvancedOptions() {
            this.showAdvancedOptions = !this.showAdvancedOptions;
            const advancedOptionsContent = document.getElementById('advancedOptionsContent');
            if (this.showAdvancedOptions) {
                advancedOptionsContent.style.display = 'block';
                this.outputFormat = 'report_table';
                this.dataFormat = 'Structured data';
            } else {
                advancedOptionsContent.style.display = 'none';
            }
        },
        setOutputFormat(format) {
            this.outputFormat = format;
        },
        setDataFormat(format) {
            this.dataFormat = format;
        },
        setupSourceExpansion() {
            document.getElementById('sources-container').addEventListener('click', (event) => {
                const sourceItem = event.target.closest('.source-item');
                if (sourceItem) {
                    sourceItem.classList.toggle('expanded');
                    const sourceSnippet = sourceItem.querySelector('.source-snippet');
                    const sourceFull = sourceItem.querySelector('.source-full');
                    if (sourceItem.classList.contains('expanded')) {
                        sourceSnippet.style.display = 'none';
                        sourceFull.style.display = 'block';
                    } else {
                        sourceSnippet.style.display = 'block';
                        sourceFull.style.display = 'none';
                    }
                }
            });
        }
    },
    mounted() {
        window.addEventListener('resize', () => {
            const plots = document.querySelectorAll('.js-plotly-plot');
            plots.forEach(plot => {
                Plotly.Plots.resize(plot);
            });
        });
        const advancedOptionsContent = document.getElementById('advancedOptionsContent');
        advancedOptionsContent.style.display = 'none';
        this.setupSourceExpansion();
    }
});