{% extends "base.html" %}

{% block title %}Statistik — PromptGarage{% endblock %}

{% block content %}
<div class="hero">
    <h1>Statistik</h1>
    <p class="subtitle">Ein Blick auf deine Prompt-Sammlung</p>
</div>

<!-- Main Stats -->
<div class="stats-grid">
    <div class="stat-card">
        <div class="stat-value">{{ stats.total }}</div>
        <div class="stat-label">Prompts gesamt</div>
    </div>
    <div class="stat-card highlight">
        <div class="stat-value" style="background: linear-gradient(135deg, var(--yellow), var(--peach)); -webkit-background-clip: text;">{{ stats.starred }}</div>
        <div class="stat-label">⭐ Gestartet</div>
    </div>
    <div class="stat-card">
        <div class="stat-value">{{ stats.by_tag|length }}</div>
        <div class="stat-label">Eindeutige Tags</div>
    </div>
</div>

<!-- Charts Row -->
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 1rem; margin-top: 2rem;">
    <!-- Top Tags -->
    <div class="card">
        <h3 class="mb-4" style="font-size: 1.1rem; font-weight: 600;">Top Tags</h3>
        {% if top_tags %}
        <div style="display: flex; flex-direction: column; gap: 0.75rem;">
            {% for tag, count in top_tags %}
            <a href="/prompts?tag={{ tag|urlencode }}" class="flex-between" style="text-decoration: none; color: inherit; padding: 0.5rem; border-radius: 8px; transition: background 0.15s;" onmouseover="this.style.background='var(--card-hover)'" onmouseout="this.style.background='transparent'">
                <span class="badge badge-mauve">{{ tag }}</span>
                <span class="text-muted font-mono text-sm">{{ count }}</span>
            </a>
            {% endfor %}
        </div>
        {% else %}
        <p class="text-muted">Keine Tags vorhanden.</p>
        {% endif %}
    </div>

    <!-- Rating Distribution -->
    <div class="card">
        <h3 class="mb-4" style="font-size: 1.1rem; font-weight: 600;">Bewertungsverteilung</h3>
        {% if stats.total > 0 %}
        <div style="display: flex; flex-direction: column; gap: 0.75rem;">
            {% for rating, count in rating_dist.items() %}
            <div class="flex-between">
                <span style="min-width: 100px;">
                    {% if rating == 0 %}<span class="text-muted">Unbewertet</span>
                    {% else %}
                    <span class="star-filled">{% for i in range(rating) %}★{% endfor %}</span><span class="star-empty">{% for i in range(5 - rating) %}☆{% endfor %}</span>
                    {% endif %}
                </span>
                <div style="flex: 1; margin: 0 1rem; background: var(--mantle); height: 20px; border-radius: 10px; overflow: hidden;">
                    <div style="background: linear-gradient(90deg, var(--mauve), var(--blue)); height: 100%; width: {{ (count / stats.total * 100)|round }}%; border-radius: 10px; transition: width 0.3s;"></div>
                </div>
                <span class="text-muted font-mono text-sm">{{ count }}</span>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <p class="text-muted">Keine Prompts vorhanden.</p>
        {% endif %}
    </div>
</div>

<!-- Sources & Models -->
{% if stats.by_source or stats.by_model %}
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin-top: 2rem;">
    {% if stats.by_source %}
    <div class="card">
        <h3 class="mb-4" style="font-size: 1.1rem; font-weight: 600;">Nach Quelle</h3>
        <div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
            {% for source, count in stats.by_source.items() %}
            <span class="badge badge-blue">{{ source or 'unbekannt' }} <span class="text-muted">({{ count }})</span></span>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    {% if stats.by_model %}
    <div class="card">
        <h3 class="mb-4" style="font-size: 1.1rem; font-weight: 600;">Nach Modell</h3>
        <div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
            {% for model, count in stats.by_model.items() %}
            <span class="badge badge-green">{{ model }} <span class="text-muted">({{ count }})</span></span>
            {% endfor %}
        </div>
    </div>
    {% endif %}
</div>
{% endif %}
{% endblock %}