{%- import "partials/_ui.html" as ui -%}
<div class="tab-docs"><a href="/docs/analytics">Docs: Analytics &rarr;</a> <a href="/dashboard/export" class="analytics-export-link">Export data &rarr;</a></div>

<div class="analytics-range-bar">
    <h2 class="analytics-range-heading">{% if active_range == "7d" %}Last 7 days{% else if active_range == "30d" %}Last 30 days{% else if active_range == "90d" %}Last 90 days{% else %}All time{% endif %}</h2>
    <div class="time-selector">
        <button class="{% if active_range == "7d" %}is-selected{% endif %}"
                hx-get="/dashboard/tabs/analytics?range=7d"
                hx-target="#tab-content"
                hx-swap="innerHTML">7d</button>
        <button class="{% if active_range == "30d" %}is-selected{% endif %}"
                hx-get="/dashboard/tabs/analytics?range=30d"
                hx-target="#tab-content"
                hx-swap="innerHTML">30d</button>
        <button class="{% if active_range == "90d" %}is-selected{% endif %}"
                hx-get="/dashboard/tabs/analytics?range=90d"
                hx-target="#tab-content"
                hx-swap="innerHTML">90d</button>
        <button class="{% if active_range == "all" %}is-selected{% endif %}"
                hx-get="/dashboard/tabs/analytics?range=all"
                hx-target="#tab-content"
                hx-swap="innerHTML">All</button>
    </div>
</div>

<div class="stats-grid">
    {% for stat in stats %}
    <div class="card-muted">
        <div class="stat-label">{{ stat.label }}</div>
        <div class="stat-value">{{ stat.value }}</div>
        {% if let Some(change) = stat.change %}
        <div class="stat-change{% if stat.is_positive %} positive{% endif %}">{{ change }}</div>
        {% endif %}
    </div>
    {% endfor %}
</div>

<div class="chart-container">
    <div class="chart-header">
        <h2 class="subsection-title">Revenue Over Time</h2>
    </div>
    {% if bars.is_empty() %}
    {% call ui::empty_state_chart("Once you publish items and make sales, revenue data will appear here.") %}
    {% else %}
    <div class="chart-bars">
        {% for bar in bars %}
        <div class="chart-bar-col" data-tooltip="{{ bar.value }} / {{ bar.count }} sale{% if bar.count != 1 %}s{% endif %}">
            <div class="chart-bar" style="height: {{ bar.height_pct }}%;"></div>
            <div class="chart-bar-label">{{ bar.label }}</div>
        </div>
        {% endfor %}
    </div>
    {% endif %}
</div>

{% if project_comparisons.len() > 1 %}
<div class="chart-container analytics-section--comparison">
    <h2 class="subsection-title">Project Comparison</h2>
    <div class="analytics-table-wrap">
    <table class="data-table analytics-table">
        <thead>
            <tr>
                <th>Project</th>
                <th>Revenue</th>
                <th>Sales</th>
                <th>Views</th>
                <th>Conversion</th>
            </tr>
        </thead>
        <tbody>
            {% for p in project_comparisons %}
            <tr>
                <td>{{ p.title }}</td>
                <td>
                    <div class="analytics-revenue-cell">
                        <div class="analytics-revenue-bar" style="width: {{ p.revenue_pct }}%;"></div>
                        {{ p.revenue }}
                    </div>
                </td>
                <td>{{ p.sales }}</td>
                <td>{{ p.views }}</td>
                <td>{{ p.conversion }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    </div>
</div>
{% endif %}

<div class="analytics-grid">
    <div class="card-muted">
        <h3>Top Projects by Revenue</h3>
        {% if top_projects.is_empty() %}
        {% call ui::empty_state_compact("No revenue data yet. Sales across your projects will appear here.") %}
        {% else %}
        <ul class="analytics-list">
            {% for project in top_projects %}
            <li><span>{{ project.title }}</span><span>{{ project.revenue }}</span></li>
            {% endfor %}
        </ul>
        {% endif %}
    </div>
</div>