<%- include('../../partials/adminTopbar', {
  pageTitle: 'Categories',
  pageSubtitle: 'Organize blog posts with nested categories',
  topbarActions: `<button type="button" id="btn-new-category" 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 Category</button>`
}) %>

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

  <div class="admin-stat-grid" style="margin-bottom:1.25rem">
    <div class="card flex items-center gap-3" style="padding:12px 16px"><span class="text-xl font-bold text-white"><%= stats.total %></span><span class="text-xs" style="color:rgba(255,255,255,.4)">Total</span></div>
    <div class="card flex items-center gap-3" style="padding:12px 16px"><span class="text-xl font-bold text-purple-400"><%= stats.root %></span><span class="text-xs" style="color:rgba(255,255,255,.4)">Root</span></div>
    <div class="card flex items-center gap-3" style="padding:12px 16px"><span class="text-xl font-bold text-teal-400"><%= stats.nested %></span><span class="text-xs" style="color:rgba(255,255,255,.4)">Nested</span></div>
    <div class="card flex items-center gap-3" style="padding:12px 16px"><span class="text-xl font-bold text-blue-400"><%= stats.posts %></span><span class="text-xs" style="color:rgba(255,255,255,.4)">Posts tagged</span></div>
  </div>

  <form method="get" action="/admin/categories" class="flex items-center gap-3 mb-5">
    <input type="search" name="search" value="<%= query.search || '' %>" placeholder="Search categories…" class="pl-3 pr-4 py-2 rounded-lg text-xs font-medium flex-1 max-w-xs" style="background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.8);outline:none"/>
    <button type="submit" class="btn-ghost text-xs">Search</button>
    <% if (query.search) { %><a href="/admin/categories" class="btn-ghost text-xs">Clear</a><% } %>
  </form>

  <div class="card overflow-hidden" style="padding:0">
    <div class="overflow-x-auto">
      <table class="w-full">
        <thead>
          <tr>
            <th>Category</th>
            <th class="hidden sm:table-cell">Path</th>
            <th class="hidden md:table-cell">URL</th>
            <th>Posts</th>
            <th style="width:120px">Actions</th>
          </tr>
        </thead>
        <tbody>
          <% if (!categories.length) { %>
          <tr><td colspan="5" class="text-center py-10" style="color:rgba(255,255,255,.3)">No categories found.</td></tr>
          <% } %>
          <% categories.forEach(function(c) {
            const depth = c.tree.split(',').length - 1;
            const indent = depth * 16;
          %>
          <tr data-category-id="<%= c._id %>">
            <td>
              <div style="padding-left:<%= indent %>px">
                <p class="text-sm font-semibold text-white"><%= c.displayName %></p>
                <% if (c.description) { %><p class="text-[10px] mt-0.5 truncate" style="color:rgba(255,255,255,.35);max-width:240px"><%= c.description %></p><% } %>
              </div>
            </td>
            <td class="hidden sm:table-cell"><span class="badge badge-purple"><%= c.pathLabel %></span></td>
            <td class="hidden md:table-cell text-xs" style="color:rgba(255,255,255,.4)">/blog/category/<%= c.tree.replace(/,/g, '/') %></td>
            <td><span class="text-sm font-semibold<%= c.postCount ? ' text-white' : '' %>" style="<%= c.postCount ? '' : 'color:rgba(255,255,255,.35)' %>"><%= c.postCount %></span></td>
            <td>
              <div class="flex items-center gap-1.5">
                <button type="button" class="btn-sm btn-edit edit-category" data-id="<%= c._id %>">Edit</button>
                <button type="button" class="btn-danger" style="padding:5px 8px" data-delete-id="<%= c._id %>" data-delete-name="<%= c.pathLabel.replace(/"/g, '') %>">
                  <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>
              </div>
            </td>
          </tr>
          <% }); %>
        </tbody>
      </table>
    </div>
  </div>
</main>

<div class="modal-overlay" id="category-modal">
  <div class="modal-box" style="max-width:520px">
    <div class="flex items-center justify-between mb-5">
      <div>
        <h2 id="cat-modal-title" class="text-base font-bold text-white">New Category</h2>
        <p id="cat-modal-subtitle" class="text-xs mt-0.5" style="color:rgba(255,255,255,.4)">Categories use nested paths like tech › web</p>
      </div>
      <button type="button" class="btn-ghost" id="cat-modal-close" style="width:32px;height:32px;padding:0;justify-content:center">✕</button>
    </div>

    <form id="category-form" method="post" action="/admin/categories/new">
      <input type="hidden" name="_id" id="cat-id"/>

      <label class="form-label">Name *</label>
      <input type="text" name="name" id="cat-name" class="form-input mb-4" required placeholder="e.g. Digital Marketing"/>

      <div id="cat-create-fields">
        <label class="form-label">URL segment *</label>
        <input type="text" name="segment" id="cat-segment" class="form-input mb-1" placeholder="digital-marketing"/>
        <p class="text-[10px] mb-4" style="color:rgba(255,255,255,.35)">Auto-generated from name. Used in the category URL.</p>

        <label class="form-label">Parent category</label>
        <select name="parentTree" id="cat-parent" class="form-input mb-4">
          <option value="">— Root category —</option>
          <% parentOptions.forEach(function(p) { %>
          <option value="<%= p.tree %>"><%= '—'.repeat(p.depth + 1) %> <%= p.label %></option>
          <% }); %>
        </select>
      </div>

      <div id="cat-edit-fields" class="hidden mb-4">
        <label class="form-label">Category path</label>
        <p id="cat-path-readonly" class="text-sm font-semibold text-purple-300 px-3 py-2 rounded-lg" style="background:rgba(128,101,248,.12);border:1px solid rgba(128,101,248,.2)"></p>
        <p id="cat-posts-note" class="text-[10px] mt-2" style="color:rgba(255,255,255,.35)"></p>
      </div>

      <label class="form-label">Description</label>
      <textarea name="description" id="cat-description" class="form-input mb-4" style="min-height:72px;resize:vertical" placeholder="Short description for SEO and admin reference…"></textarea>

      <label class="form-label">Category page content <span class="font-normal" style="color:rgba(255,255,255,.35)">(optional)</span></label>
      <textarea name="mainText" id="cat-maintext" class="form-input mb-5" style="min-height:88px;resize:vertical" placeholder="HTML content for the public category landing page…"></textarea>

      <div class="flex gap-3">
        <button type="button" class="btn-ghost flex-1 justify-center" id="cat-cancel">Cancel</button>
        <button type="submit" class="btn-primary flex-1 justify-center" id="cat-submit">Create Category</button>
      </div>
    </form>
  </div>
</div>

<form id="delete-category-form" method="post" class="hidden">
  <input type="hidden" name="_method" value="delete"/>
</form>
