{% extends "base.html" %}
{% csrf_token %}

{% block title %}5 Whys Analysis Agent - NetCop AI Hub{% endblock %}

{% block content %}
<div class="container" style="max-width: 1280px; margin: 0 auto; padding: clamp(20px, 5vw, 40px) clamp(16px, 4vw, 24px);">
    <!-- Main Content Grid -->
    <div class="main-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr)); gap: clamp(16px, 4vw, 24px); align-items: start;">
        <!-- Chat Interface -->
        <div>
            <!-- Agent Header -->
            <div class="card" style="background: rgba(255, 255, 255, 0.9); border-radius: clamp(12px, 3vw, 16px); padding: clamp(16px, 4vw, 24px); border: 1px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(20px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); margin-bottom: clamp(16px, 4vw, 24px);">
                <h1 style="font-size: clamp(20px, 5vw, 24px); font-weight: 700; color: #1f2937; margin: 0 0 8px 0; display: flex; align-items: center; gap: 12px;">
                    🔍 {{ agent.name }}
                </h1>
                <p style="font-size: clamp(14px, 3.5vw, 16px); color: #6b7280; margin: 0;">
                    {{ agent.description }}
                </p>
            </div>
            
            <!-- Chat Messages Container -->
            <div class="card" id="chatContainer" style="background: rgba(255, 255, 255, 0.9); border-radius: clamp(12px, 3vw, 16px); padding: clamp(16px, 4vw, 24px); border: 1px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(20px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); margin-bottom: clamp(16px, 4vw, 24px); min-height: 400px; max-height: 600px; overflow-y: auto;">
                <h3 style="font-size: clamp(16px, 4vw, 18px); font-weight: 600; color: #1f2937; margin: 0 0 16px 0;">💬 Chat with 5 Whys Analyst</h3>
                
                <!-- Welcome Message -->
                <div class="message assistant-message" style="margin-bottom: 16px; padding: 12px 16px; background: #f8fafc; border-radius: 12px; border-left: 4px solid #6366f1;">
                    <div style="font-weight: 600; color: #4338ca; margin-bottom: 4px;">5 Whys Analyst</div>
                    <div style="color: #374151; line-height: 1.5;">
                        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 8.00 AED.
                        
                        How can I help you today?
                    </div>
                </div>
                
                <!-- Chat messages will be dynamically added here -->
                <div id="chatMessages"></div>
            </div>
            
            <!-- Chat Input -->
            <div class="card" style="background: rgba(255, 255, 255, 0.9); border-radius: clamp(12px, 3vw, 16px); padding: clamp(16px, 4vw, 24px); border: 1px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(20px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); margin-bottom: clamp(16px, 4vw, 24px);">
                <div style="display: flex; gap: 12px; align-items: flex-end;">
                    <textarea 
                        id="chatInput" 
                        placeholder="Ask me about your problem or describe what you'd like to analyze..." 
                        style="flex: 1; padding: 12px 16px; border: 2px solid #e5e7eb; border-radius: 12px; font-size: 14px; resize: vertical; min-height: 48px; max-height: 120px; font-family: inherit;"
                        rows="2"
                    ></textarea>
                    <button 
                        id="sendChatBtn" 
                        onclick="sendChatMessage()" 
                        style="padding: 12px 20px; background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%); color: white; border: none; border-radius: 12px; font-weight: 600; cursor: pointer; min-height: 48px; transition: transform 0.1s ease;"
                    >
                        Send
                    </button>
                </div>
            </div>
            
            <!-- Report Generation Form -->
            <div class="card" id="reportForm" style="background: rgba(255, 255, 255, 0.9); border-radius: clamp(12px, 3vw, 16px); padding: clamp(16px, 4vw, 24px); border: 1px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(20px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); margin-bottom: clamp(16px, 4vw, 24px);">
                <h3 style="font-size: clamp(16px, 4vw, 18px); font-weight: 600; color: #1f2937; margin: 0 0 16px 0;">📋 Generate Final Report</h3>
                
                <div id="reportNotReady" style="padding: 16px; background: #f3f4f6; border-radius: 12px; text-align: center; color: #6b7280; font-size: 14px; margin-bottom: 16px;">
                    💬 Ask 2-3 questions about your problem first, then I'll generate a comprehensive report
                </div>
                
                <div id="reportReady" style="display: none; padding: 16px; background: #ecfdf5; border-radius: 12px; text-align: center; color: #059669; font-size: 14px; margin-bottom: 16px;">
                    ✅ Ready! I can now generate a detailed 5 Whys analysis report based on our conversation
                </div>
                
                <button 
                    id="generateReportBtn" 
                    onclick="generateReport()" 
                    disabled
                    style="width: 100%; padding: 16px 20px; background: #9ca3af; color: white; border: none; border-radius: 12px; font-weight: 600; cursor: not-allowed; font-size: 16px; transition: all 0.3s ease;"
                >
                    🔍 Generate Report ({{ agent.price }} AED)
                </button>
            </div>
            
            <!-- Generated Report Display -->
            <div id="reportResults" class="card" style="background: rgba(255, 255, 255, 0.9); border-radius: 16px; padding: 24px; border: 1px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(20px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); margin-top: 24px; display: none;">
                <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 20px;">
                    <div style="font-size: 24px;">✅</div>
                    <h3 style="font-size: 20px; font-weight: 600; color: #1f2937; margin: 0;">5 Whys Analysis Report</h3>
                    <div style="background: #6366f1; color: white; padding: 6px 12px; border-radius: 6px; font-size: 14px; font-weight: 600; margin-left: auto;">
                        ✅ Complete
                    </div>
                </div>
                
                <div id="reportContent" style="background: white; border: 1px solid #e2e8f0; border-radius: 12px; padding: 32px; margin-bottom: 20px; line-height: 1.7; color: #374151; font-size: 15px; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);">
                    <!-- Report content will be displayed here -->
                </div>
                
                <div style="display: flex; gap: 12px; flex-wrap: wrap;">
                    <button onclick="copyReport()" style="padding: 12px 20px; background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%); color: white; border: none; border-radius: 12px; font-weight: 600; cursor: pointer; transition: transform 0.1s ease;">
                        📋 Copy Report
                    </button>
                    <button onclick="downloadReport()" style="padding: 12px 20px; background: white; color: #374151; border: 2px solid #e5e7eb; border-radius: 12px; font-weight: 600; cursor: pointer; transition: transform 0.1s ease;">
                        💾 Download Report
                    </button>
                </div>
            </div>
        </div>
        
        <!-- Wallet Sidebar -->
        <div style="position: sticky; top: 20px;">
            <div class="card" style="background: rgba(255, 255, 255, 0.9); border-radius: clamp(12px, 3vw, 16px); padding: clamp(16px, 4vw, 24px); border: 1px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(20px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); margin-bottom: clamp(16px, 4vw, 24px);">
                <h3 style="font-size: clamp(16px, 4vw, 18px); font-weight: 600; color: #1f2937; margin: 0 0 16px 0;">💳 Your Wallet</h3>
                
                <div style="font-size: clamp(24px, 6vw, 28px); font-weight: 700; color: #1f2937; margin-bottom: 8px;" data-wallet-balance>
                    {{ user.wallet_balance|floatformat:2 }} AED
                </div>
                <div style="font-size: clamp(14px, 3.5vw, 16px); color: #6b7280; margin-bottom: 20px;">
                    Available Balance
                </div>
                
                <a href="{% url 'core:wallet_topup' %}" style="display: block; width: 100%; padding: 16px 20px; background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; border: none; border-radius: 12px; font-weight: 600; text-decoration: none; text-align: center; margin-bottom: 12px;">
                    💳 Top Up Wallet
                </a>
            </div>
            
            <div style="padding: 16px; background: rgba(99, 102, 241, 0.1); border-radius: 12px; border: 1px solid rgba(99, 102, 241, 0.2);">
                <h4 style="margin: 0 0 8px 0; font-size: 14px; font-weight: 600; color: #4338ca;">💡 How it works</h4>
                <ul style="margin: 0; font-size: 12px; color: #374151; line-height: 1.4; list-style: none; padding-left: 0;">
                    <li style="margin: 4px 0; padding-left: 16px; position: relative;">
                        <span style="position: absolute; left: 0; color: #6366f1;">•</span>
                        Chat freely to explore your problem
                    </li>
                    <li style="margin: 4px 0; padding-left: 16px; position: relative;">
                        <span style="position: absolute; left: 0; color: #6366f1;">•</span>
                        Get guidance and ask questions
                    </li>
                    <li style="margin: 4px 0; padding-left: 16px; position: relative;">
                        <span style="position: absolute; left: 0; color: #6366f1;">•</span>
                        Generate final report when ready
                    </li>
                    <li style="margin: 4px 0; padding-left: 16px; position: relative;">
                        <span style="position: absolute; left: 0; color: #6366f1;">•</span>
                        Pay only for the final report
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<style>
    .container {
        background: linear-gradient(135deg, #f6f8ff 0%, #e8f0fe 50%, #f0f7ff 100%);
        min-height: 100vh;
        color: #1f2937;
    }
    
    .card:hover {
        transform: translateY(-1px);
        transition: transform 0.2s ease;
    }
    
    button:hover {
        transform: translateY(-1px);
    }
    
    button:disabled {
        background: #9ca3af !important;
        cursor: not-allowed !important;
        transform: none !important;
    }
    
    .message {
        margin-bottom: 16px;
        animation: fadeIn 0.3s ease;
    }
    
    .user-message {
        margin-left: 20%;
        padding: 12px 16px;
        background: #6366f1;
        color: white;
        border-radius: 16px 16px 4px 16px;
    }
    
    .assistant-message {
        margin-right: 20%;
        padding: 16px 20px;
        background: #f8fafc;
        border-radius: 16px 16px 16px 4px;
        border-left: 4px solid #6366f1;
        line-height: 1.6;
    }
    
    .assistant-message .message-content {
        color: #374151;
        line-height: 1.6;
    }
    
    .assistant-message .message-content h3 {
        color: #1f2937;
        font-size: 16px;
        font-weight: 600;
        margin: 16px 0 8px 0;
    }
    
    .assistant-message .message-content h3:first-child {
        margin-top: 0;
    }
    
    .assistant-message .message-content ul {
        margin: 8px 0;
        padding-left: 20px;
    }
    
    .assistant-message .message-content li {
        margin: 4px 0;
    }
    
    .assistant-message .message-content p {
        margin: 8px 0;
    }
    
    .assistant-message .message-content p:first-child {
        margin-top: 0;
    }
    
    .assistant-message .message-content p:last-child {
        margin-bottom: 0;
    }
    
    .assistant-message .message-content strong {
        color: #1f2937;
        font-weight: 600;
    }
    
    @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: 6px;
        height: 6px;
        border-radius: 50%;
        background: #6366f1;
        animation: typingDots 1.4s infinite ease-in-out;
    }
    
    .typing-dots span:nth-child(1) {
        animation-delay: 0s;
    }
    
    .typing-dots span:nth-child(2) {
        animation-delay: 0.2s;
    }
    
    .typing-dots span:nth-child(3) {
        animation-delay: 0.4s;
    }
    
    @keyframes typingDots {
        0%, 80%, 100% {
            transform: scale(0);
            opacity: 0.5;
        }
        40% {
            transform: scale(1);
            opacity: 1;
        }
    }
    
    @media (max-width: 768px) {
        .main-grid {
            grid-template-columns: 1fr !important;
        }
    }
</style>

<script>
    let currentSessionId = null;
    let isProcessing = false;
    let messageCount = 0;
    
    // Initialize session
    document.addEventListener('DOMContentLoaded', function() {
        // Generate new session ID
        currentSessionId = generateSessionId();
        
        // Add Enter key support for chat input
        document.getElementById('chatInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault();
                sendChatMessage();
            }
        });
    });
    
    function generateSessionId() {
        return 'session_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
    }
    
    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'
            },
            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;
            btn.style.background = 'linear-gradient(135deg, #10b981 0%, #059669 100%)';
            btn.style.cursor = 'pointer';
        }
    }
    
    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'
            },
            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
                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 updateWalletBalance(newBalance) {
        document.querySelectorAll('[data-wallet-balance]').forEach(element => {
            element.textContent = `${newBalance.toFixed(2)} AED`;
        });
    }
    
    function copyReport() {
        const reportElement = document.getElementById('reportContent');
        const reportText = reportElement.innerText || reportElement.textContent;
        navigator.clipboard.writeText(reportText).then(() => {
            showToast('📋 Report copied to clipboard!', 'success');
        }).catch(() => {
            showToast('Failed to copy report', 'error');
        });
    }
    
    function downloadReport() {
        const reportElement = document.getElementById('reportContent');
        const reportText = reportElement.innerText || reportElement.textContent;
        const blob = new Blob([reportText], { type: 'text/plain' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = `five-whys-analysis-${Date.now()}.txt`;
        a.click();
        URL.revokeObjectURL(url);
        showToast('💾 Report downloaded!', 'success');
    }
    
    function showToast(message, type = 'info') {
        const toast = document.createElement('div');
        toast.style.cssText = `
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 12px 20px;
            border-radius: 8px;
            color: white;
            font-weight: 600;
            z-index: 1000;
            ${type === 'success' ? 'background: #10b981;' : 'background: #ef4444;'}
        `;
        toast.textContent = message;
        document.body.appendChild(toast);
        
        setTimeout(() => {
            toast.remove();
        }, 3000);
    }
</script>
{% endblock %}