<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>APS — Dashboard</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body { background: #f0f2f5; }
    .navbar { background: #fff; border-bottom: 1px solid #e5e7eb; }
    .caption-preview { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .table td { vertical-align: middle; }
    .badge-platform { font-size: .7rem; }
    .empty-state { color: #9ca3af; font-size: .9rem; }
  </style>
</head>
<body>

<!-- Navbar -->
<nav class="navbar px-4 py-3 mb-4">
  <span class="fw-semibold text-dark"><%= displayName %></span>
  <div class="ms-auto d-flex align-items-center gap-3">
    <a href="<%= basePath %>/posts/new" class="btn btn-primary btn-sm">+ New Post</a>
    <a href="<%= basePath %>/logout" class="text-muted small text-decoration-none">Sign out</a>
  </div>
</nav>

<div class="container-lg">

  <!-- Flash messages -->
  <% if (message) { %>
    <div class="alert alert-success py-2 small alert-dismissible fade show" role="alert">
      <%= message %>
      <button type="button" class="btn-close btn-sm" data-bs-dismiss="alert"></button>
    </div>
  <% } %>
  <% if (error) { %>
    <div class="alert alert-danger py-2 small alert-dismissible fade show" role="alert">
      <%= error %>
      <button type="button" class="btn-close btn-sm" data-bs-dismiss="alert"></button>
    </div>
  <% } %>

  <!-- Tabs -->
  <ul class="nav nav-tabs mb-3" id="statusTabs" role="tablist">
    <li class="nav-item" role="presentation">
      <button class="nav-link active" id="scheduled-tab" data-bs-toggle="tab" data-bs-target="#scheduled"
              type="button" role="tab">
        Scheduled
        <% if (scheduled.length > 0) { %>
          <span class="badge bg-primary ms-1"><%= scheduled.length %></span>
        <% } %>
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="published-tab" data-bs-toggle="tab" data-bs-target="#published"
              type="button" role="tab">
        Published
        <% if (published.length > 0) { %>
          <span class="badge bg-success ms-1"><%= published.length %></span>
        <% } %>
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="failed-tab" data-bs-toggle="tab" data-bs-target="#failed"
              type="button" role="tab">
        Failed
        <% if (failed.length > 0) { %>
          <span class="badge bg-danger ms-1"><%= failed.length %></span>
        <% } %>
      </button>
    </li>
  </ul>

  <div class="tab-content" id="statusTabContent">

    <!-- Scheduled -->
    <div class="tab-pane fade show active" id="scheduled" role="tabpanel">
      <% if (scheduled.length === 0) { %>
        <p class="empty-state py-4 text-center">No scheduled posts. <a href="<%= basePath %>/posts/new">Create one.</a></p>
      <% } else { %>
        <div class="card border-0 shadow-sm">
          <div class="table-responsive">
            <table class="table table-hover mb-0">
              <thead class="table-light">
                <tr>
                  <th class="small fw-semibold">Scheduled</th>
                  <th class="small fw-semibold">Platform</th>
                  <th class="small fw-semibold">Type</th>
                  <th class="small fw-semibold">Caption</th>
                  <th class="small fw-semibold">Media</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                <% scheduled.forEach(post => { %>
                  <tr>
                    <td class="small text-nowrap">
                      <%= post.scheduledAt ? new Date(post.scheduledAt).toLocaleString('en-US', { month:'short', day:'numeric', hour:'numeric', minute:'2-digit' }) : '—' %>
                    </td>
                    <td>
                      <% (post.platforms || []).forEach(p => { %>
                        <span class="badge bg-secondary badge-platform me-1"><%= p %></span>
                      <% }) %>
                    </td>
                    <td><span class="badge bg-light text-dark border"><%= post.contentType %></span></td>
                    <td class="caption-preview small text-muted">
                      <%= post.caption || post.hooks || '—' %>
                    </td>
                    <td class="small">
                      <% if (post.media && post.media.length > 0) { %>
                        <span class="text-success">✓</span>
                      <% } else { %>
                        <span class="text-muted">—</span>
                      <% } %>
                    </td>
                    <td class="text-end text-nowrap">
                      <a href="<%= basePath %>/posts/<%= post.id %>/edit" class="btn btn-sm btn-outline-secondary me-1">Edit</a>
                      <form method="POST" action="<%= basePath %>/posts/<%= post.id %>/delete" class="d-inline"
                            onsubmit="return confirm('Delete this scheduled post?')">
                        <input type="hidden" name="_method" value="DELETE">
                        <button type="submit" class="btn btn-sm btn-outline-danger">Delete</button>
                      </form>
                    </td>
                  </tr>
                <% }) %>
              </tbody>
            </table>
          </div>
        </div>
      <% } %>
    </div>

    <!-- Published -->
    <div class="tab-pane fade" id="published" role="tabpanel">
      <% if (published.length === 0) { %>
        <p class="empty-state py-4 text-center">No published posts yet.</p>
      <% } else { %>
        <div class="card border-0 shadow-sm">
          <div class="table-responsive">
            <table class="table table-hover mb-0">
              <thead class="table-light">
                <tr>
                  <th class="small fw-semibold">Published</th>
                  <th class="small fw-semibold">Platform</th>
                  <th class="small fw-semibold">Type</th>
                  <th class="small fw-semibold">Caption</th>
                  <th class="small fw-semibold">Media</th>
                </tr>
              </thead>
              <tbody>
                <% published.forEach(post => { %>
                  <tr>
                    <td class="small text-nowrap">
                      <%= post.scheduledAt ? new Date(post.scheduledAt).toLocaleString('en-US', { month:'short', day:'numeric', hour:'numeric', minute:'2-digit' }) : '—' %>
                    </td>
                    <td>
                      <% (post.platforms || []).forEach(p => { %>
                        <span class="badge bg-secondary badge-platform me-1"><%= p %></span>
                      <% }) %>
                    </td>
                    <td><span class="badge bg-light text-dark border"><%= post.contentType %></span></td>
                    <td class="caption-preview small text-muted">
                      <%= post.caption || post.hooks || '—' %>
                    </td>
                    <td class="small">
                      <% if (post.media && post.media.length > 0) { %>
                        <span class="text-success">✓</span>
                      <% } else { %>
                        <span class="text-muted">—</span>
                      <% } %>
                    </td>
                  </tr>
                <% }) %>
              </tbody>
            </table>
          </div>
        </div>
      <% } %>
    </div>

    <!-- Failed -->
    <div class="tab-pane fade" id="failed" role="tabpanel">
      <% if (failed.length === 0) { %>
        <p class="empty-state py-4 text-center">No failed posts.</p>
      <% } else { %>
        <div class="card border-0 shadow-sm">
          <div class="table-responsive">
            <table class="table table-hover mb-0">
              <thead class="table-light">
                <tr>
                  <th class="small fw-semibold">Scheduled</th>
                  <th class="small fw-semibold">Platform</th>
                  <th class="small fw-semibold">Type</th>
                  <th class="small fw-semibold">Caption</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                <% failed.forEach(post => { %>
                  <tr>
                    <td class="small text-nowrap">
                      <%= post.scheduledAt ? new Date(post.scheduledAt).toLocaleString('en-US', { month:'short', day:'numeric', hour:'numeric', minute:'2-digit' }) : '—' %>
                    </td>
                    <td>
                      <% (post.platforms || []).forEach(p => { %>
                        <span class="badge bg-secondary badge-platform me-1"><%= p %></span>
                      <% }) %>
                    </td>
                    <td><span class="badge bg-light text-dark border"><%= post.contentType %></span></td>
                    <td class="caption-preview small text-muted">
                      <%= post.caption || post.hooks || '—' %>
                    </td>
                    <td class="text-end text-nowrap">
                      <a href="<%= basePath %>/posts/<%= post.id %>/edit" class="btn btn-sm btn-outline-secondary me-1">Edit</a>
                      <form method="POST" action="<%= basePath %>/posts/<%= post.id %>/reschedule" class="d-inline">
                        <button type="submit" class="btn btn-sm btn-outline-warning">Retry</button>
                      </form>
                    </td>
                  </tr>
                <% }) %>
              </tbody>
            </table>
          </div>
        </div>
      <% } %>
    </div>

  </div><!-- /.tab-content -->
</div><!-- /.container -->

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
