<% const isNew = !plan.id;
   const action = isNew ? '/admin/social-calendar' : `/admin/social-calendar/${plan.id}/update`;
   const scheduledValue = typeof plan.scheduled_at === 'string' ? plan.scheduled_at : new Date(plan.scheduled_at).toISOString().slice(0,16);
   const hashtagsValue = Array.isArray(plan.hashtags) ? plan.hashtags.join(' ') : (plan.hashtags || ''); %>

<div class="p-6">
    <div class="flex items-center justify-between mb-4">
        <h2 class="text-xl font-bold dark:text-white"><%= isNew ? '➕ New Post Plan' : `✏️ Edit Post #${plan.id}` %></h2>
        <button onclick="document.getElementById('spp-modal').classList.add('hidden')" class="text-gray-400 hover:text-gray-600 text-2xl leading-none">&times;</button>
    </div>

    <form hx-post="<%= action %>" hx-swap="none" class="space-y-4">
        <div>
            <label class="block text-xs font-semibold text-gray-600 dark:text-gray-300 mb-1">Scheduled Date & Time</label>
            <input type="datetime-local" name="scheduled_at" value="<%= scheduledValue %>" required
                   class="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white text-sm">
        </div>

        <div>
            <label class="block text-xs font-semibold text-gray-600 dark:text-gray-300 mb-1">Platforms</label>
            <div class="flex flex-wrap gap-2">
                <% PLATFORMS.forEach(function(p) { %>
                    <label class="inline-flex items-center gap-1 px-2 py-1 border rounded cursor-pointer dark:border-gray-600 hover:bg-pink-50 dark:hover:bg-gray-700">
                        <input type="checkbox" name="platforms" value="<%= p %>" <%= (plan.platforms || []).includes(p) ? 'checked' : '' %>>
                        <span class="text-xs dark:text-gray-200"><%= p %></span>
                    </label>
                <% }); %>
            </div>
        </div>

        <div>
            <label class="block text-xs font-semibold text-gray-600 dark:text-gray-300 mb-1">Status</label>
            <select name="status" class="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white text-sm">
                <% STATUSES.forEach(function(s) { %>
                    <option value="<%= s %>" <%= plan.status === s ? 'selected' : '' %>><%= s %></option>
                <% }); %>
            </select>
        </div>

        <div>
            <label class="block text-xs font-semibold text-gray-600 dark:text-gray-300 mb-1">Caption / Body</label>
            <textarea name="caption" rows="4" class="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white text-sm" placeholder="The actual post copy. Inline hashtags are fine here."><%= plan.caption || '' %></textarea>
        </div>

        <div>
            <label class="block text-xs font-semibold text-gray-600 dark:text-gray-300 mb-1">Hashtags <span class="text-gray-400 font-normal">(space or comma separated, # optional)</span></label>
            <input type="text" name="hashtags" value="<%= hashtagsValue %>" class="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white text-sm" placeholder="firefrost minecraft modded">
        </div>

        <div>
            <div class="flex items-center justify-between mb-1">
                <label class="block text-xs font-semibold text-gray-600 dark:text-gray-300">Media Notes <span class="text-gray-400 font-normal">(what to use)</span></label>
                <button type="button"
                        hx-get="/admin/branding-assets/list"
                        hx-target="#spp-assets-modal-body"
                        hx-swap="innerHTML"
                        onclick="document.getElementById('spp-assets-modal').classList.remove('hidden')"
                        class="text-xs bg-pink-100 dark:bg-pink-900/40 text-pink-700 dark:text-pink-300 hover:bg-pink-200 dark:hover:bg-pink-900/60 px-2 py-1 rounded">
                    🎨 Browse assets
                </button>
            </div>
            <textarea name="media_notes" rows="2" class="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white text-sm" placeholder="e.g. 'Trinity portrait, logos/firefrost-logo-dark.png'"><%= plan.media_notes || '' %></textarea>
        </div>

        <div class="grid grid-cols-2 gap-3">
            <div>
                <label class="block text-xs font-semibold text-gray-600 dark:text-gray-300 mb-1">Link (optional)</label>
                <input type="url" name="link" value="<%= plan.link || '' %>" class="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white text-sm" placeholder="https://...">
            </div>
            <div>
                <label class="block text-xs font-semibold text-gray-600 dark:text-gray-300 mb-1">Assigned To</label>
                <select name="assigned_to" class="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white text-sm">
                    <option value="">— unassigned —</option>
                    <% ['Meg','Michael','Holly'].forEach(function(p) { %>
                        <option value="<%= p %>" <%= plan.assigned_to === p ? 'selected' : '' %>><%= p %></option>
                    <% }); %>
                </select>
            </div>
        </div>

        <div>
            <label class="block text-xs font-semibold text-gray-600 dark:text-gray-300 mb-1">Internal Notes <span class="text-gray-400 font-normal">(not published)</span></label>
            <textarea name="notes" rows="2" class="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white text-sm"><%= plan.notes || '' %></textarea>
        </div>

        <div class="flex items-center justify-between pt-4 border-t border-gray-200 dark:border-gray-700">
            <% if (!isNew) { %>
                <button type="button" hx-post="/admin/social-calendar/<%= plan.id %>/delete" hx-swap="none"
                        hx-confirm="Delete this post plan?"
                        class="bg-red-600 hover:bg-red-700 text-white px-3 py-2 rounded text-sm">🗑 Delete</button>
            <% } else { %><span></span><% } %>
            <div class="flex gap-2">
                <button type="button" onclick="document.getElementById('spp-modal').classList.add('hidden')" class="px-4 py-2 rounded border dark:border-gray-600 dark:text-gray-200 text-sm">Cancel</button>
                <button type="submit" class="bg-pink-600 hover:bg-pink-700 text-white px-4 py-2 rounded text-sm font-medium"><%= isNew ? 'Create' : 'Save' %></button>
            </div>
        </div>
    </form>
</div>
