{% extends "base.html" %}
{% block title %}Alertas - Viral Social Pro{% endblock %}
{% block nav_alerts %}active{% endblock %}

{% block content %}
<div class="p-6 space-y-6" x-data="alertsApp()" x-init="loadAlerts()">
    <div class="gradient-bg rounded-2xl p-8 text-white flex items-center justify-between">
        <div>
            <h1 class="text-3xl font-bold mb-2">Alertas</h1>
            <p class="text-indigo-200">Notificações de novos virais, criadores e tendências</p>
        </div>
        <div class="flex gap-3">
            <button @click="checkNow()" class="px-5 py-2.5 bg-white/20 hover:bg-white/30 text-white rounded-xl font-medium transition backdrop-blur text-sm">Verificar Agora</button>
            <button @click="clearAll()" class="px-5 py-2.5 bg-white/10 hover:bg-white/20 text-white rounded-xl font-medium transition backdrop-blur text-sm">Limpar Todos</button>
        </div>
    </div>

    <!-- Unread count -->
    <div class="flex items-center gap-2" x-show="unread > 0">
        <span class="px-3 py-1 bg-red-100 text-red-700 rounded-full text-sm font-bold" x-text="unread + ' não lido(s)'"></span>
    </div>

    <!-- Alerts List -->
    <div class="bg-white rounded-xl shadow-sm">
        <template x-if="loading"><div class="p-16 text-center text-gray-400">Carregando...</div></template>
        <template x-if="!loading && alerts.length === 0">
            <div class="p-16 text-center">
                <div class="text-6xl mb-4">🔔</div>
                <h3 class="text-lg font-medium text-gray-900 mb-2">Nenhum alerta</h3>
                <p class="text-gray-500">Clique em "Verificar Agora" para buscar novos alertas</p>
            </div>
        </template>
        <template x-if="!loading && alerts.length > 0">
            <div class="divide-y divide-gray-100">
                <template x-for="alert in alerts" :key="alert.id">
                    <div class="p-4 flex items-start gap-4 hover:bg-gray-50 transition" :class="!alert.read ? 'bg-blue-50/50' : ''">
                        <div class="w-10 h-10 rounded-lg flex items-center justify-center text-lg flex-shrink-0"
                             :class="{
                                 'bg-red-100': alert.type === 'viral',
                                 'bg-purple-100': alert.type === 'creator_viral',
                                 'bg-orange-100': alert.type === 'trend',
                             }">
                            <span x-text="alert.type === 'viral' ? '🔥' : alert.type === 'creator_viral' ? '⭐' : '📈'"></span>
                        </div>
                        <div class="flex-1 min-w-0">
                            <div class="flex items-center gap-2">
                                <p class="font-medium text-gray-900" x-text="alert.title"></p>
                                <span x-show="!alert.read" class="w-2 h-2 rounded-full bg-blue-500 flex-shrink-0"></span>
                            </div>
                            <p class="text-sm text-gray-500 mt-0.5" x-text="alert.message"></p>
                            <p class="text-xs text-gray-400 mt-1" x-text="new Date(alert.created_at).toLocaleString('pt-BR')"></p>
                        </div>
                        <div class="flex gap-2 flex-shrink-0">
                            <a x-show="alert.data?.url" :href="alert.data?.url" target="_blank" class="px-3 py-1.5 bg-brand-500 text-white rounded-lg text-xs hover:bg-brand-600">Ver</a>
                            <button x-show="!alert.read" @click="markRead(alert.id)" class="px-3 py-1.5 bg-gray-100 text-gray-700 rounded-lg text-xs hover:bg-gray-200">Lido</button>
                        </div>
                    </div>
                </template>
            </div>
        </template>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function alertsApp() {
    return {
        alerts: [], unread: 0, loading: true,
        async loadAlerts() { try { const d = await apiCall('/api/alerts'); this.alerts = d.alerts; this.unread = d.unread; } catch(e){} this.loading = false; },
        async checkNow() { showToast('Verificando...', 'info'); await apiCall('/api/alerts/check', 'POST'); await this.loadAlerts(); showToast(`${this.unread} alertas não lidos`, 'success'); },
        async markRead(id) { await apiCall(`/api/alerts/${id}/read`, 'POST'); await this.loadAlerts(); },
        async clearAll() { await apiCall('/api/alerts/clear', 'POST'); await this.loadAlerts(); showToast('Alertas limpos', 'success'); },
    };
}
</script>
{% endblock %}