<% const p = typeof post !== 'undefined' && post ? post : {}; %>
<% const isEdit = mode === 'edit'; %>
<% const action = isEdit ? '/admin/blog/' + p._id + '/edit' : '/admin/blog/new'; %>
<% const uiStatus = p.uiStatus || 'draft'; %>

<form action="<%= action %>" method="post" enctype="multipart/form-data" id="post-form">
  <div class="grid grid-cols-1 xl:grid-cols-3 gap-6">
    <div class="xl:col-span-2 space-y-5">
      <div class="card">
        <label class="form-label">Post Title *</label>
        <input type="text" name="postTitle" id="post-title" class="form-input text-lg font-bold" required value="<%= p.name || '' %>" placeholder="Enter an engaging post title…"/>
        <label class="form-label mt-4">URL Slug *</label>
        <div class="flex items-center gap-2">
          <span class="text-xs font-medium px-3 py-2.5 rounded-l-lg" style="background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-right:none;color:rgba(255,255,255,.3)">/blog/</span>
          <input type="text" name="slug" id="post-slug" class="form-input" style="border-radius:0 10px 10px 0" value="<%= p.slug || '' %>" placeholder="auto-generated-from-title"/>
        </div>
      </div>

      <div class="card">
        <label class="form-label">Excerpt / Summary</label>
        <textarea name="excerpt" id="post-excerpt" class="form-input" style="min-height:80px;resize:none" maxlength="200" placeholder="Brief description…"><%= p.description || '' %></textarea>
        <div class="char-count" id="excerpt-count">0 / 200</div>
      </div>

      <div class="card post-quill-wrap" style="padding:0">
        <div class="flex items-center justify-between px-4 py-2 border-b" style="border-color:rgba(255,255,255,.07)">
          <p class="text-xs font-semibold text-white">Content</p>
          <div class="flex gap-1.5">
            <button type="button" id="tab-write" class="toolbar-btn active-tab text-xs px-3 py-1.5">Editor</button>
            <button type="button" id="tab-preview" class="toolbar-btn text-xs px-3 py-1.5">Preview</button>
          </div>
        </div>
        <div id="write-panel">
          <div id="post-editor"></div>
        </div>
        <div id="preview-panel" class="hidden">
          <div id="preview-content" class="post-quill-preview"></div>
        </div>
        <textarea name="content" id="post-content" class="sr-only" aria-hidden="true"><%= p.mainText || '' %></textarea>
      </div>
    </div>

    <div class="space-y-5">
      <div class="card">
        <p class="text-sm font-semibold text-white mb-4">Publish Settings</p>
        <label class="status-option<%= uiStatus === 'published' ? ' selected' : '' %>">
          <input type="radio" name="uiStatus" value="published"<%= uiStatus === 'published' ? ' checked' : '' %>/>
          <div><p class="text-sm font-semibold text-white">Published</p><p class="text-[10px] mt-0.5" style="color:rgba(255,255,255,.4)">Visible to all visitors</p></div>
        </label>
        <label class="status-option<%= uiStatus === 'draft' ? ' selected' : '' %>">
          <input type="radio" name="uiStatus" value="draft"<%= uiStatus === 'draft' ? ' checked' : '' %>/>
          <div><p class="text-sm font-semibold text-white">Draft</p></div>
        </label>
        <label class="status-option<%= uiStatus === 'scheduled' ? ' selected' : '' %>">
          <input type="radio" name="uiStatus" value="scheduled"<%= uiStatus === 'scheduled' ? ' checked' : '' %>/>
          <div><p class="text-sm font-semibold text-white">Scheduled</p></div>
        </label>
        <label class="form-label mt-3">Publish Date</label>
        <input type="datetime-local" name="publishedAt" class="form-input mb-3" value="<%= p.publishedAt ? new Date(p.publishedAt).toISOString().slice(0,16) : '' %>"/>
        <label class="form-label">Author</label>
        <input type="text" name="author" class="form-input" value="<%= p.author || (typeof user !== 'undefined' && user ? (user.name || '') : '') %>"/>
        <label class="form-label mt-3 flex items-center gap-2">
          <input type="checkbox" name="promote" value="true"<%= p.promote === 'true' ? ' checked' : '' %> style="accent-color:#8065f8"/> Promote on homepage
        </label>
      </div>

      <div class="card">
        <p class="text-sm font-semibold text-white mb-4">Category & Tags</p>
        <label class="form-label">Category *</label>
        <select name="category" class="form-input mb-4" required>
          <option value="">Select a category…</option>
          <% categories.forEach(function(c) { %>
          <option value="<%= c.tree %>"<%= p.category === c.tree ? ' selected' : '' %>><%= c.tree.split(',').map(function(s){ return s.charAt(0).toUpperCase()+s.slice(1); }).join(' › ') %></option>
          <% }); %>
        </select>
        <label class="form-label">Tags</label>
        <input type="hidden" name="tags" id="tags-hidden" value="<%= p.tagsStr || (p.tags || []).join(', ') %>"/>
        <div id="tags-container" class="flex flex-wrap gap-2 mb-2"></div>
        <div class="flex gap-2">
          <input type="text" id="tag-input" class="form-input flex-1" style="padding:7px 12px;font-size:.8rem" placeholder="Add tag…"/>
          <button type="button" id="tag-add" class="px-3 rounded-lg text-xs font-semibold text-white" style="background:rgba(128,101,248,.3)">Add</button>
        </div>
      </div>

      <div class="card">
        <p class="text-sm font-semibold text-white mb-4">Featured Image</p>
        <div class="flex gap-2 mb-3">
          <button type="button" id="btn-pick-cover" class="btn-ghost text-xs flex-1 justify-center">Choose from Library</button>
          <button type="button" id="btn-upload-cover" class="btn-ghost text-xs flex-1 justify-center">Upload New</button>
        </div>
        <div id="image-drop" class="rounded-xl p-6 text-center<%= p.imageCover ? ' hidden' : '' %>" style="border:2px dashed rgba(255,255,255,.12)">
          <p class="text-xs font-medium" style="color:rgba(255,255,255,.4)">No image selected</p>
        </div>
        <input type="file" name="imageCoverFile" id="image-file" class="hidden" accept="image/*"/>
        <div id="image-preview" class="<%= p.imageCover ? '' : 'hidden' %>">
          <img id="preview-img" src="<%= p.imageCover || '' %>" class="w-full rounded-lg object-cover mt-2" style="max-height:140px" alt=""/>
          <button type="button" id="btn-remove-cover" class="btn-ghost text-xs w-full justify-center mt-2" style="color:rgba(239,68,68,.85)">Remove image</button>
        </div>
        <label class="form-label mt-3">Image path or URL</label>
        <input type="text" name="imageCover" id="image-url" class="form-input" style="font-size:.8rem" value="<%= p.imageCover || '' %>" placeholder="/uploads/blog/… or https://…"/>
      </div>

      <div class="card">
        <p class="text-sm font-semibold text-white mb-4">SEO</p>
        <div class="rounded-xl p-4 mb-4" style="background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08)">
          <p id="seo-title-preview" class="text-sm font-semibold mb-1 truncate" style="color:#93c5fd"><%= p.title || p.name || 'Your Post Title' %></p>
          <p id="seo-desc-preview" class="text-xs" style="color:rgba(255,255,255,.45)"><%= p.description || 'Meta description…' %></p>
        </div>
        <label class="form-label">SEO Title</label>
        <input type="text" name="seoTitle" id="seo-title" class="form-input" maxlength="60" value="<%= p.title || '' %>"/>
        <label class="form-label mt-3">Meta Description</label>
        <textarea name="seoDescription" id="seo-desc" class="form-input" style="min-height:72px;font-size:.8rem" maxlength="160"><%= p.description || '' %></textarea>
      </div>

      <div class="flex gap-3">
        <button type="submit" class="btn-primary flex-1 justify-center"><%= isEdit ? 'Save Changes' : 'Publish Post' %></button>
        <a href="/admin/blog" class="btn-ghost">Cancel</a>
      </div>
    </div>
  </div>
</form>

<%- include('../../partials/adminFilePicker') %>
