{% extends 'layout.html' %}

{% block content %}
<div class="row mb-4">
    <div class="col-12">
        <div class="glass-card">
            <div class="p-4">
                <h1 class="display-5 quantum-glow">
                    <i class="fas fa-cogs me-2"></i> Automation Workflow
                </h1>
                <p class="lead">Visualize and manage the multi-dimensional quantum processing pipeline.</p>
                <div class="vision-progress">
                    <div class="vision-progress-bar"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-8">
        <div class="glass-card mb-4">
            <div class="card-body p-4">
                <h3 class="h4 mb-4 quantum-glow">Quantum Processing Pipeline</h3>
                
                <!-- Pyramid Workflow Visualization -->
                <div class="workflow-pyramid-container">
                    <div class="workflow-pyramid position-relative">
                        {% for step in workflow_steps %}
                        <div class="workflow-step {% if step.status == 'completed' %}completed{% elif step.status == 'active' %}active{% else %}pending{% endif %}"
                             data-step-id="{{ step.id }}" style="--step-color: {{ step.color }};">
                            <div class="step-indicator">
                                <div class="step-number">{{ step.id }}</div>
                                <div class="step-line"></div>
                            </div>
                            <div class="step-content">
                                <h4 class="step-title">{{ step.name }}</h4>
                                <p class="step-desc">{{ step.description }}</p>
                                <span class="step-status badge {% if step.status == 'completed' %}bg-success{% elif step.status == 'active' %}bg-info{% else %}bg-secondary{% endif %} quantum-score">
                                    {{ step.status | capitalize }}
                                </span>
                            </div>
                            
                            <!-- LED tracer lines connecting steps -->
                            {% if not loop.last %}
                            <div class="step-connector" style="--connector-color: {{ step.color }};"></div>
                            {% endif %}
                        </div>
                        {% endfor %}
                        
                        <!-- 3D Tetrahedron visualization at the bottom -->
                        <div class="tetrahedron-container">
                            <div class="tetrahedron">
                                <div class="tetra-face tetra-face-1"></div>
                                <div class="tetra-face tetra-face-2"></div>
                                <div class="tetra-face tetra-face-3"></div>
                                <div class="tetra-face tetra-face-4"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="glass-card mb-4">
            <div class="card-body p-4">
                <h3 class="h4 mb-4 quantum-glow">Workflow Status</h3>
                
                <div class="mb-4">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span>Overall Progress</span>
                        <span class="badge bg-info quantum-score">60%</span>
                    </div>
                    <div class="progress" style="height: 8px;">
                        <div class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                
                <div class="workflow-stats">
                    <div class="stat-item mb-3">
                        <div class="d-flex justify-content-between">
                            <span>Completed Steps</span>
                            <span class="fw-bold text-success">2</span>
                        </div>
                    </div>
                    <div class="stat-item mb-3">
                        <div class="d-flex justify-content-between">
                            <span>Active Steps</span>
                            <span class="fw-bold text-info">1</span>
                        </div>
                    </div>
                    <div class="stat-item mb-3">
                        <div class="d-flex justify-content-between">
                            <span>Pending Steps</span>
                            <span class="fw-bold text-secondary">2</span>
                        </div>
                    </div>
                    <div class="stat-item mb-3">
                        <div class="d-flex justify-content-between">
                            <span>Total Execution Time</span>
                            <span class="fw-bold">2.4s</span>
                        </div>
                    </div>
                </div>
                
                <div class="mt-4 d-grid">
                    <button class="btn btn-outline-light quantum-btn">
                        <i class="fas fa-play me-2"></i> Run Workflow
                    </button>
                </div>
            </div>
        </div>
        
        <div class="glass-card">
            <div class="card-body p-4">
                <h3 class="h4 mb-4 quantum-glow">Current Activity</h3>
                
                <div class="activity-log" id="activity-log">
                    <div class="activity-item">
                        <div class="activity-timestamp">11:15:30</div>
                        <div class="activity-content">
                            <span class="badge bg-success me-1">Step 2</span>
                            NLP Processing completed
                        </div>
                    </div>
                    <div class="activity-item">
                        <div class="activity-timestamp">11:15:28</div>
                        <div class="activity-content">
                            <span class="badge bg-info me-1">Step 3</span>
                            Starting Quantum Thinking algorithm
                        </div>
                    </div>
                    <div class="activity-item">
                        <div class="activity-timestamp">11:15:25</div>
                        <div class="activity-content">
                            <span class="badge bg-success me-1">Step 1</span>
                            Text input received (128 chars)
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    /* Workflow Pyramid Container */
    .workflow-pyramid-container {
        padding: 20px 0;
        position: relative;
    }
    
    .workflow-pyramid {
        display: flex;
        flex-direction: column;
        gap: 30px;
        padding: 20px;
        position: relative;
    }
    
    /* Workflow Steps */
    .workflow-step {
        --step-bg: rgba(30, 41, 59, 0.4);
        --step-border: var(--step-color);
        
        display: flex;
        background: var(--step-bg);
        border-radius: 12px;
        padding: 15px;
        position: relative;
        transition: all 0.3s ease;
        box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
        border-left: 3px solid var(--step-border);
    }
    
    .workflow-step:hover {
        transform: translateY(-5px);
    }
    
    .workflow-step.completed {
        --step-bg: rgba(40, 167, 69, 0.1);
    }
    
    .workflow-step.active {
        --step-bg: rgba(13, 202, 240, 0.1);
        animation: step-pulse 2s infinite alternate;
    }
    
    @keyframes step-pulse {
        0% { box-shadow: 0 0 5px var(--step-color); }
        100% { box-shadow: 0 0 15px var(--step-color); }
    }
    
    /* Step Connector - LED Tracer Lines */
    .step-connector {
        position: absolute;
        left: 24px;
        top: 100%;
        height: 30px;
        width: 2px;
        background: linear-gradient(to bottom, var(--connector-color), transparent);
        z-index: 1;
        animation: pulse-connector 2s infinite alternate;
    }
    
    @keyframes pulse-connector {
        0% { opacity: 0.5; }
        100% { opacity: 1; }
    }
    
    /* Step Content */
    .step-indicator {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 15px;
    }
    
    .step-number {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--step-color);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        color: white;
        box-shadow: 0 0 10px var(--step-color);
    }
    
    .step-line {
        width: 2px;
        height: 100%;
        background-color: var(--step-color);
        opacity: 0.5;
    }
    
    .step-content {
        flex: 1;
    }
    
    .step-title {
        font-size: 1.1rem;
        margin-bottom: 5px;
        color: var(--step-color);
    }
    
    .step-desc {
        font-size: 0.9rem;
        opacity: 0.8;
        margin-bottom: 10px;
    }
    
    /* 3D Tetrahedron */
    .tetrahedron-container {
        margin-top: 30px;
        height: 150px;
        display: flex;
        justify-content: center;
        align-items: center;
        perspective: 1000px;
    }
    
    .tetrahedron {
        width: 100px;
        height: 100px;
        position: relative;
        transform-style: preserve-3d;
        animation: tetra-rotate 15s linear infinite;
    }
    
    @keyframes tetra-rotate {
        0% { transform: rotateX(0) rotateY(0); }
        100% { transform: rotateX(360deg) rotateY(360deg); }
    }
    
    .tetra-face {
        position: absolute;
        width: 0;
        height: 0;
        border-style: solid;
        opacity: 0.7;
        backface-visibility: visible;
    }
    
    .tetra-face-1 {
        border-width: 0 50px 86.6px 50px;
        border-color: transparent transparent rgba(218, 75, 134, 0.5) transparent;
        transform: rotateX(30deg) translateY(-50px) translateZ(28.87px);
    }
    
    .tetra-face-2 {
        border-width: 0 50px 86.6px 50px;
        border-color: transparent transparent rgba(111, 66, 193, 0.5) transparent;
        transform: rotateX(30deg) rotateY(120deg) translateY(-50px) translateZ(28.87px);
    }
    
    .tetra-face-3 {
        border-width: 0 50px 86.6px 50px;
        border-color: transparent transparent rgba(13, 202, 240, 0.5) transparent;
        transform: rotateX(30deg) rotateY(240deg) translateY(-50px) translateZ(28.87px);
    }
    
    .tetra-face-4 {
        border-width: 0 50px 86.6px 50px;
        border-color: transparent transparent rgba(255, 255, 255, 0.3) transparent;
        transform: rotateX(-30deg) rotateY(0deg) translateY(50px) translateZ(28.87px);
    }
    
    /* Activity Log */
    .activity-log {
        display: flex;
        flex-direction: column;
        gap: 15px;
        height: 200px;
        overflow-y: auto;
    }
    
    .activity-item {
        display: flex;
        gap: 10px;
        font-size: 0.9rem;
        padding-bottom: 10px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .activity-timestamp {
        color: rgba(255, 255, 255, 0.6);
        white-space: nowrap;
    }
    
    .activity-content {
        flex: 1;
    }
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Animate the workflow steps on load
    const steps = document.querySelectorAll('.workflow-step');
    
    steps.forEach((step, index) => {
        setTimeout(() => {
            step.classList.add('fade-in');
        }, index * 200);
    });
    
    // Simulate activity log updates
    const activityLog = document.getElementById('activity-log');
    const activities = [
        { time: '11:15:35', step: 3, message: 'Processing quantum dimension 1/3' },
        { time: '11:15:42', step: 3, message: 'Processing quantum dimension 2/3' },
        { time: '11:15:50', step: 3, message: 'Processing quantum dimension 3/3' }
    ];
    
    let i = 0;
    const activityTimer = setInterval(() => {
        if (i >= activities.length) {
            clearInterval(activityTimer);
            return;
        }
        
        const activity = activities[i];
        const activityItem = document.createElement('div');
        activityItem.className = 'activity-item';
        activityItem.innerHTML = `
            <div class="activity-timestamp">${activity.time}</div>
            <div class="activity-content">
                <span class="badge bg-info me-1">Step ${activity.step}</span>
                ${activity.message}
            </div>
        `;
        
        activityLog.insertBefore(activityItem, activityLog.firstChild);
        
        // Apply fade-in effect
        activityItem.style.opacity = '0';
        setTimeout(() => {
            activityItem.style.transition = 'opacity 0.5s ease';
            activityItem.style.opacity = '1';
        }, 10);
        
        i++;
    }, 5000);
    
    // Add particle effects to the tetrahedron
    const tetrahedron = document.querySelector('.tetrahedron');
    
    setInterval(() => {
        const rect = tetrahedron.getBoundingClientRect();
        const x = rect.left + rect.width / 2;
        const y = rect.top + rect.height / 2;
        
        // Random position around the tetrahedron
        const angle = Math.random() * Math.PI * 2;
        const distance = 20 + Math.random() * 30;
        const particleX = x + Math.cos(angle) * distance;
        const particleY = y + Math.sin(angle) * distance;
        
        // Create particle
        createParticle(particleX, particleY);
    }, 300);
    
    function createParticle(x, y) {
        const colors = ['#da4b86', '#6f42c1', '#0dcaf0'];
        const color = colors[Math.floor(Math.random() * colors.length)];
        
        const particle = document.createElement('div');
        particle.className = 'quantum-particle';
        particle.style.left = x + 'px';
        particle.style.top = y + 'px';
        particle.style.color = color;
        
        document.body.appendChild(particle);
        
        // Remove after animation
        setTimeout(() => {
            particle.remove();
        }, 1000);
    }
});
</script>
{% endblock %}