@if (($chatWidgetEnabled ?? false) === true)
  @php
    /** @var \Musonza\Chat\Models\Conversation|null $chatSelectedConversation */
    $chatCanCreateConversation = ($chatCanCreateConversation ?? false) === true;
    $chatSidebarVisible = ($chatSidebarVisible ?? true) === true;
    $threadOnlyMode = !$chatSidebarVisible;
    $hasSelectedConversation = $chatSelectedConversation instanceof \Musonza\Chat\Models\Conversation;
    $selectedConversationTitle =
        $chatSelectedConversation?->data['title'] ??
        ($hasSelectedConversation ? 'ჩატი #' . $chatSelectedConversation->id : 'აირჩიეთ ჩატი');
    $chatUnreadCounts = $chatUnreadCounts ?? [];
    $chatUnreadTotal = (int) ($chatUnreadTotal ?? 0);
    $selectedParticipants = $hasSelectedConversation
        ? $chatSelectedConversation->participants
            ->map(fn($participation) => $participation->messageable?->name)
            ->filter()
            ->unique()
            ->values()
        : collect();
  @endphp

  <button id="chat-launcher" class="elev-chat-launcher" type="button" aria-label="Open chat">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
      stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
    </svg>
    <span class="elev-chat-launcher__badge {{ $chatUnreadTotal > 0 ? '' : 'is-hidden' }}"
      id="chat-unread-badge">{{ $chatUnreadTotal > 0 ? ($chatUnreadTotal > 99 ? '99+' : $chatUnreadTotal) : '' }}</span>
  </button>

  <section id="chat-widget"
    class="elev-chat-widget {{ $hasSelectedConversation ? 'elev-chat-widget--has-thread' : '' }} {{ $threadOnlyMode ? 'elev-chat-widget--thread-only' : '' }}"
    data-current-user-id="{{ auth()->id() }}" data-broadcast-driver="{{ config('broadcasting.default') }}"
    data-pusher-key="{{ config('broadcasting.connections.pusher.key') }}"
    data-pusher-cluster="{{ config('broadcasting.connections.pusher.options.cluster') }}"
    data-auth-endpoint="{{ url('/broadcasting/auth') }}"
    data-selected-conversation-id="{{ $chatSelectedConversation?->id }}"
    data-unread-counts-route="{{ $chatUnreadCountsRoute }}"
    data-messages-route-template="{{ $chatMessagesRouteTemplate }}"
    data-seen-route-template="{{ $chatSeenRouteTemplate }}"
    data-site-presence-route="{{ $chatSitePresenceRoute ?? '' }}"
    data-presence-route-template="{{ $chatPresenceRouteTemplate ?? '' }}"
    data-initial-unread-total="{{ $chatUnreadTotal }}"
    data-send-route-template="{{ $chatSendRouteTemplate }}" data-edit-route-template="{{ $chatEditRouteTemplate }}"
    data-delete-route-template="{{ $chatDeleteRouteTemplate }}"
    data-background-realtime-enabled="1"
    data-beams-enabled="{{ ($chatBeamsEnabled ?? false) ? '1' : '0' }}"
    data-beams-instance-id="{{ $chatBeamsInstanceId ?? '' }}"
    data-beams-auth-endpoint="{{ $chatBeamsAuthRoute ?? '' }}"
    data-destroy-conversation-route-template="{{ route('chats.destroyConversation', ['conversation' => '__CONVERSATION__']) }}">
    <header class="chat-widget__header">
      <div>
        <h5 class="mb-0 text-white">ჩატი</h5>
        <small class="chat-widget__status" id="chat-status-text"></small>
      </div>
      <div class="chat-widget__header-actions">
        <button id="chat-widget-expand" class="btn btn-sm" type="button" aria-label="Expand chat">
          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
            <polyline points="15 3 21 3 21 9" />
            <polyline points="9 21 3 21 3 15" />
            <line x1="21" y1="3" x2="14" y2="10" />
            <line x1="3" y1="21" x2="10" y2="14" />
          </svg>
        </button>
        <button id="chat-widget-toggle" class="btn btn-sm" type="button" aria-label="Close chat">
          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
            <line x1="5" y1="12" x2="19" y2="12" />
          </svg>
        </button>
      </div>
    </header>

    <div class="chat-widget__body">
      @if ($chatSidebarVisible)
        <aside class="chat-widget__sidebar">
          @if ($chatCanCreateConversation)
            <button type="button" class="chat-widget__sidebar-toggle" id="chat-sidebar-toggle">
              ახალი ჩატი
              <svg class="chat-widget__sidebar-toggle-icon" xmlns="http://www.w3.org/2000/svg" width="11"
                height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
                stroke-linecap="round" stroke-linejoin="round">
                <polyline points="6 9 12 15 18 9" />
              </svg>
            </button>
            <div class="chat-create-form-wrap" id="chat-create-form-wrap">
              <form method="POST" action="{{ route('chats.storeConversation') }}" class="chat-create-form"
                id="chat-create-form">
                @csrf
                <label class="form-label mb-50" for="chat-block-id">კორპუსი (არასავალდებულო)</label>
                <select id="chat-block-id" name="block_id" class="form-control form-control-sm mb-1">
                  <option value="">არჩეული მონაწილეები</option>
                  @foreach ($chatAvailableBlocks as $block)
                    <option value="{{ $block->id }}" @selected((int) old('block_id') === (int) $block->id)>{{ $block->name }}</option>
                  @endforeach
                </select>

                <label class="form-label mb-50">მონაწილეები</label>
                <div class="chat-participant-picker" id="chat-participant-picker">
                  <div class="chat-participant-picker__toolbar">
                    <input type="text" class="chat-participant-picker__input" id="chat-participant-search"
                      placeholder="ძებნა..." autocomplete="off">
                    <button type="button" class="chat-participant-picker__select-all" id="chat-select-all-btn"
                      title="ყველას მონიშვნა">ყველა</button>
                  </div>
                  <div class="chat-participant-picker__dropdown" id="chat-participant-dropdown">
                    @foreach ($chatAvailableParticipants as $participant)
                      <div class="chat-participant-picker__option" data-participant-id="{{ $participant->id }}"
                        data-participant-name="{{ $participant->name }}">
                        <span class="chat-participant-picker__avatar">{{ mb_substr($participant->name, 0, 1) }}</span>
                        <span>{{ $participant->name }}</span>
                      </div>
                    @endforeach
                  </div>
                  <div class="chat-participant-tags" id="chat-participant-tags"></div>
                  {{-- Hidden select to preserve form submission --}}
                  <select id="chat-participants" name="participant_ids[]" multiple style="display:none">
                    @foreach ($chatAvailableParticipants as $participant)
                      <option value="{{ $participant->id }}" @selected(collect(old('participant_ids', []))->contains((string) $participant->id) || collect(old('participant_ids', []))->contains($participant->id))>
                        {{ $participant->name }}
                      </option>
                    @endforeach
                  </select>
                </div>
                <small class="text-muted d-block mb-1 mt-50" id="chat-participant-help">აირჩიეთ ჩატის მონაწილეები.
                  ხელმისაწვდომია: {{ $chatAvailableParticipants->count() }}</small>

                <label class="form-label mb-50" for="chat-title">სათაური (არასავალდებულო)</label>
                <input id="chat-title" name="title" type="text" class="form-control form-control-sm mb-1"
                  maxlength="255" value="{{ old('title') }}" placeholder="ავტომატურად შეივსება...">

                <div class="alert alert-danger py-1 px-1 mb-1 d-none" id="chat-create-error"></div>

                @if ($errors->has('block_id') || $errors->has('participant_ids') || $errors->has('title'))
                  <div class="alert alert-danger py-1 px-1 mb-1">
                    <ul class="mb-0 ps-1">
                      @foreach (['block_id', 'participant_ids', 'title'] as $field)
                        @foreach ($errors->get($field) as $error)
                          <li>{{ $error }}</li>
                        @endforeach
                      @endforeach
                    </ul>
                  </div>
                @endif

                <button type="submit" class="btn btn-primary btn-sm w-100">ახალი ჯგუფური ჩატი</button>
              </form>
            </div>
          @endif

          <div class="chat-conversation-list">
            @forelse ($chatConversations as $conversation)
              @php
                $conversationTitle = $conversation->data['title'] ?? null;
                $participantNames = $conversation->participants
                    ->map(fn($participation) => $participation->messageable?->name)
                    ->filter()
                    ->unique()
                    ->values();

                if (!$conversationTitle) {
                    $conversationTitle = $conversation->participants
                        ->reject(fn($participation) => (int) $participation->messageable_id === (int) auth()->id())
                        ->map(fn($participation) => $participation->messageable?->name)
                        ->filter()
                        ->take(3)
                        ->implode(', ');
                }

                if ($conversationTitle === '' || $conversationTitle === null) {
                    $conversationTitle = 'ჩატი #' . $conversation->id;
                }

                $isSelected =
                    $hasSelectedConversation && (int) $chatSelectedConversation->id === (int) $conversation->id;
                $lastMessageBody = $conversation->last_message?->body;
                $lastMessagePreview = $lastMessageBody ? \Illuminate\Support\Str::limit($lastMessageBody, 50) : null;
              @endphp

              <button type="button" class="chat-conversation-list__item {{ $isSelected ? 'is-active' : '' }}"
                data-conversation-id="{{ $conversation->id }}" data-conversation-title="{{ $conversationTitle }}"
                data-conversation-participants='@json($participantNames->values())'
                data-conversation-block-id="{{ $conversation->data['block_id'] ?? '' }}"
                data-conversation-chat-type="{{ $conversation->data['chat_type'] ?? '' }}">
                <div class="chat-conversation-list__item-header">
                  <span class="chat-conversation-list__item-title">{{ $conversationTitle }}</span>
                  @php($conversationUnread = (int) ($chatUnreadCounts[$conversation->id] ?? 0))
                  <span class="chat-conversation-list__item-unread-wrap">
                    <span class="chat-conversation-list__unread {{ $conversationUnread > 0 ? '' : 'is-hidden' }}"
                      data-unread-conversation-id="{{ $conversation->id }}">{{ $conversationUnread > 0 ? ($conversationUnread > 99 ? '99+' : $conversationUnread) : '' }}</span>
                    <span
                      class="chat-conversation-list__item-time">{{ $conversation->updated_at?->format('d.m.Y H:i') }}</span>
                  </span>
                </div>
                @if ($lastMessagePreview)
                  <span class="chat-conversation-list__item-preview">{{ $lastMessagePreview }}</span>
                @endif
              </button>
            @empty
              <div class="chat-conversation-list__empty text-muted py-1" style="font-size:0.82rem;text-align:center">ჩატები ჯერ არ არის შექმნილი
              </div>
            @endforelse
          </div>
        </aside>
      @endif

      <div class="chat-widget__thread">
        <div id="chat-empty-state" class="chat-empty-state {{ $hasSelectedConversation ? 'd-none' : '' }}">
          <div>
            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24"
              fill="none" stroke="#d1d5db" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
            </svg>
            <p class="mb-0 text-muted mt-1">
              {{ $threadOnlyMode ? 'ადმინისტრაციასთან ჩატი დროებით მიუწვდომელია.' : 'აირჩიეთ ჩატი მარცხენა სიიდან ან შექმენით ახალი ჯგუფი.' }}
            </p>
          </div>
        </div>

        <div id="chat-root" data-conversation-id="{{ $chatSelectedConversation?->id }}"
          class="{{ $hasSelectedConversation ? '' : 'd-none' }}">
          <div class="chat-widget__thread-header">
            @if ($chatSidebarVisible)
              <button type="button" class="chat-widget__mobile-back">&larr; ჩატების სია</button>
            @endif
            <div class="chat-widget__thread-info">
              <strong id="chat-thread-title">{{ $selectedConversationTitle }}</strong>
              <button type="button" class="chat-widget__participants-title" id="chat-participants-toggle">
                მონაწილეები (<span id="chat-thread-members-count">{{ $selectedParticipants->count() }}</span>)
                <svg class="chat-widget__participants-toggle-icon" xmlns="http://www.w3.org/2000/svg" width="10"
                  height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
                  stroke-linecap="round" stroke-linejoin="round">
                  <polyline points="6 9 12 15 18 9" />
                </svg>
              </button>
              <div class="chat-widget__participants is-collapsed" id="chat-thread-members">
                @foreach ($selectedParticipants as $participantName)
                  <span class="chat-widget__participant">{{ $participantName }}</span>
                @endforeach
              </div>
            </div>
            <div class="chat-widget__thread-actions">
              @if ($chatCanCreateConversation)
                <button type="button"
                  class="chat-widget__thread-action chat-widget__thread-action--danger {{ $hasSelectedConversation ? '' : 'd-none' }}"
                  id="chat-delete-conversation" title="ჩატის წაშლა">
                  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24"
                    fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"
                    stroke-linejoin="round">
                    <polyline points="3 6 5 6 21 6"></polyline>
                    <path d="M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2"></path>
                    <path d="M19 6l-1 14a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1L5 6"></path>
                    <line x1="10" y1="11" x2="10" y2="17"></line>
                    <line x1="14" y1="11" x2="14" y2="17"></line>
                  </svg>
                </button>
              @endif
              <button type="button" class="chat-widget__search-toggle" id="chat-search-toggle" title="ძებნა">
                <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24"
                  fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
                  stroke-linejoin="round">
                  <circle cx="11" cy="11" r="8"></circle>
                  <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                </svg>
              </button>
            </div>
          </div>
          <div class="chat-widget__search-bar" id="chat-search-bar">
            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
              fill="none" stroke="#9ca3af" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"
              style="flex-shrink:0">
              <circle cx="11" cy="11" r="8"></circle>
              <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
            </svg>
            <input type="text" id="chat-search-input" placeholder="შეტყობინებების ძებნა..." autocomplete="off">
            <button type="button" id="chat-search-clear" title="გასუფთავება">&times;</button>
          </div>

          <div id="chat-messages" class="chat-widget__messages">
            @forelse ($chatMessagePayloads as $message)
              @php($reply = $message['data']['reply'] ?? null)
              @php($replyBody = trim((string) ($reply['body'] ?? '')) ?: (string) ($reply['file_name'] ?? ''))
              <div class="chat-message {{ $message['is_me'] ? 'is-me' : '' }}"
                data-message-id="{{ $message['id'] }}" data-message-type="{{ $message['type'] }}"
                data-sender-name="{{ $message['sender_name'] }}"
                data-file-name="{{ $message['data']['file_name'] ?? '' }}">
                <div class="chat-message__content">
                  <div class="chat-message__actions-wrap">
                    <button type="button" class="chat-message__actions-trigger" style="margin-left: 4px;"
                      title="მოქმედებები">
                      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
                        fill="currentColor">
                        <circle cx="12" cy="5" r="2" />
                        <circle cx="12" cy="12" r="2" />
                        <circle cx="12" cy="19" r="2" />
                      </svg>
                    </button>
                    <div class="chat-message__actions-menu">
                      <button type="button" class="chat-message__action-item" data-action="reply">პასუხი</button>
                      @if ($message['is_me'] && $message['type'] === 'text')
                        <button type="button" class="chat-message__action-item"
                          data-action="edit">რედაქტირება</button>
                      @endif
                      @if ($message['is_me'])
                        <button type="button" class="chat-message__action-item chat-message__action-item--danger"
                          data-action="delete">წაშლა</button>
                      @endif
                    </div>
                  </div>
                  <div class="chat-message__bubble">
                    <small class="chat-message__meta">{{ $message['sender_name'] }} &bull;
                      {{ $message['created_at'] }}@if ($message['edited_at'])
                        <span class="chat-message__edited">(რედაქტირებულია)</span>
                      @endif
                    </small>
                    @if (is_array($reply) && !empty($reply['id']))
                      <button type="button" class="chat-message__reply"
                        data-reply-message-id="{{ $reply['id'] }}">
                        <span class="chat-message__reply-sender">{{ $reply['sender_name'] ?? 'უცნობი' }}</span>
                        <span class="chat-message__reply-body">{{ $replyBody }}</span>
                      </button>
                    @endif
                    <div class="chat-message__body-text">{{ $message['body'] }}</div>
                    @if (($message['data']['file_url'] ?? null) && in_array($message['type'], ['attachment', 'image'], true))
                      <div class="mt-50">
                        @if ($message['type'] === 'image')
                          <a href="{{ $message['data']['file_url'] }}" target="_blank" rel="noopener">
                            <img src="{{ $message['data']['file_url'] }}" alt="attachment"
                              class="chat-message__image">
                          </a>
                        @else
                          <a href="{{ $message['data']['file_url'] }}" target="_blank" rel="noopener">
                            {{ $message['data']['file_name'] ?? 'ფაილის ჩამოტვირთვა' }}
                          </a>
                        @endif
                      </div>
                    @endif
                  </div>
                </div>
              </div>
            @empty
              <div class="chat-widget__messages-empty">პირველი შეტყობინება თქვენ შეგიძლიათ გააგზავნოთ.</div>
            @endforelse
          </div>

          <form id="chat-send-form" method="POST"
            action="{{ $hasSelectedConversation ? route('chats.storeMessage', $chatSelectedConversation->id) : '#' }}"
            enctype="multipart/form-data" class="chat-widget__composer">
            @csrf
            <input type="hidden" name="reply_to_message_id" id="chat-reply-to-message-id">
            <div class="chat-widget__reply-preview d-none" id="chat-reply-preview">
              <div class="chat-widget__reply-preview-content">
                <strong id="chat-reply-preview-sender"></strong>
                <span id="chat-reply-preview-body"></span>
              </div>
              <button type="button" class="chat-widget__reply-preview-cancel"
                id="chat-reply-preview-cancel">&times;</button>
            </div>
            <div class="chat-widget__composer-row">
              <textarea name="content" rows="1" placeholder="შეიყვანეთ შეტყობინება..." @disabled(!$hasSelectedConversation)></textarea>
              <div class="chat-widget__composer-actions">
                <label class="chat-widget__attach-btn" title="ფაილის მიმაგრება" id="chat-attach-label">
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"
                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round">
                    <path
                      d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48">
                    </path>
                  </svg>
                  <input type="file" name="attachment" @disabled(!$hasSelectedConversation) id="chat-file-input">
                </label>
                <button type="submit" class="chat-widget__send-btn" id="chat-send-button"
                  @disabled(!$hasSelectedConversation) title="გაგზავნა">
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"
                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round">
                    <line x1="22" y1="2" x2="11" y2="13"></line>
                    <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
                  </svg>
                </button>
              </div>
            </div>
            <div class="chat-widget__file-preview" id="chat-file-preview">
              <span class="chat-widget__file-preview-name" id="chat-file-preview-name"></span>
              <button type="button" class="chat-widget__file-preview-remove"
                id="chat-file-preview-remove">&times;</button>
            </div>
            <small class="text-danger d-none mt-50" id="chat-send-error"></small>
          </form>
        </div>
      </div>
    </div>
  </section>
@endif