{% extends "base.html" %}
{% block title %}Dashboard - Viral Social Pro{% endblock %}
{% block nav_dashboard %}active{% endblock %}
{% block mnav_dashboard %}active{% endblock %}
{% block page_title %}Dashboard{% endblock %}
{% block page_subtitle %}Visao geral da inteligencia viral{% endblock %}

{% block content %}
<div class="space-y-6 animate-fade-up">
    <!-- Stats Row 1 -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="glass-card rounded-2xl p-4 md:p-5">
            <div class="flex items-center justify-between mb-3">
                <div class="w-10 h-10 rounded-xl gradient-brand flex items-center justify-center"><i data-lucide="video" class="w-5 h-5"></i></div>
            </div>
            <p class="stat-number text-white">{{ stats.total_videos|default(0) }}</p>
            <p class="text-xs text-white/40 mt-1">Videos TikTok</p>
        </div>
        <div class="glass-card rounded-2xl p-4 md:p-5">
            <div class="flex items-center justify-between mb-3">
                <div class="w-10 h-10 rounded-xl gradient-fire flex items-center justify-center"><i data-lucide="flame" class="w-5 h-5"></i></div>
            </div>
            <p class="stat-number text-white">{{ stats.viral_count|default(0) }}</p>
            <p class="text-xs text-white/40 mt-1">Videos Virais (60+)</p>
        </div>
        <div class="glass-card rounded-2xl p-4 md:p-5">
            <div class="flex items-center justify-between mb-3">
                <div class="w-10 h-10 rounded-xl bg-red-500/20 flex items-center justify-center"><i data-lucide="zap" class="w-5 h-5 text-red-400"></i></div>
            </div>
            <p class="stat-number text-red-400">{{ stats.explosion_count|default(0) }}</p>
            <p class="text-xs text-white/40 mt-1">Explosoes (10x+)</p>
        </div>
        <div class="glass-card rounded-2xl p-4 md:p-5">
            <div class="flex items-center justify-between mb-3">
                <div class="w-10 h-10 rounded-xl gradient-success flex items-center justify-center"><i data-lucide="target" class="w-5 h-5"></i></div>
            </div>
            <p class="stat-number text-accent-green">{{ stats.opportunities|default(0) }}</p>
            <p class="text-xs text-white/40 mt-1">Para Replicar</p>
        </div>
    </div>

    <!-- Stats Row 2 -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="glass-card rounded-2xl p-4 md:p-5">
            <div class="flex items-center justify-between mb-3">
                <div class="w-10 h-10 rounded-xl gradient-ocean flex items-center justify-center"><i data-lucide="users" class="w-5 h-5"></i></div>
            </div>
            <p class="stat-number text-white">{{ stats.total_creators|default(0) }}</p>
            <p class="text-xs text-white/40 mt-1">Criadores</p>
        </div>
        <div class="glass-card rounded-2xl p-4 md:p-5">
            <div class="flex items-center justify-between mb-3">
                <div class="w-10 h-10 rounded-xl bg-brand-500/20 flex items-center justify-center"><i data-lucide="sparkles" class="w-5 h-5 text-brand-300"></i></div>
            </div>
            <p class="stat-number text-brand-300">{{ stats.small_creator_virals|default(0) }}</p>
            <p class="text-xs text-white/40 mt-1">Virais de Pequenos</p>
        </div>
        <div class="glass-card rounded-2xl p-4 md:p-5">
            <div class="flex items-center justify-between mb-3">
                <div class="w-10 h-10 rounded-xl bg-accent-cyan/20 flex items-center justify-center"><i data-lucide="bar-chart-3" class="w-5 h-5 text-accent-cyan"></i></div>
            </div>
            <p class="stat-number text-white">{{ "%.1f"|format(stats.avg_viral_score|default(0)) }}</p>
            <p class="text-xs text-white/40 mt-1">Score Medio</p>
        </div>
        <div class="glass-card rounded-2xl p-4 md:p-5">
            <div class="flex items-center justify-between mb-3">
                <div class="w-10 h-10 rounded-xl bg-accent-orange/20 flex items-center justify-center"><i data-lucide="shopping-bag" class="w-5 h-5 text-accent-orange"></i></div>
            </div>
            <p class="stat-number text-accent-orange">{{ stats.shop_videos|default(0) }}</p>
            <p class="text-xs text-white/40 mt-1">Com Produtos</p>
        </div>
    </div>

    <!-- Platform + Quick Actions -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
        <div class="glass-card rounded-2xl p-5 lg:col-span-2">
            <h3 class="text-sm font-bold text-white/80 mb-4 flex items-center gap-2"><i data-lucide="pie-chart" class="w-4 h-4 text-brand-400"></i>Distribuicao por Plataforma</h3>
            <div class="grid grid-cols-3 gap-4">
                {% set total = stats.total_videos or 1 %}
                <div class="text-center p-4 rounded-xl bg-red-500/5 border border-red-500/10">
                    <p class="text-2xl font-bold text-red-400">{{ stats.platform_counts.youtube|default(0) }}</p>
                    <p class="text-xs text-white/40 mt-1">YouTube</p>
                    <div class="mt-2 h-1 bg-white/5 rounded-full overflow-hidden"><div class="h-full bg-red-500 rounded-full" style="width:{{ (stats.platform_counts.youtube|default(0)/total*100)|int }}%"></div></div>
                </div>
                <div class="text-center p-4 rounded-xl bg-white/[0.02] border border-white/10">
                    <p class="text-2xl font-bold text-white">{{ stats.platform_counts.tiktok|default(0) }}</p>
                    <p class="text-xs text-white/40 mt-1">TikTok</p>
                    <div class="mt-2 h-1 bg-white/5 rounded-full overflow-hidden"><div class="h-full bg-white rounded-full" style="width:{{ (stats.platform_counts.tiktok|default(0)/total*100)|int }}%"></div></div>
                </div>
                <div class="text-center p-4 rounded-xl bg-pink-500/5 border border-pink-500/10">
                    <p class="text-2xl font-bold text-pink-400">{{ stats.platform_counts.instagram|default(0) }}</p>
                    <p class="text-xs text-white/40 mt-1">Instagram</p>
                    <div class="mt-2 h-1 bg-white/5 rounded-full overflow-hidden"><div class="h-full bg-pink-500 rounded-full" style="width:{{ (stats.platform_counts.instagram|default(0)/total*100)|int }}%"></div></div>
                </div>
            </div>
        </div>

        <div class="glass-card rounded-2xl p-5">
            <h3 class="text-sm font-bold text-white/80 mb-4 flex items-center gap-2"><i data-lucide="zap" class="w-4 h-4 text-brand-400"></i>Acoes Rapidas</h3>
            <div class="space-y-2">
                <a href="/scrape" class="flex items-center gap-3 p-3 rounded-xl hover:bg-white/5 transition group">
                    <div class="w-9 h-9 rounded-lg gradient-brand flex items-center justify-center flex-shrink-0"><i data-lucide="radar" class="w-4 h-4"></i></div>
                    <div><p class="text-sm font-semibold text-white/80 group-hover:text-white">Coletar Agora</p><p class="text-xs text-white/30">Descobrir videos virais</p></div>
                </a>
                <a href="/opportunities" class="flex items-center gap-3 p-3 rounded-xl hover:bg-white/5 transition group">
                    <div class="w-9 h-9 rounded-lg gradient-fire flex items-center justify-center flex-shrink-0"><i data-lucide="target" class="w-4 h-4"></i></div>
                    <div><p class="text-sm font-semibold text-white/80 group-hover:text-white">Oportunidades</p><p class="text-xs text-white/30">Conteudo para replicar</p></div>
                </a>
                <a href="/feed" class="flex items-center gap-3 p-3 rounded-xl hover:bg-white/5 transition group">
                    <div class="w-9 h-9 rounded-lg gradient-ocean flex items-center justify-center flex-shrink-0"><i data-lucide="flame" class="w-4 h-4"></i></div>
                    <div><p class="text-sm font-semibold text-white/80 group-hover:text-white">Feed Viral</p><p class="text-xs text-white/30">Ver conteudo em alta</p></div>
                </a>
            </div>
        </div>
    </div>

    <!-- Top Viral Videos -->
    <div>
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-sm font-bold text-white/80 flex items-center gap-2"><i data-lucide="trophy" class="w-4 h-4 text-accent-orange"></i>Top Videos Virais</h3>
            <a href="/feed" class="text-xs text-brand-400 hover:text-brand-300 font-medium">Ver todos &rarr;</a>
        </div>
        <div class="grid-cards">
            {% for video in videos[:12] %}
            <div class="glass-card rounded-2xl overflow-hidden cursor-pointer group" onclick="openPreview({{ video.id }})">
                <div class="relative aspect-video bg-dark-800 overflow-hidden">
                    {% if video.thumbnail_url %}
                    <img src="{{ video.thumbnail_url }}" alt="{{ video.title[:50] }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" loading="lazy" onerror="this.style.display='none'">
                    {% endif %}
                    <div class="absolute top-2 left-2 flex gap-1.5">
                        <span class="px-2 py-1 rounded-lg text-[10px] font-bold uppercase badge-{{ video.platform }}">{{ video.platform }}</span>
                        {% if video.outlier_ratio >= 10 %}
                        <span class="px-2 py-1 rounded-lg text-[10px] font-bold bg-red-500/90 text-white">{{ video.outlier_ratio|int }}x</span>
                        {% elif video.outlier_ratio >= 5 %}
                        <span class="px-2 py-1 rounded-lg text-[10px] font-bold bg-orange-500/90 text-white">{{ video.outlier_ratio|int }}x</span>
                        {% endif %}
                    </div>
                    <div class="absolute top-2 right-2">
                        <div class="score-ring text-white" style="--ring-color: {{ detector.get_viral_color(video.viral_score) }}; --score: {{ video.viral_score }}">{{ video.viral_score|int }}</div>
                    </div>
                    {% if video.duration %}
                    <div class="absolute bottom-2 right-2 px-2 py-0.5 rounded-md bg-black/70 text-[11px] text-white/80 font-medium">{{ (video.duration // 60) }}:{{ "%02d"|format(video.duration % 60) }}</div>
                    {% endif %}
                    {% if video.is_small_creator %}
                    <span class="absolute bottom-2 left-2 px-2 py-0.5 rounded-lg text-[10px] font-bold bg-brand-500/80 text-white">Criador Pequeno</span>
                    {% endif %}
                </div>
                <div class="p-3">
                    <h4 class="text-sm font-semibold text-white/90 line-clamp-2 leading-snug mb-2">{{ video.title[:80] }}</h4>
                    <div class="flex items-center justify-between">
                        <div class="min-w-0">
                            <span class="text-xs text-white/40">@{{ video.creator.username if video.creator else 'unknown' }}</span>
                            {% if video.creator and video.creator.followers > 0 %}
                            <span class="text-[10px] text-white/25 ml-1">{{ video.creator.followers|default(0) }} seg</span>
                            {% endif %}
                        </div>
                        <div class="flex items-center gap-2 text-xs text-white/40 flex-shrink-0">
                            <span class="flex items-center gap-1"><i data-lucide="eye" class="w-3 h-3"></i>{{ video.views_formatted }}</span>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>

        {% if not videos %}
        <div class="glass-card rounded-2xl p-12 text-center">
            <div class="w-16 h-16 rounded-2xl gradient-brand flex items-center justify-center mx-auto mb-4"><i data-lucide="radar" class="w-8 h-8"></i></div>
            <h3 class="text-lg font-bold text-white/80 mb-2">Nenhum video coletado ainda</h3>
            <p class="text-sm text-white/40 mb-6">Inicie uma descoberta para coletar videos virais</p>
            <a href="/scrape" class="inline-flex items-center gap-2 px-6 py-3 rounded-xl gradient-brand text-white font-semibold text-sm hover:opacity-90 transition"><i data-lucide="radar" class="w-4 h-4"></i> Iniciar Descoberta</a>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function openPreview(videoId) {
    fetch('/api/videos/' + videoId).then(r => r.json()).then(video => {
        const app = document.querySelector('[x-data]').__x.$data;
        app.previewVideo = video;
        setTimeout(() => { if(window.lucide) lucide.createIcons(); }, 100);
    });
}
</script>
{% endblock %}