<div class="mb-6">
    <a href="/admin/social?platform=<%= post.platform %>" class="text-blue-600 dark:text-blue-400 hover:underline">← Back to Dashboard</a>
</div>

<div class="max-w-4xl mx-auto">
    <!-- Post Header -->
    <div class="bg-white dark:bg-darkcard rounded-lg border border-gray-200 dark:border-gray-700 mb-6">
        <div class="p-6">
            <div class="flex justify-between items-start">
                <div>
                    <h1 class="text-xl font-bold dark:text-white mb-2"><%= post.post_title %></h1>
                    <div class="flex items-center gap-4 text-sm text-gray-500 dark:text-gray-400">
                        <span>📅 <%= new Date(post.posted_at).toLocaleDateString() %></span>
                        <% if (post.video_length_seconds) { %>
                            <span>⏱️ <%= post.video_length_seconds %>s</span>
                        <% } %>
                        <% if (post.post_url) { %>
                            <a href="<%= post.post_url %>" target="_blank" class="text-blue-600 dark:text-blue-400 hover:underline">View on TikTok →</a>
                        <% } %>
                    </div>
                </div>
                <form action="/admin/social/post/<%= post.id %>/delete" method="POST" 
                      onsubmit="return confirm('Delete this post?');">
                    <input type="hidden" name="_csrf" value="<%= csrfToken %>">
                    <button type="submit" class="text-red-600 hover:text-red-800 dark:text-red-400 text-sm">
                        🗑️ Delete
                    </button>
                </form>
            </div>
        </div>
    </div>

    <!-- Stats Overview -->
    <div class="grid grid-cols-2 md:grid-cols-5 gap-4 mb-6">
        <div class="bg-white dark:bg-darkcard rounded-lg p-4 border border-gray-200 dark:border-gray-700 text-center">
            <div class="text-2xl font-bold text-blue-600 dark:text-blue-400"><%= Number(post.views || 0).toLocaleString() %></div>
            <div class="text-xs text-gray-500 dark:text-gray-400">Views</div>
        </div>
        <div class="bg-white dark:bg-darkcard rounded-lg p-4 border border-gray-200 dark:border-gray-700 text-center">
            <div class="text-2xl font-bold text-pink-600 dark:text-pink-400"><%= Number(post.likes || 0).toLocaleString() %></div>
            <div class="text-xs text-gray-500 dark:text-gray-400">Likes</div>
        </div>
        <div class="bg-white dark:bg-darkcard rounded-lg p-4 border border-gray-200 dark:border-gray-700 text-center">
            <div class="text-2xl font-bold dark:text-white"><%= post.comments || 0 %></div>
            <div class="text-xs text-gray-500 dark:text-gray-400">Comments</div>
        </div>
        <div class="bg-white dark:bg-darkcard rounded-lg p-4 border border-gray-200 dark:border-gray-700 text-center">
            <div class="text-2xl font-bold text-green-600 dark:text-green-400"><%= post.shares || 0 %></div>
            <div class="text-xs text-gray-500 dark:text-gray-400">Shares</div>
        </div>
        <div class="bg-white dark:bg-darkcard rounded-lg p-4 border border-gray-200 dark:border-gray-700 text-center">
            <div class="text-2xl font-bold text-purple-600 dark:text-purple-400"><%= post.saves || 0 %></div>
            <div class="text-xs text-gray-500 dark:text-gray-400">Saves</div>
        </div>
    </div>

    <!-- Watch & Traffic Stats -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
        <!-- Watch Performance -->
        <div class="bg-white dark:bg-darkcard rounded-lg border border-gray-200 dark:border-gray-700 p-6">
            <h3 class="font-semibold dark:text-white mb-4">⏱️ Watch Performance</h3>
            <div class="space-y-3">
                <div class="flex justify-between">
                    <span class="text-gray-600 dark:text-gray-400">Avg Watch Time</span>
                    <span class="font-bold dark:text-white"><%= Number(post.avg_watch_time_seconds || 0).toFixed(2) %>s</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-600 dark:text-gray-400">Watched Full Video</span>
                    <span class="font-bold <%= post.watched_full_pct >= 20 ? 'text-green-600' : post.watched_full_pct >= 10 ? 'text-yellow-600' : 'text-red-600' %>">
                        <%= Number(post.watched_full_pct || 0).toFixed(1) %>%
                    </span>
                </div>
                <% if (post.drop_off_seconds) { %>
                <div class="flex justify-between">
                    <span class="text-gray-600 dark:text-gray-400">Drop-off Point</span>
                    <span class="font-bold text-red-600 dark:text-red-400"><%= post.drop_off_seconds %>s</span>
                </div>
                <% } %>
                <div class="flex justify-between">
                    <span class="text-gray-600 dark:text-gray-400">Total Play Time</span>
                    <span class="font-bold dark:text-white">
                        <% 
                            const totalSecs = post.total_play_time_seconds || 0;
                            const hrs = Math.floor(totalSecs / 3600);
                            const mins = Math.floor((totalSecs % 3600) / 60);
                            const secs = totalSecs % 60;
                        %>
                        <%= hrs %>h:<%= mins %>m:<%= secs %>s
                    </span>
                </div>
            </div>
        </div>

        <!-- Traffic Source -->
        <div class="bg-white dark:bg-darkcard rounded-lg border border-gray-200 dark:border-gray-700 p-6">
            <h3 class="font-semibold dark:text-white mb-4">📊 Traffic & Growth</h3>
            <div class="space-y-3">
                <% if (post.top_traffic_source) { %>
                <div class="flex justify-between">
                    <span class="text-gray-600 dark:text-gray-400">Top Source</span>
                    <span class="font-bold dark:text-white">
                        <%= post.top_traffic_source %>
                        <% if (post.top_traffic_pct) { %>
                            (<%= post.top_traffic_pct %>%)
                        <% } %>
                    </span>
                </div>
                <% } %>
                <div class="flex justify-between">
                    <span class="text-gray-600 dark:text-gray-400">New Followers</span>
                    <span class="font-bold text-purple-600 dark:text-purple-400"><%= post.new_followers || 0 %></span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-600 dark:text-gray-400">Engagement Rate</span>
                    <% 
                        const engRate = post.views > 0 
                            ? (((post.likes + post.comments + post.shares) / post.views) * 100).toFixed(2)
                            : 0;
                    %>
                    <span class="font-bold text-orange-600 dark:text-orange-400"><%= engRate %>%</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Update Form -->
    <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">
            <h3 class="font-semibold dark:text-white">📝 Update Metrics</h3>
            <p class="text-sm text-gray-500 dark:text-gray-400">Refresh numbers from TikTok Studio</p>
        </div>
        
        <form action="/admin/social/post/<%= post.id %>/update" method="POST" class="p-6 space-y-4">
            <input type="hidden" name="_csrf" value="<%= csrfToken %>">
            
            <div class="grid grid-cols-5 gap-4">
                <div>
                    <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">Views</label>
                    <input type="number" name="views" value="<%= post.views || 0 %>"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-800 dark:text-white">
                </div>
                <div>
                    <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">Likes</label>
                    <input type="number" name="likes" value="<%= post.likes || 0 %>"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-800 dark:text-white">
                </div>
                <div>
                    <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">Comments</label>
                    <input type="number" name="comments" value="<%= post.comments || 0 %>"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-800 dark:text-white">
                </div>
                <div>
                    <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">Shares</label>
                    <input type="number" name="shares" value="<%= post.shares || 0 %>"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-800 dark:text-white">
                </div>
                <div>
                    <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">Saves</label>
                    <input type="number" name="saves" value="<%= post.saves || 0 %>"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-800 dark:text-white">
                </div>
            </div>
            
            <div class="grid grid-cols-4 gap-4">
                <div>
                    <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">Total Play Time (s)</label>
                    <input type="number" name="total_play_time_seconds" value="<%= post.total_play_time_seconds || 0 %>"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-800 dark:text-white">
                </div>
                <div>
                    <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">Avg Watch (s)</label>
                    <input type="number" name="avg_watch_time_seconds" step="0.01" value="<%= post.avg_watch_time_seconds || 0 %>"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-800 dark:text-white">
                </div>
                <div>
                    <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">Watched Full (%)</label>
                    <input type="number" name="watched_full_pct" step="0.1" value="<%= post.watched_full_pct || 0 %>"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-800 dark:text-white">
                </div>
                <div>
                    <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">Drop-off (s)</label>
                    <input type="number" name="drop_off_seconds" value="<%= post.drop_off_seconds || '' %>"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-800 dark:text-white">
                </div>
            </div>
            
            <div class="grid grid-cols-3 gap-4">
                <div>
                    <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">New Followers</label>
                    <input type="number" name="new_followers" value="<%= post.new_followers || 0 %>"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-800 dark:text-white">
                </div>
                <div>
                    <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">Top Traffic Source</label>
                    <select name="top_traffic_source"
                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-800 dark:text-white">
                        <option value="">-- Select --</option>
                        <option value="For You" <%= post.top_traffic_source === 'For You' ? 'selected' : '' %>>For You</option>
                        <option value="Search" <%= post.top_traffic_source === 'Search' ? 'selected' : '' %>>Search</option>
                        <option value="Following" <%= post.top_traffic_source === 'Following' ? 'selected' : '' %>>Following</option>
                        <option value="Personal profile" <%= post.top_traffic_source === 'Personal profile' ? 'selected' : '' %>>Personal Profile</option>
                        <option value="Sound" <%= post.top_traffic_source === 'Sound' ? 'selected' : '' %>>Sound</option>
                        <option value="Direct messages" <%= post.top_traffic_source === 'Direct messages' ? 'selected' : '' %>>Direct Messages</option>
                        <option value="Other" <%= post.top_traffic_source === 'Other' ? 'selected' : '' %>>Other</option>
                    </select>
                </div>
                <div>
                    <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">Traffic %</label>
                    <input type="number" name="top_traffic_pct" step="0.1" value="<%= post.top_traffic_pct || '' %>"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-800 dark:text-white">
                </div>
            </div>
            
            <div>
                <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">Notes</label>
                <textarea name="notes" rows="2"
                          class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-800 dark:text-white"><%= post.notes || '' %></textarea>
            </div>
            
            <div class="flex justify-end">
                <button type="submit" 
                        class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
                    Update Metrics
                </button>
            </div>
        </form>
    </div>
    
    <% if (post.notes) { %>
    <div class="mt-6 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-700 rounded-lg p-4">
        <h4 class="font-semibold text-yellow-800 dark:text-yellow-200 mb-2">📝 Notes</h4>
        <p class="text-yellow-700 dark:text-yellow-300"><%= post.notes %></p>
    </div>
    <% } %>
</div>
