<% const safePages = Array.isArray(pages) ? pages : []; %>
<% const safeStats = stats || { total: 0 }; %>
<% const safeQuery = query || {}; %>

<%- include('../../partials/adminTopbar', {
  pageTitle: 'Static Pages',
  pageSubtitle: 'Manage dynamic pages in Views/public/pages',
  topbarActions: `<a href="/admin/pages/new" class="btn-primary text-xs"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>New Page</a>`
}) %>

<main class="admin-main flex-1 overflow-y-auto overflow-x-hidden" id="pages-admin">
  <% if (typeof flash !== 'undefined' && flash) { %>
  <div class="admin-flash admin-flash-<%= flashType === 'error' ? 'error' : 'success' %>"><%= flash %></div>
  <% } %>

  <div class="admin-stat-grid" style="margin-bottom:1.25rem">
    <div class="card admin-stat-chip">
      <span class="text-xl font-bold text-white"><%= safeStats.total %></span>
      <span class="text-xs" style="color:rgba(255,255,255,.4)">Total pages</span>
    </div>
  </div>

  <form method="get" action="/admin/pages" class="flex flex-col sm:flex-row sm:items-center gap-2 mb-5">
    <input type="search" name="search" value="<%= safeQuery.search || '' %>" placeholder="Search path or title…" aria-label="Search pages" class="admin-filter-input w-full sm:w-64 pl-3 pr-4 py-2 rounded-lg text-xs font-medium"/>
    <button type="submit" class="btn-ghost text-xs">Search</button>
    <% if (safeQuery.search) { %>
    <a href="/admin/pages" class="btn-ghost text-xs">Clear</a>
    <% } %>
  </form>

  <div class="card overflow-hidden admin-table-card" style="padding:0">
    <% if (!safePages.length) { %>
    <p class="text-center py-10 text-xs" style="color:rgba(255,255,255,.3)">No pages found. <a href="/admin/pages/new" style="color:#a78bfa;font-weight:600">Create a page</a></p>
    <% } else { %>

    <div class="admin-post-cards md:hidden">
      <% safePages.forEach(function(p) {
        const pathEnc = encodeURIComponent(p.path);
        const displayTitle = p.title || p.path;
      %>
      <article class="admin-post-card">
        <div class="admin-post-card-head">
          <div class="min-w-0 flex-1">
            <p class="text-sm font-semibold text-white truncate"><%= displayTitle %></p>
            <p class="text-[10px] mt-0.5 admin-table-slug font-mono" style="color:rgba(255,255,255,.3)"><%= p.urlPath %></p>
          </div>
          <% if (p.layoutMode === 'standalone') { %>
          <span class="badge badge-yellow shrink-0">Standalone</span>
          <% } else { %>
          <span class="badge badge-purple shrink-0">With layout</span>
          <% } %>
        </div>
        <div class="admin-post-card-meta">
          <span class="badge badge-teal">Level <%= p.depth || 1 %></span>
          <% if (p.excludeFromSitemap) { %>
          <span class="badge badge-gray">Sitemap excluded</span>
          <% } else { %>
          <span class="badge badge-green">In sitemap</span>
          <% } %>
          <span class="text-[10px] font-mono" style="color:rgba(255,255,255,.35)">pages/<%= p.path %>/index.ejs</span>
        </div>
        <div class="admin-post-card-actions">
          <a href="/admin/pages/edit?path=<%= pathEnc %>" class="btn-sm btn-edit flex-1 justify-center">Edit</a>
          <a href="<%= p.urlPath %>" target="_blank" rel="noopener noreferrer" class="btn-ghost text-xs flex-1 justify-center">View</a>
          <form method="post" action="/admin/pages/delete" class="page-delete-form">
            <input type="hidden" name="path" value="<%= p.path %>" />
            <button type="submit" class="btn-danger page-delete-btn" style="padding:5px 10px" data-path="<%= p.path %>" aria-label="Delete page">
              <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
            </button>
          </form>
        </div>
      </article>
      <% }); %>
    </div>

    <div class="hidden md:block admin-table-scroll">
      <table class="w-full admin-data-table">
        <thead>
          <tr>
            <th class="col-title">Page</th>
            <th style="width:100px">Level</th>
            <th style="width:130px">Display</th>
            <th style="width:120px">Sitemap</th>
            <th class="col-actions">Actions</th>
          </tr>
        </thead>
        <tbody>
          <% safePages.forEach(function(p) {
            const indent = Math.max(0, (p.depth || 1) - 1) * 16;
            const pathEnc = encodeURIComponent(p.path);
            const displayTitle = p.title || p.path;
          %>
          <tr>
            <td class="col-title">
              <div style="padding-left:<%= indent %>px">
                <p class="text-sm font-semibold text-white admin-table-title"><%= displayTitle %></p>
                <a href="<%= p.urlPath %>" target="_blank" rel="noopener noreferrer" class="text-[10px] mt-0.5 admin-table-slug font-mono block hover:underline" style="color:rgba(255,255,255,.3)"><%= p.urlPath %></a>
                <p class="text-[10px] font-mono mt-0.5" style="color:rgba(255,255,255,.25)">pages/<%= p.path %>/index.ejs</p>
              </div>
            </td>
            <td><span class="badge badge-teal">Level <%= p.depth || 1 %></span></td>
            <td>
              <% if (p.layoutMode === 'standalone') { %>
              <span class="badge badge-yellow">Standalone</span>
              <% } else { %>
              <span class="badge badge-purple">With layout</span>
              <% } %>
            </td>
            <td>
              <% if (p.excludeFromSitemap) { %>
              <span class="badge badge-gray">Excluded</span>
              <% } else { %>
              <span class="badge badge-green">Included</span>
              <% } %>
            </td>
            <td class="col-actions">
              <div class="flex items-center gap-1.5 flex-nowrap">
                <a href="<%= p.urlPath %>" target="_blank" rel="noopener noreferrer" class="btn-sm btn-ghost" title="View on site">View</a>
                <a href="/admin/pages/edit?path=<%= pathEnc %>" class="btn-sm btn-edit">Edit</a>
                <form method="post" action="/admin/pages/delete" class="page-delete-form inline">
                  <input type="hidden" name="path" value="<%= p.path %>" />
                  <button type="submit" class="btn-danger page-delete-btn" style="padding:5px 8px" data-path="<%= p.path %>" aria-label="Delete page">
                    <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                  </button>
                </form>
              </div>
            </td>
          </tr>
          <% }); %>
        </tbody>
      </table>
    </div>
    <% } %>
  </div>
</main>
