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

<div class="max-w-2xl mx-auto">
    <div class="bg-white dark:bg-darkcard rounded-lg border border-gray-200 dark:border-gray-700">
        <div class="p-6 border-b border-gray-200 dark:border-gray-700">
            <h1 class="text-2xl font-bold dark:text-white">📝 Add Post Analytics</h1>
            <p class="text-gray-500 dark:text-gray-400 text-sm">Enter metrics from TikTok Studio</p>
        </div>
        
        <form action="/admin/social/add" method="POST" class="p-6 space-y-6">
            <input type="hidden" name="_csrf" value="<%= csrfToken %>">
            <input type="hidden" name="platform" value="<%= platform %>">
            
            <!-- Post Info -->
            <div class="space-y-4">
                <h3 class="font-semibold dark:text-white border-b pb-2 dark:border-gray-700">Post Information</h3>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                        Post Title/Description <span class="text-red-500">*</span>
                    </label>
                    <input type="text" name="post_title" required
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-800 dark:text-white"
                           placeholder="Fire people build fast, break things...">
                </div>
                
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                            Posted Date <span class="text-red-500">*</span>
                        </label>
                        <input type="datetime-local" name="posted_at" required
                               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-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                            Video Length (seconds)
                        </label>
                        <input type="number" name="video_length_seconds" min="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"
                               placeholder="8">
                    </div>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                        Post URL (optional)
                    </label>
                    <input type="url" name="post_url"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-800 dark:text-white"
                           placeholder="https://tiktok.com/@firefrostgaming/video/...">
                </div>
            </div>
            
            <!-- Engagement Metrics -->
            <div class="space-y-4">
                <h3 class="font-semibold dark:text-white border-b pb-2 dark:border-gray-700">Engagement (from top right icons)</h3>
                
                <div class="grid grid-cols-5 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Views</label>
                        <input type="number" name="views" min="0" value="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-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Likes</label>
                        <input type="number" name="likes" min="0" value="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-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Comments</label>
                        <input type="number" name="comments" min="0" value="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-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Shares</label>
                        <input type="number" name="shares" min="0" value="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-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Saves</label>
                        <input type="number" name="saves" min="0" value="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>
            
            <!-- Watch Metrics -->
            <div class="space-y-4">
                <h3 class="font-semibold dark:text-white border-b pb-2 dark:border-gray-700">Watch Metrics (from Overview tab)</h3>
                
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                            Total Play Time (seconds)
                        </label>
                        <input type="number" name="total_play_time_seconds" min="0" value="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"
                               placeholder="2389 (convert from 0h:39m:49s)">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                            Avg Watch Time (seconds)
                        </label>
                        <input type="number" name="avg_watch_time_seconds" min="0" step="0.01" value="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"
                               placeholder="2.84">
                    </div>
                </div>
                
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                            Watched Full Video (%)
                        </label>
                        <input type="number" name="watched_full_pct" min="0" max="100" step="0.1" value="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"
                               placeholder="5.5">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                            Drop-off Point (seconds)
                        </label>
                        <input type="number" name="drop_off_seconds" min="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"
                               placeholder="2">
                    </div>
                </div>
            </div>
            
            <!-- Growth & Traffic -->
            <div class="space-y-4">
                <h3 class="font-semibold dark:text-white border-b pb-2 dark:border-gray-700">Growth & Traffic</h3>
                
                <div class="grid grid-cols-3 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                            New Followers
                        </label>
                        <input type="number" name="new_followers" min="0" value="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-sm font-medium text-gray-700 dark:text-gray-300 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">For You</option>
                            <option value="Search">Search</option>
                            <option value="Following">Following</option>
                            <option value="Personal profile">Personal Profile</option>
                            <option value="Sound">Sound</option>
                            <option value="Direct messages">Direct Messages</option>
                            <option value="Other">Other</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                            Traffic Source (%)
                        </label>
                        <input type="number" name="top_traffic_pct" min="0" max="100" step="0.1"
                               class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-800 dark:text-white"
                               placeholder="99.3">
                    </div>
                </div>
            </div>
            
            <!-- Notes -->
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    Notes (optional)
                </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"
                          placeholder="87% female audience, 57% age 18-24..."></textarea>
            </div>
            
            <!-- Submit -->
            <div class="flex justify-end gap-3 pt-4 border-t dark:border-gray-700">
                <a href="/admin/social?platform=<%= platform %>" 
                   class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 dark:text-white">
                    Cancel
                </a>
                <button type="submit" 
                        class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
                    Save Post
                </button>
            </div>
        </form>
    </div>
</div>
