<div class="page-actions">
  <a href="/member/social/new" class="btn btn-primary"><i class="bi bi-plus-circle-fill"></i> Submit Content</a>
</div>

<% if (stats) { %>
<div class="social-stats-grid">
  <div class="social-stat"><i class="bi bi-send-check-fill" style="color:#1a56db"></i><div><p class="ss-num"><%= stats.total || 0 %></p><p class="ss-label">Total Submissions</p></div></div>
  <div class="social-stat"><i class="bi bi-check-circle-fill" style="color:#10b981"></i><div><p class="ss-num"><%= stats.published || 0 %></p><p class="ss-label">Published</p></div></div>
  <div class="social-stat"><i class="bi bi-hand-thumbs-up-fill" style="color:#f59e0b"></i><div><p class="ss-num"><%= stats.total_likes || 0 %></p><p class="ss-label">Total Likes</p></div></div>
  <div class="social-stat"><i class="bi bi-share-fill" style="color:#9333ea"></i><div><p class="ss-num"><%= stats.total_shares || 0 %></p><p class="ss-label">Total Shares</p></div></div>
  <div class="social-stat"><i class="bi bi-cursor-fill" style="color:#ef4444"></i><div><p class="ss-num"><%= stats.total_clicks || 0 %></p><p class="ss-label">Link Clicks</p></div></div>
</div>
<% } %>

<% if (submissions && submissions.length) { %>
<div class="social-feed">
  <% submissions.forEach(s => { %>
  <div class="social-item">
    <div class="si-header">
      <span class="si-type si-type-<%= s.submission_type %>"><%= s.submission_type %></span>
      <span class="badge badge-<%= s.status === 'published' ? 'success' : s.status === 'approved' ? 'info' : s.status === 'rejected' ? 'danger' : 'warning' %>"><%= s.status %></span>
      <span class="si-date"><%= moment(s.created_at).fromNow() %></span>
      <% if (s.status === 'pending') { %><button class="btn btn-sm btn-ghost si-delete" data-id="<%= s.id %>"><i class="bi bi-trash"></i></button><% } %>
    </div>
    <% if (s.title) { %><h4><%= s.title %></h4><% } %>
    <p><%= s.content.substring(0, 200) %><%= s.content.length > 200 ? '...' : '' %></p>
    <% if (s.image) { %><div class="si-image-preview"><img src="<%= s.image %>" alt="Preview"></div><% } %>
    <% const platforms = typeof s.platforms === 'object' ? s.platforms : []; %>
    <div class="si-platforms">
      <% platforms.forEach(p => { %><span class="platform-badge platform-<%= p %>"><i class="bi bi-<%= p === 'twitter' ? 'twitter-x' : p === 'youtube' ? 'youtube' : p %>"></i> <%= p %></span><% }) %>
    </div>
    <% if (s.status === 'published') { %>
    <div class="si-analytics"><span><i class="bi bi-heart-fill"></i> <%= s.likes %></span><span><i class="bi bi-share-fill"></i> <%= s.shares %></span><span><i class="bi bi-cursor-fill"></i> <%= s.clicks %></span></div>
    <% } %>
    <% if (s.rejection_reason) { %><div class="si-rejection"><i class="bi bi-x-circle-fill"></i> <%= s.rejection_reason %></div><% } %>
  </div>
  <% }) %>
</div>
<% } else { %>
<div class="empty-state"><i class="bi bi-megaphone"></i><h3>No social submissions yet</h3><p>Submit content for promotion across our social media channels.</p><a href="/member/social/new" class="btn btn-primary">Submit Content</a></div>
<% } %>

<script>
document.querySelectorAll('.si-delete').forEach(btn => {
  btn.addEventListener('click', async () => {
    if (!confirm('Delete this submission?')) return;
    const res = await fetch(`/member/social/${btn.dataset.id}`, { method: 'DELETE' });
    if ((await res.json()).success) btn.closest('.social-item').remove();
  });
});
</script>
