{% extends saladbar_base_template %}
{% load static %}

{% block title %}{{ task.name }} — Salad Bar{% endblock title %}

{% block css %}
<style>
    .card {
        border-radius: 12px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
        border: 1px solid #e2e8f0;
    }
    .card-header {
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
        border-bottom: 2px solid #e2e8f0;
        font-weight: 700;
        font-size: 1.1rem;
    }
    .stat-card {
        border-radius: 12px;
        border: 1px solid #e2e8f0;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
        padding: 1rem;
        background: #fff;
        text-align: center;
    }
    .stat-card .stat-value {
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1.2;
    }
    .stat-card .stat-label {
        font-size: 0.75rem;
        color: #64748b;
        font-weight: 500;
    }
    .table-responsive {
        border-radius: 12px;
        overflow: hidden;
    }
    .table thead th {
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
        color: #475569;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 0.75rem;
        letter-spacing: 0.5px;
        padding: 0.875rem 0.75rem;
        border: none;
        white-space: nowrap;
    }
    .table tbody tr {
        transition: background-color 0.15s;
        border-bottom: 1px solid #f1f5f9;
    }
    .table tbody tr:hover { background-color: #f0f9ff; }
    .table tbody td {
        padding: 0.75rem;
        vertical-align: middle;
        font-size: 0.875rem;
        color: #1e293b;
    }
    .section-header {
        font-weight: 700;
        font-size: 1.25rem;
        color: #1e293b;
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 2px solid #e2e8f0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .section-header i { font-size: 1.1rem; }
</style>
{% endblock css %}

{% block content %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-start my-4">
        <div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-1">
                    <li class="breadcrumb-item"><a href="{% url 'saladbar:dashboard' %}">Salad Bar</a></li>
                    <li class="breadcrumb-item"><a href="{% url 'saladbar:task-list' %}">Periodic Tasks</a></li>
                    <li class="breadcrumb-item active">{{ task.name }}</li>
                </ol>
            </nav>
            <h1 class="fw-bold {% if not task.enabled %}text-muted{% endif %}">{{ task.name }}</h1>
            <p class="text-muted mb-0" style="font-family: monospace; font-size: 0.85rem;">{{ task.task }}</p>
        </div>
        <div class="d-flex gap-2">
            <form method="post" action="{% url 'saladbar:task-run' task.pk %}">
                {% csrf_token %}
                <input type="hidden" name="next" value="{% url 'saladbar:task-detail' task.pk %}">
                <button type="submit" class="btn btn-primary btn-sm">
                    <i class="fa-solid fa-play me-1"></i> Run Now
                </button>
            </form>
            <a href="{% url 'saladbar:task-list' %}" class="btn btn-outline-secondary btn-sm">
                <i class="fa-solid fa-arrow-left me-1"></i> Back
            </a>
        </div>
    </div>

    <!-- Task Info -->
    <div class="row g-4 mb-4">
        <div class="col-lg-5">
            <div class="card h-100">
                <div class="card-header d-flex align-items-center gap-2">
                    <i class="fa-solid fa-circle-info" style="color: #3b82f6;"></i> Task Info
                </div>
                <div class="card-body">
                    <dl class="row mb-0">
                        <dt class="col-sm-4" style="font-size: 0.85rem;">Status</dt>
                        <dd class="col-sm-8">
                            {% if task.enabled %}
                            <span class="badge bg-success">enabled</span>
                            {% else %}
                            <span class="badge bg-secondary">disabled</span>
                            {% endif %}
                        </dd>
                        <dt class="col-sm-4" style="font-size: 0.85rem;">Schedule</dt>
                        <dd class="col-sm-8" style="font-size: 0.85rem;">
                            <i class="fa-regular fa-clock me-1 text-muted"></i>
                            {% if task.crontab %}{{ task.crontab }}{% elif task.interval %}{{ task.interval }}{% else %}—{% endif %}
                        </dd>
                        <dt class="col-sm-4" style="font-size: 0.85rem;">Args</dt>
                        <dd class="col-sm-8" style="font-size: 0.85rem; font-family: monospace;">{{ task.args|default:"[]" }}</dd>
                        <dt class="col-sm-4" style="font-size: 0.85rem;">Kwargs</dt>
                        <dd class="col-sm-8" style="font-size: 0.85rem; font-family: monospace;">{{ task.kwargs|default:"{}" }}</dd>
                        <dt class="col-sm-4" style="font-size: 0.85rem;">Queue</dt>
                        <dd class="col-sm-8" style="font-size: 0.85rem;">{{ task.queue|default:"default" }}</dd>
                        <dt class="col-sm-4" style="font-size: 0.85rem;">Total Runs</dt>
                        <dd class="col-sm-8" style="font-size: 0.85rem;">{{ task.total_run_count }}</dd>
                        {% if task.last_run_at %}
                        <dt class="col-sm-4" style="font-size: 0.85rem;">Last Run</dt>
                        <dd class="col-sm-8" style="font-size: 0.85rem;">{{ task.last_run_at|timesince }} ago</dd>
                        {% endif %}
                        {% if task.description %}
                        <dt class="col-sm-4" style="font-size: 0.85rem;">Description</dt>
                        <dd class="col-sm-8" style="font-size: 0.85rem;">{{ task.description }}</dd>
                        {% endif %}
                    </dl>
                </div>
            </div>
        </div>
        <div class="col-lg-7">
            <div class="row g-3 mb-3">
                <div class="col">
                    <div class="stat-card">
                        <div class="stat-value" style="color: #10b981;">{{ success_count }}</div>
                        <div class="stat-label">Successes</div>
                    </div>
                </div>
                <div class="col">
                    <div class="stat-card">
                        <div class="stat-value" style="color: #ef4444;">{{ failure_count }}</div>
                        <div class="stat-label">Failures</div>
                    </div>
                </div>
                <div class="col">
                    <div class="stat-card">
                        <div class="stat-value" style="color: #f59e0b;">{{ retry_count }}</div>
                        <div class="stat-label">Retries</div>
                    </div>
                </div>
                <div class="col">
                    <div class="stat-card">
                        <div class="stat-value" style="color: #3b82f6;">{{ avg_runtime }}s</div>
                        <div class="stat-label">Avg Runtime</div>
                    </div>
                </div>
                <div class="col">
                    <div class="stat-card">
                        <div class="stat-value" style="color: #f59e0b;">{{ min_runtime }}s</div>
                        <div class="stat-label">Min</div>
                    </div>
                </div>
                <div class="col">
                    <div class="stat-card">
                        <div class="stat-value" style="color: #8b5cf6;">{{ max_runtime }}s</div>
                        <div class="stat-label">Max</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Runtime Trend Chart -->
    {% if runtime_chart_data != "[]" %}
    <div class="card mb-4">
        <div class="card-header d-flex align-items-center gap-2">
            <i class="fa-solid fa-chart-line" style="color: #3b82f6;"></i> Runtime Trend (Last 50 Runs)
        </div>
        <div class="card-body">
            <div style="position: relative; height: 200px;">
                <canvas id="runtimeChart"></canvas>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Execution History -->
    <div class="section-header">
        <i class="fa-solid fa-clock-rotate-left" style="color: #3b82f6;"></i> Execution History
    </div>
    <div class="card mb-4">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Status</th>
                            <th>Started</th>
                            <th>Completed</th>
                            <th>Duration</th>
                            <th>Worker</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for r in results %}
                        <tr>
                            <td style="font-family: monospace; font-size: 0.8rem;">{{ r.task_id|truncatechars:12 }}</td>
                            <td>
                                {% if r.status == "SUCCESS" %}
                                <span class="badge bg-success">success</span>
                                {% elif r.status == "FAILURE" %}
                                <span class="badge bg-danger">failure</span>
                                {% elif r.status == "STARTED" %}
                                <span class="badge bg-warning text-dark">started</span>
                                {% elif r.status == "PENDING" %}
                                <span class="badge bg-secondary">pending</span>
                                {% else %}
                                <span class="badge bg-secondary">{{ r.status|lower }}</span>
                                {% endif %}
                            </td>
                            <td style="font-size: 0.8rem; color: #64748b; white-space: nowrap;">{{ r.date_created|default:"—" }}</td>
                            <td style="font-size: 0.8rem; color: #64748b; white-space: nowrap;">{{ r.date_done|default:"—" }}</td>
                            <td style="font-size: 0.8rem;">
                                {% if r.date_created and r.date_done and r.status == "SUCCESS" %}
                                {{ r.date_created|timeuntil:r.date_done }}
                                {% else %}—{% endif %}
                            </td>
                            <td style="font-size: 0.8rem; color: #64748b;">{{ r.worker|default:"—" }}</td>
                            <td>
                                <a href="{% url 'saladbar:result-detail' r.pk %}" class="btn btn-outline-secondary btn-sm py-0 px-2" style="font-size: 0.75rem;">
                                    <i class="fa-solid fa-eye me-1"></i>Detail
                                </a>
                            </td>
                        </tr>
                        {% empty %}
                        <tr><td colspan="7" class="text-center text-muted py-4">No execution history.</td></tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{% endblock content %}

{% block script-footer %}
{% if runtime_chart_data != "[]" %}
<script src="{% static 'saladbar/js/chart.min.js' %}"></script>
<script>
    new Chart(document.getElementById('runtimeChart'), {
        type: 'line',
        data: {
            labels: {{ runtime_chart_labels|safe }},
            datasets: [{
                label: 'Runtime (s)',
                data: {{ runtime_chart_data|safe }},
                borderColor: '#3b82f6',
                backgroundColor: 'rgba(59,130,246,0.1)',
                fill: true,
                tension: 0.3,
                pointRadius: 3,
                pointBackgroundColor: '#3b82f6',
                spanGaps: true,
            }],
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: false },
                annotation: {
                    annotations: {
                        avgLine: {
                            type: 'line',
                            yMin: {{ avg_runtime }},
                            yMax: {{ avg_runtime }},
                            borderColor: '#94a3b8',
                            borderDash: [5, 5],
                            borderWidth: 1,
                            label: { display: true, content: 'avg {{ avg_runtime }}s', position: 'end', font: { size: 10 }, color: '#94a3b8' },
                        }
                    }
                }
            },
            scales: {
                x: { grid: { display: false }, ticks: { font: { size: 10 }, maxTicksLimit: 10 } },
                y: { beginAtZero: true, grid: { color: '#f1f5f9' }, ticks: { font: { size: 11 } } },
            },
        },
    });
</script>
{% endif %}
{% endblock script-footer %}