{% extends "layout.html" %}

{% block content %}
<div class="row mb-4">
    <div class="col-md-12">
        <div class="glass-card floating">
            <div class="p-4">
                <h1 class="display-5 quantum-glow text-center">
                    <i class="fas fa-atom me-2 quantum-spin"></i> <span class="fw-bold">Quantum</span> NLP Framework
                </h1>
                <p class="card-text text-center lead">
                    A multi-dimensional, layered thinking process inspired by quantum computing concepts
                </p>
                <hr class="my-4" style="opacity: 0.1;">
                <p class="card-text">
                    This framework combines natural language processing with a recursive function that simulates quantum-inspired 
                    thinking processes, creating a multi-dimensional analysis of your text. Additionally, it can leverage OpenAI's API 
                    to generate human-like text responses based on the quantum analysis.
                </p>
                <div class="vision-progress">
                    <div class="vision-progress-bar"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="glass-card mb-4">
            <div class="p-4">
                <h4 class="mb-4 quantum-glow"><i class="fas fa-keyboard me-2"></i> Input Text</h4>
                
                <form method="POST" action="/process" id="process-form">
                    <div class="mb-4">
                        <textarea class="form-control quantum-input" id="input_text" name="input_text" rows="5" placeholder="Enter your text for analysis..." required>{{ input_text }}</textarea>
                    </div>
                    
                    <div class="row mb-4 align-items-center">
                        <div class="col-md-6">
                            <label class="d-block mb-2">Quantum Dimensions</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fas fa-layer-group"></i></span>
                                <select class="form-select" id="depth" name="depth">
                                    <option value="1" {% if depth == 1 %}selected{% endif %}>Basic (1 dimension)</option>
                                    <option value="2" {% if depth == 2 %}selected{% endif %}>Intermediate (2 dimensions)</option>
                                    <option value="3" {% if depth == 3 or not depth %}selected{% endif %}>Advanced (3 dimensions)</option>
                                    <option value="4" {% if depth == 4 %}selected{% endif %}>Extreme (4 dimensions)</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="use_ai" name="use_ai" {% if ai_response %}checked{% endif %}>
                                <label class="form-check-label" for="use_ai">Use OpenAI for enhanced analysis 
                                    <i class="fas fa-robot ms-1"></i>
                                </label>
                            </div>
                        </div>
                    </div>
                    
                    <!-- LED tracer progress line -->
                    <div class="vision-progress mb-4">
                        <div class="vision-progress-bar"></div>
                    </div>
                    
                    <div class="d-grid">
                        <button type="submit" class="btn btn-primary quantum-btn" id="analyze-btn">
                            <span class="quantum-btn-content">
                                <i class="fas fa-brain me-2"></i> 
                                Analyze with Quantum Algorithm
                            </span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Results container with animation support -->
<div id="results-container" class="quantum-results-container">
    {% if nlp_results %}
    <div class="row">
        <div class="col-md-12">
            <div class="glass-card mb-4 position-relative overflow-hidden">
                <div class="p-4">
                    <h4 class="mb-4 quantum-glow"><i class="fas fa-chart-line me-2"></i> NLP Analysis Results</h4>
                    
                    <!-- LED corner tracers -->
                    <div class="led-corner led-corner-tl"></div>
                    <div class="led-corner led-corner-tr"></div>
                    <div class="led-corner led-corner-bl"></div>
                    <div class="led-corner led-corner-br"></div>
                    
                    <div class="row fade-in-staggered">
                        <div class="col-md-4" style="--stagger-delay: 0.1s;">
                            <div class="glass-card mb-3 text-to-vision glow-hover p-3 position-relative overflow-hidden">
                                <h5 class="card-title mb-3"><i class="fas fa-calculator me-2"></i> Text Statistics</h5>
                                <div class="border-start border-info ps-3 mb-2" style="border-width: 3px !important;">
                                    <div class="mb-2">Word count: <span class="badge bg-info quantum-score">{{ nlp_results.stats.word_count }}</span></div>
                                    <div class="mb-2">Sentence count: <span class="badge bg-info quantum-score">{{ nlp_results.stats.sentence_count }}</span></div>
                                    <div>Average sentence length: <span class="badge bg-info quantum-score">{{ nlp_results.stats.average_sentence_length }}</span> words</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4" style="--stagger-delay: 0.2s;">
                            <div class="glass-card mb-3 text-to-vision glow-hover p-3 position-relative overflow-hidden">
                                <h5 class="card-title mb-3"><i class="fas fa-tag me-2"></i> Top Terms</h5>
                                <ul class="list-group list-group-flush">
                                    {% for term, freq in nlp_results.top_terms %}
                                    <li class="list-group-item d-flex justify-content-between align-items-center bg-transparent border-bottom border-light border-opacity-10 quantum-entity-item">
                                        {{ term }}
                                        <span class="badge bg-primary quantum-score">{{ freq }}</span>
                                    </li>
                                    {% endfor %}
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-4" style="--stagger-delay: 0.3s;">
                            <div class="glass-card mb-3 text-to-vision glow-hover p-3 position-relative overflow-hidden">
                                <h5 class="card-title mb-3"><i class="fas fa-fingerprint me-2"></i> Named Entities</h5>
                                {% if nlp_results.entities %}
                                <ul class="list-group list-group-flush">
                                    {% for entity in nlp_results.entities[:5] %}
                                    <li class="list-group-item d-flex justify-content-between align-items-center bg-transparent border-bottom border-light border-opacity-10 quantum-entity-item">
                                        {{ entity.text }}
                                        <span class="badge bg-success quantum-score">{{ entity.label }}</span>
                                    </li>
                                    {% endfor %}
                                </ul>
                                {% else %}
                                <p class="text-muted">No named entities detected</p>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
    
    {% if quantum_results %}
    <div class="row">
        <div class="col-md-12">
            <div class="glass-card mb-4 position-relative overflow-hidden">
                <div class="p-4">
                    <h4 class="mb-4 quantum-glow">
                        <i class="fas fa-atom me-2 quantum-spin"></i> Quantum Thinking Results
                    </h4>
                    
                    <!-- LED corner tracers -->
                    <div class="led-corner led-corner-tl"></div>
                    <div class="led-corner led-corner-tr"></div>
                    <div class="led-corner led-corner-bl"></div>
                    <div class="led-corner led-corner-br"></div>
                    
                    <div class="glass-card mb-4 p-3 position-relative overflow-hidden" style="background: rgba(13, 202, 240, 0.1);">
                        <div class="row align-items-center">
                            <div class="col-md-9">
                                <h5 class="mb-0"><strong>Meta-Insight:</strong></h5>
                                <p class="lead mb-0 mt-2">{{ quantum_results.meta_insight }}</p>
                            </div>
                            <div class="col-md-3 text-center">
                                <div class="quantum-score-visualization" data-score="{{ quantum_results.quantum_score }}">
                                    <div class="score-circle">
                                        <span class="score-value">{{ quantum_results.quantum_score }}</span>
                                    </div>
                                    <p class="mt-2 mb-0">Quantum Score</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row mb-3 align-items-center">
                        <div class="col-md-6">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-layer-group me-2 quantum-glow" style="font-size: 1.5rem;"></i>
                                <h5 class="mb-0">Dimension Level: <span class="badge bg-primary">{{ quantum_results.dimension }}</span></h5>
                            </div>
                        </div>
                        <div class="col-md-6 text-end">
                            <div class="d-flex align-items-center justify-content-end">
                                <span class="me-2">Quantum Paths:</span>
                                <span class="badge bg-primary">{{ quantum_results.paths|length }}</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- LED tracer progress line -->
                    <div class="vision-progress mb-4">
                        <div class="vision-progress-bar"></div>
                    </div>
                    
                    <div class="accordion quantum-accordion" id="quantumPathsAccordion">
                        {% for path in quantum_results.paths %}
                        <div class="accordion-item glass-card text-to-vision mb-3 position-relative fade-in-staggered" style="--stagger-delay: {{ 0.15 * loop.index }}s;">
                            <h2 class="accordion-header">
                                <button class="accordion-button {% if loop.index > 1 %}collapsed{% endif %} glass-card" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ loop.index }}">
                                    <div class="path-number me-3">{{ loop.index }}</div>
                                    <i class="fas fa-route me-2"></i> Path: <span class="ms-2 fw-bold">{{ path.concept }}</span>
                                </button>
                            </h2>
                            <div id="collapse{{ loop.index }}" class="accordion-collapse collapse {% if loop.index == 1 %}show{% endif %}">
                                <div class="accordion-body glass-card">
                                    <div class="row">
                                        <div class="col-md-12 mb-3">
                                            <div class="glass-card p-3" style="background: rgba(218, 75, 134, 0.05);">
                                                <h6 class="mb-2"><i class="fas fa-lightbulb me-2"></i>Insight:</h6>
                                                <p class="mb-0">{{ path.insight }}</p>
                                            </div>
                                        </div>
                                        <div class="col-md-12 mb-3">
                                            <div class="glass-card p-3" style="background: rgba(111, 66, 193, 0.05);">
                                                <h6 class="mb-2"><i class="fas fa-comment-dots me-2"></i>Prompt:</h6>
                                                <p class="mb-0 text-muted">{{ path.prompt }}</p>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    {% if path.entangled_insight %}
                                    <div class="glass-card p-3 mt-3" style="background: rgba(13, 202, 240, 0.05);">
                                        <h6 class="mb-2"><i class="fas fa-link me-2"></i>Quantum Entanglement:</h6>
                                        <div class="d-flex align-items-center mb-2">
                                            <span class="badge bg-info me-2">Entangled with Path: {{ path.entangled_with }}</span>
                                            <div class="vision-progress" style="flex-grow: 1; height: 2px;">
                                                <div class="vision-progress-bar"></div>
                                            </div>
                                        </div>
                                        <p class="mb-0">{{ path.entangled_insight }}</p>
                                    </div>
                                    {% endif %}
                                    
                                    {% if path.sub_dimensions and path.sub_dimensions.paths %}
                                    <div class="glass-card p-3 mt-3" style="background: rgba(255, 193, 7, 0.05);">
                                        <h6 class="mb-3"><i class="fas fa-cubes me-2"></i>Sub-dimensions:</h6>
                                        <div class="row">
                                            {% for subpath in path.sub_dimensions.paths[:2] %}
                                            <div class="col-md-6 mb-2">
                                                <div class="glass-card p-3 h-100">
                                                    <h6 class="mb-2 text-info">{{ subpath.concept }}</h6>
                                                    <p class="mb-0 small">{{ subpath.insight }}</p>
                                                </div>
                                            </div>
                                            {% endfor %}
                                        </div>
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                            
                            <!-- Path color indicator -->
                            <div class="path-color-indicator" style="background: 
                                {% if loop.index % 3 == 1 %}#da4b86{% elif loop.index % 3 == 2 %}#6f42c1{% else %}#0dcaf0{% endif %};"></div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <style>
        /* Quantum Score Visualization */
        .quantum-score-visualization {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 10px;
        }
        
        .score-circle {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: radial-gradient(circle, rgba(13, 202, 240, 0.2) 0%, rgba(218, 75, 134, 0.2) 100%);
            border: 2px solid rgba(111, 66, 193, 0.5);
            position: relative;
            box-shadow: 0 0 15px rgba(111, 66, 193, 0.5);
            animation: pulse-glow 2s infinite alternate;
        }
        
        @keyframes pulse-glow {
            0% { box-shadow: 0 0 5px rgba(111, 66, 193, 0.5); }
            100% { box-shadow: 0 0 20px rgba(111, 66, 193, 0.8); }
        }
        
        .score-value {
            font-size: 1.5rem;
            font-weight: bold;
            color: white;
        }
        
        /* Path number indicator */
        .path-number {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: rgba(111, 66, 193, 0.2);
            color: white;
            font-weight: bold;
            border: 1px solid rgba(111, 66, 193, 0.5);
        }
        
        /* Path color indicator */
        .path-color-indicator {
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
        }
        
        /* Accordion styling */
        .quantum-accordion .accordion-button {
            background: rgba(30, 41, 59, 0.4);
            color: white;
            border: none;
        }
        
        .quantum-accordion .accordion-button:not(.collapsed) {
            color: white;
            background: rgba(30, 41, 59, 0.5);
            box-shadow: none;
        }
        
        .quantum-accordion .accordion-button:focus {
            box-shadow: none;
            border-color: rgba(111, 66, 193, 0.5);
        }
        
        .quantum-accordion .accordion-button::after {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
        }
        
        /* Staggered fade-in animation */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .fade-in-staggered {
            opacity: 0;
            animation: fadeInUp 0.6s ease forwards;
            animation-delay: var(--stagger-delay, 0s);
        }
    </style>
    {% endif %}
    
    {% if ai_response %}
    <div class="row">
        <div class="col-md-12">
            <div class="glass-card mb-4 position-relative overflow-hidden">
                <div class="p-4">
                    <h4 class="mb-4 quantum-glow">
                        <i class="fas fa-robot me-2 quantum-spin"></i> AI Analysis
                    </h4>
                    
                    <!-- LED corner tracers -->
                    <div class="led-corner led-corner-tl"></div>
                    <div class="led-corner led-corner-tr"></div>
                    <div class="led-corner led-corner-bl"></div>
                    <div class="led-corner led-corner-br"></div>
                    
                    {% if ai_response.error %}
                    <div class="glass-card p-4" style="background: rgba(220, 53, 69, 0.1);">
                        <div class="row align-items-center">
                            <div class="col-md-1 text-center">
                                <i class="fas fa-exclamation-triangle fa-2x text-danger"></i>
                            </div>
                            <div class="col-md-11">
                                <h5 class="text-danger">OpenAI API Error</h5>
                                <p>{{ ai_response.error }}</p>
                                <div class="mt-3">
                                    <a href="https://platform.openai.com/signup" target="_blank" class="btn btn-sm btn-outline-info quantum-btn">
                                        <i class="fas fa-key me-1"></i> Get OpenAI API Key
                                    </a>
                                    <button class="btn btn-sm btn-outline-primary quantum-btn ms-2" id="add-api-key-btn">
                                        <i class="fas fa-plus-circle me-1"></i> Add API Key to Project
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% else %}
                    <div class="glass-card mb-3 fade-in">
                        <div class="p-3 border-bottom border-info border-opacity-10">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <i class="fas fa-brain me-2 text-info"></i>
                                    <span>Response from <span class="badge bg-info">{{ ai_response.model }}</span></span>
                                </div>
                                <div class="d-flex align-items-center">
                                    <div class="ai-indicator me-2">
                                        <div class="ai-pulse"></div>
                                    </div>
                                    <span class="badge bg-info">AI-Generated</span>
                                </div>
                            </div>
                        </div>
                        <div class="p-4">
                            <!-- LED tracer progress line -->
                            <div class="vision-progress mb-3">
                                <div class="vision-progress-bar"></div>
                            </div>
                            
                            <div class="ai-response p-2 position-relative">
                                {{ ai_response.text | safe | replace('\n', '<br>') }}
                                
                                <!-- Quantum particles floating around the AI response -->
                                <div class="quantum-particles-container"></div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="d-flex justify-content-end mt-3 fade-in" style="animation-delay: 0.3s;">
                        <button class="btn btn-sm btn-outline-light me-2" id="copy-ai-response">
                            <i class="fas fa-copy me-1"></i> Copy Response
                        </button>
                        <button class="btn btn-sm btn-outline-info" id="regenerate-response">
                            <i class="fas fa-sync-alt me-1"></i> Regenerate
                        </button>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    
    <style>
        /* AI Indicator */
        .ai-indicator {
            width: 20px;
            height: 20px;
            position: relative;
        }
        
        .ai-pulse {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: rgba(13, 202, 240, 0.5);
            position: absolute;
            animation: ai-pulse 2s infinite;
        }
        
        @keyframes ai-pulse {
            0% {
                transform: scale(0.5);
                opacity: 1;
            }
            100% {
                transform: scale(1.5);
                opacity: 0;
            }
        }
        
        /* Quantum particles */
        .quantum-particles-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            overflow: hidden;
        }
        
        @keyframes float-particle {
            0% {
                transform: translateY(0) translateX(0) rotate(0deg);
                opacity: 0;
            }
            10% {
                opacity: 1;
            }
            90% {
                opacity: 1;
            }
            100% {
                transform: translateY(-100px) translateX(var(--x-drift)) rotate(360deg);
                opacity: 0;
            }
        }
    </style>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Copy response button
            const copyBtn = document.getElementById('copy-ai-response');
            if (copyBtn) {
                copyBtn.addEventListener('click', function() {
                    const responseText = document.querySelector('.ai-response').innerText;
                    navigator.clipboard.writeText(responseText).then(() => {
                        copyBtn.innerHTML = '<i class="fas fa-check me-1"></i> Copied!';
                        setTimeout(() => {
                            copyBtn.innerHTML = '<i class="fas fa-copy me-1"></i> Copy Response';
                        }, 2000);
                    });
                });
            }
            
            // Add API key button
            const apiKeyBtn = document.getElementById('add-api-key-btn');
            if (apiKeyBtn) {
                apiKeyBtn.addEventListener('click', function() {
                    alert('To add your OpenAI API key, please contact the administrator or use environment variables.');
                });
            }
            
            // Create floating particles in the AI response
            const particlesContainer = document.querySelector('.quantum-particles-container');
            if (particlesContainer) {
                // Create floating particles
                setInterval(() => {
                    if (Math.random() > 0.7) {
                        createFloatingParticle(particlesContainer);
                    }
                }, 500);
            }
            
            function createFloatingParticle(container) {
                const particle = document.createElement('div');
                particle.className = 'quantum-particle';
                
                // Random position at the bottom
                const xPos = Math.random() * 100;
                const xDrift = (Math.random() - 0.5) * 100;
                
                particle.style.cssText = `
                    position: absolute;
                    bottom: 0;
                    left: ${xPos}%;
                    width: 4px;
                    height: 4px;
                    border-radius: 50%;
                    background: ${getRandomParticleColor()};
                    filter: blur(1px);
                    box-shadow: 0 0 5px currentColor;
                    --x-drift: ${xDrift}px;
                    animation: float-particle ${3 + Math.random() * 4}s linear forwards;
                `;
                
                container.appendChild(particle);
                
                // Remove after animation completes
                setTimeout(() => {
                    particle.remove();
                }, 7000);
            }
            
            function getRandomParticleColor() {
                const colors = [
                    'rgba(13, 202, 240, 0.8)',    // Cyan
                    'rgba(111, 66, 193, 0.8)',    // Purple
                    'rgba(218, 75, 134, 0.8)'     // Pink
                ];
                return colors[Math.floor(Math.random() * colors.length)];
            }
        });
    </script>
    {% endif %}
</div>

{% endblock %}