{% extends 'paxalia/base.html' %}
{% load static %}
{% load i18n %}

{% block title %}{% trans "Overview" %} – Paxalia Analytics{% endblock %}

{% block extra_css %}
<style nonce="{{ request.csp_nonce }}">
    .analytics-annotations-list {
        list-style: none;
        margin: 0.75rem 0 0;
        padding: 0;
        font-size: var(--font-size-xs, 0.75rem);
        color: var(--analytics-text-dim);
    }
    .analytics-annotations-list li {
        padding: 0.15rem 0;
        border-top: 1px dashed var(--analytics-border);
    }
    .analytics-annotations-list li:first-child { border-top: none; }
</style>
{% endblock %}

{% block page_title %}Overview{% endblock %}
{% block page_subtitle %}Today's snapshot and 30‑day trend{% endblock %}

{% block filter_bar %}
    {% include 'paxalia/includes/filter_bar.html' %}
{% endblock %}

{% block dashboard_content %}
    <div class="stat-grid">
        <div class="stat-card">
            <span class="stat-label">{% trans "Today" %}</span>
            <span class="stat-value">{{ today_views }}</span>
            <span class="stat-sub">{{ today_unique }} {% trans "unique" %}</span>
        </div>
        <div class="stat-card stat-card--highlight">
            <span class="stat-label">{% trans "Yesterday" %}</span>
            <span class="stat-value">{{ yesterday_views }}</span>
            <span class="stat-sub">{{ yesterday_unique }} {% trans "unique" %}</span>
        </div>
        <div class="stat-card">
            <span class="stat-label">{% trans "API Calls (today)" %}</span>
            <span class="stat-value">{{ today_api }}</span>
            <span class="stat-sub">/api/*</span>
        </div>
        <div class="stat-card">
            <span class="stat-label">{% trans "Top Page" %}</span>
            <span class="stat-value stat-value--small">
                {% if top_page_path %}
                    {{ top_page_path }}
                {% else %}
                    —
                {% endif %}
            </span>
            <span class="stat-sub">{% trans "most visited" %}</span>
        </div>
        <div class="stat-card">
            <span class="stat-label">{% trans "Sessions (today)" %}</span>
            <span class="stat-value">{{ today_sessions }}</span>
            <span class="stat-sub">{{ today_pages_per_session }} {% trans "pages/session" %}</span>
        </div>
        <div class="stat-card">
            <span class="stat-label">{% trans "Bounce Rate (today)" %}</span>
            <span class="stat-value">{{ today_bounce_rate }}%</span>
            <span class="stat-sub">{% trans "single‑page visits" %}</span>
        </div>
        <div class="stat-card stat-card--highlight">
            <span class="stat-label">{% trans "Sessions (yesterday)" %}</span>
            <span class="stat-value">{{ yesterday_sessions }}</span>
            <span class="stat-sub">{{ yesterday_bounce_rate }}% {% trans "bounce" %} · {{ yesterday_pages_per_session }} {% trans "pages/session" %}</span>
        </div>
    </div>

    <div class="chart-grid">
        <div class="chart-card">
            <div class="chart-title-wrapper">
                <h2 class="chart-title">{% trans "Page Views" %} – {{ date_range_label }}</h2>
                <form class="compare-toggle" method="get" action="">
                    {% for key, value in request.GET.items %}
                        {% if key != 'compare' %}
                            <input type="hidden" name="{{ key }}" value="{{ value }}">
                        {% endif %}
                    {% endfor %}
                    <label class="compare-toggle__label">
                        <input type="checkbox" name="compare" value="1" id="compare-toggle" {% if compare_active %}checked{% endif %}>
                        <span>{% trans "Compare to previous period" %}</span>
                    </label>
                </form>
            </div>
            {% if chart_views %}
                <div class="chart-wrap">
                    <canvas id="viewsChart" role="img" aria-label="Views over time"></canvas>
                </div>
            {% else %}
                <div class="chart-empty">{% trans "No views data for this period." %}</div>
            {% endif %}
            {% if annotations_in_range %}
            <ul class="analytics-annotations-list">
                {% for a in annotations_in_range %}
                <li><strong>{{ a.date|date:"M d" }}</strong> — {{ a.label }}</li>
                {% endfor %}
            </ul>
            {% endif %}
        </div>
        <div class="chart-card">
            <h2 class="chart-title">{% trans "Top 10 Pages" %}</h2>
            {% if top_pages_data %}
                <div class="chart-wrap">
                    <canvas id="topPagesChart" role="img" aria-label="Top pages"></canvas>
                </div>
            {% else %}
                <div class="chart-empty">{% trans "No page data for this period." %}</div>
            {% endif %}
        </div>
    </div>

    <div class="table-card">
        <div class="chart-title-wrapper">
            <h2 class="chart-title">{% trans "Top Pages – Detail" %}</h2>
            <div class="chart-title-wrapper">
                <a href="{% url 'paxalia:export' 'overview_top_pages' %}?{{ request.GET.urlencode }}"
                   class="export-btn" title="{% trans 'Export CSV' %}">
                    <span class="icon icon--sm" aria-hidden="true">
                        <svg width="24" height="24" fill="none" viewBox="0 0 24 24">
                            <path fill="currentColor"
                                  d="M12 15.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-3.6-3.6a.92.92 0 0 1-.288-.7q.012-.4.288-.7.3-.3.713-.312a.93.93 0 0 1 .712.287L11 12.15V5q0-.424.288-.712A.97.97 0 0 1 12 4q.424 0 .713.288A.96.96 0 0 1 13 5v7.15l1.875-1.875q.3-.3.713-.288t.712.313q.275.3.288.7a.91.91 0 0 1-.288.7l-3.6 3.6q-.15.15-.325.213a1.1 1.1 0 0 1-.375.062M6 20q-.824 0-1.412-.587A1.93 1.93 0 0 1 4 18v-2q0-.424.288-.712A.97.97 0 0 1 5 15q.424 0 .713.288A.96.96 0 0 1 6 16v2h12v-2q0-.424.288-.712A.97.97 0 0 1 19 15q.424 0 .713.288A.96.96 0 0 1 20 16v2q0 .825-.587 1.413A1.92 1.92 0 0 1 18 20z"></path>
                        </svg>
                    </span>
                </a>
                <a href="{% url 'paxalia:export' 'overview_top_pages' %}?{{ request.GET.urlencode }}&format=json"
                   class="export-btn export-btn--json" title="{% trans 'Export JSON' %}">
                    JSON
                </a>
            </div>
        </div>
        <table class="analytics-table">
            <thead>
            <tr>
                <th>#</th>
                <th>{% trans "Page" %}</th>
                <th>{% trans "Views" %}</th>
            </tr>
            </thead>
            <tbody>
            {% for path, count in top_pages.items %}
                <tr>
                    <td>{{ forloop.counter }}</td>
                    <td>{{ path }}</td>
                    <td>{{ count }}</td>
                </tr>
            {% empty %}
                <tr>
                    <td colspan="3">{% trans "No data yet." %}</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
{% endblock %}

{% block page_scripts %}
    <script nonce="{{ request.csp_nonce }}">
        document.addEventListener('DOMContentLoaded', function() {
            document.getElementById('compare-toggle')?.addEventListener('change', function() {
                this.form.submit();
            });
        });
    </script>
    <script nonce="{{ request.csp_nonce }}">
        window.__analytics_filter = {
            startDate: "{{ start_date|date:'Y-m-d'|default:'' }}",
            endDate: "{{ end_date|date:'Y-m-d'|default:'' }}",
            activePreset: "{{ active_preset|default:'last30' }}",
            showSearch: {{ show_search|yesno:'true,false' }}
        };
        window.__analytics_overview = {
            viewsLabels: [{% for label in chart_labels %}"{{ label }}"{% if not forloop.last %}, {% endif %}{% endfor %}],
            viewsData: [{% for count in chart_views %}{{ count }}{% if not forloop.last %}, {% endif %}{% endfor %}],
            topPagesLabels: [{% for label in top_pages_labels %}"{{ label }}"{% if not forloop.last %}, {% endif %}{% endfor %}],
            topPagesData: [{% for count in top_pages_data %}{{ count }}{% if not forloop.last %}, {% endif %}{% endfor %}],
            dateRangeLabel: "{{ date_range_label }}",
            compareActive: {{ compare_active|yesno:'true,false' }},
            previousViewsLabels: [{% for label in previous_labels %}"{{ label }}"{% if not forloop.last %}, {% endif %}{% endfor %}],
            previousViewsData: [{% for count in previous_views %}{{ count }}{% if not forloop.last %}, {% endif %}{% endfor %}]
        };
    </script>
    <script nonce="{{ request.csp_nonce }}" src="{% static 'paxalia/scripts/filter-bar.js' %}"></script>
    <script nonce="{{ request.csp_nonce }}" src="{% static 'paxalia/scripts/overview.js' %}"></script>
{% endblock %}