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

{% block content %}
<div class="container py-5">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-1">
                    <li class="breadcrumb-item"><a href="{% url 'voter_advanced_search' %}" class="text-decoration-none">Advanced Search</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Bulk Operations</li>
                </ol>
            </nav>
            <h1 class="h2 mb-0">Bulk Operations Log</h1>
        </div>
        <div class="d-flex gap-2">
            <button type="button" class="btn btn-outline-primary btn-sm" onclick="window.location.reload();">
                <i class="bi bi-arrow-clockwise me-1"></i> Refresh Status
            </button>
            <a href="{% url 'voter_advanced_search' %}" class="btn btn-outline-secondary btn-sm">Back to Search</a>
        </div>
    </div>

    <div class="card border-0 shadow-sm">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="bg-light">
                        <tr>
                            <th class="ps-4">Type</th>
                            <th>Status</th>
                            <th>Progress</th>
                            <th>Counts</th>
                            <th>Created</th>
                            <th class="pe-4 text-end">Details</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for task in bulk_tasks %}
                        <tr>
                            <td class="ps-4">
                                <span class="badge {% if task.task_type == 'sms' %}bg-info{% else %}bg-primary{% endif %} text-uppercase px-2 py-1">
                                    {{ task.get_task_type_display }}
                                </span>
                            </td>
                            <td>
                                {% if task.status == 'processing' %}
                                    <span class="text-primary fw-medium"><i class="bi bi-arrow-repeat spin me-1"></i> In Progress</span>
                                {% elif task.status == 'completed' %}
                                    <span class="text-success fw-medium"><i class="bi bi-check-circle me-1"></i> Completed</span>
                                {% elif task.status == 'failed' %}
                                    <span class="text-danger fw-medium" title="{{ task.error_message }}"><i class="bi bi-exclamation-triangle me-1"></i> Failed</span>
                                {% else %}
                                    <span class="text-muted fw-medium">{{ task.get_status_display }}</span>
                                {% endif %}
                            </td>
                            <td style="min-width: 200px;">
                                <div class="progress" style="height: 8px;">
                                    {% if task.total_count > 0 %}
                                        {% with success_percent=task.success_count|add:task.fail_count|mul:100|div:task.total_count %}
                                        <div class="progress-bar {% if task.status == 'failed' %}bg-danger{% elif task.status == 'completed' %}bg-success{% else %}progress-bar-striped progress-bar-animated{% endif %}" 
                                             role="progressbar" 
                                             style="width: {{ success_percent }}%">
                                        </div>
                                        {% endwith %}
                                    {% else %}
                                        <div class="progress-bar bg-light" style="width: 0%"></div>
                                    {% endif %}
                                </div>
                            </td>
                            <td>
                                <div class="small">
                                    <span class="text-success">{{ task.success_count }} success</span> • 
                                    <span class="text-danger">{{ task.fail_count }} fail</span> • 
                                    <span class="text-muted">{{ task.total_count }} total</span>
                                </div>
                            </td>
                            <td class="small text-muted">
                                {{ task.created_at|date:"M j, Y" }}<br>
                                {{ task.created_at|date:"H:i" }}
                            </td>
                            <td class="pe-4 text-end">
                                <button type="button" class="btn btn-light btn-sm rounded-circle" data-bs-toggle="collapse" data-bs-target="#task-details-{{ task.id }}" aria-expanded="false">
                                    <i class="bi bi-chevron-down"></i>
                                </button>
                            </td>
                        </tr>
                        <tr class="collapse" id="task-details-{{ task.id }}">
                            <td colspan="6" class="bg-light border-0 py-3 px-4">
                                <div class="row">
                                    <div class="col-md-8">
                                        <div class="mb-2">
                                            <label class="small fw-bold text-muted text-uppercase mb-1">Message Body</label>
                                            <div class="p-3 bg-white rounded border small text-break" style="white-space: pre-wrap;">{{ task.message_body|default:"(No content)" }}</div>
                                        </div>
                                        {% if task.subject %}
                                        <div class="mb-2">
                                            <label class="small fw-bold text-muted text-uppercase mb-1">Subject</label>
                                            <div class="p-2 bg-white rounded border small">{{ task.subject }}</div>
                                        </div>
                                        {% endif %}
                                    </div>
                                    <div class="col-md-4">
                                        {% if task.error_message %}
                                        <div class="alert alert-danger py-2 small mb-0">
                                            <div class="fw-bold mb-1"><i class="bi bi-exclamation-octagon me-1"></i> Error Details:</div>
                                            {{ task.error_message }}
                                        </div>
                                        {% endif %}
                                        <div class="mt-3 small text-muted">
                                            <div><strong>Task ID:</strong> #{{ task.id }}</div>
                                            <div><strong>Last Updated:</strong> {{ task.updated_at|date:"M j, H:i:s" }}</div>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="6" class="text-center py-5 text-muted">
                                <i class="bi bi-list-task display-4 d-block mb-3"></i>
                                <p class="mb-0">No bulk operations have been performed yet.</p>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
        {% if bulk_tasks.paginator.num_pages > 1 %}
        <div class="card-footer bg-white border-0 py-3">
            <nav aria-label="Page navigation">
                <ul class="pagination justify-content-center mb-0 pagination-sm">
                    {% if bulk_tasks.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?page=1" aria-label="First">
                            <span aria-hidden="true">&laquo;&laquo;</span>
                        </a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ bulk_tasks.previous_page_number }}" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    {% endif %}

                    <li class="page-item active"><span class="page-link">{{ bulk_tasks.number }} of {{ bulk_tasks.paginator.num_pages }}</span></li>

                    {% if bulk_tasks.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ bulk_tasks.next_page_number }}" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ bulk_tasks.paginator.num_pages }}" aria-label="Last">
                            <span aria-hidden="true">&raquo;&raquo;</span>
                        </a>
                    </li>
                    {% endif %}
                </ul>
            </nav>
        </div>
        {% endif %}
    </div>
</div>

<style>
    .spin { animation: spin 2s linear infinite; display: inline-block; }
    @keyframes spin { 100% { transform: rotate(360deg); } }
    .breadcrumb-item + .breadcrumb-item::before { content: "›"; }
</style>
{% endblock %}