{# Odoo-style chatter: filters, message feed (newest first), composer. #}
{% if chatter_context and chatter_context.enabled %}
<div id="pv-chatter-root"
     class="rounded-lg border border-default bg-neutral-primary flex flex-col max-h-[calc(100vh-8rem)]"
     x-data='pvChatter({{ chatter_context.composer_mode | tojson }})'>

    <div class="p-4 pb-2 border-b border-default shrink-0">
        <div class="flex items-center justify-between gap-2">
            <h2 class="text-sm font-semibold text-heading">Activity</h2>
            {% if chatter_context.messages %}
            <span class="text-2xs text-body-subtle tabular-nums">{{ chatter_context.messages | length }}</span>
            {% endif %}
        </div>

        <nav class="flex flex-wrap gap-1 mt-2" aria-label="Filter messages">
            {% for f in chatter_context.filters %}
            <a href="{{ f.href }}"
               class="px-2 py-0.5 rounded-full text-2xs font-medium transition
                      {% if chatter_context.filter == f.key %}
                      bg-fg-brand text-white
                      {% else %}
                      bg-neutral-secondary text-body-subtle hover:text-heading hover:bg-neutral-tertiary
                      {% endif %}"
               hx-get="{{ f.href }}"
               hx-target="#pv-chatter-root"
               hx-swap="outerHTML">
                {{ f.label }}
            </a>
            {% endfor %}
        </nav>
    </div>

    {% if chatter_context.error %}
    <p class="px-4 py-2 text-sm text-fg-danger shrink-0">{{ chatter_context.error }}</p>
    {% endif %}

    <div class="flex-1 min-h-0 overflow-y-auto overscroll-contain px-4 py-3">
        {% if chatter_context.messages %}
        <ol class="space-y-4" aria-label="Message log">
            {% for msg in chatter_context.messages %}
            <li class="flex gap-3 text-sm">
                <span class="shrink-0 flex items-center justify-center w-8 h-8 rounded-full
                             bg-neutral-secondary text-2xs font-semibold text-heading"
                      aria-hidden="true"
                      title="{{ msg.author or 'Unknown' }}">
                    {{ msg.author_initials }}
                </span>
                <div class="min-w-0 flex-1">
                    <div class="flex flex-wrap items-baseline gap-x-2 gap-y-0.5">
                        {% if msg.author %}
                        <span class="text-xs font-medium text-heading">{{ msg.author }}</span>
                        {% endif %}
                        {% if msg.at_display %}
                        <time class="text-2xs text-body-subtle"
                              {% if msg.at %}datetime="{{ msg.at }}"{% endif %}>
                            {{ msg.at_display }}
                        </time>
                        {% endif %}
                        {% if msg.subtype_label %}
                        <span class="text-2xs font-semibold uppercase tracking-wide
                            {% if msg.variant == 'success' %}text-success-strong
                            {% elif msg.variant == 'danger' %}text-fg-danger
                            {% elif msg.variant == 'warning' %}text-warning-strong
                            {% else %}text-body-subtle{% endif %}">
                            {{ msg.subtype_label }}
                        </span>
                        {% endif %}
                        {% if msg.email_state %}
                        <span class="text-2xs font-medium px-1.5 py-0.5 rounded
                            {% if msg.email_state == 'Sent' %}bg-success-soft text-success-strong
                            {% elif msg.email_state == 'Failed' %}bg-danger-soft text-fg-danger
                            {% else %}bg-warning-soft text-warning-strong{% endif %}">
                            {{ msg.email_state }}
                        </span>
                        {% endif %}
                    </div>
                    {% if msg.recipient_email %}
                    <p class="text-2xs text-body-subtle mt-0.5">
                        To: <span class="font-medium">{{ msg.recipient_email }}</span>
                        {% if msg.email_subject %}
                        · {{ msg.email_subject }}
                        {% endif %}
                    </p>
                    {% endif %}
                    <p class="text-body mt-1 whitespace-pre-wrap leading-snug">{{ msg.body }}</p>
                    {% if msg.attachments %}
                    <ul class="mt-2 flex flex-wrap gap-1.5">
                        {% for att in msg.attachments %}
                        <li>
                            <a href="{{ att.download_url }}"
                               class="inline-flex items-center gap-1 px-2 py-1 rounded-md text-2xs
                                      bg-neutral-secondary border border-default text-fg-brand hover:underline">
                                <svg class="w-3 h-3 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                          d="M13.5 2.25v6a.75.75 0 00.75.75h6M15 2.25H6a2.25 2.25 0 00-2.25 2.25v15a2.25 2.25 0 002.25 2.25h12a2.25 2.25 0 002.25-2.25V8.25l-6-6z"/>
                                </svg>
                                <span class="truncate max-w-[10rem]">{{ att.name }}</span>
                            </a>
                        </li>
                        {% endfor %}
                    </ul>
                    {% endif %}
                </div>
            </li>
            {% endfor %}
        </ol>
        {% else %}
        <p class="text-sm text-body-subtle py-4 text-center">
            {% if chatter_context.filter == 'all' %}
            No activity yet. Log a note, send an email, or edit tracked fields.
            {% elif chatter_context.filter == 'notes' %}
            No notes yet.
            {% elif chatter_context.filter == 'emails' %}
            No emails logged yet.
            {% elif chatter_context.filter == 'tracking' %}
            No field changes yet.
            {% else %}
            No messages in this filter.
            {% endif %}
        </p>
        {% endif %}
    </div>

    {% if chatter_context.can_post %}
    <div class="shrink-0 border-t border-default p-4 space-y-3 bg-neutral-secondary/40">
        <div class="flex rounded-lg border border-default overflow-hidden text-2xs font-medium"
             role="tablist">
            <button type="button"
                    role="tab"
                    :aria-selected="mode === 'note'"
                    @click="mode = 'note'"
                    class="flex-1 px-3 py-1.5 transition"
                    :class="mode === 'note' ? 'bg-fg-brand text-white' : 'bg-neutral-primary text-body-subtle hover:text-heading'">
                Log note
            </button>
            <button type="button"
                    role="tab"
                    :aria-selected="mode === 'email'"
                    @click="mode = 'email'"
                    class="flex-1 px-3 py-1.5 transition"
                    :class="mode === 'email' ? 'bg-fg-brand text-white' : 'bg-neutral-primary text-body-subtle hover:text-heading'">
                Send email
            </button>
        </div>

        <form class="space-y-2"
              hx-post="{{ chatter_context.post_url }}"
              hx-target="#pv-chatter-root"
              hx-swap="outerHTML"
              @submit="if (mode === 'email' && !$refs.recipient?.value?.trim()) { $event.preventDefault(); window.pvAlert?.('Recipient email is required.'); }">
            <input type="hidden" name="model" value="{{ chatter_context.model }}">
            <input type="hidden" name="res_id" value="{{ chatter_context.res_id }}">
            <input type="hidden" name="filter" value="{{ chatter_context.filter }}">
            <input type="hidden" name="action" :value="mode">

            <template x-if="mode === 'email'">
                <div class="space-y-2">
                    <input type="email"
                           x-ref="recipient"
                           name="recipient_email"
                           placeholder="recipient@example.com"
                           class="w-full text-sm rounded-md border border-default bg-neutral-primary
                                  text-body px-3 py-1.5 focus:ring-2 focus:ring-fg-brand/30">
                    <input type="text"
                           name="subject"
                           placeholder="Subject (optional)"
                           class="w-full text-sm rounded-md border border-default bg-neutral-primary
                                  text-body px-3 py-1.5 focus:ring-2 focus:ring-fg-brand/30">
                    {% if chatter_context.compose_url %}
                    <button type="button"
                            class="inline-flex items-center gap-1 text-2xs text-fg-brand hover:underline"
                            @click.prevent="window.PvDialog && window.PvDialog.open({
                                url: '{{ chatter_context.compose_url }}',
                                title: 'Compose email',
                                onResult: () => location.reload(),
                            })">
                        Open rich composer (templates, Cc/Bcc, attachments) →
                    </button>
                    {% endif %}
                </div>
            </template>

            <label class="sr-only" for="pv-chatter-body">Message</label>
            <textarea id="pv-chatter-body"
                      name="body"
                      rows="3"
                      required
                      :placeholder="mode === 'email' ? 'Email body…' : 'Log an internal note…'"
                      class="w-full text-sm rounded-md border border-default bg-neutral-primary
                             text-body px-3 py-2 focus:ring-2 focus:ring-fg-brand/30 focus:border-fg-brand"></textarea>

            {% if chatter_context.attachments_enabled %}
            <div class="pv-chatter-attachments">
                {% set name = 'attachment_ids' %}
                {% set res_model = '' %}
                {% set res_id = 0 %}
                {% set initial = [] %}
                {% set readonly = false %}
                {% include "widgets/attachment.html" %}
            </div>
            {% endif %}

            <button type="submit"
                    class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-white
                           rounded-md bg-fg-brand hover:opacity-90 transition">
                <span x-text="mode === 'email' ? 'Send' : 'Log note'"></span>
            </button>
        </form>
    </div>
    {% else %}
    <p class="px-4 py-3 text-sm text-body-subtle border-t border-default shrink-0">
        You do not have permission to post on this record.
    </p>
    {% endif %}
</div>
{% endif %}