@php
    use Illuminate\Support\Str;

    $viewer = auth()->user();
    $activeContact = $activeConversation?->otherParticipantFor($viewer);
@endphp

<div class="tomchat-app-shell {{ $externalSidebar ? 'tomchat-app-shell-embedded' : '' }}" wire:poll.5s="refreshShell">
    @unless ($externalSidebar)
        <aside class="tomchat-sidebar {{ $showSidebar ? 'is-visible' : 'is-collapsed-mobile' }}">
            <div class="tomchat-sidebar-top">
                <div>
                    <p class="eyebrow">tomCHAT</p>
                    <h1>Ruang obrolan</h1>
                </div>
                <span class="status-pill">beta</span>
            </div>

            <div class="tomchat-profile-strip">
                <img src="{{ $viewer->avatarUrl() }}" alt="{{ $viewer->name }}">
                <div>
                    <strong>{{ $viewer->name }}</strong>
                    <span>{{ $viewer->email }}</span>
                </div>
            </div>

            <label class="tomchat-search">
                <span>Cari anggota</span>
                <input type="search" wire:model.live.debounce.300ms="search" placeholder="Nama, email, atau username">
            </label>

            <section class="tomchat-sidebar-section">
                <div class="section-head">
                    <h2>Percakapan terakhir</h2>
                    <span>{{ $conversations->count() }}</span>
                </div>

                <div class="conversation-list">
                    @forelse ($conversations as $conversation)
                        @php
                            $conversationUser = $conversation->otherParticipantFor($viewer);
                            $latestMessage = $conversation->latestMessage;
                            $isActive = (int) $activeConversationId === $conversation->id;
                            $isUnread = $this->isConversationUnread($conversation);
                        @endphp

                        <button type="button" class="conversation-card {{ $isActive ? 'is-active' : '' }}"
                            wire:click="openConversation({{ $conversation->id }})"
                            wire:key="conversation-{{ $conversation->id }}">
                            <img src="{{ $conversationUser?->avatarUrl() ?: $viewer->avatarUrl() }}"
                                alt="{{ $conversation->displayNameFor($viewer) }}">
                            <div class="conversation-card-body">
                                <div class="conversation-card-topline">
                                    <strong>{{ $conversation->displayNameFor($viewer) }}</strong>
                                    <time>
                                        {{ ($latestMessage?->created_at ?? $conversation->last_message_at ?? $conversation->created_at)?->diffForHumans() }}
                                    </time>
                                </div>
                                <p>{{ Str::limit($latestMessage?->body ?? 'Belum ada pesan. Mulai obrolan pertama sekarang.', 72) }}</p>
                            </div>
                            @if ($isUnread)
                                <span class="status-dot" aria-label="Pesan baru"></span>
                            @endif
                        </button>
                    @empty
                        <div class="empty-state-card">
                            <strong>Belum ada obrolan</strong>
                            <p>Pilih anggota di bawah untuk mulai chat satu lawan satu.</p>
                        </div>
                    @endforelse
                </div>
            </section>

            <section class="tomchat-sidebar-section">
                <div class="section-head">
                    <h2>Mulai chat baru</h2>
                    <span>{{ $discoverUsers->count() }}</span>
                </div>

                <div class="contact-list">
                    @forelse ($discoverUsers as $candidate)
                        <button type="button" class="contact-card" wire:click="startConversation({{ $candidate->id }})"
                            wire:key="candidate-{{ $candidate->id }}">
                            <img src="{{ $candidate->avatarUrl() }}" alt="{{ $candidate->name }}">
                            <div class="contact-card-body">
                                <strong>{{ $candidate->name }}</strong>
                                <span>{{ $candidate->username ?: $candidate->email }}</span>
                            </div>
                            <span class="contact-card-cta">Mulai</span>
                        </button>
                    @empty
                        <div class="empty-state-card compact">
                            <strong>Tidak ada hasil</strong>
                            <p>Coba cari dengan nama pendek atau email.</p>
                        </div>
                    @endforelse
                </div>
            </section>
        </aside>
    @endunless

    <section class="tomchat-thread {{ $externalSidebar ? 'is-embedded' : '' }}">
        <header class="thread-header {{ $externalSidebar ? 'is-embedded' : '' }}">
            <div class="thread-header-main">
                @unless ($externalSidebar)
                    <button type="button" class="icon-button mobile-only" wire:click="backToList"
                        aria-label="Kembali ke daftar">
                        <span>&larr;</span>
                    </button>
                @endunless

                @if ($activeConversation)
                    <img src="{{ $activeContact?->avatarUrl() ?: $viewer->avatarUrl() }}"
                        alt="{{ $activeConversation->displayNameFor($viewer) }}">
                    <div>
                        @if ($externalSidebar)
                            <span class="landing-kicker">tomCHAT Member</span>
                        @endif
                        <strong>{{ $activeConversation->displayNameFor($viewer) }}</strong>
                        <span>{{ $activeContact?->email ?? 'Percakapan langsung' }}</span>
                    </div>
                @else
                    <div class="thread-title-only">
                        @if ($externalSidebar)
                            <span class="landing-kicker">Obrolan Member</span>
                            <strong>Pilih chat dari sidebar kiri untuk mulai ngobrol.</strong>
                            <span>Gaya utamanya mengikuti pola ChatGPT: riwayat di kiri, thread aktif di tengah, dan aksi tambahan di panel samping.</span>
                        @else
                            <strong>Selamat datang di tomCHAT</strong>
                            <span>Pilih percakapan atau mulai chat baru dari daftar anggota.</span>
                        @endif
                    </div>
                @endif
            </div>

        </header>

        @if ($activeConversation)
            @if ($messages->isNotEmpty())
                <div class="thread-messages" data-tomchat-messages>
                    @foreach ($messages as $item)
                        @php($isMine = $item->user_id === $viewer->id)

                        <article class="message-row {{ $isMine ? 'is-mine' : '' }}" wire:key="message-{{ $item->id }}">
                            @unless ($isMine)
                                <img src="{{ $item->user->avatarUrl() }}" alt="{{ $item->user->name }}">
                            @endunless

                            <div class="message-bubble">
                                <div class="message-meta">
                                    <strong>{{ $isMine ? 'Anda' : $item->user->name }}</strong>
                                    <time>{{ $item->created_at->format('H:i') }}</time>
                                </div>
                                <p>{{ $item->body }}</p>
                            </div>
                        </article>
                    @endforeach
                </div>
            @else
                <div class="thread-messages is-empty" data-tomchat-messages>
                    <div class="thread-empty-card">
                        <span class="landing-kicker">{{ $externalSidebar ? 'Percakapan Baru' : 'Ruang Chat Baru' }}</span>
                        <h2>Belum ada pesan di obrolan ini.</h2>
                        <p>
                            Mulai sapaan pertama dari kolom bawah. Begitu pesan pertama terkirim, riwayat obrolan akan
                            langsung terbentuk di sini.
                        </p>
                    </div>
                </div>
            @endif

            <form wire:submit="sendMessage" class="thread-composer">
                <label class="composer-field">
                    <span class="sr-only">Tulis pesan</span>
                    <textarea wire:model="draft" rows="1" maxlength="2000"
                        placeholder="Tulis pesan singkat. Gunakan Shift+Enter kalau mau lebih dari satu baris."></textarea>
                </label>
                @error('draft')
                    <p class="composer-error">{{ $message }}</p>
                @enderror
                <div class="composer-actions">
                    <p>
                        {{ $externalSidebar ? 'Tekan Enter untuk kirim cepat. Panel kiri menyimpan daftar chat, panel kanan membantu mencari anggota baru.' : 'Sinkronisasi ringan aktif tiap 5 detik selama halaman terbuka.' }}
                    </p>
                    <button type="submit" class="tomchat-button brand">Kirim</button>
                </div>
            </form>
        @else
            <div class="thread-empty">
                <span class="landing-kicker">{{ $externalSidebar ? 'Ruang Obrolan Siap' : 'tomCHAT Siap' }}</span>
                <h2>{{ $externalSidebar ? 'Belum ada chat yang dibuka.' : 'Belum ada percakapan yang dipilih.' }}</h2>
                <p>
                    @if ($externalSidebar)
                        Pilih daftar chat dari sisi kiri atau cari anggota di panel kanan untuk membuka percakapan pertama.
                    @else
                        Buka daftar anggota di sisi kiri untuk mulai chat satu per satu. Fondasi ini sudah siap
                        dijadikan ruang percakapan yang lebih besar pada tahap berikutnya.
                    @endif
                </p>
            </div>
        @endif
    </section>

    @if ($showDiscoverPanel)
        @if ($externalSidebar)
            <aside class="tomchat-sidepanel tomchat-sidepanel-member" id="member-chat-discover">
                <div class="sidepanel-card">
                    <span class="landing-kicker">Cari Anggota</span>
                    <h2>Mulai percakapan baru dari sini.</h2>
                    <p>
                        Panel ini jadi tempat cepat untuk menemukan orang baru, sementara riwayat obrolan tetap tinggal di
                        sidebar kiri.
                    </p>

                    <label class="tomchat-search">
                        <span>Cari nama atau username</span>
                        <input type="search" wire:model.live.debounce.300ms="search"
                            placeholder="Misal: admin, member, atau nama anggota">
                    </label>
                </div>

                <div class="sidepanel-card">
                    <div class="section-head">
                        <h2>Siap diajak chat</h2>
                        <span>{{ $discoverUsers->count() }}</span>
                    </div>

                    <div class="contact-list">
                        @forelse ($discoverUsers as $candidate)
                            <button type="button" class="contact-card" wire:click="startConversation({{ $candidate->id }})"
                                wire:key="member-candidate-{{ $candidate->id }}">
                                <img src="{{ $candidate->avatarUrl() }}" alt="{{ $candidate->name }}">
                                <div class="contact-card-body">
                                    <strong>{{ $candidate->name }}</strong>
                                    <span>{{ $candidate->username ?: $candidate->email }}</span>
                                </div>
                                <span class="contact-card-cta">Mulai</span>
                            </button>
                        @empty
                            <div class="empty-state-card compact">
                                <strong>Tidak ada anggota yang cocok</strong>
                                <p>Coba kata kunci yang lebih pendek atau buka daftar anggota publik.</p>
                            </div>
                        @endforelse
                    </div>
                </div>

            </aside>
        @else
            <aside class="tomchat-sidepanel">
                <div class="sidepanel-card">
                    <span class="landing-kicker">Arah Produk</span>
                    <h2>PWA dulu, native nanti kalau perlu.</h2>
                    <p>
                        tomCHAT sekarang sudah punya manifest, service worker, install prompt, dan shell responsif.
                        Itu cukup kuat untuk validasi produk awal tanpa loncat terlalu cepat ke app store.
                    </p>
                </div>

                <div class="sidepanel-card">
                    <div class="section-head">
                        <h2>Status ruang chat</h2>
                        <span>live</span>
                    </div>
                    <dl class="sidepanel-stats">
                        <div>
                            <dt>Percakapan aktif</dt>
                            <dd>{{ $conversations->count() }}</dd>
                        </div>
                        <div>
                            <dt>Kandidat chat</dt>
                            <dd>{{ $discoverUsers->count() }}</dd>
                        </div>
                        <div>
                            <dt>Mode aplikasi</dt>
                            <dd>PWA</dd>
                        </div>
                    </dl>
                </div>

                <div class="sidepanel-card">
                    <div class="sidepanel-actions">
                        <button type="button" class="tomchat-button brand full" data-tomchat-install>Pasang di perangkat</button>
                        <a href="{{ route('login.logout') }}" class="tomchat-button soft full">Keluar</a>
                    </div>
                </div>
            </aside>
        @endif
    @endif
</div>