@extends('layouts.admin.master')

@section('content')
    @php
        $viewerId = auth()->id();
    @endphp

    <div class="row row-cols-1 row-cols-md-2 row-cols-xl-4">
        <div class="col">
            <div class="card radius-10 border-start border-4 border-primary">
                <div class="card-body">
                    <p class="mb-0 text-secondary">Total Obrolan</p>
                    <h4 class="my-1 text-primary">{{ number_format($stats['total_conversations']) }}</h4>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card radius-10 border-start border-4 border-success">
                <div class="card-body">
                    <p class="mb-0 text-secondary">Total Pesan</p>
                    <h4 class="my-1 text-success">{{ number_format($stats['total_messages']) }}</h4>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card radius-10 border-start border-4 border-warning">
                <div class="card-body">
                    <p class="mb-0 text-secondary">Pesan Hari Ini</p>
                    <h4 class="my-1 text-warning">{{ number_format($stats['messages_today']) }}</h4>
                </div>
            </div>
        </div>
        <div class="col">
            <a href="{{ route('admin.obrolan.blocked') }}">
                <div class="card radius-10 border-start border-4 border-danger">
                    <div class="card-body">
                        <p class="mb-0 text-secondary">Daftar Blokir</p>
                        <h4 class="my-1 text-danger">{{ number_format($stats['blocked_members']) }}</h4>
                    </div>
                </div>
            </a>
        </div>
    </div>

    <div class="card mt-3 admin-obrolan-thread-card">
        <div class="card-header d-flex flex-column flex-lg-row justify-content-between gap-3">
            <div>
                <div class="d-flex flex-wrap align-items-center gap-2 mb-1">
                    <h5 class="mb-0" data-admin-conversation-title>
                        {{ $conversation->type !== 'direct' && $conversation->name
                            ? $conversation->name
                            : ($conversation->participants->map(fn($participant) => $participant->chatLabel())->filter()->implode(' & ') ?: 'Percakapan baru') }}
                    </h5>
                    <span class="badge bg-light text-dark border text-uppercase">{{ $conversation->type }}</span>
                    <span class="badge bg-light text-dark border">ID #{{ $conversation->id }}</span>
                </div>
                <p class="mb-0 text-secondary" data-admin-conversation-meta>{{ $conversation->participants->count() }} peserta, {{ number_format($messages->count()) }} pesan terakhir ditampilkan</p>
            </div>
            <div class="d-flex gap-2 flex-wrap">
                <span class="admin-obrolan-realtime-badge is-fallback" data-admin-realtime-badge>Polling aktif</span>
                <a href="{{ route('admin.obrolan') }}" class="btn btn-outline-secondary btn-sm">
                    <i class='bx bx-arrow-back me-1'></i> Kembali ke Daftar
                </a>
                <a href="{{ route('admin.obrolan.blocked') }}" class="btn btn-outline-danger btn-sm">
                    <i class='bx bx-block me-1'></i> Daftar Blokir
                </a>
            </div>
        </div>

        <div class="card-body admin-obrolan-thread-body"
            data-admin-obrolan-panel
            data-conversation-id="{{ $conversation->id }}"
            data-thread-url="{{ route('admin.obrolan.thread') }}"
            data-presence-url="{{ route('admin.obrolan.presence') }}"
            data-send-url="{{ route('admin.obrolan.send') }}"
            data-update-url-template="{{ route('admin.obrolan.message.update', ['message' => '__MESSAGE__']) }}"
            data-delete-url-template="{{ route('admin.obrolan.message.delete', ['message' => '__MESSAGE__']) }}"
            data-csrf-token="{{ csrf_token() }}"
            data-viewer-id="{{ $viewerId }}"
            data-index-url="{{ route('admin.obrolan') }}">
            <div class="admin-obrolan-participants" data-admin-participants>
                @foreach ($conversation->participants as $participant)
                    <div class="admin-obrolan-participant">
                        <img src="{{ $participant->avatarUrl() }}" alt="{{ $participant->chatLabel() }}">
                        <div class="admin-obrolan-participant-copy">
                            <strong>{{ $participant->chatLabel() }}</strong>
                            <span>{{ $participant->email }}</span>
                            <div class="admin-obrolan-participant-flags">
                                <span class="badge {{ $participant->active ? 'bg-success-subtle text-success border border-success-subtle' : 'bg-danger-subtle text-danger border border-danger-subtle' }}">
                                    {{ $participant->active ? 'Aktif' : 'Diblokir' }}
                                </span>
                                @if ($participant->hasRole(config('app.super_admin_role')))
                                    <span class="badge bg-light text-dark border">Admin</span>
                                @endif
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="admin-obrolan-thread-stream" data-admin-thread-stream>
                @forelse ($messages as $item)
                    @php
                        $isMine = $item->user_id === $viewerId;
                        $isAdminReply = (bool) data_get($item->meta, 'admin_reply', false);
                    @endphp
                    <article class="admin-obrolan-message {{ $isMine ? 'is-mine' : '' }} {{ $isAdminReply ? 'is-admin-reply' : '' }}"
                        data-message-id="{{ $item->id }}"
                        data-message-body="{{ e($item->body) }}">
                        <img src="{{ $item->user?->avatarUrl() ?: \App\Models\User::avatarFallbackUrl() }}"
                            alt="{{ $item->user?->chatLabel() ?? 'Anggota' }}">
                        <div class="admin-obrolan-message-body">
                            <div class="admin-obrolan-message-meta">
                                <strong>
                                    {{ $isMine ? 'Anda' : ($item->user?->chatLabel() ?? 'Anggota') }}
                                    @if ($isAdminReply)
                                        <span class="admin-obrolan-role-badge">Admin</span>
                                    @endif
                                </strong>
                                <div class="admin-obrolan-message-meta-trail">
                                    @if (data_get($item->meta, 'edited_at'))
                                        <span class="admin-obrolan-message-edited">Diedit</span>
                                    @endif
                                    <span>{{ $item->created_at?->format('d M Y, H:i') }}</span>
                                    <div class="admin-obrolan-message-menu-wrap">
                                        <button type="button" class="admin-obrolan-message-menu-toggle"
                                            data-admin-message-menu-toggle
                                            data-message-id="{{ $item->id }}"
                                            aria-label="Aksi pesan">
                                            <i class="fas fa-ellipsis-v"></i>
                                        </button>
                                        <div class="admin-obrolan-message-menu d-none"
                                            data-admin-message-menu>
                                            <button type="button" class="admin-obrolan-message-menu-item"
                                                data-admin-message-edit
                                                data-message-id="{{ $item->id }}">
                                                Edit
                                            </button>
                                            <button type="button" class="admin-obrolan-message-menu-item is-danger"
                                                data-admin-message-delete
                                                data-message-id="{{ $item->id }}">
                                                Hapus
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <p>{{ $item->body }}</p>
                            @php($messageAttachments = collect(data_get($item->meta, 'attachments', []))->filter(fn ($attachment) => filled(data_get($attachment, 'url'))))
                            @if ($messageAttachments->isNotEmpty())
                                <div class="admin-obrolan-message-attachments">
                                    @foreach ($messageAttachments as $attachment)
                                        @php($attachmentType = data_get($attachment, 'type', 'document'))
                                        @if ($attachmentType === 'image')
                                            <a class="admin-obrolan-attachment-card is-image"
                                                href="{{ data_get($attachment, 'url') }}" target="_blank" rel="noopener">
                                                <img src="{{ data_get($attachment, 'url') }}"
                                                    alt="{{ data_get($attachment, 'name', 'Lampiran gambar') }}">
                                                <span>{{ data_get($attachment, 'name', 'Gambar') }}</span>
                                            </a>
                                        @elseif ($attachmentType === 'video')
                                            <div class="admin-obrolan-attachment-card is-video">
                                                <video src="{{ data_get($attachment, 'url') }}" controls
                                                    preload="metadata"></video>
                                                <a href="{{ data_get($attachment, 'url') }}" target="_blank"
                                                    rel="noopener">{{ data_get($attachment, 'name', 'Video') }}</a>
                                            </div>
                                        @else
                                            <a class="admin-obrolan-attachment-card is-document"
                                                href="{{ data_get($attachment, 'url') }}" target="_blank" rel="noopener">
                                                <i class="fas fa-file-alt"></i>
                                                <span>{{ data_get($attachment, 'name', 'Dokumen') }}</span>
                                            </a>
                                        @endif
                                    @endforeach
                                </div>
                            @endif
                            @php($messageLocation = data_get($item->meta, 'location'))
                            @if (is_array($messageLocation) && filled(data_get($messageLocation, 'maps_url')))
                                <a class="admin-obrolan-location-card"
                                    href="{{ data_get($messageLocation, 'maps_url') }}" target="_blank" rel="noopener">
                                    <i class="fas fa-map-marker-alt"></i>
                                    <span>
                                        <strong>Lokasi dibagikan</strong>
                                        <small>{{ data_get($messageLocation, 'lat') }},
                                            {{ data_get($messageLocation, 'lng') }}</small>
                                    </span>
                                </a>
                            @endif
                        </div>
                    </article>
                @empty
                    <div class="admin-obrolan-empty" data-admin-thread-empty>
                        <strong>Belum ada pesan.</strong>
                        <p>Percakapan ini belum memiliki isi pesan untuk ditampilkan.</p>
                    </div>
                @endforelse
            </div>
        </div>

        <div class="card-footer admin-obrolan-composer-shell">
            <div class="admin-obrolan-composer">
                <textarea id="adminObrolanComposer" rows="1" placeholder="Tulis balasan admin untuk thread ini..."></textarea>
                <button type="button" class="btn btn-primary px-4" data-admin-send-button>
                    Kirim Balasan
                </button>
            </div>
            <p class="admin-obrolan-composer-note mb-0" data-admin-thread-note>
                Moderasi anggota dilakukan terpisah lewat `Daftar Blokir` atau kolom aksi pada `Daftar Anggota`.
            </p>
        </div>
    </div>
@endsection

@section('stylesheet')
    <style>
        .admin-obrolan-thread-card {
            border: 1px solid rgba(15, 23, 42, 0.08);
            box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
        }

        .admin-obrolan-realtime-badge {
            display: inline-flex;
            align-items: center;
            min-height: 2rem;
            padding: 0.38rem 0.72rem;
            border-radius: 999px;
            font-size: 0.72rem;
            font-weight: 700;
            border: 1px solid rgba(148, 163, 184, 0.18);
            background: rgba(241, 245, 249, 0.92);
            color: #475569;
        }

        .admin-obrolan-realtime-badge.is-live {
            border-color: rgba(16, 185, 129, 0.24);
            background: rgba(209, 250, 229, 0.92);
            color: #047857;
        }

        .admin-obrolan-realtime-badge.is-connecting {
            border-color: rgba(245, 158, 11, 0.26);
            background: rgba(254, 249, 195, 0.94);
            color: #b45309;
        }

        .admin-obrolan-thread-body {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            min-height: 0;
        }

        .admin-obrolan-participants {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
        }

        .admin-obrolan-participant {
            display: flex;
            align-items: center;
            gap: 0.68rem;
            min-width: 14rem;
            padding: 0.72rem 0.82rem;
            border-radius: 0.95rem;
            background: #f8fafc;
            border: 1px solid rgba(148, 163, 184, 0.16);
        }

        .admin-obrolan-participant img {
            width: 2.6rem;
            height: 2.6rem;
            border-radius: 999px;
            object-fit: cover;
            object-position: center;
            flex-shrink: 0;
        }

        .admin-obrolan-participant-copy {
            min-width: 0;
            flex: 1 1 auto;
        }

        .admin-obrolan-participant strong {
            display: block;
            font-size: 0.88rem;
            color: #0f172a;
            line-height: 1.3;
        }

        .admin-obrolan-participant span {
            display: block;
            margin-top: 0.15rem;
            color: #64748b;
            font-size: 0.74rem;
            line-height: 1.35;
        }

        .admin-obrolan-participant-flags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.35rem;
            margin-top: 0.45rem;
        }

        .admin-obrolan-thread-stream {
            display: flex;
            flex: 1 1 auto;
            flex-direction: column;
            gap: 0.9rem;
            min-height: 26rem;
            max-height: 34rem;
            overflow-y: auto;
            padding-right: 0.1rem;
        }

        .admin-obrolan-message {
            display: flex;
            align-items: flex-start;
            gap: 0.8rem;
            padding: 0.92rem 0.95rem;
            border-radius: 1rem;
            background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
            border: 1px solid rgba(148, 163, 184, 0.14);
        }

        .admin-obrolan-message.is-mine {
            background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
            border-color: rgba(59, 130, 246, 0.18);
        }

        .admin-obrolan-message img {
            width: 2.65rem;
            height: 2.65rem;
            border-radius: 999px;
            object-fit: cover;
            object-position: center;
            flex-shrink: 0;
        }

        .admin-obrolan-message-body {
            min-width: 0;
            flex: 1 1 auto;
            position: relative;
        }

        .admin-obrolan-message-meta {
            display: flex;
            gap: 0.8rem;
            align-items: baseline;
            justify-content: space-between;
            margin-bottom: 0.35rem;
        }

        .admin-obrolan-message-meta strong {
            font-size: 0.84rem;
            color: #0f172a;
        }

        .admin-obrolan-message-meta-trail {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            flex-shrink: 0;
        }

        .admin-obrolan-message-menu-wrap {
            position: relative;
            display: inline-flex;
            align-items: center;
        }

        .admin-obrolan-message-menu-toggle {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1.55rem;
            height: 1.55rem;
            padding: 0;
            border: 0;
            border-radius: 999px;
            background: transparent;
            color: #475569;
            opacity: 0.72;
        }

        .admin-obrolan-message-menu-toggle:hover,
        .admin-obrolan-message-menu-toggle.is-open {
            background: rgba(15, 23, 42, 0.08);
            opacity: 1;
        }

        .admin-obrolan-message-menu-toggle i {
            font-size: 0.8rem;
        }

        .admin-obrolan-message-menu {
            position: absolute;
            top: calc(100% + 0.35rem);
            right: 0;
            z-index: 8;
            display: flex;
            min-width: 7.5rem;
            flex-direction: column;
            gap: 0.15rem;
            padding: 0.35rem;
            border-radius: 0.85rem;
            background: rgba(255, 255, 255, 0.98);
            border: 1px solid rgba(148, 163, 184, 0.18);
            box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
        }

        .admin-obrolan-message-menu-item {
            display: flex;
            width: 100%;
            align-items: center;
            justify-content: flex-start;
            padding: 0.5rem 0.65rem;
            border: 0;
            border-radius: 0.65rem;
            background: transparent;
            color: #0f172a;
            font-size: 0.78rem;
            font-weight: 600;
            line-height: 1.3;
            text-align: left;
        }

        .admin-obrolan-message-menu-item:hover {
            background: #eff6ff;
            color: #1d4ed8;
        }

        .admin-obrolan-message-menu-item.is-danger {
            color: #b91c1c;
        }

        .admin-obrolan-message-meta span {
            font-size: 0.72rem;
            color: #64748b;
            flex-shrink: 0;
        }

        .admin-obrolan-message-edited {
            display: inline-flex;
            align-items: center;
            padding: 0.12rem 0.42rem;
            border-radius: 999px;
            background: rgba(15, 23, 42, 0.08);
            color: #475569;
            font-size: 0.62rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        .admin-obrolan-role-badge {
            display: inline-flex;
            margin-left: 0.45rem;
            padding: 0.16rem 0.45rem;
            border-radius: 999px;
            background: #1d4ed8;
            color: #fff;
            font-size: 0.62rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            vertical-align: middle;
        }

        .admin-obrolan-message p {
            margin: 0;
            color: #334155;
            font-size: 0.86rem;
            line-height: 1.62;
            white-space: pre-wrap;
            word-break: break-word;
        }

        .admin-obrolan-message-attachments {
            display: grid;
            gap: 0.55rem;
            margin-top: 0.7rem;
        }

        .admin-obrolan-attachment-card,
        .admin-obrolan-location-card {
            display: flex;
            overflow: hidden;
            align-items: center;
            gap: 0.68rem;
            max-width: min(20rem, 78vw);
            border-radius: 0.88rem;
            background: rgba(255, 255, 255, 0.78);
            border: 1px solid rgba(148, 163, 184, 0.24);
            color: #0f172a;
            text-decoration: none;
        }

        .admin-obrolan-attachment-card:hover,
        .admin-obrolan-location-card:hover {
            color: #1d4ed8;
        }

        .admin-obrolan-attachment-card.is-image {
            display: block;
        }

        .admin-obrolan-attachment-card.is-image img {
            display: block;
            width: 100%;
            max-height: 13rem;
            border-radius: 0.82rem 0.82rem 0 0;
            object-fit: cover;
        }

        .admin-obrolan-attachment-card.is-image span,
        .admin-obrolan-attachment-card.is-video a {
            display: block;
            padding: 0.55rem 0.68rem;
            color: inherit;
            font-size: 0.76rem;
            font-weight: 700;
            line-height: 1.35;
            text-decoration: none;
        }

        .admin-obrolan-attachment-card.is-video {
            display: block;
            padding: 0;
        }

        .admin-obrolan-attachment-card.is-video video {
            display: block;
            width: 100%;
            max-height: 13rem;
            background: #020617;
        }

        .admin-obrolan-attachment-card.is-document,
        .admin-obrolan-location-card {
            padding: 0.7rem 0.76rem;
        }

        .admin-obrolan-attachment-card.is-document i,
        .admin-obrolan-location-card i {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 2rem;
            height: 2rem;
            border-radius: 0.7rem;
            background: rgba(37, 99, 235, 0.12);
            color: #1d4ed8;
            flex-shrink: 0;
        }

        .admin-obrolan-location-card span {
            display: grid;
            min-width: 0;
            gap: 0.12rem;
        }

        .admin-obrolan-location-card strong,
        .admin-obrolan-attachment-card.is-document span {
            overflow: hidden;
            font-size: 0.78rem;
            font-weight: 800;
            line-height: 1.3;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .admin-obrolan-location-card small {
            color: #64748b;
            font-size: 0.68rem;
            line-height: 1.3;
        }

        .admin-obrolan-inline-editor {
            display: flex;
            flex-direction: column;
            gap: 0.55rem;
            margin-top: 0.65rem;
        }

        .admin-obrolan-inline-editor textarea {
            width: 100%;
            min-height: 5rem;
            max-height: 12rem;
            padding: 0.76rem 0.85rem;
            border: 1px solid rgba(148, 163, 184, 0.24);
            border-radius: 0.95rem;
            background: rgba(255, 255, 255, 0.86);
            color: #0f172a;
            font-size: 0.84rem;
            line-height: 1.58;
            resize: none;
            outline: 0;
        }

        .admin-obrolan-inline-editor-actions {
            display: flex;
            justify-content: flex-end;
            gap: 0.45rem;
        }

        .admin-obrolan-inline-editor-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.38rem 0.78rem;
            border: 0;
            border-radius: 999px;
            background: rgba(15, 23, 42, 0.08);
            color: #0f172a;
            font-size: 0.74rem;
            font-weight: 700;
            line-height: 1.2;
        }

        .admin-obrolan-inline-editor-button.is-primary {
            background: #1d4ed8;
            color: #eff6ff;
        }

        .admin-obrolan-empty {
            padding: 1rem;
            border-radius: 1rem;
            background: #f8fafc;
            border: 1px dashed rgba(148, 163, 184, 0.26);
        }

        .admin-obrolan-empty strong {
            display: block;
            margin-bottom: 0.3rem;
            color: #0f172a;
            font-size: 0.9rem;
        }

        .admin-obrolan-empty p {
            margin: 0;
            color: #64748b;
            font-size: 0.8rem;
            line-height: 1.55;
        }

        .admin-obrolan-composer-shell {
            border-top: 1px solid rgba(148, 163, 184, 0.18);
            background: #fff;
        }

        .admin-obrolan-composer {
            display: flex;
            gap: 0.75rem;
            align-items: flex-end;
        }

        .admin-obrolan-composer textarea {
            width: 100%;
            min-height: 3rem;
            max-height: 8rem;
            padding: 0.82rem 0.95rem;
            border-radius: 1rem;
            border: 1px solid rgba(148, 163, 184, 0.26);
            resize: none;
            outline: 0;
            color: #0f172a;
            background: #f8fafc;
            font-size: 0.88rem;
            line-height: 1.5;
        }

        .admin-obrolan-composer-note {
            margin-top: 0.65rem;
            color: #64748b;
            font-size: 0.76rem;
            line-height: 1.45;
        }

        @media (max-width: 991.98px) {
            .admin-obrolan-composer,
            .admin-obrolan-participant {
                flex-direction: column;
                align-items: stretch;
            }
        }
    </style>
@endsection

@section('javascript')
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const panel = document.querySelector('[data-admin-obrolan-panel]');
            const threadStream = document.querySelector('[data-admin-thread-stream]');
            const composer = document.querySelector('#adminObrolanComposer');
            const sendButton = document.querySelector('[data-admin-send-button]');
            const csrfToken = panel?.dataset.csrfToken || document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
            const conversationId = panel?.dataset.conversationId || '';
            const threadUrl = panel?.dataset.threadUrl || '';
            const presenceUrl = panel?.dataset.presenceUrl || '';
            const sendUrl = panel?.dataset.sendUrl || '';
            const updateUrlTemplate = panel?.dataset.updateUrlTemplate || '';
            const deleteUrlTemplate = panel?.dataset.deleteUrlTemplate || '';
            const viewerId = Number(panel?.dataset.viewerId || 0);
            const indexUrl = panel?.dataset.indexUrl || '{{ route('admin.obrolan') }}';
            const realtimeBadge = document.querySelector('[data-admin-realtime-badge]');
            const conversationTitle = document.querySelector('[data-admin-conversation-title]');
            const conversationMeta = document.querySelector('[data-admin-conversation-meta]');
            const participantsWrap = document.querySelector('[data-admin-participants]');
            const composerNote = document.querySelector('[data-admin-thread-note]');
            const defaultComposerNote = composerNote?.textContent?.trim() || '';
            const echo = window.Echo || null;
            let pollingHandle = null;
            let activeInlineEditMessageId = null;
            let presenceHandle = null;
            let typingDebounceHandle = null;
            let typingIndicatorResetHandle = null;
            let userSyncChannel = null;
            let conversationSyncChannel = null;
            let presenceChannel = null;

            const showAlert = (config) => {
                if (window.Swal) {
                    return Swal.fire(config);
                }

                window.alert(config.text || config.title || 'Terjadi sesuatu.');
                return Promise.resolve({ isConfirmed: true });
            };

            const autoGrowComposer = () => {
                if (!composer) {
                    return;
                }

                composer.style.height = 'auto';
                composer.style.height = `${Math.min(composer.scrollHeight, 128)}px`;
            };

            const buildMessageUrl = (template, messageId) => {
                return template.replace('__MESSAGE__', String(messageId));
            };

            const scrollThreadToBottom = () => {
                if (threadStream) {
                    threadStream.scrollTop = threadStream.scrollHeight;
                }
            };

            const requestConfirmation = async (title, text) => {
                if (window.Swal) {
                    return Swal.fire({
                        icon: 'warning',
                        title,
                        text,
                        showCancelButton: true,
                        confirmButtonText: 'Ya, lanjutkan',
                        cancelButtonText: 'Batal',
                    });
                }

                return Promise.resolve({
                    isConfirmed: window.confirm(text || title),
                });
            };

            const setRealtimeBadge = (state = 'fallback', label = 'Polling aktif') => {
                if (!realtimeBadge) {
                    return;
                }

                realtimeBadge.textContent = label;
                realtimeBadge.classList.remove('is-live', 'is-connecting', 'is-fallback');
                realtimeBadge.classList.add(
                    state === 'live'
                        ? 'is-live'
                        : (state === 'connecting' ? 'is-connecting' : 'is-fallback')
                );
            };

            const syncConversationHeading = (conversation = null, messageCount = null) => {
                if (conversationTitle && conversation?.title) {
                    conversationTitle.textContent = conversation.title;
                }

                if (conversationMeta && conversation) {
                    const participantCount = Array.isArray(conversation.participants)
                        ? conversation.participants.length
                        : (conversation.participants_count || null);
                    const countLabel = participantCount ? `${participantCount} peserta` : 'Detail percakapan';
                    const messageLabel = messageCount !== null
                        ? `${messageCount} pesan terakhir ditampilkan`
                        : conversationMeta.textContent;
                    conversationMeta.textContent = `${countLabel}, ${messageLabel}`;
                }
            };

            const renderParticipants = (participants = []) => {
                if (!participantsWrap || !Array.isArray(participants)) {
                    return;
                }

                participantsWrap.innerHTML = participants.map((participant) => `
                    <div class="admin-obrolan-participant">
                        <img src="${participant.avatar_url || @json(\App\Models\User::avatarFallbackUrl())}" alt="${participant.name || 'Anggota'}">
                        <div class="admin-obrolan-participant-copy">
                            <strong>${participant.name || 'Anggota'}</strong>
                            <span>${participant.secondary || ''}</span>
                            <div class="admin-obrolan-participant-flags">
                                <span class="badge ${participant.active ? 'bg-success-subtle text-success border border-success-subtle' : 'bg-danger-subtle text-danger border border-danger-subtle'}">
                                    ${participant.active_label || (participant.active ? 'Aktif' : 'Diblokir')}
                                </span>
                                ${participant.is_admin ? '<span class="badge bg-light text-dark border">Admin</span>' : ''}
                            </div>
                        </div>
                    </div>
                `).join('');
            };

            const emitPresence = async ({ typing = null, keepalive = false } = {}) => {
                if (!presenceUrl) {
                    return;
                }

                const payload = {
                    conversation_id: conversationId,
                };

                if (typing !== null) {
                    payload.typing = Boolean(typing);
                }

                try {
                    await fetch(presenceUrl, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': csrfToken,
                            'X-Requested-With': 'XMLHttpRequest',
                        },
                        body: JSON.stringify(payload),
                        keepalive,
                    });
                } catch (error) {
                    console.debug('Presence admin tidak sempat diperbarui.', error);
                }
            };

            const emitTypingWhisper = (typing) => {
                if (!presenceChannel) {
                    return;
                }

                try {
                    presenceChannel.whisper('typing', {
                        userId: viewerId,
                        name: 'Admin',
                        typing: Boolean(typing),
                    });
                } catch (error) {
                    console.debug('Whisper typing admin tidak sempat dikirim.', error);
                }
            };

            const scheduleTypingPresence = () => {
                if (!presenceUrl) {
                    return;
                }

                window.clearTimeout(typingDebounceHandle);
                typingDebounceHandle = window.setTimeout(() => {
                    const isTyping = Boolean(composer?.value.trim());
                    emitPresence({
                        typing: isTyping,
                    });
                    emitTypingWhisper(isTyping);
                }, 360);
            };

            const handleTypingWhisper = (payload = {}) => {
                if (!composerNote || Number(payload.userId || 0) === viewerId) {
                    return;
                }

                window.clearTimeout(typingIndicatorResetHandle);
                composerNote.textContent = payload.typing
                    ? `${payload.name || 'Anggota'} sedang mengetik...`
                    : defaultComposerNote;

                typingIndicatorResetHandle = window.setTimeout(() => {
                    composerNote.textContent = defaultComposerNote;
                }, 2200);
            };

            const escapeHtml = (value) => {
                return String(value ?? '')
                    .replaceAll('&', '&amp;')
                    .replaceAll('<', '&lt;')
                    .replaceAll('>', '&gt;')
                    .replaceAll('"', '&quot;')
                    .replaceAll("'", '&#039;');
            };

            const formatFileSize = (bytes = 0) => {
                const size = Number(bytes || 0);

                if (size <= 0) {
                    return '';
                }

                if (size < 1024 * 1024) {
                    return `${Math.max(1, Math.round(size / 1024))} KB`;
                }

                return `${(size / 1024 / 1024).toFixed(1)} MB`;
            };

            const attachmentMarkup = (attachment = {}) => {
                const type = String(attachment.type || 'document');
                const url = String(attachment.url || '');
                const name = String(attachment.name || 'Lampiran');

                if (!url) {
                    return '';
                }

                if (type === 'image') {
                    return `
                        <a class="admin-obrolan-attachment-card is-image" href="${escapeHtml(url)}" target="_blank" rel="noopener">
                            <img src="${escapeHtml(url)}" alt="${escapeHtml(name)}">
                            <span>${escapeHtml(name)}</span>
                        </a>
                    `;
                }

                if (type === 'video') {
                    return `
                        <div class="admin-obrolan-attachment-card is-video">
                            <video src="${escapeHtml(url)}" controls preload="metadata"></video>
                            <a href="${escapeHtml(url)}" target="_blank" rel="noopener">${escapeHtml(name)}</a>
                        </div>
                    `;
                }

                const sizeLabel = formatFileSize(attachment.size);

                return `
                    <a class="admin-obrolan-attachment-card is-document" href="${escapeHtml(url)}" target="_blank" rel="noopener">
                        <i class="fas fa-file-alt"></i>
                        <span>${escapeHtml(sizeLabel ? `${name} · ${sizeLabel}` : name)}</span>
                    </a>
                `;
            };

            const messageExtrasMarkup = (message = {}) => {
                const attachments = Array.isArray(message.attachments) ? message.attachments : [];
                const location = message.location || null;
                const chunks = [];

                if (attachments.length > 0) {
                    chunks.push(`
                        <div class="admin-obrolan-message-attachments">
                            ${attachments.map((attachment) => attachmentMarkup(attachment)).join('')}
                        </div>
                    `);
                }

                if (location?.maps_url) {
                    chunks.push(`
                        <a class="admin-obrolan-location-card" href="${escapeHtml(location.maps_url)}" target="_blank" rel="noopener">
                            <i class="fas fa-map-marker-alt"></i>
                            <span>
                                <strong>Lokasi dibagikan</strong>
                                <small>${escapeHtml(location.lat)}, ${escapeHtml(location.lng)}</small>
                            </span>
                        </a>
                    `);
                }

                return chunks.join('');
            };

            const renderMessage = (message) => {
                const article = document.createElement('article');
                article.className = `admin-obrolan-message${message.is_mine ? ' is-mine' : ''}${message.is_admin_reply ? ' is-admin-reply' : ''}`;
                article.dataset.messageId = message.id;
                article.dataset.messageBody = message.body || '';
                article.innerHTML = `
                    <img src="${escapeHtml(message.avatar_url || @json(\App\Models\User::avatarFallbackUrl()))}" alt="${escapeHtml(message.user_name || 'Pengguna')}">
                    <div class="admin-obrolan-message-body">
                        <div class="admin-obrolan-message-meta">
                            <strong>${escapeHtml(message.user_name || 'Pengguna')}${message.is_admin_reply ? ' <span class="admin-obrolan-role-badge">Admin</span>' : ''}</strong>
                            <div class="admin-obrolan-message-meta-trail">
                                ${message.edited ? '<span class="admin-obrolan-message-edited">Diedit</span>' : ''}
                                <span>${escapeHtml(message.time_label || '')}</span>
                                ${(message.can_edit || message.can_delete) ? `
                                    <div class="admin-obrolan-message-menu-wrap">
                                        <button type="button" class="admin-obrolan-message-menu-toggle" data-admin-message-menu-toggle data-message-id="${message.id}" aria-label="Aksi pesan">
                                            <i class="fas fa-ellipsis-v"></i>
                                        </button>
                                        <div class="admin-obrolan-message-menu d-none" data-admin-message-menu>
                                            ${message.can_edit ? `<button type="button" class="admin-obrolan-message-menu-item" data-admin-message-edit data-message-id="${message.id}">Edit</button>` : ''}
                                            ${message.can_delete ? `<button type="button" class="admin-obrolan-message-menu-item is-danger" data-admin-message-delete data-message-id="${message.id}">Hapus</button>` : ''}
                                        </div>
                                    </div>
                                ` : ''}
                            </div>
                        </div>
                        <p>${escapeHtml(message.body || '')}</p>
                        ${messageExtrasMarkup(message)}
                    </div>
                `;
                return article;
            };

            const closeMessageMenus = ({ except = null } = {}) => {
                document.querySelectorAll('[data-admin-message-menu]').forEach((menu) => {
                    if (except && menu === except) {
                        return;
                    }

                    menu.classList.add('d-none');
                });

                document.querySelectorAll('[data-admin-message-menu-toggle]').forEach((toggle) => {
                    const menu = toggle.parentElement?.querySelector('[data-admin-message-menu]');
                    if (except && menu === except) {
                        return;
                    }

                    toggle.classList.remove('is-open');
                });
            };

            const destroyInlineEditor = (article) => {
                if (!article) {
                    return;
                }

                const bodyNode = article.querySelector('.admin-obrolan-message-body > p');
                const editor = article.querySelector('[data-admin-inline-editor]');

                if (editor) {
                    editor.remove();
                }

                if (bodyNode) {
                    bodyNode.hidden = false;
                }

                if (activeInlineEditMessageId && article.dataset.messageId === String(activeInlineEditMessageId)) {
                    activeInlineEditMessageId = null;
                }
            };

            const openInlineEditor = (messageId) => {
                const article = threadStream?.querySelector(`[data-message-id="${messageId}"]`);
                const bodyWrap = article?.querySelector('.admin-obrolan-message-body');
                const bodyNode = bodyWrap?.querySelector('p');

                if (!article || !bodyWrap || !bodyNode) {
                    return;
                }

                if (activeInlineEditMessageId && String(activeInlineEditMessageId) !== String(messageId)) {
                    destroyInlineEditor(threadStream?.querySelector(`[data-message-id="${activeInlineEditMessageId}"]`));
                }

                if (article.querySelector('[data-admin-inline-editor]')) {
                    return;
                }

                closeMessageMenus();

                const editor = document.createElement('div');
                editor.className = 'admin-obrolan-inline-editor';
                editor.dataset.adminInlineEditor = 'true';
                editor.innerHTML = `
                    <textarea rows="3" maxlength="4000"></textarea>
                    <div class="admin-obrolan-inline-editor-actions">
                        <button type="button" class="admin-obrolan-inline-editor-button" data-admin-inline-cancel>Batal</button>
                        <button type="button" class="admin-obrolan-inline-editor-button is-primary" data-admin-inline-save>Simpan</button>
                    </div>
                `;

                bodyWrap.appendChild(editor);
                bodyNode.hidden = true;
                activeInlineEditMessageId = String(messageId);

                const textarea = editor.querySelector('textarea');
                textarea.value = article.dataset.messageBody || bodyNode.textContent || '';
                textarea.style.height = 'auto';
                textarea.style.height = `${Math.min(textarea.scrollHeight, 208)}px`;
                textarea.focus();
                textarea.setSelectionRange(textarea.value.length, textarea.value.length);

                textarea.addEventListener('input', () => {
                    textarea.style.height = 'auto';
                    textarea.style.height = `${Math.min(textarea.scrollHeight, 208)}px`;
                });
            };

            const updateMessage = async (messageId, nextBody = null) => {
                if (!messageId || !updateUrlTemplate || !conversationId) {
                    return;
                }

                const article = threadStream?.querySelector(`[data-message-id="${messageId}"]`);
                const body = String(nextBody ?? article?.dataset.messageBody ?? article?.querySelector('p')?.textContent ?? '').trim();

                if (body === '') {
                    showAlert({
                        icon: 'warning',
                        title: 'Isi pesan kosong',
                        text: 'Isi pesan tidak boleh kosong.',
                    });
                    return;
                }

                try {
                    const response = await fetch(buildMessageUrl(updateUrlTemplate, messageId), {
                        method: 'PATCH',
                        headers: {
                            'Content-Type': 'application/json',
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': csrfToken,
                            'X-Requested-With': 'XMLHttpRequest',
                        },
                        body: JSON.stringify({
                            conversation_id: conversationId,
                            body,
                        }),
                    });

                    const payload = await response.json();

                    if (!response.ok || !payload.success) {
                        throw new Error(payload.message || 'Pesan gagal diperbarui.');
                    }

                    activeInlineEditMessageId = null;
                    await refreshThread({ silent: true });
                } catch (error) {
                    showAlert({
                        icon: 'error',
                        title: 'Gagal memperbarui pesan',
                        text: error.message || 'Terjadi kendala saat memperbarui pesan.',
                    });
                }
            };

            const deleteMessage = async (messageId) => {
                if (!messageId || !deleteUrlTemplate || !conversationId) {
                    return;
                }

                const confirmation = await requestConfirmation(
                    'Hapus pesan ini?',
                    'Pesan yang dihapus akan hilang dari thread obrolan ini.'
                );

                if (!confirmation.isConfirmed) {
                    return;
                }

                try {
                    activeInlineEditMessageId = null;
                    const response = await fetch(buildMessageUrl(deleteUrlTemplate, messageId), {
                        method: 'DELETE',
                        headers: {
                            'Content-Type': 'application/json',
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': csrfToken,
                            'X-Requested-With': 'XMLHttpRequest',
                        },
                        body: JSON.stringify({
                            conversation_id: conversationId,
                        }),
                    });

                    const payload = await response.json();

                    if (!response.ok || !payload.success) {
                        throw new Error(payload.message || 'Pesan gagal dihapus.');
                    }

                    await refreshThread({ silent: true });
                } catch (error) {
                    showAlert({
                        icon: 'error',
                        title: 'Gagal menghapus pesan',
                        text: error.message || 'Terjadi kendala saat menghapus pesan.',
                    });
                }
            };

            const refreshThread = async ({ silent = false } = {}) => {
                if (!threadUrl || !conversationId || !threadStream) {
                    return;
                }

                if (activeInlineEditMessageId) {
                    return;
                }

                try {
                    const response = await fetch(`${threadUrl}?conversation_id=${conversationId}`, {
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest',
                        },
                    });

                    if (!response.ok) {
                        if (response.status === 404) {
                            window.location.href = indexUrl;
                            return;
                        }

                        throw new Error('Gagal memuat thread obrolan.');
                    }

                    const payload = await response.json();
                    syncConversationHeading(payload.conversation || null, Array.isArray(payload.messages) ? payload.messages.length : null);
                    renderParticipants(payload.participants || []);
                    threadStream.innerHTML = '';

                    if (Array.isArray(payload.messages) && payload.messages.length > 0) {
                        payload.messages.forEach((message) => {
                            threadStream.appendChild(renderMessage(message));
                        });
                    } else {
                        threadStream.innerHTML = `
                            <div class="admin-obrolan-empty">
                                <strong>Belum ada pesan.</strong>
                                <p>Percakapan ini belum memiliki isi pesan untuk ditampilkan.</p>
                            </div>
                        `;
                    }

                    scrollThreadToBottom();
                } catch (error) {
                    if (!silent) {
                        showAlert({
                            icon: 'error',
                            title: 'Thread gagal dimuat',
                            text: error.message || 'Terjadi kendala saat mengambil data obrolan.',
                        });
                    }
                }
            };

            const sendReply = async () => {
                if (!composer || !sendUrl || !conversationId) {
                    return;
                }

                const body = composer.value.trim();
                if (body === '') {
                    showAlert({
                        icon: 'warning',
                        title: 'Balasan kosong',
                        text: 'Tulis dulu balasan admin sebelum dikirim.',
                    });
                    return;
                }

                composer.disabled = true;
                sendButton.disabled = true;

                try {
                    const response = await fetch(sendUrl, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': csrfToken,
                            'X-Requested-With': 'XMLHttpRequest',
                        },
                        body: JSON.stringify({
                            conversation_id: conversationId,
                            body,
                        }),
                    });

                    const payload = await response.json();

                    if (!response.ok || !payload.success) {
                        throw new Error(payload.message || 'Balasan admin gagal dikirim.');
                    }

                    composer.value = '';
                    autoGrowComposer();
                    emitPresence({ typing: false });
                    emitTypingWhisper(false);
                    await refreshThread({ silent: true });
                } catch (error) {
                    showAlert({
                        icon: 'error',
                        title: 'Gagal mengirim balasan',
                        text: error.message || 'Terjadi kendala saat mengirim balasan admin.',
                    });
                } finally {
                    composer.disabled = false;
                    sendButton.disabled = false;
                    composer.focus();
                }
            };

            const setupRealtime = () => {
                if (!echo || !viewerId || !conversationId) {
                    setRealtimeBadge('fallback', 'Polling aktif');
                    return;
                }

                setRealtimeBadge('connecting', 'Menyambung realtime...');

                const connection = echo?.connector?.pusher?.connection;

                if (connection) {
                    connection.bind('state_change', ({ current }) => {
                        if (current === 'connected') {
                            setRealtimeBadge('live', 'Realtime aktif');
                            return;
                        }

                        if (current === 'connecting' || current === 'initialized') {
                            setRealtimeBadge('connecting', 'Menyambung realtime...');
                            return;
                        }

                        setRealtimeBadge('fallback', 'Polling aktif');
                    });

                    connection.bind('error', () => {
                        setRealtimeBadge('fallback', 'Polling aktif');
                    });
                } else {
                    setRealtimeBadge('live', 'Realtime aktif');
                }

                userSyncChannel = echo.private(`chat.user.${viewerId}`);
                userSyncChannel.listen('.chat.sync', async (event) => {
                    if (Number(event?.conversation_id || 0) !== Number(conversationId)) {
                        return;
                    }

                    await refreshThread({ silent: true });
                });

                conversationSyncChannel = echo.private(`chat.conversation.${conversationId}`);
                conversationSyncChannel.listen('.chat.conversation.updated', async () => {
                    await refreshThread({ silent: true });
                });

                presenceChannel = echo.join(`chat.presence.${conversationId}`);
                presenceChannel
                    .here(() => {
                        emitPresence({ typing: Boolean(composer?.value.trim()) });
                    })
                    .joining(() => {
                        composerNote.textContent = defaultComposerNote;
                    })
                    .leaving(() => {
                        composerNote.textContent = defaultComposerNote;
                    })
                    .listenForWhisper('typing', (payload) => {
                        handleTypingWhisper(payload);
                    });
            };

            scrollThreadToBottom();
            autoGrowComposer();
            setupRealtime();

            composer?.addEventListener('input', () => {
                autoGrowComposer();
                scheduleTypingPresence();
            });
            composer?.addEventListener('blur', () => {
                emitPresence({ typing: false });
                emitTypingWhisper(false);
            });
            composer?.addEventListener('keydown', (event) => {
                if (event.key === 'Enter' && !event.shiftKey) {
                    event.preventDefault();
                    sendReply();
                }
            });
            sendButton?.addEventListener('click', sendReply);
            threadStream?.addEventListener('click', (event) => {
                const menuToggle = event.target.closest('[data-admin-message-menu-toggle]');
                if (menuToggle) {
                    event.preventDefault();
                    event.stopPropagation();
                    const menu = menuToggle.parentElement?.querySelector('[data-admin-message-menu]');
                    const willOpen = menu?.classList.contains('d-none');
                    closeMessageMenus();

                    if (menu && willOpen) {
                        menu.classList.remove('d-none');
                        menuToggle.classList.add('is-open');
                    }
                    return;
                }

                const editButton = event.target.closest('[data-admin-message-edit]');
                if (editButton) {
                    event.preventDefault();
                    openInlineEditor(editButton.dataset.messageId);
                    return;
                }

                const deleteButton = event.target.closest('[data-admin-message-delete]');
                if (deleteButton) {
                    event.preventDefault();
                    deleteMessage(deleteButton.dataset.messageId);
                    return;
                }

                const inlineCancel = event.target.closest('[data-admin-inline-cancel]');
                if (inlineCancel) {
                    event.preventDefault();
                    destroyInlineEditor(inlineCancel.closest('[data-message-id]'));
                    return;
                }

                const inlineSave = event.target.closest('[data-admin-inline-save]');
                if (inlineSave) {
                    event.preventDefault();
                    const article = inlineSave.closest('[data-message-id]');
                    const textarea = article?.querySelector('[data-admin-inline-editor] textarea');
                    updateMessage(article?.dataset.messageId, textarea?.value ?? '');
                }
            });

            if (threadUrl && conversationId) {
                pollingHandle = window.setInterval(() => {
                    refreshThread({ silent: true });
                }, echo ? 15000 : 8000);
            }

            if (presenceUrl && conversationId) {
                emitPresence({ typing: false });
                presenceHandle = window.setInterval(() => {
                    emitPresence({
                        typing: Boolean(composer?.value.trim()),
                    });
                }, echo ? 18000 : 6000);
            }

            window.addEventListener('beforeunload', () => {
                if (pollingHandle) {
                    window.clearInterval(pollingHandle);
                }

                if (presenceHandle) {
                    window.clearInterval(presenceHandle);
                }

                window.clearTimeout(typingDebounceHandle);
                window.clearTimeout(typingIndicatorResetHandle);

                if (echo) {
                    echo.leave(`chat.presence.${conversationId}`);
                    echo.leaveChannel(`private-chat.conversation.${conversationId}`);
                    echo.leaveChannel(`private-chat.user.${viewerId}`);
                }

                emitPresence({ typing: false, keepalive: true });
                emitTypingWhisper(false);
            });

            document.addEventListener('click', (event) => {
                if (!event.target.closest('.admin-obrolan-message-menu-wrap')) {
                    closeMessageMenus();
                }
            });
        });
    </script>
@endsection