{% extends "base.html" %}
{% block title %}Calendário - Viral Social Pro{% endblock %}
{% block nav_calendar %}active{% endblock %}

{% block content %}
<div class="p-6 space-y-6">
    <div class="gradient-bg rounded-2xl p-8 text-white">
        <h1 class="text-3xl font-bold mb-2">Calendário de Conteúdo</h1>
        <p class="text-indigo-200">Melhores horários para postar baseado na análise dos virais</p>
    </div>

    <!-- Platform Filter -->
    <div class="bg-white rounded-xl p-4 shadow-sm flex gap-3 flex-wrap items-center">
        <span class="text-sm font-medium text-gray-500">Plataforma:</span>
        <a href="/calendar-page" class="px-4 py-2 rounded-lg font-medium text-sm transition {% if not platform %}bg-brand-500 text-white{% else %}bg-gray-100 text-gray-700{% endif %}">Todas</a>
        <a href="/calendar-page?platform=youtube" class="px-4 py-2 rounded-lg font-medium text-sm transition {% if platform == 'youtube' %}bg-red-500 text-white{% else %}bg-gray-100 text-gray-700{% endif %}">YouTube</a>
        <a href="/calendar-page?platform=tiktok" class="px-4 py-2 rounded-lg font-medium text-sm transition {% if platform == 'tiktok' %}bg-gray-900 text-white{% else %}bg-gray-100 text-gray-700{% endif %}">TikTok</a>
        <a href="/calendar-page?platform=instagram" class="px-4 py-2 rounded-lg font-medium text-sm transition {% if platform == 'instagram' %}bg-pink-500 text-white{% else %}bg-gray-100 text-gray-700{% endif %}">Instagram</a>
    </div>

    <!-- Recommendation -->
    {% if best_times.recommendation %}
    <div class="bg-green-50 border border-green-200 rounded-xl p-5">
        <div class="flex items-center gap-3">
            <span class="text-2xl">💡</span>
            <div>
                <p class="font-medium text-green-800">Recomendação</p>
                <p class="text-sm text-green-600">{{ best_times.recommendation }}</p>
            </div>
        </div>
    </div>
    {% endif %}

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Best Hours -->
        <div class="bg-white rounded-xl shadow-sm">
            <div class="p-5 border-b border-gray-100">
                <h2 class="text-lg font-bold text-gray-900">🕐 Melhores Horários</h2>
                <p class="text-sm text-gray-500">{{ best_times.total_analyzed }} vídeos analisados</p>
            </div>
            <div class="p-5">
                {% if best_times.best_hours %}
                <div class="space-y-2">
                    {% for h in best_times.best_hours %}
                    <div class="flex items-center gap-3">
                        <span class="w-14 text-sm font-mono font-bold text-gray-700">{{ h.label }}</span>
                        <div class="flex-1 h-8 bg-gray-100 rounded-lg overflow-hidden relative">
                            {% set width = (h.avg_score / 100 * 100) if h.avg_score > 0 else 5 %}
                            <div class="h-full rounded-lg transition-all" style="width: {{ width }}%; background: linear-gradient(90deg, #6366f1, #8b5cf6);"></div>
                            <span class="absolute inset-0 flex items-center px-3 text-xs font-medium {% if width > 30 %}text-white{% else %}text-gray-600{% endif %}">
                                Score {{ h.avg_score }} ({{ h.count }} vídeos)
                            </span>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <p class="text-center text-gray-400 py-6">Colete mais vídeos para ver análises.</p>
                {% endif %}
            </div>
        </div>

        <!-- Best Days -->
        <div class="bg-white rounded-xl shadow-sm">
            <div class="p-5 border-b border-gray-100">
                <h2 class="text-lg font-bold text-gray-900">📅 Melhores Dias</h2>
            </div>
            <div class="p-5">
                {% if best_times.best_days %}
                <div class="space-y-2">
                    {% for d in best_times.best_days %}
                    <div class="flex items-center gap-3">
                        <span class="w-20 text-sm font-medium text-gray-700">{{ d.name }}</span>
                        <div class="flex-1 h-8 bg-gray-100 rounded-lg overflow-hidden relative">
                            {% set width = (d.avg_score / 100 * 100) if d.avg_score > 0 else 5 %}
                            <div class="h-full rounded-lg" style="width: {{ width }}%; background: linear-gradient(90deg, #f97316, #eab308);"></div>
                            <span class="absolute inset-0 flex items-center px-3 text-xs font-medium {% if width > 30 %}text-white{% else %}text-gray-600{% endif %}">
                                Score {{ d.avg_score }} ({{ d.count }} vídeos)
                            </span>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <p class="text-center text-gray-400 py-6">Colete mais vídeos.</p>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Best Slots -->
    {% if best_times.best_slots %}
    <div class="bg-white rounded-xl shadow-sm">
        <div class="p-5 border-b border-gray-100">
            <h2 class="text-lg font-bold text-gray-900">🎯 Top Combinações Dia + Horário</h2>
        </div>
        <div class="p-5">
            <div class="grid grid-cols-2 md:grid-cols-5 gap-3">
                {% for slot in best_times.best_slots %}
                <div class="p-3 rounded-xl border-2 border-brand-200 bg-brand-50 text-center">
                    <p class="text-xs text-brand-600 font-medium">{{ slot.day }}</p>
                    <p class="text-lg font-bold text-brand-700">{{ slot.hour }}</p>
                    <p class="text-xs text-gray-500">Score {{ slot.avg_score }}</p>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Weekly Plan -->
    <div class="bg-white rounded-xl shadow-sm">
        <div class="p-5 border-b border-gray-100">
            <h2 class="text-lg font-bold text-gray-900">📋 Plano Semanal Sugerido</h2>
        </div>
        <div class="p-5">
            <div class="grid grid-cols-7 gap-2">
                {% for day in plan %}
                <div class="p-3 rounded-xl border {% if day.day_score >= 50 %}border-green-200 bg-green-50{% elif day.day_score >= 30 %}border-yellow-200 bg-yellow-50{% else %}border-gray-200 bg-gray-50{% endif %} text-center">
                    <p class="text-xs font-bold text-gray-600 mb-1">{{ day.day_name }}</p>
                    <p class="text-xs text-gray-400 mb-2">{{ day.date[5:] }}</p>
                    {% for slot in day.slots %}
                    <div class="px-2 py-1 bg-white rounded-lg text-xs font-medium mb-1 shadow-sm">
                        {{ slot.time }}
                    </div>
                    {% endfor %}
                    {% if day.day_score > 0 %}
                    <p class="text-xs text-gray-400 mt-1">Score {{ day.day_score }}</p>
                    {% endif %}
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>
{% endblock %}
