{% extends 'base.html' %}
{% load static %}

{# 
AGENT TEMPLATE STARTER - Copy this file and customize for new agents

REPLACE THE FOLLOWING:
1. "Agent Template Starter" -> Your agent name
2. "YOUR_AGENT_SLUG" -> your-agent-slug  
3. Form fields in the widget-content section
4. How it works steps (optional)
5. Agent-specific JavaScript (optional)

KEEP THE FOLLOWING:
- All include statements for shared components
- Basic template structure and CSS links
- Processing and results components
#}

{% block title %}Data Analyzer - Quantum Tasks AI{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/agent-base.css' %}?v={{ timestamp }}">
<style>
/* Enhanced Agent Template Styles - Complete Framework */
.form-textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--outline-variant);
    border-radius: var(--radius-md);
    font-size: 14px;
    line-height: 1.5;
    transition: all 0.2s ease;
    background: var(--surface);
    color: var(--on-surface);
    font-family: inherit;
    resize: vertical;
    min-height: 120px;
}

.form-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

.form-textarea:hover {
    border-color: var(--on-surface-variant);
}

/* Enhanced Form Sections */
.section-container {
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-lg);
    background: var(--surface-variant);
    border-radius: var(--radius-md);
    border: 1px solid var(--outline-variant);
}

.section-subtitle {
    font-size: 16px;
    font-weight: 600;
    color: var(--on-surface);
    margin: 0 0 var(--spacing-lg) 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.section-subtitle::before {
    content: '';
    width: 3px;
    height: 16px;
    background: var(--primary);
    border-radius: 2px;
}

/* Error styling */
.form-textarea.error,
.form-input.error {
    border-color: var(--error);
}

.form-error {
    color: var(--error);
    font-size: 12px;
    margin-top: var(--spacing-xs);
    font-weight: 500;
}

/* Enhanced Results Display */
.results-content {
    background: var(--surface-variant);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
    line-height: 1.7;
    color: var(--on-surface);
    font-size: 15px;
}

/* Results Typography */
.results-content h1,
.results-content h2,
.results-content h3 {
    color: var(--primary);
    font-weight: 700;
    margin: var(--spacing-xl) 0 var(--spacing-md) 0;
    line-height: 1.3;
}

.results-content h1 {
    font-size: 24px;
    border-bottom: 3px solid var(--primary);
    padding-bottom: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.results-content h2 {
    font-size: 20px;
    margin-top: var(--spacing-xl);
    position: relative;
    padding-left: var(--spacing-md);
}

.results-content h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--primary);
    border-radius: 2px;
}

.results-content h3 {
    font-size: 18px;
    color: var(--on-surface);
    font-weight: 600;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-sm);
    border-left: 4px solid var(--primary);
    margin: var(--spacing-lg) 0 var(--spacing-md) 0;
}

.results-content strong {
    color: var(--primary);
    font-weight: 600;
}

/* Toast Notifications */
.toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--surface);
    border: 1px solid var(--outline);
    border-radius: var(--radius-md);
    padding: var(--spacing-md) var(--spacing-lg);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    max-width: 400px;
    font-size: 14px;
    font-weight: 500;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.toast.show {
    transform: translateX(0);
}

.toast.success {
    border-color: var(--success);
    background: #f0fdf4;
    color: #16a34a;
}

.toast.error {
    border-color: var(--error);
    background: #fef2f2;
    color: #dc2626;
}

.toast.info {
    border-color: var(--primary);
    background: #f0f9ff;
    color: #0369a1;
}

/* File Upload Styling */
.file-upload-container {
    margin-bottom: var(--spacing-md);
}

.file-upload-area {
    border: 2px dashed var(--outline-variant);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl);
    text-align: center;
    background: var(--surface);
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
}

.file-upload-area:hover,
.file-upload-area.dragover {
    border-color: var(--primary);
    background: var(--surface-variant);
}

.file-upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

.file-upload-icon {
    font-size: 32px;
    margin-bottom: var(--spacing-sm);
}

.file-upload-text {
    font-size: 16px;
    color: var(--on-surface);
}

.file-upload-hint {
    font-size: 14px;
    color: var(--on-surface-variant);
}

.file-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.file-info {
    background: var(--surface-variant);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    border: 1px solid var(--outline-variant);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.file-name {
    font-weight: 500;
    color: var(--on-surface);
}

.file-size {
    font-size: 12px;
    color: var(--on-surface-variant);
}

.file-remove {
    background: var(--error);
    color: white;
    border: none;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.file-remove:hover {
    background: #dc2626;
}

/* Responsive Design */
@media (max-width: 768px) {
    .toast {
        left: 20px;
        right: 20px;
        max-width: none;
        transform: translateY(-100%);
    }
    
    .toast.show {
        transform: translateY(0);
    }
    
    .results-content {
        padding: var(--spacing-md);
        font-size: 14px;
    }
    
    .results-content h1 {
        font-size: 20px;
    }
    
    .results-content h2 {
        font-size: 18px;
    }
    
    .results-content h3 {
        font-size: 16px;
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    .section-container {
        padding: var(--spacing-md);
    }
    
    .file-upload-area {
        padding: var(--spacing-lg);
    }
}
/* Data Analyzer Specific Styles */
.file-upload-area {
    border: 2px dashed var(--outline);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl);
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--surface-variant);
    margin-bottom: var(--spacing-sm);
}

.file-upload-area:hover {
    border-color: var(--primary);
    background: var(--surface);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.file-upload-area.drag-over {
    border-color: var(--primary);
    background: rgba(0, 0, 0, 0.02);
    transform: scale(1.02);
}

.file-upload-area.file-selected {
    border-color: var(--success);
    background: #f0fdf4;
    color: #16a34a;
}

.upload-icon {
    font-size: 48px;
    margin-bottom: var(--spacing-md);
    opacity: 0.7;
}

.upload-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--on-surface-variant);
}

.upload-text > div:first-child {
    font-weight: 500;
    color: var(--on-surface);
}

.radio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm);
}

.radio-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border: 2px solid var(--outline-variant);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--surface);
    position: relative;
}

.radio-card:hover {
    border-color: var(--primary);
    background: var(--surface-variant);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.radio-card.selected {
    border-color: var(--primary);
    background: rgba(0, 0, 0, 0.02);
}

.radio-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.radio-button {
    width: 20px;
    height: 20px;
    border: 2px solid var(--outline);
    border-radius: 50%;
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.radio-card.selected .radio-button {
    border-color: var(--primary);
}

.radio-card.selected .radio-button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background: var(--primary);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.radio-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--on-surface);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

/* Analysis Results Styling */
.analysis-sections {
    margin-top: var(--spacing-lg);
}

.analysis-section {
    background: var(--surface-variant);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    border-left: 4px solid var(--primary);
}

.analysis-section h4 {
    color: var(--primary);
    font-weight: 600;
    margin: 0 0 var(--spacing-md) 0;
    font-size: 16px;
}

.section-content {
    color: var(--on-surface);
    line-height: 1.6;
    font-size: 14px;
}

.analysis-timestamp {
    margin-top: var(--spacing-lg);
    text-align: center;
    color: var(--on-surface-variant);
}

@media (max-width: 768px) {
    .radio-grid {
        grid-template-columns: 1fr;
    }
    
    .analysis-section {
        padding: var(--spacing-md);
    }
}
</style>
{% endblock %}

{% block content %}
<script>
// Set data attributes for JavaScript access
document.body.setAttribute('data-user-authenticated', '{{ user.is_authenticated|yesno:"true,false" }}');
document.body.setAttribute('data-agent-price', '{{ agent_config.price }}');
</script>

<div class="agent-container">
    <!-- Agent Header Component - KEEP THIS -->
    {% include "workflows/components/agent_header.html" with agent_title=agent_config.name agent_subtitle=agent_config.description %}

    <!-- Quick Agent Access Panel Component - KEEP THIS -->
    {% include "workflows/components/quick_agents_panel.html" %}

    <!-- Main Agent Grid -->
    <div class="agent-grid">
    <!-- CUSTOMIZE THIS SECTION: Agent-Specific Form Widget -->
    <div class="agent-widget widget-large" style="flex: 1; margin-right: clamp(0px, var(--spacing-lg), 2vw);">
        <div class="widget-header">
            <h3 class="widget-title">
                <span class="widget-icon">{{ agent_config.icon }}</span>
                {# CUSTOMIZE: Change "Details" to something specific like "Configuration", "Input", etc. #}
                {{ agent_config.name }} Details
            </h3>
        </div>
        <div class="widget-content">
            <form id="agentForm" method="POST">
                {% csrf_token %}
                
                <!-- File Upload Section -->
                <div class="form-group">
                    <label class="form-label">📁 Upload Data File</label>
                    <div class="file-upload-area" onclick="document.getElementById('dataFile').click()"
                         role="button" tabindex="0" aria-label="Click to upload data file or drag and drop"
                         onkeydown="if(event.key==='Enter'||event.key===' '){document.getElementById('dataFile').click()}">
                        <div class="upload-text">
                            <div class="upload-icon">📁</div>
                            <div><strong>Click to upload</strong> or drag and drop</div>
                            <div>PDF files only</div>
                        </div>
                    </div>
                    <input type="file" id="dataFile" name="file" accept=".pdf" style="display: none;" required>
                    <div class="form-help">Supported format: PDF files only. Max size: 10MB</div>
                </div>
                
                <!-- Analysis Type Selection -->
                <div class="form-group">
                    <label class="form-label">📈 Analysis Type</label>
                    <div class="radio-grid">
                        <div class="radio-card selected" onclick="selectRadio('summary')">
                            <input type="radio" id="summary" name="analysisType" value="summary" checked>
                            <div class="radio-button"></div>
                            <label for="summary" class="radio-label">📋 Summary</label>
                        </div>
                        <div class="radio-card" onclick="selectRadio('detailed')">
                            <input type="radio" id="detailed" name="analysisType" value="detailed">
                            <div class="radio-button"></div>
                            <label for="detailed" class="radio-label">📈 Detailed</label>
                        </div>
                        <div class="radio-card" onclick="selectRadio('statistical')">
                            <input type="radio" id="statistical" name="analysisType" value="statistical">
                            <div class="radio-button"></div>
                            <label for="statistical" class="radio-label">🔢 Statistical</label>
                        </div>
                    </div>
                </div>
                {# END CUSTOMIZE SECTION #}

                <!-- Submit Button with Balance Check - KEEP THIS STRUCTURE -->
                <div style="margin-top: var(--spacing-lg);">
                    {% if user.is_authenticated %}
                        {% if user.wallet_balance >= agent_config.price %}
                            <button type="submit" class="btn btn-primary btn-full" id="analyzeBtn">
                                🚀 Analyze Data ({{ agent_config.price }} AED)
                            </button>
                        {% else %}
                            <div style="background: #fef2f2; color: #dc2626; padding: var(--spacing-md); border-radius: var(--radius-md); margin-bottom: var(--spacing-md); font-size: 14px; font-weight: 500; text-align: center;">
                                Insufficient balance! You need {{ agent_config.price }} AED.
                            </div>
                            <a href="{% url 'wallet:wallet' %}" class="btn btn-primary btn-full" style="text-decoration: none;">
                                💰 Top Up Wallet
                            </a>
                        {% endif %}
                    {% else %}
                        <a href="{% url 'authentication:login' %}" class="btn btn-primary btn-full">
                            🔐 Login to Continue
                        </a>
                    {% endif %}
                </div>
            </form>
        </div>
    </div>

    <!-- How It Works Widget - KEEP THIS, CUSTOMIZE steps parameter -->
    <!-- How It Works Widget - Positioned on the right -->
    <div class="agent-widget widget-small" style="min-width: min(280px, 100%); max-width: min(280px, 100%); margin-left: auto;">
        <div class="widget-header">
            <h3 class="widget-title">
                <span class="widget-icon">ℹ️</span>
                How It Works
            </h3>
        </div>
        <div class="widget-content">
            <ol class="info-list">
                <li>Upload your PDF file</li>
                <li>Choose analysis type and preferences</li>
                <li>Our AI analyzes your data</li>
                <li>Get comprehensive insights and reports</li>
            </ol>
            
            <!-- Other Agents Button -->
            <button class="quick-agent-toggle btn btn-secondary btn-full" onclick="toggleQuickAgents()" 
                    title="Quick access to other agents"
                    aria-label="Open quick access panel for other AI agents"
                    aria-expanded="false"
                    aria-controls="quickAgentsPanel"
                    style="margin-top: var(--spacing-md);">
                <span class="toggle-icon" aria-hidden="true">🚀</span>
                <span class="toggle-text">Explore Other Agents</span>
            </button>
        </div>
    </div>
    </div>

    <!-- Processing Status Component - KEEP THIS -->
    {% include "workflows/components/processing_status.html" with status_title="Analyzing Your Data..." status_text="Please wait while our AI processes your file..." %}
    
    <!-- Results Component - KEEP THIS -->
    {% include "workflows/components/results_container.html" with results_title="Analysis Results" %}
</div>
{% endblock %}

{% block extra_js %}
<script src="{% static 'js/workflows-core.js' %}?v={{ timestamp }}"></script>
{# CUSTOMIZE: Add agent-specific JavaScript file if needed #}
{# <script src="{% static 'js/your-agent.js' %}?v={{ timestamp }}"></script> #}

{# CUSTOMIZE: Add agent-specific JavaScript inline if needed #}
<script>
// Agent-specific JavaScript - Enhanced Template with Validation
// You have access to all WorkflowsCore functions:
// - WorkflowsCore.showToast(message, type)
// - WorkflowsCore.showProcessing(title)
// - WorkflowsCore.showResults(content, title)
// - WorkflowsCore.copyToClipboard(text, message)
// - WorkflowsCore.downloadAsFile(content, filename, message)
// - WorkflowsCore.showFieldError(fieldName, message)
// - WorkflowsCore.clearFieldError(fieldName)
// - And many more...

// Initialize data analyzer functionality
document.addEventListener('DOMContentLoaded', function() {
    console.log('Data Analyzer loaded');
    
    // Initialize file upload
    const fileInput = document.getElementById('dataFile');
    if (fileInput) {
        fileInput.addEventListener('change', handleFileChange);
    }
    
    // Initialize drag and drop
    const uploadArea = document.querySelector('.file-upload-area');
    if (uploadArea) {
        setupDragAndDrop(uploadArea, fileInput);
    }
    
    // Set initial radio selection
    const firstRadio = document.querySelector('.radio-card');
    if (firstRadio && !document.querySelector('.radio-card.selected')) {
        firstRadio.classList.add('selected');
        const input = firstRadio.querySelector('input[type="radio"]');
        if (input) input.checked = true;
    }
    
    // Handle form submission
    const form = document.getElementById('agentForm');
    if (form) {
        form.addEventListener('submit', handleFormSubmission);
    }
});

// Update wallet balance display
function updateWalletBalance(newBalance) {
    if (newBalance !== undefined) {
        // Update header balance
        const headerBalance = document.querySelector('a[data-wallet-balance]');
        if (headerBalance) {
            headerBalance.textContent = `💰 ${newBalance.toFixed(2)} AED`;
        }
        
        // Update page balance
        const pageBalance = document.getElementById('walletBalance');
        if (pageBalance) {
            pageBalance.textContent = newBalance.toFixed(2);
        }
        
        // Update all data attributes
        document.querySelectorAll('[data-wallet-balance]').forEach(element => {
            element.textContent = `${newBalance.toFixed(2)} AED`;
        });
        
        console.log('✅ Wallet balance updated to:', newBalance);
    }
}

// Data Analyzer specific functions
function selectRadio(value) {
    // Remove selected class from all cards
    document.querySelectorAll('.radio-card').forEach(card => {
        card.classList.remove('selected');
    });
    
    // Add selected class to clicked card
    const selectedCard = document.querySelector(`input[value="${value}"]`).closest('.radio-card');
    if (selectedCard) {
        selectedCard.classList.add('selected');
    }
    
    // Select the radio button
    const radioInput = document.getElementById(value);
    if (radioInput) {
        radioInput.checked = true;
    }
}

function handleFileChange(event) {
    const file = event.target.files[0];
    const uploadArea = document.querySelector('.file-upload-area');
    const uploadText = document.querySelector('.upload-text');
    
    if (file) {
        uploadArea.classList.add('file-selected');
        uploadText.innerHTML = `
            <div style="display: flex; align-items: center; gap: 8px;">
                <span>📄</span>
                <div>
                    <div style="font-weight: 500;">${file.name}</div>
                    <div style="font-size: 12px; color: var(--on-surface-variant);">${(file.size / 1024 / 1024).toFixed(2)} MB</div>
                </div>
            </div>
        `;
        WorkflowsCore.showToast(`File selected: ${file.name}`, 'success');
    } else {
        uploadArea.classList.remove('file-selected');
        uploadText.innerHTML = `
            <div class="upload-icon">📁</div>
            <div><strong>Click to upload</strong> or drag and drop</div>
            <div>PDF files only</div>
        `;
    }
}

function setupDragAndDrop(uploadArea, fileInput) {
    let dragCounter = 0;

    function handleDragOver(e) {
        e.preventDefault();
        e.stopPropagation();
        uploadArea.classList.add('drag-over');
    }

    function handleDragLeave(e) {
        e.preventDefault();
        e.stopPropagation();
        dragCounter--;
        if (dragCounter <= 0) {
            uploadArea.classList.remove('drag-over');
            dragCounter = 0;
        }
    }

    function handleDragEnter(e) {
        e.preventDefault();
        e.stopPropagation();
        dragCounter++;
        uploadArea.classList.add('drag-over');
    }

    function handleDrop(e) {
        e.preventDefault();
        e.stopPropagation();
        dragCounter = 0;
        uploadArea.classList.remove('drag-over');
        
        const files = e.dataTransfer.files;
        if (files.length > 0) {
            fileInput.files = files;
            handleFileChange({ target: fileInput });
        }
    }

    uploadArea.addEventListener('dragenter', handleDragEnter);
    uploadArea.addEventListener('dragover', handleDragOver);
    uploadArea.addEventListener('dragleave', handleDragLeave);
    uploadArea.addEventListener('drop', handleDrop);
}

function handleFormSubmission(e) {
    e.preventDefault();
    
    // Validate form
    if (!isFormValid()) {
        return;
    }
    
    // Check authentication and balance
    if (!WorkflowsCore.checkAuthentication()) {
        return;
    }
    
    const agentPrice = parseFloat(document.body.getAttribute('data-agent-price'));
    if (!WorkflowsCore.checkBalance(agentPrice)) {
        return;
    }
    
    // Show processing status
    WorkflowsCore.showProcessing('Analyzing Your Data...');
    
    // Skip connectivity check and go directly to form submission
    // (Webhooks don't respond to HEAD requests, only POST)
    submitForm(e.target);
}

function checkWebhookAvailability(url, onSuccess, onFailure) {
    const timeout = 5000; // 5 second timeout
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), timeout);
    
    // Simple HEAD request to check if webhook endpoint is reachable
    fetch(url, { 
        method: 'HEAD', 
        signal: controller.signal,
        mode: 'no-cors' // Avoid CORS issues for connectivity check
    })
    .then(() => {
        clearTimeout(timeoutId);
        onSuccess();
    })
    .catch(() => {
        clearTimeout(timeoutId);
        onFailure();
    });
}

function submitForm(formElement) {
    // Submit form with AJAX
    const formData = new FormData(formElement);
    
    // DEBUG: Check what's in the FormData
    console.log('🔍 DEBUG: FormData contents:');
    for (let [key, value] of formData.entries()) {
        if (value instanceof File) {
            console.log(`${key}: FILE - ${value.name} (${value.size} bytes)`);
        } else {
            console.log(`${key}: ${value}`);
        }
    }
    
    console.log('🔍 DEBUG: Sending request to:', window.location.href);
    
    fetch(window.location.href, {
        method: 'POST',
        body: formData,
        headers: {
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(response => {
        console.log('🔍 DEBUG: Response headers:', response.headers.get('content-type'));
        if (response.headers.get('content-type')?.includes('application/json')) {
            return response.json();
        } else {
            return response.text().then(html => {
                console.log('🔍 DEBUG: HTML response preview:', html.substring(0, 200));
                // Check if the response contains success, processing or error indicators
                if (html.includes('File uploaded and processed successfully') || html.includes('success')) {
                    return { success: true, completed: true, analysisData: null };
                } else if (html.includes('processing')) {
                    return { success: true, processing: true };
                } else if (html.includes('error') || html.includes('failed')) {
                    const errorMatch = html.match(/error['":\s]*["']([^"']+)["']/);
                    const errorMsg = errorMatch ? errorMatch[1] : 'Processing failed';
                    return { success: false, error: errorMsg };
                } else {
                    return { success: true, results: html };
                }
            });
        }
    })
    .then(result => {
        console.log('🔍 DEBUG: Final result object:', result);
        
        if (result.success) {
            // Check if this is a JSON response with analysis results
            if (result.analysis_results && result.analysis_results.sections) {
                // Handle JSON response with analysis data
                WorkflowsCore.hideProcessing();
                
                let resultsHtml = '<h3>✅ Analysis Complete</h3>';
                resultsHtml += '<div class="analysis-sections">';
                
                result.analysis_results.sections.forEach(section => {
                    if (section.heading && section.content) {
                        resultsHtml += `
                            <div class="analysis-section">
                                <h4>📋 ${section.heading}</h4>
                                <div class="section-content">${section.content.replace(/\n/g, '<br>')}</div>
                            </div>
                        `;
                    }
                });
                resultsHtml += '</div>';
                
                if (result.analysis_results.timestamp) {
                    resultsHtml += `<p class="analysis-timestamp"><small>Analysis completed: ${new Date(result.analysis_results.timestamp).toLocaleString()}</small></p>`;
                }
                
                WorkflowsCore.showResults(resultsHtml, 'Analysis Results');
                WorkflowsCore.showToast('✅ Data analysis completed successfully!', 'success');
                
                // Update wallet balance if provided
                if (result.wallet_balance !== undefined) {
                    console.log('🔍 DEBUG: Updating wallet balance to:', result.wallet_balance);
                    updateWalletBalance(result.wallet_balance);
                }
                
            } else if (result.completed) {
                // Handle basic completion without detailed results
                WorkflowsCore.hideProcessing();
                WorkflowsCore.showResults(
                    '<h3>✅ File Processing Complete</h3><p>Your PDF file has been successfully processed.</p>',
                    'Analysis Results'
                );
                WorkflowsCore.showToast('✅ File uploaded and processed successfully!', 'success');
            }
            
        } else if (result.success && result.processing) {
            // Show simple message that processing started
            WorkflowsCore.showToast('🔄 Processing started successfully!', 'success');
            // For now, show simple unavailable message after timeout
            setTimeout(() => {
                WorkflowsCore.hideProcessing();
                WorkflowsCore.showToast('⚠️ Agent temporarily unavailable. Please try again later.', 'error');
            }, 60000); // 1 minute timeout
            
        } else if (result.success && result.results) {
            // Show results directly
            WorkflowsCore.showResults(result.results, 'Analysis Results');
            WorkflowsCore.showToast('✅ Analysis completed!', 'success');
        } else {
            WorkflowsCore.hideProcessing();
            WorkflowsCore.showToast(`❌ ${result.error || 'Processing failed'}`, 'error');
        }
    })
    .catch(error => {
        console.error('Form submission error:', error);
        WorkflowsCore.hideProcessing();
        WorkflowsCore.showToast('❌ Connection error. Please try again.', 'error');
    });
}

function isFormValid() {
    const fileInput = document.getElementById('dataFile');
    const analysisType = document.querySelector('input[name="analysisType"]:checked');
    
    if (!fileInput.files || fileInput.files.length === 0) {
        WorkflowsCore.showToast('Please select a data file', 'error');
        return false;
    }
    
    if (!analysisType) {
        WorkflowsCore.showToast('Please select an analysis type', 'error');
        return false;
    }
    
    return true;
}

// Utility functions are now handled by shared WorkflowsCore
// copyResults(), downloadResults(), and resetForm() are available globally

function checkResults(requestId) {
    let pollCount = 0;
    const maxPolls = 6; // 1 minute max (6 * 10 seconds)
    
    const pollInterval = setInterval(() => {
        pollCount++;
        
        fetch(`/workflows/api/status/${requestId}/`)
            .then(response => response.json())
            .then(result => {
                if (result.status === 'completed') {
                    clearInterval(pollInterval);
                    displayResults(result);
                } else if (result.status === 'failed') {
                    clearInterval(pollInterval);
                    WorkflowsCore.hideProcessing();
                    WorkflowsCore.showToast('❌ Analysis failed. Please try again.', 'error');
                } else if (pollCount >= maxPolls) {
                    clearInterval(pollInterval);
                    WorkflowsCore.hideProcessing();
                    WorkflowsCore.showToast('⚠️ Agent temporarily unavailable. Please try again later.', 'error');
                }
                // Continue polling if still processing
            })
            .catch(error => {
                console.error('Status check error:', error);
                clearInterval(pollInterval);
                WorkflowsCore.hideProcessing();
                WorkflowsCore.showToast('🔧 Service under maintenance. Contact support if issue persists.', 'error');
            });
    }, 10000); // Check every 10 seconds
}

function displayResults(result) {
    if (result.success) {
        // Hide processing status
        WorkflowsCore.hideProcessing();
        
        // Show results with rich formatting
        const analysisText = result.report_text || result.insights_summary || result.analysis_results || 'Analysis completed successfully.';
        
        // Convert newlines to HTML and preserve formatting
        const formattedText = analysisText
            .replace(/\n\n/g, '</p><p>')
            .replace(/\n/g, '<br>')
            .replace(/### (.*?)(<br>|$)/g, '<h3>$1</h3>')
            .replace(/## (.*?)(<br>|$)/g, '<h2>$1</h2>')
            .replace(/# (.*?)(<br>|$)/g, '<h1>$1</h1>')
            .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
            .replace(/\*(.*?)\*/g, '<em>$1</em>');
        
        WorkflowsCore.showResults(`<p>${formattedText}</p>`, 'Analysis Results');
        WorkflowsCore.showToast('✅ Data analysis completed successfully!', 'success');
    } else if (result.error) {
        WorkflowsCore.hideProcessing();
        WorkflowsCore.showToast(`❌ Error: ${result.error}`, 'error');
    } else {
        WorkflowsCore.hideProcessing();
        WorkflowsCore.showToast('❌ Analysis failed. Please try again.', 'error');
    }
}
</script>
{% endblock %}