<div class="mb-6 flex justify-between items-center">
    <div>
        <h1 class="text-2xl font-bold dark:text-white">📊 Social Analytics</h1>
        <p class="text-gray-500 dark:text-gray-400 text-sm">Track post performance and audience growth</p>
    </div>
    <div class="flex gap-2">
        <a href="/admin/social/add?platform=<%= platform %>" 
           class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
            + Add Post
        </a>
        <a href="/admin/social/snapshot?platform=<%= platform %>" 
           class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition">
            📸 Snapshot
        </a>
    </div>
</div>

<!-- Platform Tabs -->
<div class="mb-6 border-b border-gray-200 dark:border-gray-700">
    <nav class="flex gap-4">
        <a href="/admin/social?platform=tiktok" 
           class="pb-3 px-1 border-b-2 <%= platform === 'tiktok' ? 'border-pink-500 text-pink-600 dark:text-pink-400' : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400' %>">
            🎵 TikTok
        </a>
        <a href="/admin/social?platform=facebook" 
           class="pb-3 px-1 border-b-2 <%= platform === 'facebook' ? 'border-blue-500 text-blue-600 dark:text-blue-400' : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400' %>">
            📘 Facebook
        </a>
        <a href="/admin/social?platform=instagram" 
           class="pb-3 px-1 border-b-2 <%= platform === 'instagram' ? 'border-purple-500 text-purple-600 dark:text-purple-400' : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400' %>">
            📷 Instagram
        </a>
        <a href="/admin/social?platform=x" 
           class="pb-3 px-1 border-b-2 <%= platform === 'x' ? 'border-gray-800 text-gray-800 dark:text-white' : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400' %>">
            𝕏 X
        </a>
        <a href="/admin/social?platform=bluesky" 
           class="pb-3 px-1 border-b-2 <%= platform === 'bluesky' ? 'border-sky-500 text-sky-600 dark:text-sky-400' : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400' %>">
            🦋 Bluesky
        </a>
    </nav>
</div>

<!-- Stats Cards (Last 30 Days) -->
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-8 gap-4 mb-6">
    <div class="bg-white dark:bg-darkcard rounded-lg p-4 border border-gray-200 dark:border-gray-700">
        <div class="text-xs text-gray-500 dark:text-gray-400 mb-1">Posts</div>
        <div class="text-xl font-bold dark:text-white"><%= stats.total_posts || 0 %></div>
    </div>
    <div class="bg-white dark:bg-darkcard rounded-lg p-4 border border-gray-200 dark:border-gray-700">
        <div class="text-xs text-gray-500 dark:text-gray-400 mb-1">Views</div>
        <div class="text-xl font-bold text-blue-600 dark:text-blue-400"><%= Number(stats.total_views || 0).toLocaleString() %></div>
    </div>
    <div class="bg-white dark:bg-darkcard rounded-lg p-4 border border-gray-200 dark:border-gray-700">
        <div class="text-xs text-gray-500 dark:text-gray-400 mb-1">Likes</div>
        <div class="text-xl font-bold text-pink-600 dark:text-pink-400"><%= Number(stats.total_likes || 0).toLocaleString() %></div>
    </div>
    <div class="bg-white dark:bg-darkcard rounded-lg p-4 border border-gray-200 dark:border-gray-700">
        <div class="text-xs text-gray-500 dark:text-gray-400 mb-1">Comments</div>
        <div class="text-xl font-bold dark:text-white"><%= Number(stats.total_comments || 0).toLocaleString() %></div>
    </div>
    <div class="bg-white dark:bg-darkcard rounded-lg p-4 border border-gray-200 dark:border-gray-700">
        <div class="text-xs text-gray-500 dark:text-gray-400 mb-1">Shares</div>
        <div class="text-xl font-bold text-green-600 dark:text-green-400"><%= Number(stats.total_shares || 0).toLocaleString() %></div>
    </div>
    <div class="bg-white dark:bg-darkcard rounded-lg p-4 border border-gray-200 dark:border-gray-700">
        <div class="text-xs text-gray-500 dark:text-gray-400 mb-1">New Followers</div>
        <div class="text-xl font-bold text-purple-600 dark:text-purple-400"><%= Number(stats.total_new_followers || 0).toLocaleString() %></div>
    </div>
    <div class="bg-white dark:bg-darkcard rounded-lg p-4 border border-gray-200 dark:border-gray-700">
        <div class="text-xs text-gray-500 dark:text-gray-400 mb-1">Engagement</div>
        <div class="text-xl font-bold text-orange-600 dark:text-orange-400"><%= stats.engagementRate %>%</div>
    </div>
    <div class="bg-white dark:bg-darkcard rounded-lg p-4 border border-gray-200 dark:border-gray-700">
        <div class="text-xs text-gray-500 dark:text-gray-400 mb-1">Avg Watch</div>
        <div class="text-xl font-bold dark:text-white"><%= Number(stats.avg_watch_time || 0).toFixed(1) %>s</div>
    </div>
</div>

<% if (snapshot) { %>
<!-- Account Snapshot -->
<div class="bg-gradient-to-r from-pink-50 to-purple-50 dark:from-gray-800 dark:to-gray-800 rounded-lg p-4 mb-6 border border-pink-200 dark:border-gray-700">
    <div class="flex items-center justify-between">
        <div>
            <span class="text-sm text-gray-500 dark:text-gray-400">Account Snapshot (<%= new Date(snapshot.snapshot_date).toLocaleDateString() %>)</span>
            <div class="flex gap-6 mt-1">
                <div>
                    <span class="text-gray-600 dark:text-gray-300">Followers:</span>
                    <span class="font-bold dark:text-white ml-1"><%= Number(snapshot.total_followers || 0).toLocaleString() %></span>
                </div>
                <div>
                    <span class="text-gray-600 dark:text-gray-300">Profile Views:</span>
                    <span class="font-bold dark:text-white ml-1"><%= Number(snapshot.profile_views || 0).toLocaleString() %></span>
                </div>
            </div>
        </div>
        <% if (snapshot.search_queries && snapshot.search_queries.length > 0) { %>
        <div class="text-right">
            <span class="text-sm text-gray-500 dark:text-gray-400">Top Searches</span>
            <div class="text-sm dark:text-gray-300">
                <% snapshot.search_queries.slice(0, 3).forEach(q => { %>
                    <span class="inline-block bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded text-xs mr-1"><%= q %></span>
                <% }); %>
            </div>
        </div>
        <% } %>
    </div>
</div>
<% } %>

<!-- Posts Table -->
<div class="bg-white dark:bg-darkcard rounded-lg border border-gray-200 dark:border-gray-700">
    <div class="p-4 border-b border-gray-200 dark:border-gray-700">
        <h2 class="text-lg font-bold dark:text-white">Recent Posts</h2>
        <p class="text-sm text-gray-500 dark:text-gray-400">Last 30 days performance</p>
    </div>
    <div class="overflow-x-auto">
        <table class="w-full">
            <thead class="bg-gray-50 dark:bg-gray-800">
                <tr>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Post</th>
                    <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Views</th>
                    <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Likes</th>
                    <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Comments</th>
                    <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Shares</th>
                    <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Completion</th>
                    <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Avg Watch</th>
                    <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                <% if (posts && posts.length > 0) { %>
                    <% posts.forEach(post => { %>
                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800">
                            <td class="px-4 py-3">
                                <div class="text-sm font-medium dark:text-white truncate max-w-xs" title="<%= post.post_title %>">
                                    <%= post.post_title.substring(0, 50) %><%= post.post_title.length > 50 ? '...' : '' %>
                                </div>
                                <div class="text-xs text-gray-500 dark:text-gray-400">
                                    <%= new Date(post.posted_at).toLocaleDateString() %>
                                    <% if (post.video_length_seconds) { %>
                                        · <%= post.video_length_seconds %>s
                                    <% } %>
                                </div>
                            </td>
                            <td class="px-4 py-3 text-right">
                                <span class="text-sm font-medium text-blue-600 dark:text-blue-400"><%= Number(post.views || 0).toLocaleString() %></span>
                            </td>
                            <td class="px-4 py-3 text-right">
                                <span class="text-sm text-pink-600 dark:text-pink-400"><%= Number(post.likes || 0).toLocaleString() %></span>
                            </td>
                            <td class="px-4 py-3 text-right">
                                <span class="text-sm dark:text-white"><%= post.comments || 0 %></span>
                            </td>
                            <td class="px-4 py-3 text-right">
                                <span class="text-sm text-green-600 dark:text-green-400"><%= post.shares || 0 %></span>
                            </td>
                            <td class="px-4 py-3 text-right">
                                <span class="text-sm <%= post.watched_full_pct >= 20 ? 'text-green-600 dark:text-green-400' : post.watched_full_pct >= 10 ? 'text-yellow-600 dark:text-yellow-400' : 'text-red-600 dark:text-red-400' %>">
                                    <%= Number(post.watched_full_pct || 0).toFixed(1) %>%
                                </span>
                            </td>
                            <td class="px-4 py-3 text-right">
                                <span class="text-sm dark:text-white"><%= Number(post.avg_watch_time_seconds || 0).toFixed(1) %>s</span>
                            </td>
                            <td class="px-4 py-3 text-center">
                                <a href="/admin/social/post/<%= post.id %>" 
                                   class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 text-sm">
                                    View
                                </a>
                            </td>
                        </tr>
                    <% }); %>
                <% } else { %>
                    <tr>
                        <td colspan="8" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
                            No posts tracked yet. <a href="/admin/social/add?platform=<%= platform %>" class="text-blue-600 dark:text-blue-400">Add your first post</a>
                        </td>
                    </tr>
                <% } %>
            </tbody>
        </table>
    </div>
</div>
