@if ($complaint->assistantSession)
@php
    $chatSession = $complaint->assistantSession;
    $chatSession->loadMissing(['messages.media', 'assignee', 'locker']);
    $canChat = auth()->user()?->can(\App\Models\Permission::COMPLAINTS_VIEW);
@endphp
    <section
        class="admin-complaint-thread"
        x-data="adminComplaintChat({
            syncUrl: @js(route('admin.complaints.chat.sync', $complaint)),
            messagesUrl: @js(route('admin.complaints.chat.messages', $complaint)),
            takeUrl: @js(route('admin.complaints.chat.take', $complaint)),
            replyUrl: @js(route('admin.complaints.chat.reply', $complaint)),
            csrf: @js(csrf_token()),
            initialMessages: @js($chatSession->messages->map->toClientArray()->values()),
            initialSync: @js([
                'version' => $chatSession->syncVersion(),
                'owner' => $chatSession->ownerEnum()->value,
                'conversation_state' => $chatSession->conversationStateEnum()->value,
                'last_message_id' => $chatSession->messages->last()?->id,
            ]),
            labels: {
                take: @js(__('admin.chat_take')),
                taken: @js(__('admin.chat_taken')),
                reply: @js(__('admin.chat_reply')),
                placeholder: @js(__('admin.chat_placeholder')),
                locked: @js(__('admin.chat_locked_by_other')),
                empty: @js(__('admin.chat_empty_reply')),
                network: @js(__('admin.chat_network_error')),
                customer: @js(__('admin.chat_role_customer')),
                assistant: @js(__('admin.chat_role_assistant')),
                agent: @js(__('admin.chat_role_agent')),
                system: @js(__('admin.chat_role_system')),
                owner_ai: @js(__('admin.chat_owner_ai')),
                owner_human: @js(__('admin.chat_owner_human')),
                owner_hybrid: @js(__('admin.chat_owner_hybrid')),
                state_active: @js(__('admin.chat_state_active')),
                state_waiting_assignment: @js(__('admin.chat_state_waiting')),
                state_closed: @js(__('admin.chat_state_closed')),
            }
        })"
        x-init="boot()"
    >
        <div class="admin-complaint-thread__head">
            <div class="min-w-0">
                <h3 class="admin-complaint-thread__title">{{ __('admin.assistant_transcript') }}</h3>
                <p class="admin-complaint-thread__subtitle">{{ __('admin.via_assistant') }}</p>
            </div>
            <div class="admin-complaint-thread__chips">
                <span class="admin-complaint-thread__chip" x-text="ownerLabel()"></span>
                <span class="admin-complaint-thread__chip admin-complaint-thread__chip--state" x-text="stateLabel()"></span>
            </div>
        </div>

        <div class="eca-request-thread__list admin-complaint-thread__list" x-ref="scroll">
            <template x-for="message in messages" :key="message.id">
                <div class="eca-request-thread__row" :class="rowClass(message)">
                    <p class="eca-request-thread__meta">
                        <span x-text="roleLabel(message)"></span>
                        <span x-show="message.created_at" x-text="' · ' + formatTime(message)"></span>
                    </p>
                    <div class="eca-request-thread__bubble">
                        <div x-show="isImage(message)">
                            <a :href="mediaUrl(message)" target="_blank" rel="noopener">
                                <img :src="mediaUrl(message)" alt="" class="admin-complaint-thread__media" />
                            </a>
                        </div>
                        <div x-show="isVideo(message)">
                            <video :src="mediaUrl(message)" class="admin-complaint-thread__media" controls playsinline></video>
                        </div>
                        <p
                            class="whitespace-pre-wrap"
                            x-show="showText(message)"
                            x-text="message.content"
                        ></p>
                        <dl class="site-assistant-summary__list mt-2" x-show="isSummary(message)">
                            <template x-for="field in displayFields(message)" :key="field.key || field.label">
                                <div class="contents">
                                    <dt x-text="field.label"></dt>
                                    <dd class="whitespace-pre-wrap" x-text="field.value"></dd>
                                </div>
                            </template>
                        </dl>
                        <div class="admin-complaint-thread__chips mt-2" x-show="hasActions(message)">
                            <template x-for="action in actions(message)" :key="action.id || action.label">
                                <span class="admin-complaint-thread__chip" x-text="action.label"></span>
                            </template>
                        </div>
                    </div>
                </div>
            </template>
        </div>

        @if ($canChat)
        <div class="admin-complaint-thread__composer">
            <div class="mb-3 flex flex-wrap items-center gap-2">
                <button
                    type="button"
                    class="repair-card-btn repair-card-btn--indigo"
                    x-show="owner !== 'human'"
                    x-on:click="takeConversation()"
                    :disabled="busy"
                >{{ __('admin.chat_take') }}</button>
                <span class="admin-complaint-thread__chip" x-show="owner === 'human'" x-cloak>{{ __('admin.chat_taken') }}</span>
                <span class="text-xs" style="color: var(--eca-repair-text-muted)" x-show="error" x-text="error" x-cloak></span>
            </div>
            <form class="admin-complaint-thread__form" x-on:submit.prevent="sendReply()">
                <label class="min-w-0 flex-1">
                    <span class="sr-only">{{ __('admin.chat_reply') }}</span>
                    <textarea
                        rows="25"
                        class="eca-auth-modal__input"
                        x-model="draft"
                        :placeholder="labels.placeholder"
                        :disabled="busy || conversationState === 'closed'"
                    ></textarea>
                </label>
                <div class="flex shrink-0 items-center gap-2">
                    <input type="file" accept="image/jpeg,image/png,image/webp,image/gif,video/mp4,video/webm" class="sr-only" x-ref="file" x-on:change="onFile($event)" />
                    <button type="button" class="repair-card-btn repair-card-btn--muted" x-on:click="$refs.file.click()" :disabled="busy">{{ __('admin.chat_attach') }}</button>
                    <button type="submit" class="repair-card-btn repair-card-btn--emerald" :disabled="busy || (!draft.trim() && !pendingFile)">{{ __('admin.chat_reply') }}</button>
                </div>
            </form>
            <p class="mt-2 text-xs" style="color: var(--eca-repair-text-muted)" x-show="pendingFile" x-text="pendingFile?.name" x-cloak></p>
        </div>
        @endif

        @if ($chatSession->transitions->isNotEmpty())
            <details class="admin-complaint-thread__history">
                <summary class="admin-complaint-thread__history-summary">
                    <span class="admin-complaint-thread__history-summary-main">
                        <span class="admin-complaint-thread__history-icon" aria-hidden="true">↻</span>
                        <span>{{ __('admin.assistant_transitions') }}</span>
                    </span>
                    <span class="admin-complaint-thread__history-count">
                        {{ trans_choice('admin.assistant_transitions_count', $chatSession->transitions->count(), ['count' => $chatSession->transitions->count()]) }}
                    </span>
                </summary>
                <ol class="admin-complaint-thread__history-list">
                    @foreach ($chatSession->transitions as $index => $t)
                        @php
                            $from = (string) ($t->from_state ?: '—');
                            $to = (string) ($t->to_state ?: '—');
                            $reason = trim((string) ($t->reason ?: ''));
                            $duration = $t->duration_ms !== null ? (int) $t->duration_ms : null;
                            $at = $t->created_at
                                ? $t->created_at->timezone(config('app.timezone'))->format('Y-m-d H:i:s')
                                : null;
                        @endphp
                        <li class="admin-complaint-thread__history-item">
                            <span class="admin-complaint-thread__history-step" aria-hidden="true">{{ $index + 1 }}</span>
                            <div class="admin-complaint-thread__history-body">
                                <div class="admin-complaint-thread__history-flow">
                                    <span class="admin-complaint-thread__history-state">{{ $from }}</span>
                                    <span class="admin-complaint-thread__history-arrow" aria-hidden="true">→</span>
                                    <span class="admin-complaint-thread__history-state admin-complaint-thread__history-state--to">{{ $to }}</span>
                                </div>
                                <div class="admin-complaint-thread__history-meta">
                                    @if ($reason !== '')
                                        <span class="admin-complaint-thread__history-pill">{{ $reason }}</span>
                                    @endif
                                    @if ($duration !== null)
                                        <span class="admin-complaint-thread__history-pill admin-complaint-thread__history-pill--muted">
                                            {{ __('admin.assistant_transition_duration', ['ms' => $duration]) }}
                                        </span>
                                    @endif
                                    @if ($at)
                                        <time class="admin-complaint-thread__history-time" datetime="{{ $t->created_at?->toIso8601String() }}">{{ $at }}</time>
                                    @endif
                                </div>
                            </div>
                        </li>
                    @endforeach
                </ol>
            </details>
        @endif
    </section>
@endif