{% load humanize %}
<!-- Reply composer -->
<div class="border-t border-stone-200 px-5 py-3 flex-shrink-0" style="background: var(--surface-1);"
     x-data="{ mode: 'reply', noteText: '', replyText: '' }">

    <!-- Pending draft replies (agent-created or saved for later) -->
    {% if draft_replies %}
    <div class="space-y-2 mb-3">
        <p class="text-[10px] font-semibold uppercase tracking-wide text-stone-400">Pending replies</p>
        {% for draft in draft_replies %}
        {% include "inbox/partials/_draft_reply_item.html" with draft=draft %}
        {% endfor %}
    </div>
    {% endif %}

    <!-- Mode tabs -->
    <div class="flex items-center gap-1 mb-2">
        <button @click="mode = 'reply'"
                class="text-[12px] font-semibold px-3 py-1 rounded-full transition-all"
                :class="mode === 'reply' ? 'bg-white text-stone-900 shadow-sm border border-stone-200' : 'text-stone-500 hover:text-stone-700'">
            Reply
        </button>
        <button @click="mode = 'note'"
                class="text-[12px] font-semibold px-3 py-1 rounded-full transition-all"
                :class="mode === 'note' ? 'bg-amber-50 text-amber-800 border border-amber-200' : 'text-stone-500 hover:text-stone-700'">
            Internal Note
        </button>

        <!-- Saved replies dropdown -->
        {% if saved_replies %}
        <div class="relative ml-auto" x-data="{ srOpen: false }">
            <button @click="srOpen = !srOpen"
                    class="text-[11px] font-medium text-stone-500 hover:text-stone-700 flex items-center gap-1 transition-colors">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/></svg>
                Saved Replies
            </button>
            <div x-show="srOpen" @click.away="srOpen = false" x-cloak x-transition
                 class="absolute right-0 bottom-full mb-1 bg-white rounded-lg shadow-lg ring-1 ring-stone-200 py-1 z-50 min-w-[200px] max-h-[200px] overflow-y-auto">
                {% for sr in saved_replies %}
                <button @click="replyText = '{{ sr.body|escapejs }}'; srOpen = false;"
                        class="w-full text-left px-3 py-2 hover:bg-stone-50 transition-colors">
                    <span class="text-[12px] font-medium text-stone-800 block">{{ sr.title }}</span>
                    <span class="text-[11px] text-stone-400 block truncate">{{ sr.body|truncatewords:10 }}</span>
                </button>
                {% endfor %}
            </div>
        </div>
        {% endif %}
    </div>

    <!-- Reply form -->
    <div x-show="mode === 'reply'" x-transition>
        <form hx-post="{% url 'inbox:send_reply' workspace_id=workspace.id message_id=message.id %}"
              hx-target="#inbox-thread"
              hx-swap="beforeend"
              @htmx:after-request="if (!$event.detail.xhr.getResponseHeader('HX-Reply-Failed')) replyText = ''">
            {% csrf_token %}
            <textarea name="body"
                      x-model="replyText"
                      placeholder="Write a reply..."
                      rows="2"
                      class="w-full px-3 py-2 text-[13px] bg-white border border-stone-200 rounded-lg resize-none focus:outline-none focus:border-orange-400 focus:ring-2 focus:ring-orange-100 transition-all"
                      required></textarea>
            <div class="flex items-center justify-between mt-2">
                <p class="text-[10px] text-stone-400">Reply will be posted on {{ message.social_account.get_platform_display|default:message.social_account.platform|title }}</p>
                <div class="flex items-center gap-2">
                    <button type="button"
                            hx-post="{% url 'inbox:save_reply_draft' workspace_id=workspace.id message_id=message.id %}"
                            hx-target="#inbox-detail-panel"
                            hx-swap="innerHTML"
                            :disabled="!replyText.trim()"
                            class="inline-flex items-center gap-1.5 px-4 py-1.5 text-[12px] font-semibold text-stone-600 rounded-full border border-stone-200 hover:bg-stone-50 transition-all duration-150 cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed">
                        Save as draft
                    </button>
                    <button type="submit"
                            class="btn-primary-hover inline-flex items-center gap-1.5 px-4 py-1.5 text-[12px] font-semibold text-white rounded-full transition-all duration-150 cursor-pointer"
                            style="background: var(--primary); box-shadow: var(--shadow-primary);">
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
                        Send Reply
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- Note form -->
    <div x-show="mode === 'note'" x-transition>
        <form hx-post="{% url 'inbox:add_note' workspace_id=workspace.id message_id=message.id %}"
              hx-target="#inbox-thread"
              hx-swap="beforeend"
              @htmx:after-request="noteText = ''">
            {% csrf_token %}
            <textarea name="body"
                      x-model="noteText"
                      placeholder="Add an internal note (only visible to your team)..."
                      rows="2"
                      class="w-full px-3 py-2 text-[13px] bg-amber-50 border border-amber-200 rounded-lg resize-none focus:outline-none focus:border-amber-400 focus:ring-2 focus:ring-amber-100 transition-all"
                      required></textarea>
            <div class="flex items-center justify-end mt-2">
                <button type="submit"
                        class="inline-flex items-center gap-1.5 px-4 py-1.5 text-[12px] font-semibold text-amber-800 bg-amber-100 border border-amber-200 rounded-full hover:bg-amber-200 transition-all duration-150 cursor-pointer">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
                    Add Note
                </button>
            </div>
        </form>
    </div>
</div>