{% extends 'dlux/base.html' %}
{% load static dlux_translation %}

{% block title %}{{ DLUX_STRINGS.reports_title }}{% endblock %}

{% block content %}
<div class="container-fluid py-3">
    <div class="d-flex flex-column flex-lg-row justify-content-between align-items-lg-center gap-3 mb-4">
        <div>
            <h2 class="page-title mb-1"><i class="bi bi-bar-chart-fill me-2"></i>{{ DLUX_STRINGS.reports_title }}</h2>
            <p class="text-muted mb-0">{{ DLUX_STRINGS.reports_subtitle }}</p>
        </div>
        <div class="d-flex flex-wrap gap-2">
            <a class="btn btn-outline-primary rounded-pill" href="{% url 'reports_overview_xlsx' %}?window={{ overview.window }}{% if overview.filters.q %}&q={{ overview.filters.q|urlencode }}{% endif %}{% if overview.filters.model %}&model={{ overview.filters.model|urlencode }}{% endif %}{% if overview.filters.action %}&action={{ overview.filters.action|urlencode }}{% endif %}">
                <i class="bi bi-filetype-xlsx me-1"></i>{{ DLUX_STRINGS.reports_export_xlsx }}
            </a>
            {% if can_download_backup %}
                <div class="d-flex flex-column align-items-stretch gap-1">
                    <button type="button"
                            id="reports-backup-btn"
                            class="btn btn-primary rounded-pill"
                            data-start-url="{% url 'reports_backup_start' %}"
                            data-csrf="{{ csrf_token }}"
                            data-window="{{ overview.window }}"
                            data-active-status-url="{% if active_report_backup %}{% url 'reports_backup_status' active_report_backup.token %}{% endif %}"
                            data-active-progress="{% if active_report_backup %}{{ active_report_backup.progress_percent }}{% else %}0{% endif %}"
                            data-active-progress-message="{% if active_report_backup %}{{ active_report_backup.progress_message }}{% endif %}"
                            data-msg-preparing="{{ DLUX_STRINGS.reports_backup_preparing }}"
                            data-msg-ready="{{ DLUX_STRINGS.reports_backup_ready }}"
                            data-msg-failed="{{ DLUX_STRINGS.reports_backup_failed }}">
                        <i class="bi bi-file-zip-fill me-1"></i>{{ DLUX_STRINGS.reports_backup_zip }}
                    </button>
                    <small id="reports-backup-status" class="text-muted text-center">{% if active_report_backup %}{{ DLUX_STRINGS.reports_backup_preparing }}{% endif %}</small>
                    <div id="reports-backup-progress" class="{% if not active_report_backup %}d-none {% endif %}mt-1" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="{% if active_report_backup %}{{ active_report_backup.progress_percent }}{% else %}0{% endif %}">
                        <progress class="dlux-backup-progress" max="100" value="{% if active_report_backup %}{{ active_report_backup.progress_percent }}{% else %}0{% endif %}"></progress>
                        <small class="d-block text-muted text-center mt-1" data-reports-backup-progress-label>{% if active_report_backup %}{{ active_report_backup.progress_message }}{% endif %}</small>
                    </div>
                    <a id="reports-backup-latest"
                       class="small text-center{% if not latest_completed_report_backup %} d-none{% endif %}"
                       {% if latest_completed_report_backup %}href="{% url 'reports_backup_download' latest_completed_report_backup.token %}"{% endif %}>
                        {{ DLUX_STRINGS.reports_backup_download_ready }}
                    </a>
                </div>
            {% endif %}
        </div>
    </div>

    <form method="get" class="row g-2 align-items-end mb-4">
        <div class="col-md-3">
            <label class="form-label" for="reports-window">{{ DLUX_STRINGS.reports_window }}</label>
            <select id="reports-window" name="window" class="form-select">
                <option value="week"{% if overview.window == 'week' %} selected{% endif %}>{{ DLUX_STRINGS.user_report_window_week }}</option>
                <option value="month"{% if overview.window == 'month' %} selected{% endif %}>{{ DLUX_STRINGS.user_report_window_month }}</option>
                <option value="all"{% if overview.window == 'all' %} selected{% endif %}>{{ DLUX_STRINGS.user_report_window_all }}</option>
            </select>
        </div>
        <div class="col-md-3">
            <label class="form-label" for="reports-search">{{ DLUX_STRINGS.search }}</label>
            <input id="reports-search" type="search" name="q" value="{{ overview.filters.q }}" class="form-control">
        </div>
        <div class="col-md-2">
            <label class="form-label" for="reports-model">{{ DLUX_STRINGS.user_report_model }}</label>
            <select id="reports-model" name="model" class="form-select">
                <option value="">{{ DLUX_STRINGS.filter_all }}</option>
                {% for model in overview.available_models %}
                    {% if model %}
                    <option value="{{ model }}"{% if overview.filters.model == model %} selected{% endif %}>{{ model|translate_log:'model' }}</option>
                    {% endif %}
                {% endfor %}
            </select>
        </div>
        <div class="col-md-2">
            <label class="form-label" for="reports-action">{{ DLUX_STRINGS.user_report_action }}</label>
            <select id="reports-action" name="action" class="form-select">
                <option value="">{{ DLUX_STRINGS.filter_all }}</option>
                {% for action in overview.available_actions %}
                    {% if action %}
                    <option value="{{ action }}"{% if overview.filters.action == action %} selected{% endif %}>{{ action|translate_log:'action' }}</option>
                    {% endif %}
                {% endfor %}
            </select>
        </div>
        <div class="col-md-2">
            <button type="submit" class="btn btn-primary w-100 rounded-pill">
                <i class="bi bi-funnel-fill me-1"></i>{{ DLUX_STRINGS.btn_apply|default:DLUX_STRINGS.search }}
            </button>
        </div>
    </form>

    <div class="row g-3 mb-4">
        <div class="col-md-6 col-xl-3">
            <div class="p-3 border rounded bg-light h-100">
                <div class="text-muted small">{{ DLUX_STRINGS.reports_current_total }}</div>
                <div class="fs-3 fw-bold">{{ overview.current_total }}</div>
            </div>
        </div>
        <div class="col-md-6 col-xl-3">
            <div class="p-3 border rounded bg-light h-100">
                <div class="text-muted small">{{ DLUX_STRINGS.reports_previous_week_total }}</div>
                <div class="fs-3 fw-bold">{{ overview.previous_week_total }}</div>
            </div>
        </div>
        <div class="col-md-6 col-xl-3">
            <div class="p-3 border rounded bg-light h-100">
                <div class="text-muted small">{{ DLUX_STRINGS.reports_delta }}</div>
                <div class="fs-3 fw-bold">{{ overview.delta }}</div>
            </div>
        </div>
        <div class="col-md-6 col-xl-3">
            <div class="p-3 border rounded bg-light h-100">
                <div class="text-muted small">{{ DLUX_STRINGS.reports_all_total }}</div>
                <div class="fs-3 fw-bold">{{ overview.all_total }}</div>
            </div>
        </div>
        <div class="col-md-6 col-xl-3">
            <div class="p-3 border rounded bg-light h-100">
                <div class="text-muted small">{{ DLUX_STRINGS.reports_average_per_day }}</div>
                <div class="fs-3 fw-bold">{{ overview.average_per_active_day }}</div>
            </div>
        </div>
        <div class="col-md-6 col-xl-3">
            <div class="p-3 border rounded bg-light h-100">
                <div class="text-muted small">{{ DLUX_STRINGS.reports_average_per_user }}</div>
                <div class="fs-3 fw-bold">{{ overview.average_per_user }}</div>
            </div>
        </div>
    </div>

    <div class="row g-4">
        <div class="col-lg-6">
            <section class="p-3 border rounded bg-light h-100">
                <h5 class="mb-3">{{ DLUX_STRINGS.reports_by_user }}</h5>
                <div class="table-responsive">
                    <table class="table table-sm align-middle mb-0">
                        <thead><tr><th>{{ DLUX_STRINGS.user_report_username }}</th><th>{{ DLUX_STRINGS.user_report_count }}</th></tr></thead>
                        <tbody>
                            {% for item in overview.users %}
                                <tr><td>{{ item.label }}</td><td>{{ item.count }}</td></tr>
                            {% empty %}
                                <tr><td colspan="2" class="text-muted text-center py-4">{{ DLUX_STRINGS.reports_empty }}</td></tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </section>
        </div>
        <div class="col-lg-6">
            <section class="p-3 border rounded bg-light h-100">
                <h5 class="mb-3">{{ DLUX_STRINGS.reports_by_model }}</h5>
                <div class="table-responsive">
                    <table class="table table-sm align-middle mb-0">
                        <thead><tr><th>{{ DLUX_STRINGS.user_report_model }}</th><th>{{ DLUX_STRINGS.user_report_count }}</th></tr></thead>
                        <tbody>
                            {% for item in overview.models %}
                                <tr><td>{{ item.label }}</td><td>{{ item.count }}</td></tr>
                            {% empty %}
                                <tr><td colspan="2" class="text-muted text-center py-4">{{ DLUX_STRINGS.reports_empty }}</td></tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </section>
        </div>
        <div class="col-lg-6">
            <section class="p-3 border rounded bg-light h-100">
                <h5 class="mb-3">{{ DLUX_STRINGS.reports_by_action }}</h5>
                <div class="table-responsive">
                    <table class="table table-sm align-middle mb-0">
                        <thead><tr><th>{{ DLUX_STRINGS.user_report_action }}</th><th>{{ DLUX_STRINGS.user_report_count }}</th></tr></thead>
                        <tbody>
                            {% for item in overview.actions %}
                                <tr><td>{{ item.label }}</td><td>{{ item.count }}</td></tr>
                            {% empty %}
                                <tr><td colspan="2" class="text-muted text-center py-4">{{ DLUX_STRINGS.reports_empty }}</td></tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </section>
        </div>
        <div class="col-lg-6">
            <section class="p-3 border rounded bg-light h-100">
                <h5 class="mb-3">{{ DLUX_STRINGS.reports_by_day }}</h5>
                <div class="table-responsive">
                    <table class="table table-sm align-middle mb-0">
                        <thead><tr><th>{{ DLUX_STRINGS.user_report_timestamp }}</th><th>{{ DLUX_STRINGS.user_report_count }}</th></tr></thead>
                        <tbody>
                            {% for item in overview.days %}
                                <tr><td>{{ item.label }}</td><td>{{ item.count }}</td></tr>
                            {% empty %}
                                <tr><td colspan="2" class="text-muted text-center py-4">{{ DLUX_STRINGS.reports_empty }}</td></tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </section>
        </div>

        <div class="col-12">
            <section class="p-3 border rounded bg-light">
                <h5 class="mb-3">{{ DLUX_STRINGS.reports_user_drilldown }}</h5>
                <div class="table-responsive">
                    <table class="table table-sm align-middle mb-0">
                        <thead>
                            <tr>
                                <th>{{ DLUX_STRINGS.user_report_username }}</th>
                                <th>{{ DLUX_STRINGS.tbl_full_name }}</th>
                                <th>{{ DLUX_STRINGS.tbl_staff_tier }}</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for visible_user in overview.visible_users %}
                                <tr>
                                    <td>{{ visible_user.username }}</td>
                                    <td>{{ visible_user.get_full_name|default:visible_user.username }}</td>
                                    <td>{% if visible_user.is_staff %}{{ DLUX_STRINGS.badge_staff }}{% else %}{{ DLUX_STRINGS.regular_user|default:"User" }}{% endif %}</td>
                                    <td class="text-end">
                                        <button type="button"
                                                class="btn btn-outline-primary btn-sm rounded-pill"
                                                data-dynamic-modal="{% url 'user_report_modal' visible_user.pk %}?window={{ overview.window }}"
                                                data-modal-title="{{ DLUX_STRINGS.user_report_title }}">
                                            <i class="bi bi-file-earmark-person me-1"></i>{{ DLUX_STRINGS.user_report_title }}
                                        </button>
                                    </td>
                                </tr>
                            {% empty %}
                                <tr><td colspan="4" class="text-muted text-center py-4">{{ DLUX_STRINGS.reports_empty }}</td></tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </section>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
{{ block.super }}
<script src="{% static 'dlux/reports/js/overview.js' %}?v=20260624a" nonce="{{ request.csp_nonce }}" defer></script>
{% endblock %}