{% extends "base.html" %}
{% block title %}Insights — {{ config.APP_NAME }}{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2 class="mb-0"><i class="bi bi-graph-up"></i> Insights</h2>
    <span class="text-secondary small">{{ account.display_name }}</span>
</div>

<div class="row g-4 mb-4">
    <div class="col-md-3">
        <div class="card bg-dark border-secondary h-100">
            <div class="card-body text-center">
                <i class="bi bi-people text-info fs-2"></i>
                <h3 class="mt-2 mb-0">{{ '{:,}'.format(user.follower_count or account.follower_count or 0) }}</h3>
                <span class="text-secondary">Followers</span>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card bg-dark border-secondary h-100">
            <div class="card-body text-center">
                <i class="bi bi-heart text-danger fs-2"></i>
                <h3 class="mt-2 mb-0">{{ '{:,}'.format(user.likes_count or account.likes_count or 0) }}</h3>
                <span class="text-secondary">Total Likes</span>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card bg-dark border-secondary h-100">
            <div class="card-body text-center">
                <i class="bi bi-person-plus text-success fs-2"></i>
                <h3 class="mt-2 mb-0">{{ '{:,}'.format(user.following_count or account.following_count or 0) }}</h3>
                <span class="text-secondary">Following</span>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card bg-dark border-secondary h-100">
            <div class="card-body text-center">
                <i class="bi bi-play-btn text-warning fs-2"></i>
                <h3 class="mt-2 mb-0">{{ '{:,}'.format(user.video_count or account.video_count or 0) }}</h3>
                <span class="text-secondary">Videos</span>
            </div>
        </div>
    </div>
</div>
{% if total_views is not none %}
<div class="card bg-dark border-secondary mb-4">
    <div class="card-body d-flex align-items-center gap-3">
        <i class="bi bi-eye text-info fs-2"></i>
        <div>
            <h3 class="mb-0">{{ '{:,}'.format(total_views) }}</h3>
            <span class="text-secondary">Total views across your videos</span>
        </div>
    </div>
</div>
{% endif %}

<div class="card bg-dark border-secondary">
    <div class="card-header border-secondary"><h6 class="mb-0"><i class="bi bi-trophy"></i> Top Videos by Views</h6></div>
    <div class="card-body">
        {% if top_videos %}
        <div class="table-responsive">
            <table class="table table-dark table-striped mb-0">
                <thead>
                    <tr>
                        <th>Video</th>
                        <th>Created</th>
                        <th class="text-end">Views</th>
                        <th class="text-end">Likes</th>
                        <th class="text-end">Comments</th>
                        <th class="text-end">Shares</th>
                    </tr>
                </thead>
                <tbody>
                    {% for v in top_videos %}
                    <tr>
                        <td class="text-truncate" style="max-width: 380px;">{{ v.title or v.video_description or '(no caption)' }}</td>
                        <td class="text-secondary small">{{ v.create_time|tiktok_date }}</td>
                        <td class="text-end">{{ '{:,}'.format(v.view_count or 0) }}</td>
                        <td class="text-end">{{ '{:,}'.format(v.like_count or 0) }}</td>
                        <td class="text-end">{{ '{:,}'.format(v.comment_count or 0) }}</td>
                        <td class="text-end">{{ '{:,}'.format(v.share_count or 0) }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <p class="text-secondary mb-0">No videos to rank yet.</p>
        {% endif %}
    </div>
</div>
{% endblock %}