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

{% block title %}5 Whys Analysis Agent - Quantum Tasks AI{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/agent-base.css' %}?v={{ timestamp }}">
{% endblock %}

{% block content %}
<script>
        // Agent Frontend Template - Common JavaScript Utilities

        // Quick Agent Access Panel Functions
        function toggleQuickAgents() {
            const panel = document.getElementById('quickAgentsPanel');
            const overlay = document.getElementById('quickAgentsOverlay');
            const toggle = document.querySelector('.quick-agent-toggle');
            
            const isActive = panel.classList.contains('active');
            
            if (isActive) {
                panel.classList.remove('active');
                overlay.classList.remove('active');
                toggle.classList.remove('active');
                toggle.setAttribute('aria-expanded', 'false');
                panel.setAttribute('aria-hidden', 'true');
                overlay.setAttribute('aria-hidden', 'true');
                document.body.style.overflow = 'auto';
            } else {
                panel.classList.add('active');
                overlay.classList.add('active');
                toggle.classList.add('active');
                toggle.setAttribute('aria-expanded', 'true');
                panel.setAttribute('aria-hidden', 'false');
                overlay.setAttribute('aria-hidden', 'false');
                document.body.style.overflow = 'hidden';
            }
        }

        function closeQuickAgents() {
            const panel = document.getElementById('quickAgentsPanel');
            const overlay = document.getElementById('quickAgentsOverlay');
            const toggle = document.querySelector('.quick-agent-toggle');
            
            if (panel && overlay && toggle) {
                panel.classList.remove('active');
                overlay.classList.remove('active');
                toggle.classList.remove('active');
                toggle.setAttribute('aria-expanded', 'false');
                panel.setAttribute('aria-hidden', 'true');
                overlay.setAttribute('aria-hidden', 'true');
                document.body.style.overflow = 'auto';
            }
        }

        // Toast Notification Function
        function showToast(message, type = 'info') {
            document.querySelectorAll('.toast').forEach(toast => toast.remove());
            
            const toast = document.createElement('div');
            toast.className = `toast ${type}`;
            toast.textContent = message;
            
            document.body.appendChild(toast);
            
            setTimeout(() => toast.classList.add('show'), 100);
            
            setTimeout(() => {
                toast.classList.remove('show');
                setTimeout(() => toast.remove(), 300);
            }, 3000);
        }

        // Processing Status Functions
        function showProcessing() {
            const processingStatus = document.getElementById('processingStatus');
            processingStatus.style.display = 'block';
            processingStatus.classList.add('active');
        }

        function hideProcessing() {
            const processingStatus = document.getElementById('processingStatus');
            processingStatus.style.display = 'none';
            processingStatus.classList.remove('active');
        }

        // Wallet Balance Update Function
        function updateWalletBalance(newBalance) {
            if (newBalance !== undefined) {
                const walletBalance = document.getElementById('walletBalance');
                if (walletBalance) {
                    walletBalance.textContent = newBalance.toFixed(2);
                }
            }
        }

        // Copy to Clipboard Utility
        function copyToClipboard(text, successMessage = 'Copied to clipboard!') {
            navigator.clipboard.writeText(text).then(() => {
                showToast(`📋 ${successMessage}`, 'success');
            }).catch(() => {
                showToast('Failed to copy to clipboard', 'error');
            });
        }

        // Download as File Utility
        function downloadAsFile(text, filename, successMessage = 'File downloaded!') {
            const blob = new Blob([text], { type: 'text/plain' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = filename || `content-${Date.now()}.txt`;
            a.click();
            URL.revokeObjectURL(url);
            showToast(`💾 ${successMessage}`, 'success');
        }

        // Close panel on Escape key
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                closeQuickAgents();
            }
        });

        // Five Whys specific utilities
        const FiveWhysUtils = {
            copyReport() {
                const content = document.getElementById('reportContent');
                if (content) {
                    const text = content.textContent || content.innerText || '';
                    copyToClipboard(text, '5 Whys report copied to clipboard!');
                }
            },

            downloadReport() {
                const content = document.getElementById('reportContent');
                if (content) {
                    const text = content.textContent || content.innerText || '';
                    downloadAsFile(text, `5-whys-report-${Date.now()}.txt`, '5 Whys report downloaded!');
                }
            }
        };

        // Backward compatibility functions
        function copyReport() { FiveWhysUtils.copyReport(); }
        function downloadReport() { FiveWhysUtils.downloadReport(); }
</script>
<div class="agent-container">
    <!-- Agent Header -->
    {% include "components/agent_header.html" with agent_title="5 Whys Analyzer" agent_subtitle="AI-powered root cause analysis using the 5 Whys methodology" %}
    
    <!-- Quick Agent Access Panel -->
    {% include "components/quick_agents_panel.html" %}
    
    <!-- Agent Grid -->
    <div class="agent-grid">
        <div class="agent-widget widget-large" style="flex: 1; margin-right: var(--spacing-lg);">
            <div class="widget-header">
                <h3 class="widget-title">
                    <span class="widget-icon">💬</span>
                    5 Whys Analysis Chat
                </h3>
            </div>
            <div class="widget-content">
                <!-- Chat Messages Container -->
                <div id="chatContainer" class="chat-container">
                    <h4 class="section-subtitle">💬 Chat with 5 Whys Analyst</h4>
                    
                    <!-- Welcome Message -->
                    <div class="welcome-message">
                        <div class="message-header">5 Whys Analyst</div>
                        <div class="message-content">
                            Hello! I'm here to help you with root cause analysis using the 5 Whys methodology. 
                            
                            You can ask me questions, describe your problem, and I'll guide you through the analysis process. When you're ready, I can generate a comprehensive report for {{ agent.price }} AED.
                            
                            How can I help you today?
                        </div>
                    </div>
                    
                    <!-- Chat messages will be dynamically added here -->
                    <div id="chatMessages"></div>
                </div>
                
                <!-- Chat Input Form -->
                <form id="chatForm" class="chat-form">
                    {% csrf_token %}
                    <div class="input-group">
                        <input 
                            type="text"
                            id="chatInput" 
                            name="message"
                            class="form-input"
                            placeholder="Ask me about your problem or describe what you'd like to analyze..." 
                            required
                        />
                        <button 
                            id="sendChatBtn" 
                            type="submit"
                            class="btn btn-primary"
                        >
                            📤 Send
                        </button>
                    </div>
                </form>
                
                <!-- Report Generation Section -->
                <div id="reportSection" style="margin-top: var(--spacing-lg);">
                    <h4 class="section-subtitle">📋 Generate Final Report</h4>
                    
                    <div id="reportNotReady" class="info-message">
                        💬 Ask 2-3 questions about your problem first, then I'll generate a comprehensive report
                    </div>
                    
                    <div id="reportReady" class="success-message" style="display: none;">
                        ✅ Ready! I can now generate a detailed 5 Whys analysis report based on our conversation
                    </div>
                    
                    <button 
                        id="generateReportBtn" 
                        onclick="generateReport()" 
                        class="btn btn-primary"
                        disabled
                        style="width: 100%;"
                    >
                        🔍 Generate Report ({{ agent.price }} AED)
                    </button>
                </div>
                
                <!-- Generated Report Display -->
                <div id="reportResults" class="results-card" style="display: none;">
                    <div class="results-header">
                        <div style="font-size: 24px;">📊</div>
                        <h3 style="font-size: 20px; font-weight: 600; color: var(--text-primary); margin: 0;">5 Whys Analysis Report</h3>
                        <div style="background: var(--primary-color); color: white; padding: 6px 12px; border-radius: 6px; font-size: 14px; font-weight: 600; margin-left: auto;">✅ Complete</div>
                    </div>
                    
                    <div class="results-content" id="reportContent">
                        <!-- Report content will be displayed here -->
                    </div>
                    
                    <div class="action-buttons">
                        <button onclick="copyReport()" class="btn btn-primary">📋 Copy Report</button>
                        <button onclick="downloadReport()" class="btn btn-secondary">💾 Download Report</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- How It Works Widget -->
        <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>Chat freely to explore your problem</li>
                    <li>Get guidance and ask questions</li>
                    <li>Generate final report when ready</li>
                    <li>Pay only for the final report</li>
                </ol>
                
                <!-- Quick Agents Toggle Button -->
                <button class="quick-agent-toggle" 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 -->
    <div class="agent-grid">
        {% include "components/processing_status.html" with status_title="Generating 5 Whys Report..." status_text="Please wait while we analyze your conversation and create a comprehensive report..." %}
    </div>
    
    <!-- Results -->
    <div class="agent-grid">
        {% include "components/results_container.html" with results_title="5 Whys Analysis Report" %}
    </div>
</div>

<style>
/* Five Whys Analyzer Specific Styles */
.chat-container {
    background: var(--background-subtle);
    border-radius: 8px;
    padding: 16px;
    margin: 16px 0;
    min-height: 400px;
    max-height: 600px;
    overflow-y: auto;
}

.welcome-message {
    margin-bottom: 16px;
    padding: 16px 20px;
    background: var(--background-subtle);
    border-radius: 16px 16px 16px 4px;
    border-left: 4px solid var(--primary-color);
    line-height: 1.6;
}

.message-header {
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 8px;
}

.chat-form {
    border-top: 1px solid var(--border-color);
    padding-top: 16px;
    margin-top: 16px;
}

.input-group {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

.input-group .form-input {
    width: 80%;
    height: 40px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 12px;
    font-family: inherit;
    font-size: 14px;
    background: var(--background-primary);
    color: var(--text-primary);
    box-sizing: border-box;
}

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

.message {
    margin-bottom: 16px;
    animation: fadeIn 0.3s ease;
}

.user-message {
    margin-left: 20%;
    padding: 12px 16px;
    background: var(--primary-color);
    color: white;
    border-radius: 16px 16px 4px 16px;
}

.assistant-message {
    margin-right: 20%;
    padding: 16px 20px;
    background: var(--background-subtle);
    border-radius: 16px 16px 16px 4px;
    border-left: 4px solid var(--primary-color);
    line-height: 1.6;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.typing-dots {
    display: flex;
    gap: 4px;
    align-items: center;
}

.typing-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-color);
    animation: typing 1.4s infinite ease-in-out;
}

.typing-dots span:nth-child(1) { animation-delay: -0.32s; }
.typing-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes typing {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}
</style>

<script>
    let currentSessionId = null;
    let isProcessing = false;
    let messageCount = 0;
    
    // Initialize session
    document.addEventListener('DOMContentLoaded', function() {
        // Generate new session ID
        currentSessionId = generateSessionId();
        
        // Handle chat form submission
        document.getElementById('chatForm').addEventListener('submit', function(e) {
            e.preventDefault();
            sendChatMessage();
        });
        
        // Add Enter key support for chat input (Shift+Enter for new line)
        document.getElementById('chatInput').addEventListener('keydown', function(e) {
            if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault();
                sendChatMessage();
            }
        });
    });
    
    function generateSessionId() {
        // Use crypto.randomUUID() if available, fallback to secure random generation
        if (typeof crypto !== 'undefined' && crypto.randomUUID) {
            return crypto.randomUUID();
        } else {
            // Fallback for older browsers - generate cryptographically secure random string
            const array = new Uint8Array(16);
            crypto.getRandomValues(array);
            return 'session_' + Array.from(array, byte => byte.toString(16).padStart(2, '0')).join('');
        }
    }
    
    function getCsrfToken() {
        return document.querySelector('[name=csrfmiddlewaretoken]').value;
    }
    
    function sendChatMessage() {
        if (isProcessing) return;
        
        const input = document.getElementById('chatInput');
        const message = input.value.trim();
        
        if (!message) {
            showToast('Please enter a message', 'error');
            return;
        }
        
        isProcessing = true;
        document.getElementById('sendChatBtn').disabled = true;
        document.getElementById('sendChatBtn').textContent = 'Sending...';
        
        // Add user message to chat
        addMessageToChat(message, 'user');
        input.value = '';
        messageCount++;
        
        // Show typing indicator
        showTypingIndicator();
        
        // Send chat message to backend
        fetch("{% url 'five_whys_analyzer:chat' %}", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': getCsrfToken()
            },
            body: JSON.stringify({
                session_id: currentSessionId,
                message: message
            })
        })
        .then(response => response.json())
        .then(data => {
            // Hide typing indicator
            hideTypingIndicator();
            
            if (data.success) {
                // Add assistant response to chat
                addMessageToChat(data.response, 'assistant');
                currentSessionId = data.session_id;
                
                // Check if report button should be enabled
                checkReportReadiness();
            } else {
                showToast(data.error || 'Failed to send message', 'error');
            }
        })
        .catch(error => {
            // Hide typing indicator on error
            hideTypingIndicator();
            console.error('Error:', error);
            showToast('Network error occurred', 'error');
        })
        .finally(() => {
            isProcessing = false;
            document.getElementById('sendChatBtn').disabled = false;
            document.getElementById('sendChatBtn').textContent = 'Send';
        });
    }
    
    function addMessageToChat(message, role) {
        const messagesContainer = document.getElementById('chatMessages');
        const messageDiv = document.createElement('div');
        
        if (role === 'user') {
            messageDiv.className = 'message user-message';
            messageDiv.innerHTML = `
                <div style="font-weight: 600; margin-bottom: 4px;">You</div>
                <div style="line-height: 1.5;">${escapeHtml(message)}</div>
            `;
        } else {
            messageDiv.className = 'message assistant-message';
            const formattedMessage = formatAssistantMessage(message);
            messageDiv.innerHTML = `
                <div style="font-weight: 600; color: #4338ca; margin-bottom: 8px;">🔍 5 Whys Analyst</div>
                <div class="message-content">${formattedMessage}</div>
            `;
        }
        
        messagesContainer.appendChild(messageDiv);
        
        // Scroll to bottom
        const chatContainer = document.getElementById('chatContainer');
        chatContainer.scrollTop = chatContainer.scrollHeight;
    }
    
    function formatAssistantMessage(message) {
        // Trim and clean up the message
        let cleaned = message.trim();
        
        // Remove excessive spacing and normalize line breaks
        cleaned = cleaned.replace(/\n\s*\n\s*\n/g, '\n\n'); // Max 2 line breaks
        
        // Escape HTML first
        let formatted = escapeHtml(cleaned);
        
        // Convert markdown-style formatting to HTML
        // Convert ### headers to h3
        formatted = formatted.replace(/### (.*?)(?=\n|$)/g, '<h3>$1</h3>');
        
        // Convert ** bold ** to <strong>
        formatted = formatted.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
        
        // Convert - bullet points to proper lists
        const lines = formatted.split('\n');
        let inList = false;
        let result = [];
        
        for (let i = 0; i < lines.length; i++) {
            const line = lines[i].trim();
            
            if (line.startsWith('- ')) {
                if (!inList) {
                    result.push('<ul>');
                    inList = true;
                }
                result.push(`<li>${line.substring(2)}</li>`);
            } else {
                if (inList) {
                    result.push('</ul>');
                    inList = false;
                }
                if (line) {
                    // Split long paragraphs for better readability
                    if (line.length > 200) {
                        const sentences = line.split('. ');
                        let currentParagraph = '';
                        for (const sentence of sentences) {
                            if (currentParagraph.length + sentence.length > 200 && currentParagraph) {
                                result.push(`<p>${currentParagraph.trim()}.</p>`);
                                currentParagraph = sentence;
                            } else {
                                currentParagraph += (currentParagraph ? '. ' : '') + sentence;
                            }
                        }
                        if (currentParagraph) {
                            result.push(`<p>${currentParagraph}</p>`);
                        }
                    } else {
                        result.push(`<p>${line}</p>`);
                    }
                }
            }
        }
        
        if (inList) {
            result.push('</ul>');
        }
        
        return result.join('');
    }
    
    function escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }
    
    function showTypingIndicator() {
        const messagesContainer = document.getElementById('chatMessages');
        const typingDiv = document.createElement('div');
        typingDiv.id = 'typingIndicator';
        typingDiv.className = 'message assistant-message';
        typingDiv.innerHTML = `
            <div style="font-weight: 600; color: #4338ca; margin-bottom: 8px;">🔍 5 Whys Analyst</div>
            <div class="message-content">
                <div style="display: flex; align-items: center; gap: 8px;">
                    <div class="typing-dots">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                    <span style="color: #6b7280; font-style: italic;">Analyzing your problem...</span>
                </div>
            </div>
        `;
        
        messagesContainer.appendChild(typingDiv);
        
        // Scroll to bottom
        const chatContainer = document.getElementById('chatContainer');
        chatContainer.scrollTop = chatContainer.scrollHeight;
    }
    
    function hideTypingIndicator() {
        const typingIndicator = document.getElementById('typingIndicator');
        if (typingIndicator) {
            typingIndicator.remove();
        }
    }
    
    function checkReportReadiness() {
        if (messageCount >= 2) {
            // Enable report generation
            document.getElementById('reportNotReady').style.display = 'none';
            document.getElementById('reportReady').style.display = 'block';
            
            const btn = document.getElementById('generateReportBtn');
            btn.disabled = false;
        }
    }
    
    function generateReport() {
        if (isProcessing) return;
        
        if (!currentSessionId) {
            showToast('Please start a chat session first', 'error');
            return;
        }
        
        if (messageCount < 2) {
            showToast('Please ask at least 2 questions before generating a report', 'error');
            return;
        }
        
        isProcessing = true;
        const btn = document.getElementById('generateReportBtn');
        btn.disabled = true;
        btn.textContent = '🔍 Generating Report...';
        
        // Extract problem statement from first user message in chat
        const chatMessages = document.querySelectorAll('.user-message');
        let problemStatement = 'Problem analysis based on chat conversation';
        if (chatMessages.length > 0) {
            const firstMessage = chatMessages[0].querySelector('div:last-child');
            if (firstMessage) {
                problemStatement = firstMessage.textContent.trim();
            }
        }
        
        // Send report generation request using chat history
        fetch("{% url 'five_whys_analyzer:report' %}", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': getCsrfToken()
            },
            body: JSON.stringify({
                session_id: currentSessionId,
                problem_statement: problemStatement,
                context_info: 'Generated from chat conversation',
                analysis_depth: 'comprehensive'
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Display the generated report
                displayReport(data.report);
                
                // Update wallet balance if provided
                if (data.wallet_balance !== undefined) {
                    updateWalletBalance(data.wallet_balance);
                }
                
                showToast('✅ Report generated and payment processed!', 'success');
            } else {
                showToast(data.error || 'Failed to generate report', 'error');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showToast('Network error occurred', 'error');
        })
        .finally(() => {
            isProcessing = false;
            btn.disabled = false;
            btn.textContent = '🔍 Generate Report ({{ agent.price }} AED)';
        });
    }
    
    function displayReport(reportContent) {
        const formattedReport = formatReportContent(reportContent);
        document.getElementById('reportContent').innerHTML = formattedReport;
        document.getElementById('reportResults').style.display = 'block';
        
        // Scroll to report
        document.getElementById('reportResults').scrollIntoView({ behavior: 'smooth' });
    }
    
    function formatReportContent(content) {
        // Basic formatting for better readability
        let formatted = content;
        
        // Escape HTML first
        const div = document.createElement('div');
        div.textContent = formatted;
        formatted = div.innerHTML;
        
        // Format main headers
        formatted = formatted.replace(/^# (.*?)$/gm, '<h1 style="font-size: 24px; font-weight: bold; margin: 20px 0 16px 0; color: #1f2937; border-bottom: 2px solid #6366f1; padding-bottom: 8px;">$1</h1>');
        
        // Format section headers  
        formatted = formatted.replace(/^## (.*?)$/gm, '<h2 style="font-size: 18px; font-weight: 600; margin: 24px 0 12px 0; color: #374151;">$1</h2>');
        
        // Format bold text
        formatted = formatted.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
        
        // Format bullet points
        formatted = formatted.replace(/^- (.*?)$/gm, '<div style="margin: 6px 0; padding-left: 16px;">• $1</div>');
        
        // Format numbered lists
        formatted = formatted.replace(/^\d+\.\s+(.*?)$/gm, '<div style="margin: 6px 0;">$&</div>');
        
        // Add line breaks for paragraphs
        formatted = formatted.replace(/\n\n/g, '<br><br>');
        formatted = formatted.replace(/\n/g, '<br>');
        
        return formatted;
    }
    
    
    function copyReport() {
        const reportText = generateTextForExport('reportContent');
        copyToClipboard(reportText, '📋 Report copied to clipboard!');
    }
    
    function downloadReport() {
        const reportText = generateTextForExport('reportContent');
        downloadAsFile(reportText, `five-whys-analysis-${Date.now()}.txt`, '💾 Report downloaded!');
    }
    
    function generateTextForExport(elementId) {
        const element = document.getElementById(elementId);
        if (!element) return '';
        
        // Extract text content while preserving some structure
        let text = element.innerText || element.textContent || '';
        
        // Clean up extra whitespace
        text = text.replace(/\n\s*\n\s*\n/g, '\n\n');
        text = text.trim();
        
        return text;
    }
    
</script>
{% endblock %}