{% trans_default_domain 'admin' %}

{# Role dot colour (for the dot+label tag) and avatar background, per author role. #}
{% set role_styles = {
    admin:   {avatar: 'bg-red-500',   label: 'Admin'},
    host:    {avatar: 'bg-blue-500',  label: 'Veranstalter'},
    account: {avatar: 'bg-green-500', label: 'Account'},
} %}

{% import _self as ui %}

{# Delivery/read tick, escalating like a messenger app:
   faint check = sent/queued · solid check = delivered (email) or notified (in-app)
   · two checks = opened (email) or read (in-app). #}
{% macro tick(status) %}
    {% if status in ['opened', 'read'] %}
        <twig:ux:icon name="ph:checks" class="size-3.5 text-primary-600 dark:text-primary-400" title="{{ status == 'read' ? 'Gelesen' : 'Geöffnet' }}" />
    {% elseif status in ['delivered', 'notified'] %}
        <twig:ux:icon name="ph:check" class="size-3.5 opacity-80" title="Zugestellt" />
    {% else %}{# sent / queued / none — dispatched, awaiting delivery #}
        <twig:ux:icon name="ph:check" class="size-3.5 opacity-30" title="Gesendet" />
    {% endif %}
{% endmacro %}

{% macro comment_card(c, unread_ids, role_styles, delivery_status, is_reply) %}
    {% import _self as ui %}
    {% set role = c.author ? (c.author.isAdmin ? 'admin' : (c.author.isHost ? 'host' : (c.author.isMember ? 'account' : 'admin'))) : null %}
    {% set style = role ? role_styles[role] : {avatar: 'bg-gray-500', label: 'Gast'} %}
    {% set initials = c.author ? (c.author.firstname|first|upper ~ c.author.lastname|first|upper) : (c.authorName ? c.authorName|first|upper : '@') %}
    {% set unread = c.uuid.toBase58 in unread_ids %}
    {% set st = delivery_status[c.uuid.toBase58]|default({inApp: 'none', email: 'none'}) %}

    <div class="group flex items-start gap-x-2 {{ is_reply ? 'mt-1.5' : '' }} {{ unread ? 'rounded-lg -mx-2 px-2 py-1 bg-primary-50/40 dark:bg-primary-500/5' : '' }}">
        <span class="flex-none inline-flex items-center justify-center rounded-full {{ style.avatar }} {{ is_reply ? 'size-5' : 'size-7' }}">
            <span class="font-medium leading-none text-white {{ is_reply ? 'text-[9px]' : 'text-[11px]' }}">{{ initials }}</span>
        </span>
        <div class="min-w-0 flex-1">
            <div class="flex items-center gap-x-1.5 text-sm">
                <span class="font-medium text-gray-900 dark:text-white">{{ c.authorLabel|default('Unbekannt') }}</span>
                {% if role %}
                    {{ ui.chip(style.avatar, style.label) }}
                {% endif %}
                <span class="text-gray-400 dark:text-gray-500" title="{{ c.fromEmail ? ('Antwort per E-Mail' ~ (c.authorEmail ? ' · ' ~ c.authorEmail : '')) : 'In der App verfasst' }}"><twig:ux:icon name="{{ c.fromEmail ? 'ph:envelope-simple' : 'ph:chat-circle-dots' }}" class="size-3.5" /></span>
                {% if c.internal %}<span class="text-[11px] text-gray-400" title="Nur intern sichtbar"><twig:ux:icon name="ph:lock-simple" class="inline size-3" /> intern</span>{% endif %}
                <time datetime="{{ c.createdAt|date('c') }}" title="{{ c.createdAt|date('d.m.Y H:i') }}" class="text-xs text-gray-400 dark:text-gray-500">· {{ c.createdAt|ago }}</time>
                {% if unread %}<span class="size-2 rounded-full bg-primary-500" title="Ungelesen"></span>{% endif %}
            </div>

            <div class="mt-0.5 text-sm text-gray-700 dark:text-gray-300">{{ c.body|nl2br }}</div>

            {% if c.attachments|length %}
                <div class="mt-1.5 flex flex-wrap gap-1.5">
                    {% for att in c.attachments %}
                        <a href="{{ path('admin_conversation_attachment', {uuid: att.uuid.toBase58}) }}" class="inline-flex items-center gap-x-1.5 rounded-md border border-gray-200 dark:border-gray-700 px-2 py-1 text-xs text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800" title="{{ att.name }} herunterladen">
                            <twig:ux:icon name="ph:paperclip" class="size-3.5 shrink-0 text-gray-400" />
                            <span class="max-w-[12rem] truncate">{{ att.name }}</span>
                            <span class="text-gray-400">{{ (att.size / 1024)|round }} KB</span>
                        </a>
                    {% endfor %}
                </div>
            {% endif %}

            {% if not is_reply and c.notify %}
                <div class="mt-1 flex flex-wrap items-center gap-1.5 text-xs text-gray-400 dark:text-gray-500">
                    <span class="inline-flex items-center gap-x-1"><twig:ux:icon name="ph:paper-plane-tilt" class="size-3" /> Benachrichtigt</span>
                    {% for t in c.notify %}
                        {% set ts = role_styles[t.g]|default(role_styles.admin) %}
                        {% set pst = t.g == 'admin' ? st.inApp : st.email %}
                        <span class="inline-flex items-center gap-x-1 align-middle"><span class="size-2 shrink-0 rounded-full {{ ts.avatar }}"></span><span class="font-medium text-gray-700 dark:text-gray-200">{{ t.label|default(ts.label) }}</span>{{ ui.tick(pst) }}</span>
                    {% endfor %}
                </div>
            {% endif %}

            <div class="mt-1 flex items-center gap-x-3 text-xs text-gray-400 opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100">
                <button type="button" class="inline-flex items-center gap-x-1 hover:text-gray-900 dark:hover:text-gray-100" data-action="live#action" data-live-action-param="reply" data-live-uuid-param="{{ c.uuid.toBase58 }}"><twig:ux:icon name="ph:arrow-bend-up-left" class="size-3.5" /> Antworten</button>
                {% if unread %}
                    <button type="button" class="inline-flex items-center gap-x-1 hover:text-gray-900 dark:hover:text-gray-100" data-action="live#action" data-live-action-param="markRead" data-live-uuid-param="{{ c.uuid.toBase58 }}"><twig:ux:icon name="ph:check" class="size-3.5" /> Gelesen</button>
                {% endif %}
            </div>

            {% if not is_reply and c.replies|length %}
                <div class="mt-1.5 border-l-2 border-gray-100 dark:border-gray-800 pl-3">
                    {% for r in c.replies %}{{ ui.comment_card(r, unread_ids, role_styles, delivery_status, true) }}{% endfor %}
                </div>
            {% endif %}
        </div>
    </div>
{% endmacro %}

{# A status as a calm coloured dot + plain label (replaces the louder <twig:Admin:Badge>). #}
{% macro chip(color, label) %}<span class="inline-flex items-center gap-x-1 align-middle"><span class="size-2 shrink-0 rounded-full {{ color }}"></span><span class="font-medium text-gray-700 dark:text-gray-200">{{ label }}</span></span>{% endmacro %}

{% macro transition_row(entry, on_offer_page) %}
    {% import _self as ui %}
    {% set is_attendance = entry.attendance is defined and entry.attendance is not null %}
    {% set is_create = entry.transition.name|default('') == 'create' %}
    {% set status = entry.transition.tos|default([])|first|default(null) %}
    {% set icon = is_attendance ? (is_create ? 'ph:user-plus' : 'ph:tag') : (is_create ? 'ph:star' : 'ph:tag') %}

    {# status → dot colour, mirroring <twig:Admin:Badge>'s palette (waiting/“nicht zugeteilt” → neutral). #}
    {% set attendance_colors = {confirmed: 'bg-green-500', participated: 'bg-green-500', waitlisted: 'bg-yellow-500', withdrawn: 'bg-red-500', rejected: 'bg-red-500', unfulfilled: 'bg-red-500', noshow: 'bg-red-500', email_unconfirmed: 'bg-orange-500', consents_outstanding: 'bg-orange-500'} %}
    {% set offer_colors = {cancelled: 'bg-red-500', draft: 'bg-orange-500', unpublished: 'bg-gray-400'} %}
    {% set dot = is_attendance ? (attendance_colors[status]|default('bg-gray-400')) : (offer_colors[status]|default('bg-green-500')) %}
    {% set label = status ? (is_attendance ? ('status.' ~ status)|trans({}, 'messages') : ('offers.status.' ~ status)|trans({}, 'admin')) : '' %}

    {% set actor %}
        {% if entry.createdBy %}<a href="{{ path('admin_accounts_show', {uuid: entry.createdBy.uuid.toBase58}) }}" data-turbo-frame="slideover" class="font-medium text-gray-900 dark:text-white hover:underline">{{ entry.createdBy.name }}</a>
        {% elseif entry.applicationSystem|default %}<span class="font-medium text-gray-900 dark:text-white">{{ "applicationSystem.#{entry.applicationSystem}"|trans }}</span>
        {% else %}<span class="font-medium text-gray-900 dark:text-white">{{ 'activity.deletedAccount'|trans }}</span>{% endif %}
    {% endset %}

    <div class="flex items-center gap-x-2 text-sm text-gray-500 dark:text-gray-400">
        <span class="flex-none flex size-6 items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800"><twig:ux:icon name="{{ icon }}" class="size-3.5 text-gray-500 dark:text-gray-400" aria-hidden="true" /></span>
        <div class="min-w-0 flex-1">
            {{ actor }}
            {% if is_attendance %}
                {% set participant %}{% if entry.attendance.participant|default(null) is not null %}<a href="{{ path('admin_participants_show', {uuid: entry.attendance.participant.uuid.toBase58}) }}" data-turbo-frame="slideover" class="font-medium text-gray-900 dark:text-white hover:underline">{{ entry.attendance.participant.name }}</a>{% else %}jemanden{% endif %}{% endset %}
                {% set offer %}{% if not on_offer_page %} für <a href="{{ path('admin_offers_show', {uuid: entry.attendance.offer.uuid.toBase58}) }}" data-turbo-frame="slideover" class="font-medium text-gray-900 dark:text-white hover:underline">{{ entry.attendance.offer.name }}</a>{% endif %}{% endset %}
                {% if is_create %}
                    {% if status == 'confirmed' %}hat {{ participant }}{{ offer }} {{ ui.chip(dot, 'angemeldet') }}
                    {% elseif status == 'waitlisted' %}hat {{ participant }}{{ offer }} {{ ui.chip(dot, 'auf die Warteliste geschrieben') }}
                    {% else %}hat {{ participant }}{{ offer }} angemeldet{% endif %}
                {% else %}
                    {% if label %}hat {{ participant }}{{ offer }} auf {{ ui.chip(dot, label) }} gesetzt{% else %}hat {{ participant }}{{ offer }} aktualisiert{% endif %}
                {% endif %}
                {% if entry.decisionReason|default %}<span class="text-gray-400">({{ ("decisionReason.#{entry.decisionReason}")|trans }})</span>{% endif %}
            {% elseif entry.offer is defined and entry.offer is not null %}
                {% if is_create %}hat das Angebot erstellt{% elseif label %}hat das Angebot auf {{ include("@FerienpassAdmin/page/offers/_status_icon.html.twig", { status: status, label: true }) }} gesetzt{% else %}hat das Angebot aktualisiert{% endif %}
            {% endif %}
            <time datetime="{{ entry.createdAt|date('c') }}" title="{{ entry.createdAt|date('d.m.Y H:i:s') }}" class="whitespace-nowrap text-gray-400">· {{ entry.createdAt|ago }}</time>
        </div>
    </div>
{% endmacro %}

<div {{ attributes }}>
    <div class="flex items-center justify-between">
        <h2 class="text-sm/6 font-semibold text-gray-900 dark:text-white">
            Aktivität &amp; Kommentare
            {% if unread_ids|length %}<span class="ml-1 inline-flex items-center rounded-full bg-primary-100 dark:bg-primary-500/15 px-2 py-0.5 text-xs font-medium text-primary-700 dark:text-primary-300">{{ unread_ids|length }} neu</span>{% endif %}
        </h2>
        {% if unread_ids|length %}
            <button type="button" class="inline-flex items-center gap-x-1 text-xs text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 transition-colors" data-action="live#action" data-live-action-param="markAllRead"><twig:ux:icon name="ph:checks" class="size-4" /> Als gelesen markieren</button>
        {% endif %}
    </div>

    {# ── composer (top, since the feed is newest-first) ── #}
    {% set cm = 'ferienpass--admin-comment-mention' %}
    <div class="mt-2.5 flex gap-x-2.5" data-controller="{{ cm }}" data-{{ cm }}-audiences-value="{{ audiences|json_encode|e('html_attr') }}">
        <span class="flex-none inline-flex items-center justify-center size-7 rounded-full bg-gray-400">
            <span class="text-[11px] font-medium leading-none text-white">{{ app.user.firstname|first|upper ~ app.user.lastname|first|upper }}</span>
        </span>
        <div class="relative flex-auto">
            {% if reply_target %}
                <div class="mb-2 flex items-center justify-between rounded-md bg-gray-50 dark:bg-gray-800/60 px-3 py-1.5 text-xs text-gray-500 dark:text-gray-400">
                    <span class="inline-flex items-center gap-x-1"><twig:ux:icon name="ph:arrow-bend-up-left" class="size-3.5" /> Antwort an <span class="font-medium text-gray-700 dark:text-gray-200">{{ reply_target.authorLabel }}</span></span>
                    <button type="button" class="hover:text-gray-900 dark:hover:text-gray-100" data-action="live#action" data-live-action-param="cancelReply"><twig:ux:icon name="ph:x" class="size-3.5" /></button>
                </div>
            {% endif %}

            <div class="relative rounded-lg shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus-within:ring-2 focus-within:ring-primary-600">
                <label for="comment" class="sr-only">Kommentar schreiben</label>
                <textarea rows="1" name="comment" id="comment"
                          data-model="norender|newComment"
                          data-{{ cm }}-target="input"
                          data-action="input->{{ cm }}#onInput keydown->{{ cm }}#onKeydown"
                          class="block w-full resize-none border-0 bg-transparent py-2 px-3 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:ring-0 sm:text-sm sm:leading-6"
                          placeholder="Kommentar schreiben…  @ erwähnen, um zu benachrichtigen"></textarea>

                <div class="flex flex-wrap items-center gap-1.5 px-3 pb-2 text-xs text-gray-400">
                    {% if notify_targets is empty %}
                        <span class="inline-flex items-center gap-x-1"><twig:ux:icon name="ph:paper-plane-tilt" class="size-3" /> Niemand benachrichtigt <span class="text-gray-300 dark:text-gray-600">— interner Kommentar</span></span>
                    {% else %}
                        <span class="inline-flex items-center gap-x-1"><twig:ux:icon name="ph:paper-plane-tilt" class="size-3" /> Benachrichtigen</span>
                        {% for t in notify_targets %}
                            {% set ts = role_styles[t.g]|default(role_styles.admin) %}
                            <span class="inline-flex items-center gap-x-1 align-middle"><span class="size-2 shrink-0 rounded-full {{ ts.avatar }}"></span><span class="font-medium text-gray-700 dark:text-gray-200">{{ t.label|default(ts.label) }}</span><button type="button" class="opacity-60 hover:opacity-100" data-action="{{ cm }}#removeTarget" data-{{ cm }}-index-param="{{ loop.index0 }}"><twig:ux:icon name="ph:x" class="size-3" /></button></span>
                        {% endfor %}
                    {% endif %}
                </div>

                <div class="absolute left-0 right-0 top-full z-20 mt-1 hidden max-h-64 overflow-auto rounded-lg bg-white dark:bg-gray-950 shadow-lg ring-1 ring-black/5 dark:ring-white/10" data-{{ cm }}-target="picker"></div>
                <input type="hidden" data-model="notifyTargetsJson" data-{{ cm }}-target="targets" value="{{ notify_targets|json_encode|e('html_attr') }}">
            </div>

            <div class="mt-2 flex items-center justify-between">
                <button type="button" class="inline-flex items-center justify-center rounded-md p-1.5 text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-200 transition-colors" title="Jemanden erwähnen" data-action="{{ cm }}#openPicker"><twig:ux:icon name="ph:at" class="size-5" /></button>
                <twig:Admin:Button size="sm" type="button" data-action="live#action:prevent" data-live-action-param="comment" data-loading="addClass(opacity-50) addAttribute(disabled)">Kommentieren</twig:Admin:Button>
            </div>
        </div>
    </div>

    {# ── feed (newest first) ── #}
    <div class="mt-4 space-y-2.5 border-t border-gray-100 dark:border-gray-800 pt-3">
        {% set last_day = null %}
        {% for entry in activity %}
            {% set day = entry.createdAt|date('Y-m-d') %}
            {% if day != last_day %}
                <div class="flex items-center gap-x-2 pt-1 first:pt-0" aria-hidden="true">
                    <span class="text-xs font-medium text-gray-400">{{ entry.createdAt|date('j. M Y') }}</span>
                    <span class="h-px flex-1 bg-gray-100 dark:bg-gray-800"></span>
                </div>
                {% set last_day = day %}
            {% endif %}

            {% if entry.body is defined %}
                {{ ui.comment_card(entry, unread_ids, role_styles, delivery_status, false) }}
            {% elseif entry.isTransition|default(false) %}
                {{ ui.transition_row(entry, on_offer_page) }}
            {% endif %}
        {% else %}
            <div class="flex flex-col items-center justify-center py-6 text-center text-gray-400">
                <twig:ux:icon name="ph:chat-circle-dots" class="size-6" />
                <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Noch keine Aktivität</p>
            </div>
        {% endfor %}
    </div>
</div>
