{% extends "base.html" %}
{% load static %}
{% load django_htmx %}

{% block content_container_class %}container-fluid content-wide px-3{% endblock %}

{% block title %}
    Atlas Task Overview
{% endblock title %}

{% block content %}
    <div class="container-fluid py-3 px-3">
        <style>
            .task-overview-table {
                min-width: 1650px;
            }

            .task-overview-table th,
            .task-overview-table td {
                white-space: nowrap;
                vertical-align: middle;
            }

            .task-overview-table .task-col,
            .task-overview-table .generated-col,
            .task-overview-table .error-col,
            .task-overview-table .actions-col {
                white-space: normal;
            }

            .task-overview-table .generated-col {
                min-width: 220px;
            }
        </style>
        <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
            <h2 class="h4 mb-0">Atlas Task Overview</h2>
            <div class="d-flex gap-2">
                <a class="btn btn-outline-secondary btn-sm" href="?status=all">All</a>
                <a class="btn btn-outline-warning btn-sm" href="?status=active">Active</a>
                <a class="btn btn-outline-success btn-sm" href="?status=completed">Completed</a>
                <a class="btn btn-outline-danger btn-sm" href="?status=failed">Failed</a>
            </div>
        </div>

        {% if backend_missing %}
            <div class="alert alert-warning">
                django_tasks_db backend is not available in this environment. Install and migrate it to see task records.
            </div>
        {% endif %}

        <div class="row g-2 mb-3">
            <div class="col-md-4">
                <div class="card border-warning">
                    <div class="card-body py-2">
                        <div class="small text-muted">Active</div>
                        <div class="h4 mb-0 text-warning">{{ counts.active }}</div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card border-success">
                    <div class="card-body py-2">
                        <div class="small text-muted">Completed</div>
                        <div class="h4 mb-0 text-success">{{ counts.completed }}</div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card border-danger">
                    <div class="card-body py-2">
                        <div class="small text-muted">Failed</div>
                        <div class="h4 mb-0 text-danger">{{ counts.failed }}</div>
                    </div>
                </div>
            </div>
        </div>

        <form method="post" class="mb-3">
            {% csrf_token %}
            <div class="d-flex flex-wrap align-items-center gap-2 mb-2">
                <select class="form-select form-select-sm" name="task_action" style="max-width: 320px;">
                    <option value="">Choose task action...</option>
                    <option value="reset_failed">Reset FAILED to READY</option>
                    <option value="reset_selected">Reset selected to READY (skip RUNNING)</option>
                    <option value="reset_stale_running">Reset stale RUNNING to READY</option>
                    <option value="delete_completed">Delete selected COMPLETED</option>
                    <option value="delete_failed">Delete selected FAILED</option>
                    <option value="delete_selected_all">Delete ALL selected (including RUNNING)</option>
                </select>
                <input
                    class="form-control form-control-sm"
                    type="number"
                    name="stale_minutes"
                    min="1"
                    step="1"
                    value="30"
                    style="max-width: 150px;"
                    title="Stale cutoff in minutes for reset stale RUNNING action"
                    aria-label="Stale minutes"
                >
                <button type="submit" class="btn btn-sm btn-primary">Apply to selected</button>
                <div class="form-check ms-2">
                    <input class="form-check-input" type="checkbox" id="select-all-tasks">
                    <label class="form-check-label small" for="select-all-tasks">Select all</label>
                </div>
            </div>

            <div class="table-responsive">
                <table class="table table-sm table-striped align-middle task-overview-table">
                    <thead>
                        <tr>
                            <th style="width: 36px;"></th>
                            <th class="task-col">Task</th>
                            <th>Status</th>
                            <th class="generated-col">Generated Series</th>
                            <th>Queue</th>
                            <th>Enqueued</th>
                            <th>Started</th>
                            <th>Finished</th>
                            <th>Worker</th>
                            <th class="error-col">Error</th>
                            <th class="actions-col">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for task in tasks %}
                            <tr>
                                <td>
                                    <input class="form-check-input task-select" type="checkbox" name="task_ids" value="{{ task.id }}">
                                </td>
                                <td class="task-col">
                                    <div class="small fw-semibold">{{ task.task_path }}</div>
                                    <div class="small text-muted">{{ task.id }}</div>
                                </td>
                                <td>
                                    {% if task.status == "FAILED" %}
                                        <span class="badge bg-danger">{{ task.status }}</span>
                                    {% elif task.status == "SUCCESSFUL" %}
                                        <span class="badge bg-success">{{ task.status }}</span>
                                    {% elif task.status == "RUNNING" or task.status == "READY" %}
                                        <span class="badge bg-warning text-dark">{{ task.status }}</span>
                                    {% else %}
                                        <span class="badge bg-secondary">{{ task.status }}</span>
                                    {% endif %}
                                </td>
                                <td class="small generated-col">
                                    {% if task.generated_series %}
                                        {% for series in task.generated_series %}
                                            <a class="d-block" target="_blank" href="{{ series.url }}">{{ series.description }}</a>
                                        {% endfor %}
                                    {% else %}
                                        <span class="text-muted">-</span>
                                    {% endif %}
                                </td>
                                <td>{{ task.queue_name }}</td>
                                <td class="small">{{ task.enqueued_at|date:"Y-m-d H:i:s" }}</td>
                                <td class="small">{{ task.started_at|date:"Y-m-d H:i:s" }}</td>
                                <td class="small">{{ task.finished_at|date:"Y-m-d H:i:s" }}</td>
                                <td class="small">{{ task.worker_ids }}</td>
                                <td class="small text-danger error-col">{{ task.exception_class_path|default:"" }}</td>
                                <td class="small actions-col">
                                    {% if task.traceback %}
                                        <button
                                            class="btn btn-outline-danger btn-sm"
                                            type="button"
                                            data-bs-toggle="collapse"
                                            data-bs-target="#traceback-{{ task.id }}"
                                            aria-expanded="false"
                                            aria-controls="traceback-{{ task.id }}"
                                        >
                                            View full traceback
                                        </button>
                                    {% else %}
                                        <span class="text-muted">-</span>
                                    {% endif %}
                                </td>
                            </tr>
                            {% if task.traceback %}
                                <tr class="collapse" id="traceback-{{ task.id }}">
                                    <td></td>
                                    <td colspan="10">
                                        <div class="border rounded bg-dark-subtle p-2">
                                            <div class="small fw-semibold mb-1">Full traceback</div>
                                    <pre class="small mb-0" style="white-space: pre-wrap;">{{ task.traceback }}</pre>
                                        </div>
                                    </td>
                                </tr>
                            {% endif %}
                        {% empty %}
                            <tr>
                                <td colspan="11" class="text-muted">No tasks found for this filter.</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </form>

        <script>
            (function () {
                const selectAll = document.getElementById('select-all-tasks');
                const rows = Array.from(document.querySelectorAll('.task-select'));
                if (!selectAll || !rows.length) {
                    return;
                }

                selectAll.addEventListener('change', function () {
                    rows.forEach((cb) => {
                        cb.checked = selectAll.checked;
                    });
                });
            })();
        </script>
    </div>
{% endblock content %}