const ProgressPanel = {
    manifest: null,
    wsConnection: null,
    startTime: null,
    runtimeInterval: null,

    init(taskId) {
        this.taskId = taskId;
        this.startTime = Date.now();
        this.startRuntimeCounter();
        this.connectWebSocket(taskId);
    },

    connectWebSocket(taskId) {
        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
        const wsUrl = `${protocol}//${window.location.host}/ws/task-progress/${taskId}`;

        this.wsConnection = new WebSocket(wsUrl);

        this.wsConnection.onopen = () => {
            console.log('Progress panel WebSocket connected');
        };

        this.wsConnection.onmessage = (event) => {
            const data = JSON.parse(event.data);
            this.handleProgressUpdate(data);
        };

        this.wsConnection.onclose = () => {
            console.log('Progress panel WebSocket closed');
            setTimeout(() => this.connectWebSocket(taskId), 3000);
        };

        this.wsConnection.onerror = (error) => {
            console.error('Progress panel WebSocket error:', error);
        };
    },

    handleProgressUpdate(data) {
        if (data.type === 'manifest_update') {
            this.manifest = data.manifest;
            this.render();
        } else if (data.type === 'section_update') {
            this.updateSection(data.section_id, data.status, data.progress);
        } else if (data.type === 'item_update') {
            this.updateItem(data.section_id, data.item_id, data.status, data.duration);
        } else if (data.type === 'terminal_line') {
            this.addTerminalLine(data.content, data.line_type);
        } else if (data.type === 'stats_update') {
            this.updateStats(data.stats);
        } else if (data.type === 'task_progress') {
            this.handleTaskProgress(data);
        }
    },

    handleTaskProgress(data) {
        if (data.activity && data.activity.manifest) {
            this.manifest = data.activity.manifest;
            this.render();
        }

        if (data.step) {
            this.updateCurrentAction(data.message || data.step);
        }

        if (data.details) {
            this.addTerminalLine(data.details, 'info');
        }
    },

    startRuntimeCounter() {
        this.runtimeInterval = setInterval(() => {
            const elapsed = Math.floor((Date.now() - this.startTime) / 1000);
            const runtimeEl = document.getElementById('status-runtime');
            if (runtimeEl) {
                runtimeEl.textContent = this.formatDuration(elapsed);
            }
        }, 1000);
    },

    stopRuntimeCounter() {
        if (this.runtimeInterval) {
            clearInterval(this.runtimeInterval);
            this.runtimeInterval = null;
        }
    },

    formatDuration(seconds) {
        if (seconds < 60) {
            return `${seconds} sec`;
        } else if (seconds < 3600) {
            const mins = Math.floor(seconds / 60);
            return `${mins} min`;
        } else {
            const hours = Math.floor(seconds / 3600);
            const mins = Math.floor((seconds % 3600) / 60);
            return `${hours} hr ${mins} min`;
        }
    },

    render() {
        if (!this.manifest) return;

        this.renderStatus();
        this.renderProgressLog();
        this.renderTerminal();
    },

    renderStatus() {
        const titleEl = document.getElementById('status-title');
        if (titleEl) {
            titleEl.textContent = this.manifest.description || this.manifest.app_name;
        }

        const estimatedEl = document.getElementById('estimated-time');
        if (estimatedEl && this.manifest.estimated_seconds) {
            estimatedEl.textContent = this.formatDuration(this.manifest.estimated_seconds);
        }

        const currentAction = this.getCurrentAction();
        const actionEl = document.getElementById('current-action');
        if (actionEl && currentAction) {
            actionEl.textContent = currentAction;
        }

        this.updateDecisionPoint();
    },

    getCurrentAction() {
        if (!this.manifest || !this.manifest.sections) return null;

        for (const section of this.manifest.sections) {
            if (section.status === 'Running') {
                for (const child of section.children || []) {
                    if (child.status === 'Running') {
                        for (const item of child.items || []) {
                            if (item.status === 'Running') {
                                return item.name;
                            }
                        }
                        return child.name;
                    }
                }
                return section.name;
            }
        }
        return null;
    },

    updateCurrentAction(action) {
        const actionEl = document.getElementById('current-action');
        if (actionEl) {
            actionEl.textContent = action;
        }
    },

    updateDecisionPoint() {
        const decisionStepEl = document.getElementById('decision-step');
        const decisionTotalEl = document.getElementById('decision-total');

        if (decisionStepEl && this.manifest) {
            decisionStepEl.textContent = this.manifest.completed_steps || 0;
        }
        if (decisionTotalEl && this.manifest) {
            decisionTotalEl.textContent = this.manifest.total_steps || 0;
        }
    },

    renderProgressLog() {
        const container = document.getElementById('progress-log-content');
        if (!container || !this.manifest || !this.manifest.sections) return;

        container.innerHTML = '';

        for (const section of this.manifest.sections) {
            const sectionEl = this.createSectionElement(section);
            container.appendChild(sectionEl);
        }
    },

    createSectionElement(section) {
        const sectionDiv = document.createElement('div');
        sectionDiv.className = 'log-section';
        sectionDiv.dataset.sectionId = section.id;

        if (section.status === 'Running' || section.status === 'Completed') {
            sectionDiv.classList.add('expanded');
        }

        const statusClass = section.status.toLowerCase();
        const stepCurrent = section.current_step || 0;
        const stepTotal = section.total_steps || 0;

        sectionDiv.innerHTML = `
            <div class="log-section-header" onclick="ProgressPanel.toggleSection('${section.id}')">
                <span class="section-indicator ${statusClass}"></span>
                <span class="section-name">${this.escapeHtml(section.name)}</span>
                <span class="section-details-link" onclick="event.stopPropagation(); ProgressPanel.viewDetails('${section.id}')">View Details ▸</span>
                <span class="section-step-badge">Step ${stepCurrent}/${stepTotal}</span>
                <span class="section-status-badge ${statusClass}">${section.status}</span>
            </div>
            <div class="log-section-body">
                <div class="log-children" id="log-children-${section.id}">
                </div>
            </div>
        `;

        const childrenContainer = sectionDiv.querySelector('.log-children');

        for (const child of section.children || []) {
            const childEl = this.createChildElement(child, section.id);
            childrenContainer.appendChild(childEl);
        }

        if (section.items && section.items.length > 0 && (!section.children || section.children.length === 0)) {
            for (const item of section.items) {
                const itemEl = this.createItemElement(item);
                childrenContainer.appendChild(itemEl);
            }
        }

        return sectionDiv;
    },

    createChildElement(child, parentId) {
        const childDiv = document.createElement('div');
        childDiv.className = 'log-child';
        childDiv.dataset.childId = child.id;

        if (child.status === 'Running' || child.status === 'Completed') {
            childDiv.classList.add('expanded');
        }

        const statusClass = child.status.toLowerCase();
        const stepCurrent = child.current_step || 0;
        const stepTotal = child.total_steps || 0;
        const duration = child.duration_seconds ? this.formatDuration(child.duration_seconds) : '';

        childDiv.innerHTML = `
            <div class="log-child-header" onclick="ProgressPanel.toggleChild('${child.id}')">
                <span class="child-indent"></span>
                <span class="child-name">${this.escapeHtml(child.name)}</span>
                <span class="child-details-link" onclick="event.stopPropagation(); ProgressPanel.viewChildDetails('${child.id}')">View Details ▸</span>
                <span class="child-step-badge">Step ${stepCurrent}/${stepTotal}</span>
                <span class="child-status-badge ${statusClass}">${child.status}</span>
            </div>
            <div class="log-child-body">
                <div class="log-items" id="log-items-${child.id}">
                </div>
            </div>
        `;

        const itemsContainer = childDiv.querySelector('.log-items');

        for (const item of child.items || []) {
            const itemEl = this.createItemElement(item);
            itemsContainer.appendChild(itemEl);
        }

        return childDiv;
    },

    createItemElement(item) {
        const itemDiv = document.createElement('div');
        itemDiv.className = 'log-item';
        itemDiv.dataset.itemId = item.id;

        const statusClass = item.status.toLowerCase();
        const duration = item.duration_seconds ? `Duration: ${this.formatDuration(item.duration_seconds)}` : '';
        const checkIcon = item.status === 'Completed' ? '✓' : (item.status === 'Running' ? '◎' : '○');

        itemDiv.innerHTML = `
            <span class="item-dot ${statusClass}"></span>
            <span class="item-name">${this.escapeHtml(item.name)}${item.details ? ` - ${this.escapeHtml(item.details)}` : ''}</span>
            <div class="item-info">
                <span class="item-duration">${duration}</span>
                <span class="item-check ${statusClass}">${checkIcon}</span>
            </div>
        `;

        return itemDiv;
    },

    renderTerminal() {
        if (!this.manifest || !this.manifest.terminal_output) return;

        const container = document.getElementById('terminal-content');
        if (!container) return;

        container.innerHTML = '';

        for (const line of this.manifest.terminal_output.slice(-50)) {
            this.appendTerminalLine(container, line.content, line.line_type || 'info');
        }

        container.scrollTop = container.scrollHeight;
    },

    addTerminalLine(content, lineType) {
        const container = document.getElementById('terminal-content');
        if (!container) return;

        this.appendTerminalLine(container, content, lineType);
        container.scrollTop = container.scrollHeight;

        this.incrementProcessedCount();
    },

    appendTerminalLine(container, content, lineType) {
        const lineDiv = document.createElement('div');
        lineDiv.className = `terminal-line ${lineType || 'info'}`;
        lineDiv.textContent = content;
        container.appendChild(lineDiv);
    },

    incrementProcessedCount() {
        const processedEl = document.getElementById('terminal-processed');
        if (processedEl) {
            const current = parseInt(processedEl.textContent, 10) || 0;
            processedEl.textContent = current + 1;
        }
    },

    updateStats(stats) {
        const processedEl = document.getElementById('terminal-processed');
        if (processedEl && stats.data_points_processed !== undefined) {
            processedEl.textContent = stats.data_points_processed;
        }

        const speedEl = document.getElementById('terminal-speed');
        if (speedEl && stats.sources_per_min !== undefined) {
            speedEl.textContent = `~${stats.sources_per_min.toFixed(1)} sources/min`;
        }

        const etaEl = document.getElementById('terminal-eta');
        if (etaEl && stats.estimated_remaining_seconds !== undefined) {
            etaEl.textContent = this.formatDuration(stats.estimated_remaining_seconds);
        }
    },

    updateSection(sectionId, status, progress) {
        const sectionEl = document.querySelector(`[data-section-id="${sectionId}"]`);
        if (!sectionEl) return;

        const indicator = sectionEl.querySelector('.section-indicator');
        const statusBadge = sectionEl.querySelector('.section-status-badge');
        const stepBadge = sectionEl.querySelector('.section-step-badge');

        if (indicator) {
            indicator.className = `section-indicator ${status.toLowerCase()}`;
        }

        if (statusBadge) {
            statusBadge.className = `section-status-badge ${status.toLowerCase()}`;
            statusBadge.textContent = status;
        }

        if (stepBadge && progress) {
            stepBadge.textContent = `Step ${progress.current}/${progress.total}`;
        }

        if (status === 'Running' || status === 'Completed') {
            sectionEl.classList.add('expanded');
        }
    },

    updateItem(sectionId, itemId, status, duration) {
        const itemEl = document.querySelector(`[data-item-id="${itemId}"]`);
        if (!itemEl) return;

        const dot = itemEl.querySelector('.item-dot');
        const check = itemEl.querySelector('.item-check');
        const durationEl = itemEl.querySelector('.item-duration');

        const statusClass = status.toLowerCase();

        if (dot) {
            dot.className = `item-dot ${statusClass}`;
        }

        if (check) {
            check.className = `item-check ${statusClass}`;
            check.textContent = status === 'Completed' ? '✓' : (status === 'Running' ? '◎' : '○');
        }

        if (durationEl && duration) {
            durationEl.textContent = `Duration: ${this.formatDuration(duration)}`;
        }
    },

    toggleSection(sectionId) {
        const sectionEl = document.querySelector(`[data-section-id="${sectionId}"]`);
        if (sectionEl) {
            sectionEl.classList.toggle('expanded');
        }
    },

    toggleChild(childId) {
        const childEl = document.querySelector(`[data-child-id="${childId}"]`);
        if (childEl) {
            childEl.classList.toggle('expanded');
        }
    },

    viewDetails(sectionId) {
        console.log('View details for section:', sectionId);
    },

    viewChildDetails(childId) {
        console.log('View details for child:', childId);
    },

    escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    },

    loadManifest(taskId) {
        fetch(`/api/autotask/${taskId}/manifest`)
            .then(response => response.json())
            .then(data => {
                if (data.success && data.manifest) {
                    this.manifest = data.manifest;
                    this.render();
                }
            })
            .catch(error => {
                console.error('Failed to load manifest:', error);
            });
    },

    destroy() {
        this.stopRuntimeCounter();
        if (this.wsConnection) {
            this.wsConnection.close();
            this.wsConnection = null;
        }
    }
};

function toggleLogSection(header) {
    const section = header.closest('.log-section');
    if (section) {
        section.classList.toggle('expanded');
    }
}

function toggleLogChild(header) {
    const child = header.closest('.log-child');
    if (child) {
        child.classList.toggle('expanded');
    }
}

function viewSectionDetails(sectionId) {
    ProgressPanel.viewDetails(sectionId);
}

function viewChildDetails(childId) {
    ProgressPanel.viewChildDetails(childId);
}

window.ProgressPanel = ProgressPanel;