<% const platformIcons = {tiktok:'🎵',facebook:'📘',instagram:'📷',x:'✖️',bluesky:'🦋',youtube:'▶️',twitch:'🎮',reddit:'🤖'}; %>
<% const statusColors = {draft:'bg-gray-200 text-gray-800',ready:'bg-blue-100 text-blue-800',scheduled:'bg-purple-100 text-purple-800',published:'bg-green-100 text-green-800',skipped:'bg-red-100 text-red-800'}; %>

<div class="mb-4 flex items-center justify-between bg-white dark:bg-gray-800 rounded-lg shadow p-3">
    <button hx-get="/admin/social-calendar/week?week=<%= prevWeekISO %>" hx-target="#week-container"
            class="px-3 py-1 rounded bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-sm">← Prev</button>
    <div class="text-center">
        <div class="text-sm font-semibold dark:text-white">Week of <%= new Date(weekStartISO + 'T00:00:00').toLocaleDateString(undefined, {month:'long', day:'numeric', year:'numeric'}) %></div>
        <button hx-get="/admin/social-calendar/week?week=<%= thisWeekISO %>" hx-target="#week-container"
                class="text-xs text-blue-500 hover:underline">Jump to this week</button>
    </div>
    <button hx-get="/admin/social-calendar/week?week=<%= nextWeekISO %>" hx-target="#week-container"
            class="px-3 py-1 rounded bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-sm">Next →</button>
</div>

<div class="grid grid-cols-1 md:grid-cols-7 gap-2">
    <% Object.keys(byDay).forEach(function(iso) { %>
        <% const day = byDay[iso]; %>
        <% const dayName = day.date.toLocaleDateString(undefined, {weekday:'short'}); %>
        <% const dayNum = day.date.getDate(); %>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow min-h-[200px] flex flex-col">
            <div class="px-3 py-2 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
                <div>
                    <div class="text-xs uppercase text-gray-500"><%= dayName %></div>
                    <div class="text-lg font-bold dark:text-white"><%= dayNum %></div>
                </div>
                <button hx-get="/admin/social-calendar/new?date=<%= iso %>" hx-target="#spp-modal-body" hx-swap="innerHTML"
                        onclick="document.getElementById('spp-modal').classList.remove('hidden')"
                        class="text-gray-400 hover:text-pink-500 text-xl leading-none" title="Add post for this day">+</button>
            </div>
            <div class="p-2 space-y-2 flex-1">
                <% if (day.plans.length === 0) { %>
                    <div class="text-xs text-gray-400 italic text-center py-4">No posts</div>
                <% } %>
                <% day.plans.forEach(function(p) { %>
                    <div class="border border-gray-200 dark:border-gray-700 rounded p-2 hover:border-pink-400 cursor-pointer text-xs"
                         hx-get="/admin/social-calendar/<%= p.id %>/edit" hx-target="#spp-modal-body" hx-swap="innerHTML"
                         onclick="document.getElementById('spp-modal').classList.remove('hidden')">
                        <div class="flex items-center justify-between mb-1">
                            <div class="flex gap-1">
                                <% (p.platforms || []).forEach(function(pl) { %>
                                    <span title="<%= pl %>"><%= platformIcons[pl] || pl %></span>
                                <% }); %>
                            </div>
                            <span class="text-gray-500 text-[10px]"><%= new Date(p.scheduled_at).toLocaleTimeString([], {hour:'2-digit', minute:'2-digit'}) %></span>
                        </div>
                        <div class="dark:text-gray-200 line-clamp-2 mb-1"><%= p.caption || '(no caption)' %></div>
                        <span class="inline-block px-1.5 py-0.5 rounded text-[10px] font-semibold <%= statusColors[p.status] %>"><%= p.status %></span>
                    </div>
                <% }); %>
            </div>
        </div>
    <% }); %>
</div>
