{% extends "admin/base.html" %} {% block title %}Analytics{% endblock %} {%
block content %}
<div class="analytics-page">
    <div class="analytics-header">
        <h2>Analytics</h2>
        <div class="header-actions">
            <div class="period-selector">
                <a
                    href="?days=1"
                    class="btn btn-sm {% if days == 1 %}btn-primary{% else %}btn-secondary{% endif %}"
                    >Today</a
                >
                <a
                    href="?days=7"
                    class="btn btn-sm {% if days == 7 %}btn-primary{% else %}btn-secondary{% endif %}"
                    >7 Days</a
                >
                <a
                    href="?days=30"
                    class="btn btn-sm {% if days == 30 %}btn-primary{% else %}btn-secondary{% endif %}"
                    >30 Days</a
                >
                <a
                    href="?days=90"
                    class="btn btn-sm {% if days == 90 %}btn-primary{% else %}btn-secondary{% endif %}"
                    >90 Days</a
                >
            </div>
            <div class="export-buttons">
                <a
                    href="/api/analytics/export?days={{ days }}&format=json"
                    class="btn btn-sm btn-secondary"
                    title="Export as JSON"
                >
                    <svg
                        width="14"
                        height="14"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
                        <polyline points="7 10 12 15 17 10" />
                        <line x1="12" y1="15" x2="12" y2="3" />
                    </svg>
                    JSON
                </a>
                <a
                    href="/api/analytics/export?days={{ days }}&format=csv"
                    class="btn btn-sm btn-secondary"
                    title="Export as CSV"
                >
                    <svg
                        width="14"
                        height="14"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
                        <polyline points="7 10 12 15 17 10" />
                        <line x1="12" y1="15" x2="12" y2="3" />
                    </svg>
                    CSV
                </a>
            </div>
        </div>
    </div>

    {% if not has_data %}
    <div class="card analytics-empty">
        <div class="empty-state">
            <svg
                width="48"
                height="48"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="1.5"
            >
                <path d="M3 3v18h18" />
                <path d="M18 9l-5 5-4-4-3 3" />
            </svg>
            <h3>No analytics data yet</h3>
            <p>
                Analytics data will appear here as visitors browse your site.
                Check back after some traffic.
            </p>
        </div>
    </div>
    {% else %}

    <!-- Tab Navigation -->
    <div class="analytics-tabs">
        <button class="tab-btn active" data-tab="overview">Overview</button>
        <button class="tab-btn" data-tab="content">Content Performance</button>
    </div>

    <!-- Overview Tab -->
    <div id="tab-overview" class="tab-content active">
        <!-- Realtime Stats -->
        <div
            class="analytics-realtime"
            hx-get="/htmx/analytics/realtime"
            hx-trigger="every 30s"
            hx-swap="innerHTML"
        >
            {% include "htmx/analytics_realtime.html" %}
        </div>

        <!-- Summary Stats -->
        <div class="analytics-summary">
            <div class="summary-card">
                <div class="summary-value primary">
                    {{ summary.total_pageviews | default(value=0) }}
                </div>
                <div class="summary-label">Pageviews</div>
                {% if summary.pageviews_change %}
                <div
                    class="summary-change {% if summary.pageviews_change > 0 %}positive{% elif summary.pageviews_change < 0 %}negative{% endif %}"
                >
                    {% if summary.pageviews_change > 0 %}+{% endif %}{{
                    summary.pageviews_change | round(precision=1) }}%
                </div>
                {% endif %}
            </div>
            <div class="summary-card">
                <div class="summary-value accent">
                    {{ summary.unique_sessions | default(value=0) }}
                </div>
                <div class="summary-label">Unique Visitors</div>
                {% if summary.sessions_change %}
                <div
                    class="summary-change {% if summary.sessions_change > 0 %}positive{% elif summary.sessions_change < 0 %}negative{% endif %}"
                >
                    {% if summary.sessions_change > 0 %}+{% endif %}{{
                    summary.sessions_change | round(precision=1) }}%
                </div>
                {% endif %}
            </div>
            <div class="summary-card">
                <div class="summary-value">
                    {{ summary.avg_response_time_ms | default(value=0) }}<span
                        class="summary-unit"
                        >ms</span
                    >
                </div>
                <div class="summary-label">Avg Response</div>
            </div>
            <div class="summary-card">
                <div
                    class="summary-value {% if summary.error_rate > 5 %}error{% endif %}"
                >
                    {{ summary.error_rate | default(value=0) |
                    round(precision=2) }}<span class="summary-unit">%</span>
                </div>
                <div class="summary-label">Error Rate</div>
            </div>
        </div>

        {% if summary.pageviews_over_time | length > 0 %}
        <div class="analytics-chart card">
            <div class="chart-header">
                <h3>Pageviews Over Time</h3>
                <div class="chart-legend">
                    <span class="legend-item"
                        ><span class="legend-dot"></span> Daily Views</span
                    >
                    <span class="chart-total"
                        >{{ summary.total_pageviews }} total</span
                    >
                </div>
            </div>
            <div class="chart-container">
                <div class="chart-y-axis">
                    <span>{{ summary.pageviews_max }}</span>
                    <span>{{ summary.pageviews_max / 2 | round }}</span>
                    <span>0</span>
                </div>
                <div class="chart-area">
                    <div class="chart-grid">
                        <div class="grid-line"></div>
                        <div class="grid-line"></div>
                        <div class="grid-line"></div>
                    </div>
                    <div class="bar-chart">
                        {% for point in summary.pageviews_over_time %}
                        <div
                            class="bar-wrapper"
                            data-value="{{ point.value }}"
                            data-date="{{ point.timestamp }}"
                        >
                            <div
                                class="bar"
                                style="height:{% if summary.pageviews_max > 0 %}{{ point.value * 100 / summary.pageviews_max }}{% else %}0{% endif %}%"
                            >
                                <span class="bar-value">{{ point.value }}</span>
                            </div>
                            <span class="bar-label"
                                >{{ point.timestamp | str_slice(start=5, end=10)
                                }}</span
                            >
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
        {% endif %}

        <!-- Analytics Grid -->
        <div class="analytics-grid">
            <!-- Top Pages -->
            <div class="analytics-card card">
                <h3>Top Pages</h3>
                {% if summary.top_pages | length > 0 %}
                <div class="analytics-table-wrapper">
                    <table class="analytics-table">
                        <thead>
                            <tr>
                                <th>Page</th>
                                <th class="num">Views</th>
                                <th class="num">Visitors</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for page in summary.top_pages %}
                            <tr>
                                <td class="path-cell" title="{{ page.path }}">
                                    <span class="path-text"
                                        >{{ page.path | truncate(length=40)
                                        }}</span
                                    >
                                </td>
                                <td class="num">{{ page.pageviews }}</td>
                                <td class="num">{{ page.unique_sessions }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <p class="no-data">No page data available</p>
                {% endif %}
            </div>

            <!-- Top Referrers -->
            <div class="analytics-card card">
                <h3>Traffic Sources</h3>
                {% if summary.top_referrers | length > 0 %}
                <div class="analytics-table-wrapper">
                    <table class="analytics-table">
                        <thead>
                            <tr>
                                <th>Source</th>
                                <th class="num">Visitors</th>
                                <th class="num">%</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for ref in summary.top_referrers %}
                            <tr>
                                <td>{{ ref.domain }}</td>
                                <td class="num">{{ ref.sessions }}</td>
                                <td class="num">
                                    {{ ref.percentage | round(precision=1) }}%
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <p class="no-data">No referrer data (direct traffic only)</p>
                {% endif %}
            </div>

            <!-- Countries -->
            <div class="analytics-card card">
                <h3>Countries</h3>
                {% if summary.countries | length > 0 %}
                <div class="breakdown-list">
                    {% for country in summary.countries %}
                    <div class="breakdown-item">
                        <div class="breakdown-flag">{{ country.code }}</div>
                        <div class="breakdown-info">
                            <span class="breakdown-name"
                                >{{ country.name }}</span
                            >
                            <span class="breakdown-count"
                                >{{ country.sessions }}</span
                            >
                        </div>
                        <div class="breakdown-bar">
                            <div
                                class="breakdown-bar-fill"
                                style="width: {{ country.percentage }}%"
                            ></div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <p class="no-data">No country data available</p>
                {% endif %}
            </div>

            <!-- Devices -->
            <div class="analytics-card card">
                <h3>Devices</h3>
                {% if summary.devices %}
                <div class="breakdown-list">
                    {% for device, count in summary.devices %}
                    <div class="breakdown-item">
                        <div class="breakdown-icon">
                            {% if device == "desktop" %}
                            <svg
                                width="18"
                                height="18"
                                viewBox="0 0 24 24"
                                fill="none"
                                stroke="currentColor"
                                stroke-width="2"
                            >
                                <rect
                                    x="2"
                                    y="3"
                                    width="20"
                                    height="14"
                                    rx="2"
                                    ry="2"
                                />
                                <line x1="8" y1="21" x2="16" y2="21" />
                                <line x1="12" y1="17" x2="12" y2="21" />
                            </svg>
                            {% elif device == "mobile" %}
                            <svg
                                width="18"
                                height="18"
                                viewBox="0 0 24 24"
                                fill="none"
                                stroke="currentColor"
                                stroke-width="2"
                            >
                                <rect
                                    x="5"
                                    y="2"
                                    width="14"
                                    height="20"
                                    rx="2"
                                    ry="2"
                                />
                                <line x1="12" y1="18" x2="12.01" y2="18" />
                            </svg>
                            {% else %}
                            <svg
                                width="18"
                                height="18"
                                viewBox="0 0 24 24"
                                fill="none"
                                stroke="currentColor"
                                stroke-width="2"
                            >
                                <rect
                                    x="4"
                                    y="2"
                                    width="16"
                                    height="20"
                                    rx="2"
                                    ry="2"
                                />
                                <line x1="12" y1="18" x2="12.01" y2="18" />
                            </svg>
                            {% endif %}
                        </div>
                        <div class="breakdown-info">
                            <span class="breakdown-name"
                                >{{ device | capitalize }}</span
                            >
                            <span class="breakdown-count">{{ count }}</span>
                        </div>
                        <div class="breakdown-bar">
                            <div
                                class="breakdown-bar-fill"
                                style="width: {% if summary.total_devices > 0 %}{{ (count / summary.total_devices) * 100 }}{% else %}0{% endif %}%"
                            ></div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <p class="no-data">No device data available</p>
                {% endif %}
            </div>

            <!-- Browsers -->
            <div class="analytics-card card">
                <h3>Browsers</h3>
                {% if summary.browsers %}
                <div class="breakdown-list">
                    {% for browser, count in summary.browsers %}
                    <div class="breakdown-item">
                        <div class="breakdown-info">
                            <span class="breakdown-name">{{ browser }}</span>
                            <span class="breakdown-count">{{ count }}</span>
                        </div>
                        <div class="breakdown-bar">
                            <div
                                class="breakdown-bar-fill"
                                style="width: {% if summary.total_browsers > 0 %}{{ (count / summary.total_browsers) * 100 }}{% else %}0{% endif %}%"
                            ></div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <p class="no-data">No browser data available</p>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Content Performance Tab -->
    <div id="tab-content" class="tab-content">
        <div
            class="content-performance card"
            hx-get="/htmx/analytics/content?days={{ days }}"
            hx-trigger="load"
            hx-swap="innerHTML"
        >
            <div class="loading-state">
                <div class="spinner"></div>
                <p>Loading content performance...</p>
            </div>
        </div>
    </div>

    {% endif %}
</div>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const tabs = document.querySelectorAll(".tab-btn");
        const contents = document.querySelectorAll(".tab-content");
        tabs.forEach((tab) => {
            tab.addEventListener("click", function () {
                const tabId = this.dataset.tab;
                tabs.forEach((t) => t.classList.remove("active"));
                contents.forEach((c) => c.classList.remove("active"));
                this.classList.add("active");
                document.getElementById("tab-" + tabId).classList.add("active");
            });
        });
    });
</script>

<style>
    .analytics-page {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }
    .analytics-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 1rem;
    }
    .analytics-header h2 {
        margin: 0;
    }
    .header-actions {
        display: flex;
        align-items: center;
        gap: 1rem;
        flex-wrap: wrap;
    }
    .period-selector {
        display: flex;
        gap: 0.5rem;
    }
    .export-buttons {
        display: flex;
        gap: 0.5rem;
    }
    .export-buttons .btn {
        display: flex;
        align-items: center;
        gap: 0.375rem;
    }

    .analytics-tabs {
        display: flex;
        gap: 0;
        border-bottom: 1px solid var(--border);
        margin-bottom: 0.5rem;
    }
    .tab-btn {
        padding: 0.75rem 1.25rem;
        background: none;
        border: none;
        border-bottom: 2px solid transparent;
        color: var(--text-muted);
        font-size: 0.875rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    .tab-btn:hover {
        color: var(--text);
    }
    .tab-btn.active {
        color: var(--color-primary);
        border-bottom-color: var(--color-primary);
    }
    .tab-content {
        display: none;
    }
    .tab-content.active {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .analytics-realtime {
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        border-left: 4px solid #10b981;
    }

    .analytics-summary {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }
    @media (max-width: 1024px) {
        .analytics-summary {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    @media (max-width: 480px) {
        .analytics-summary {
            grid-template-columns: 1fr;
        }
    }
    .summary-card {
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }
    .summary-value {
        font-size: 2rem;
        font-weight: 700;
        line-height: 1.2;
        color: var(--text);
    }
    .summary-value.primary {
        color: var(--color-primary);
    }
    .summary-value.accent {
        color: #0ea5e9;
    }
    .summary-value.error {
        color: #ef4444;
    }
    .summary-unit {
        font-size: 1rem;
        font-weight: 500;
        opacity: 0.7;
    }
    .summary-label {
        font-size: 0.875rem;
        color: var(--text-muted);
    }
    .summary-change {
        font-size: 0.75rem;
        font-weight: 500;
        margin-top: 0.25rem;
    }
    .summary-change.positive {
        color: #10b981;
    }
    .summary-change.negative {
        color: #ef4444;
    }

    .analytics-chart {
        padding: 1.5rem;
    }
    .chart-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.25rem;
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    .chart-header h3 {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
    }
    .chart-legend {
        display: flex;
        align-items: center;
        gap: 1.25rem;
        font-size: 0.75rem;
        color: var(--text-muted);
    }
    .legend-item {
        display: flex;
        align-items: center;
        gap: 0.375rem;
    }
    .legend-dot {
        width: 10px;
        height: 10px;
        border-radius: 2px;
        background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    }
    .chart-total {
        font-weight: 600;
        color: var(--text);
    }
    .chart-container {
        display: flex;
        gap: 0.75rem;
        height: 200px;
    }
    .chart-y-axis {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
        font-size: 0.65rem;
        color: var(--text-muted);
        padding: 0 0 2rem 0;
        min-width: 40px;
        font-variant-numeric: tabular-nums;
    }
    .chart-area {
        flex: 1;
        position: relative;
        min-width: 0;
    }
    .chart-grid {
        position: absolute;
        inset: 0;
        bottom: 2rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        pointer-events: none;
    }
    .grid-line {
        border-bottom: 1px dashed var(--border);
        opacity: 0.5;
    }
    .bar-chart {
        display: flex;
        align-items: flex-end;
        justify-content: space-around;
        height: 100%;
        gap: 2px;
        padding-bottom: 2rem;
        position: relative;
    }
    .bar-wrapper {
        flex: 1;
        min-width: 0;
        max-width: 60px;
        height: calc(100% - 2rem);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        position: relative;
        cursor: pointer;
    }
    .bar {
        width: 70%;
        max-width: 32px;
        min-height: 3px;
        background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 100%);
        border-radius: 4px 4px 0 0;
        transition: all 0.2s ease;
        position: relative;
        box-shadow: 0 0 10px rgba(59, 130, 246, 0.15);
    }
    .bar-value {
        position: absolute;
        top: -1.5rem;
        left: 50%;
        transform: translateX(-50%);
        font-size: 0.65rem;
        font-weight: 600;
        color: var(--text);
        opacity: 0;
        transition: opacity 0.2s ease;
        white-space: nowrap;
        background: var(--bg);
        padding: 0.125rem 0.375rem;
        border-radius: 3px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    .bar-wrapper:hover .bar {
        background: linear-gradient(180deg, #93c5fd 0%, #60a5fa 100%);
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
        transform: scaleX(1.1);
    }
    .bar-wrapper:hover .bar-value {
        opacity: 1;
    }
    .bar-label {
        position: absolute;
        bottom: -1.75rem;
        left: 50%;
        font-size: 0.6rem;
        color: var(--text-muted);
        white-space: nowrap;
        transform: translateX(-50%) rotate(-45deg);
        transform-origin: top center;
        transition: color 0.2s ease;
    }
    .bar-wrapper:hover .bar-label {
        color: var(--text);
    }

    .analytics-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    @media (max-width: 900px) {
        .analytics-grid {
            grid-template-columns: 1fr;
        }
    }
    .analytics-card {
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        min-height: 280px;
    }
    .analytics-card h3 {
        margin: 0 0 1rem 0;
        font-size: 1rem;
        font-weight: 600;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid var(--border);
    }

    .analytics-table-wrapper {
        flex: 1;
        overflow-y: auto;
        margin: 0 -0.25rem;
    }
    .analytics-table {
        width: 100%;
        font-size: 0.875rem;
        border-collapse: collapse;
    }
    .analytics-table th,
    .analytics-table td {
        padding: 0.75rem 0.5rem;
        text-align: left;
        border-bottom: 1px solid var(--border);
    }
    .analytics-table th {
        font-weight: 500;
        color: var(--text-muted);
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.025em;
        position: sticky;
        top: 0;
        background: var(--bg);
    }
    .analytics-table th.num,
    .analytics-table td.num {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }
    .analytics-table tbody tr:hover {
        background: var(--bg-secondary);
    }
    .analytics-table tbody tr:last-child td {
        border-bottom: none;
    }
    .path-cell {
        max-width: 200px;
    }
    .path-text {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .breakdown-list {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    .breakdown-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
    .breakdown-icon,
    .breakdown-flag {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        background: var(--bg-secondary);
        border-radius: var(--radius);
        color: var(--text-muted);
        flex-shrink: 0;
        font-size: 0.75rem;
        font-weight: 600;
    }
    .breakdown-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-width: 120px;
        gap: 0.5rem;
    }
    .breakdown-name {
        font-size: 0.875rem;
        font-weight: 500;
    }
    .breakdown-count {
        font-size: 0.875rem;
        color: var(--text-muted);
        font-variant-numeric: tabular-nums;
    }
    .breakdown-bar {
        flex: 1;
        height: 8px;
        background: var(--bg-secondary);
        border-radius: 4px;
        overflow: hidden;
    }
    .breakdown-bar-fill {
        height: 100%;
        background: var(--color-primary);
        border-radius: 4px;
        transition: width 0.3s ease;
    }

    .analytics-empty {
        padding: 3rem 1.5rem;
    }
    .no-data {
        color: var(--text-muted);
        font-size: 0.875rem;
        text-align: center;
        padding: 2rem 1rem;
        margin: 0;
    }

    .loading-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 3rem;
        color: var(--text-muted);
    }
    .spinner {
        width: 32px;
        height: 32px;
        border: 3px solid var(--border);
        border-top-color: var(--color-primary);
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin-bottom: 1rem;
    }
    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }

    .content-performance {
        padding: 1.5rem;
    }

    .realtime-stats {
        display: flex;
        align-items: center;
        gap: 2rem;
        padding: 1rem 1.25rem;
        flex-wrap: wrap;
    }
    .realtime-stat {
        display: flex;
        align-items: center;
        gap: 0.625rem;
    }
    .realtime-dot {
        width: 10px;
        height: 10px;
        background: #10b981;
        border-radius: 50%;
        animation: pulse 2s ease-in-out infinite;
        flex-shrink: 0;
    }
    @keyframes pulse {
        0%,
        100% {
            opacity: 1;
            transform: scale(1);
        }
        50% {
            opacity: 0.6;
            transform: scale(0.9);
        }
    }
    .realtime-value {
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1;
    }
    .realtime-label {
        font-size: 0.75rem;
        color: var(--text-muted);
        line-height: 1.2;
    }
    .realtime-pages {
        flex: 1;
        min-width: 200px;
    }
    .realtime-pages .realtime-label {
        margin-bottom: 0.375rem;
    }
    .current-pages-list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .current-page {
        font-size: 0.75rem;
        padding: 0.25rem 0.625rem;
        background: var(--bg-secondary);
        border-radius: var(--radius);
        color: var(--text);
    }
</style>
{% endblock %}