{% extends "dashboard/base.html" %}

{% block title %}MQ Dashboard - Job {{ job._id }}{% endblock %}

{% block content %}
<div class="col-12">
    <div class="card mb-4">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">Job Details</h5>
            <div>
                <a href="{{ request.url_for('store_detail', store_name=job.store_name) }}" class="btn btn-outline-secondary">
                    <i class="fas fa-arrow-left"></i> Back to Store
                </a>
            </div>
        </div>
        <div class="card-body">
            <!-- Job metadata -->
            <div class="row mb-4">
                <div class="col-md-6">
                    <div class="card mb-3">
                        <div class="card-header">
                            <h6 class="mb-0">Basic Information</h6>
                        </div>
                        <div class="card-body">
                            <dl class="row mb-0">
                                <dt class="col-sm-4">Job ID</dt>
                                <dd class="col-sm-8">{{ job._id }}</dd>
                                
                                <dt class="col-sm-4">Store</dt>
                                <dd class="col-sm-8">{{ job.store_name }}</dd>
                                
                                <dt class="col-sm-4">Status</dt>
                                <dd class="col-sm-8">
                                    <span class="badge 
                                        {% if job.status == 'PENDING' %}bg-warning text-dark
                                        {% elif job.status == 'PROCESSING' %}bg-primary
                                        {% elif job.status == 'COMPLETED' %}bg-success
                                        {% elif job.status == 'FAILED' %}bg-danger
                                        {% else %}bg-secondary{% endif %}">
                                        {{ job.status }}
                                    </span>
                                </dd>
                                
                                <dt class="col-sm-4">Priority</dt>
                                <dd class="col-sm-8">{{ job.priority }}</dd>
                                
                                <dt class="col-sm-4">Next Run At</dt>
                                <dd class="col-sm-8">
                                    {% if job.next_run_at %}
                                        {{ job.next_run_at.strftime('%Y-%m-%d %H:%M:%S') }}
                                    {% else %}
                                        -
                                    {% endif %}
                                </dd>
                                
                                {% if job.locked_by %}
                                    <dt class="col-sm-4">Locked By</dt>
                                    <dd class="col-sm-8">{{ job.locked_by }}</dd>
                                {% endif %}
                            </dl>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-6">
                    <!-- Retry information if available -->
                    {% if job.retry %}
                        <div class="card mb-3">
                            <div class="card-header">
                                <h6 class="mb-0">Retry Information</h6>
                            </div>
                            <div class="card-body">
                                <dl class="row mb-0">
                                    <dt class="col-sm-4">Remaining Attempts</dt>
                                    <dd class="col-sm-8">{{ job.retry.attempt }}</dd>
                                    
                                    <dt class="col-sm-4">Delay</dt>
                                    <dd class="col-sm-8">{{ job.retry.delay }} seconds</dd>
                                    
                                    <dt class="col-sm-4">Backoff</dt>
                                    <dd class="col-sm-8">{{ job.retry.backoff_factor }}x</dd>
                                    
                                    {% if job.retry.last_attempt_at %}
                                        <dt class="col-sm-4">Last Attempt</dt>
                                        <dd class="col-sm-8">{{ job.retry.last_attempt_at.strftime('%Y-%m-%d %H:%M:%S') }}</dd>
                                    {% endif %}
                                </dl>
                            </div>
                        </div>
                    {% endif %}
                    
                    <!-- Job actions -->
                    <div class="card">
                        <div class="card-header">
                            <h6 class="mb-0">Actions</h6>
                        </div>
                        <div class="card-body">
                            <form method="POST" action="{{ request.url_for('job_action', job_id=job._id) }}">
                                <input type="hidden" name="store_name" value="{{ job.store_name }}">
                                <div class="d-grid gap-2">
                                    <button type="submit" name="action" value="run" class="btn btn-primary">
                                        <i class="fas fa-play me-2"></i> Run Now
                                    </button>
                                    <button type="submit" name="action" value="retry" class="btn btn-warning">
                                        <i class="fas fa-redo me-2"></i> Reset & Retry
                                    </button>
                                    <button type="submit" name="action" value="delete" class="btn btn-danger" 
                                            onclick="return confirm('Are you sure you want to delete this job?');">
                                        <i class="fas fa-trash me-2"></i> Delete Job
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Payload display -->
            <div class="card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h6 class="mb-0">Payload</h6>
                    <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#editJobModal">
                        <i class="fas fa-edit"></i> Edit Job
                    </button>
                </div>
                <div class="card-body">
                    <pre id="payloadJson">{{ job.payload | tojson(indent=2) }}</pre>
                </div>
            </div>
            
            <!-- Traceback display if job failed -->
            {% if job.status == 'FAILED' and job.traceback %}
                <div class="card mb-4">
                    <div class="card-header bg-danger text-white">
                        <h6 class="mb-0">Traceback</h6>
                    </div>
                    <div class="card-body">
                        <pre class="text-danger mb-0">{{ job.traceback }}</pre>
                    </div>
                </div>
            {% endif %}
            
            <!-- Error display if job failed -->
            {% if job.status == 'FAILED' and job.error %}
                <div class="card mb-4">
                    <div class="card-header bg-danger text-white">
                        <h6 class="mb-0">Error</h6>
                    </div>
                    <div class="card-body">
                        <pre class="text-danger mb-0">{{ job.error }}</pre>
                    </div>
                </div>
            {% endif %}
            
            <!-- Result display if completed -->
            {% if job.status == 'COMPLETED' and job.result %}
                <div class="card">
                    <div class="card-header bg-success text-white">
                        <h6 class="mb-0">Result</h6>
                    </div>
                    <div class="card-body">
                        <pre>{{ job.result | tojson(indent=2) }}</pre>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- Edit Job Modal -->
<div class="modal fade" id="editJobModal" tabindex="-1" aria-labelledby="editJobModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form method="POST" action="{{ request.url_for('update_job', job_id=job._id) }}">
                <input type="hidden" name="store_name" value="{{ job.store_name }}">
                <div class="modal-header">
                    <h5 class="modal-title" id="editJobModalLabel">Edit Job</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="priority" class="form-label">Priority</label>
                        <input type="number" class="form-control" id="priority" name="priority" value="{{ job.priority }}">
                        <div class="form-text">Higher value means higher priority</div>
                    </div>
                    <div class="mb-3">
                        <label for="payload" class="form-label">Payload (JSON)</label>
                        <textarea class="form-control font-monospace" id="payloadEdit" name="payload" rows="15" required>{{ job.payload | tojson(indent=2) }}</textarea>
                        <div class="form-text">Edit the JSON payload. Must be valid JSON format.</div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Changes</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // Format JSON when page loads
    document.addEventListener('DOMContentLoaded', function() {
        try {
            const payloadElem = document.getElementById('payloadJson');
            const payloadEditElem = document.getElementById('payloadEdit');
            const payload = JSON.parse(payloadElem.textContent);
            const formattedJson = JSON.stringify(payload, null, 2);
            
            // Update the display and edit elements
            payloadElem.textContent = formattedJson;
            if (payloadEditElem) {
                payloadEditElem.value = formattedJson;
            }
        } catch (e) {
            console.log('Could not parse JSON payload', e);
        }
    });
    
    // Add JSON validation for the edit form
    document.querySelector('form[action^="/dashboard/jobs/"][action$="/update"]').addEventListener('submit', function(e) {
        const payloadField = document.getElementById('payloadEdit');
        try {
            // Validate JSON before submitting
            JSON.parse(payloadField.value);
        } catch (error) {
            e.preventDefault();
            alert('Invalid JSON format: ' + error.message);
            payloadField.focus();
        }
    });
</script>
{% endblock %}