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

{% block content %}
<div class="p-6 space-y-6" x-data="hashtagsApp()">
    <div class="gradient-bg rounded-2xl p-8 text-white">
        <h1 class="text-3xl font-bold mb-2">Pesquisa de Hashtags</h1>
        <p class="text-indigo-200">Encontre as melhores hashtags e combinações para viralizar</p>
    </div>

    <!-- Search -->
    <div class="bg-white rounded-xl p-5 shadow-sm">
        <div class="flex flex-wrap gap-4 items-end">
            <div class="flex-1 min-w-[200px]">
                <label class="block text-sm font-medium text-gray-700 mb-1">Hashtag semente</label>
                <input type="text" x-model="seed" placeholder="Ex: viral, fyp, trend..."
                       class="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-brand-500 outline-none">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Plataforma</label>
                <select x-model="platform" class="px-4 py-2.5 border border-gray-200 rounded-lg outline-none">
                    <option value="">Todas</option>
                    <option value="youtube">YouTube</option>
                    <option value="tiktok">TikTok</option>
                    <option value="instagram">Instagram</option>
                </select>
            </div>
            <button @click="research()" :disabled="loading" class="px-6 py-2.5 bg-brand-500 text-white rounded-lg hover:bg-brand-600 font-medium transition disabled:opacity-50">
                <span x-show="!loading">Pesquisar</span><span x-show="loading">Buscando...</span>
            </button>
        </div>
    </div>

    <!-- Suggested Combo -->
    <div class="bg-white rounded-xl shadow-sm" x-show="combo.length > 0" x-cloak>
        <div class="p-5 border-b border-gray-100">
            <h2 class="text-lg font-bold text-gray-900">💡 Combinação Sugerida</h2>
        </div>
        <div class="p-5">
            <div class="flex flex-wrap gap-2 mb-3">
                <template x-for="tag in combo" :key="tag">
                    <span class="px-3 py-1.5 bg-brand-100 text-brand-700 rounded-full text-sm font-medium" x-text="'#' + tag"></span>
                </template>
            </div>
            <button @click="copyCombo()" class="text-sm text-brand-500 hover:text-brand-700 font-medium">📋 Copiar para clipboard</button>
        </div>
    </div>

    <!-- Related hashtags -->
    <div x-show="related.length > 0" x-cloak 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">🔗 Relacionadas a #<span x-text="seed"></span></h2>
        </div>
        <div class="p-5">
            <div class="flex flex-wrap gap-2">
                <template x-for="r in related" :key="r.name">
                    <span class="px-3 py-1.5 bg-green-100 text-green-700 rounded-full text-sm cursor-pointer hover:bg-green-200" @click="seed = r.name; research()" x-text="'#' + r.name + ' (' + r.co_count + ')'"></span>
                </template>
            </div>
        </div>
    </div>

    <!-- Results Table -->
    <div class="bg-white rounded-xl shadow-sm" x-show="results.length > 0" x-cloak>
        <div class="p-5 border-b border-gray-100">
            <h2 class="text-lg font-bold text-gray-900">📊 Resultados (<span x-text="totalHashtags"></span> hashtags, <span x-text="totalVideos"></span> vídeos analisados)</h2>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-4 py-3 text-left font-medium text-gray-500">#</th>
                        <th class="px-4 py-3 text-left font-medium text-gray-500">Hashtag</th>
                        <th class="px-4 py-3 text-right font-medium text-gray-500">Vídeos</th>
                        <th class="px-4 py-3 text-right font-medium text-gray-500">Views Médias</th>
                        <th class="px-4 py-3 text-right font-medium text-gray-500">Score Médio</th>
                        <th class="px-4 py-3 text-right font-medium text-gray-500">Competição</th>
                        <th class="px-4 py-3 text-right font-medium text-gray-500">Eficácia</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    <template x-for="(h, i) in results" :key="h.name">
                        <tr class="hover:bg-gray-50">
                            <td class="px-4 py-3 text-gray-400" x-text="i + 1"></td>
                            <td class="px-4 py-3 font-medium text-gray-900">
                                <span class="cursor-pointer hover:text-brand-500" @click="seed = h.name; research()" x-text="'#' + h.name"></span>
                            </td>
                            <td class="px-4 py-3 text-right" x-text="h.count"></td>
                            <td class="px-4 py-3 text-right" x-text="formatNumber(h.avg_views)"></td>
                            <td class="px-4 py-3 text-right font-bold" :style="`color: ${scoreColor(h.avg_viral_score)}`" x-text="h.avg_viral_score"></td>
                            <td class="px-4 py-3 text-right">
                                <div class="flex items-center justify-end gap-2">
                                    <div class="w-16 h-2 bg-gray-200 rounded-full overflow-hidden"><div class="h-full bg-orange-500 rounded-full" :style="`width: ${h.competitiveness}%`"></div></div>
                                    <span class="text-xs" x-text="h.competitiveness + '%'"></span>
                                </div>
                            </td>
                            <td class="px-4 py-3 text-right font-bold text-brand-600" x-text="h.effectiveness"></td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function hashtagsApp() {
    return {
        seed: '', platform: '', loading: false,
        results: [], related: [], combo: [],
        totalHashtags: 0, totalVideos: 0,
        async research() {
            this.loading = true;
            try {
                const p = new URLSearchParams({ seed: this.seed, platform: this.platform });
                const [res, sug] = await Promise.all([
                    apiCall(`/api/hashtags/research?${p}`),
                    apiCall(`/api/hashtags/suggest?platform=${this.platform}&count=8`),
                ]);
                this.results = res.results;
                this.related = res.co_occurrences || [];
                this.totalHashtags = res.total_hashtags;
                this.totalVideos = res.total_videos_analyzed;
                this.combo = sug.suggested_hashtags;
            } catch (e) {}
            this.loading = false;
        },
        copyCombo() {
            const text = this.combo.map(h => '#' + h).join(' ');
            navigator.clipboard.writeText(text);
            showToast('Hashtags copiadas!', 'success');
        },
    };
}
</script>
{% endblock %}