{{--
    Unified CRM inbox — a polished Chatwoot/Intercom-style omnichannel shell:
    channel rail + conversation list + thread + contact panel. The Livewire logic
    (selection, send, notes, assign, status, tabs) is unchanged; this view only
    elevates the presentation. Alpine owns the client-only affordances (collapse
    state persisted in localStorage, mobile pane switching, emoji / quick-reply
    popovers); every server interaction still flows through the same wire: calls.
--}}
<div wire:poll.{{ (int) config('crm.inbox.poll_list_seconds', 10) }}s
     x-data="{
        listCollapsed: localStorage.getItem('rf-crm-list-collapsed') === '1',
        ctxCollapsed: localStorage.getItem('rf-crm-ctx-collapsed') === '1',
        mobileView: 'list',
        init() {
            this.$watch('listCollapsed', v => localStorage.setItem('rf-crm-list-collapsed', v ? '1' : '0'));
            this.$watch('ctxCollapsed', v => localStorage.setItem('rf-crm-ctx-collapsed', v ? '1' : '0'));
        }
     }">

    {{-- Page header lives in the topbar (see partials/topbar) so the shell can
         claim the full viewport height. --}}
    <div class="rf-crm-shell">

        {{-- ==========================================================
             1 · Channel rail (vertical, brand icons)
             ========================================================== --}}
        <div class="rf-crm-rail rf-scroll-hover">
            @php $allUnread = array_sum($channelUnread); @endphp
            <button type="button" wire:click="setChannel('all')"
                    class="rf-crm-rail-btn rf-crm-tip {{ $channel === 'all' ? 'rf-crm-rail-btn-active' : '' }}"
                    data-tip="{{ __('All channels') }}" aria-label="{{ __('All channels') }}"
                    style="--rf-chan:var(--color-primary-500);">
                <x-channel-icon type="all" />
                @if ($allUnread > 0)<span class="rf-crm-rail-badge">{{ $allUnread > 99 ? '99+' : $allUnread }}</span>@endif
            </button>

            <div class="rf-crm-rail-sep"></div>

            @foreach ($channels as $type => $meta)
                @php $u = $channelUnread[$type] ?? 0; @endphp
                <button type="button" wire:click="setChannel('{{ $type }}')"
                        class="rf-crm-rail-btn rf-crm-tip {{ $channel === $type ? 'rf-crm-rail-btn-active' : '' }}"
                        data-tip="{{ __($meta['label']) }}" aria-label="{{ __($meta['label']) }}"
                        style="--rf-chan:{{ $meta['color'] ?? 'var(--color-primary-500)' }};">
                    <x-channel-icon :type="$type" />
                    @if ($u > 0)<span class="rf-crm-rail-badge">{{ $u > 99 ? '99+' : $u }}</span>@endif
                </button>
            @endforeach
        </div>

        {{-- Re-open strip (desktop) — visible only when the list is collapsed. --}}
        <div class="rf-crm-reopen rf-crm-tip" x-show="listCollapsed" x-cloak
             @click="listCollapsed = false" data-tip="{{ __('Show conversations') }}">
            <i data-lucide="chevron-right" style="width:16px;height:16px;"></i>
        </div>

        {{-- ==========================================================
             2 · Conversation list
             ========================================================== --}}
        <div class="rf-crm-list" :class="{ 'rf-crm-list-collapsed': listCollapsed, 'rf-crm-mobile-hide': mobileView !== 'list' }">
            <div class="rf-crm-list-head">
                <div class="flex items-center justify-between gap-2">
                    <span class="rf-crm-list-title">{{ __('Conversations') }}</span>
                    <div class="flex items-center gap-1">
                        <label for="crm-assign-filter" class="sr-only">{{ __('Filter') }}</label>
                        <select id="crm-assign-filter" wire:model.live="filter" class="rf-select rf-crm-mobile-hide" style="width:auto;padding:5px 26px 5px 9px;font-size:12px;">
                            <option value="all">{{ __('All') }}</option>
                            <option value="mine">{{ __('Mine') }}</option>
                            <option value="unassigned">{{ __('Unassigned') }}</option>
                        </select>
                        <button type="button" class="rf-crm-compose-tool rf-crm-mobile-hide" @click="listCollapsed = true"
                                title="{{ __('Collapse list') }}" aria-label="{{ __('Collapse list') }}">
                            <i data-lucide="panel-left-close" style="width:17px;height:17px;"></i>
                        </button>
                    </div>
                </div>

                <div class="rf-crm-search">
                    <i data-lucide="search"></i>
                    <input type="text" wire:model.live.debounce.400ms="search"
                           class="rf-input" placeholder="{{ __('Search conversations…') }}"
                           data-rf-noautofill autocomplete="off">
                </div>

                <div class="rf-crm-segment">
                    @foreach (['open' => __('Open'), 'pending' => __('Pending'), 'resolved' => __('Resolved')] as $key => $label)
                        <button type="button" wire:click="setTab('{{ $key }}')"
                                class="rf-crm-seg-btn {{ $tab === $key ? 'rf-crm-seg-btn-active' : '' }}">
                            {{ $label }}
                            <span class="rf-crm-seg-count">{{ $counts[$key] ?? 0 }}</span>
                        </button>
                    @endforeach
                </div>
            </div>

            {{-- Scroll-event based infinite load (Linear/Chatwoot pattern).
                 Triggers loadMore() only when the user actually scrolls near the bottom.
                 Uses $wire.hasMore (Livewire 3 reactive property) + a local `busy` flag
                 to prevent concurrent calls. No IntersectionObserver → no re-trigger loop. --}}
            <div class="rf-crm-list-scroll rf-scroll-hover"
                 x-data="{ busy: false }"
                 @scroll.passive="
                     if (busy || !$wire.hasMore) return;
                     const el = $el;
                     if (el.scrollTop + el.clientHeight < el.scrollHeight - 150) return;
                     busy = true;
                     $wire.loadMore().then(() => { busy = false; });
                 ">
                @forelse ($conversations as $c)
                    @php
                        $ctype = $c->channel?->type;
                        $cmeta = $channels[$ctype] ?? null;
                    @endphp
                    <button type="button" wire:click="selectConversation({{ $c->id }})" @click="mobileView = 'thread'"
                            class="rf-crm-item {{ $active && $active->id === $c->id ? 'rf-crm-item-active' : '' }}"
                            wire:key="convo-{{ $c->id }}">
                        <span class="rf-crm-ava">
                            <img src="{{ $c->contact?->uid ? route('crm.avatar', $c->contact->uid) : \App\Support\Avatar::dataUri($c->contact?->name ?? '?') }}" alt="">
                            <span class="rf-crm-ava-ch" title="{{ __($cmeta['label'] ?? ($ctype ?? '')) }}"
                                  style="--rf-chan:{{ $cmeta['color'] ?? 'var(--color-primary-500)' }};">
                                <x-channel-icon :type="$ctype ?? 'webchat'" />
                            </span>
                        </span>

                        <span class="rf-crm-item-body">
                            <span class="rf-crm-item-row1">
                                <span class="rf-crm-item-name">{{ $c->contact?->name ?? __('Unknown') }}</span>
                                <span class="rf-crm-item-time">{{ $c->last_message_at?->diffForHumans(null, true) }}</span>
                            </span>
                            <span class="rf-crm-item-row2">
                                <span class="rf-crm-item-preview">{{ $c->last_message_preview ?: __('No messages yet') }}</span>
                                @if ($c->unread_count > 0)
                                    <span class="rf-crm-item-unread">{{ $c->unread_count > 99 ? '99+' : $c->unread_count }}</span>
                                @endif
                            </span>
                            <span class="rf-crm-item-meta">
                                @forelse ($c->labels->take(2) as $label)
                                    <span class="rf-crm-label-chip"
                                          style="color:{{ $label->color }};background:color-mix(in oklab, {{ $label->color }} 14%, transparent);border-color:color-mix(in oklab, {{ $label->color }} 34%, transparent);">
                                        <span class="rf-crm-label-dot" style="background:{{ $label->color }};"></span>{{ $label->name }}
                                    </span>
                                @empty
                                @endforelse
                                @if ($c->assignee)
                                    <span class="rf-crm-item-tag" style="margin-left:auto;">
                                        <i data-lucide="user-round"></i>{{ \Illuminate\Support\Str::of($c->assignee->name)->explode(' ')->first() }}
                                    </span>
                                @endif
                            </span>
                        </span>
                    </button>
                @empty
                    <div class="rf-crm-list-empty">
                        <i data-lucide="inbox" style="width:30px;height:30px;"></i>
                        <p class="text-sm">{{ __('No conversations in this view.') }}</p>
                    </div>
                @endforelse

                @if ($hasMore)
                    {{-- Spinner at the bottom of the scroll container (visual only —
                         the scroll event above drives the actual loadMore call). --}}
                    <div class="rf-crm-list-sentinel">
                        <svg class="rf-crm-list-spinner" viewBox="0 0 24 24" fill="none">
                            <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-dasharray="32" stroke-dashoffset="12"/>
                        </svg>
                    </div>
                @endif
            </div>
        </div>

        {{-- ==========================================================
             3 · Thread
             ========================================================== --}}
        <div class="rf-crm-thread" :class="{ 'rf-crm-mobile-hide': mobileView !== 'thread' }">
            @if ($active)
                @php $atype = $active->channel?->type; @endphp
                {{-- Header --}}
                <div class="rf-crm-thead">
                    <button type="button" class="rf-crm-compose-tool rf-crm-mobile-only" @click="mobileView = 'list'"
                            aria-label="{{ __('Back') }}">
                        <i data-lucide="chevron-left" style="width:18px;height:18px;"></i>
                    </button>
                    <img src="{{ $active->contact?->uid ? route('crm.avatar', $active->contact->uid) : \App\Support\Avatar::dataUri($active->contact?->name ?? '?') }}" class="rf-avatar" style="width:38px;height:38px;" alt="">
                    <div class="min-w-0 flex-1">
                        <p class="rf-crm-thead-name truncate">{{ $active->contact?->name ?? __('Unknown') }}</p>
                        <p class="rf-crm-thead-sub">
                            <x-channel-icon :type="$atype ?? 'webchat'" style="width:12px;height:12px;color:{{ $channels[$atype]['color'] ?? 'var(--color-primary-500)' }};" />
                            {{ __('via :channel', ['channel' => __($channels[$atype]['label'] ?? ($atype ?? ''))]) }}
                            @if ($active->supportTicket) · {{ __('Ticket #:id', ['id' => $active->supportTicket->id]) }} @endif
                        </p>
                    </div>

                    <div class="rf-crm-thead-actions">
                        {{-- Snooze (design affordance) --}}
                        <button type="button" class="rf-crm-compose-tool rf-crm-tip rf-crm-tip-down"
                                data-tip="{{ __('Snooze') }}"
                                @click="$dispatch('toast', { type: 'info', message: '{{ __('Snooze is available once the channel is connected.') }}' })">
                            <i data-lucide="clock" style="width:17px;height:17px;"></i>
                        </button>

                        {{-- Assign menu --}}
                        <div class="relative" x-data="{ open: false }">
                            <button type="button" @click="open = !open"
                                    class="rf-crm-compose-tool rf-crm-tip rf-crm-tip-down" data-tip="{{ __('Assign') }}">
                                <i data-lucide="user-plus" style="width:17px;height:17px;"></i>
                            </button>
                            <div x-show="open" x-cloak @click.outside="open = false" x-transition class="rf-crm-assign-menu">
                                <button type="button" wire:click="assign(null)" @click="open = false"
                                        class="rf-menu-item {{ ! $active->assigned_to ? 'rf-menu-item-active' : '' }}">
                                    <i data-lucide="user-x" style="width:15px;height:15px;"></i>{{ __('Unassigned') }}
                                </button>
                                <div class="rf-menu-sep"></div>
                                @foreach ($staff as $s)
                                    <button type="button" wire:click="assign({{ $s->id }})" @click="open = false"
                                            class="rf-menu-item {{ $active->assigned_to === $s->id ? 'rf-menu-item-active' : '' }}">
                                        <img src="{{ \App\Support\Avatar::dataUri($s->name) }}" class="rf-avatar" style="width:18px;height:18px;" alt="">
                                        {{ $s->name }}
                                    </button>
                                @endforeach
                            </div>
                        </div>

                        {{-- AI agent + bot state (in-thread controls) --}}
                        @php $botAgent = $active->aiAgent; @endphp
                        @if ($active->is_bot && $active->is_bot_paused)
                            <span class="rf-chip rf-crm-mobile-hide" style="color:var(--color-warning);background:color-mix(in oklab, var(--color-warning) 12%, transparent);border-color:color-mix(in oklab, var(--color-warning) 30%, transparent);">
                                <i data-lucide="pause" style="width:12px;height:12px;"></i>{{ __('Bot paused') }}
                            </span>
                        @elseif ($active->is_bot)
                            <span class="rf-chip rf-crm-mobile-hide" style="color:var(--color-success);background:color-mix(in oklab, var(--color-success) 12%, transparent);border-color:color-mix(in oklab, var(--color-success) 30%, transparent);">
                                <i data-lucide="bot" style="width:12px;height:12px;"></i>{{ $botAgent?->name ?? __('Bot on') }}
                            </span>
                        @endif

                        {{-- Assign AI agent --}}
                        <div class="relative" x-data="{ open: false }">
                            <button type="button" @click="open = !open"
                                    class="rf-crm-compose-tool rf-crm-tip rf-crm-tip-down" data-tip="{{ __('AI agent') }}">
                                <i data-lucide="bot" style="width:17px;height:17px;"></i>
                            </button>
                            <div x-show="open" x-cloak @click.outside="open = false" x-transition class="rf-crm-assign-menu">
                                <button type="button" wire:click="assignAgent(null)" @click="open = false"
                                        class="rf-menu-item {{ ! $active->ai_agent_id ? 'rf-menu-item-active' : '' }}">
                                    <i data-lucide="user-round" style="width:15px;height:15px;"></i>{{ __('No AI agent') }}
                                </button>
                                <div class="rf-menu-sep"></div>
                                @forelse ($aiAgents as $agent)
                                    <button type="button" wire:click="assignAgent({{ $agent->id }})" @click="open = false"
                                            class="rf-menu-item {{ $active->ai_agent_id === $agent->id ? 'rf-menu-item-active' : '' }}">
                                        <i data-lucide="sparkles" style="width:15px;height:15px;"></i>{{ $agent->name }}
                                    </button>
                                @empty
                                    <p class="rf-hint" style="padding:8px 10px;">{{ __('No AI agents configured.') }}</p>
                                @endforelse
                            </div>
                        </div>

                        {{-- Pause / resume bot --}}
                        @if ($active->is_bot)
                            <button type="button" wire:click="toggleBot"
                                    class="rf-crm-compose-tool rf-crm-tip rf-crm-tip-down"
                                    data-tip="{{ $active->is_bot_paused ? __('Resume bot') : __('Pause bot') }}">
                                <i data-lucide="{{ $active->is_bot_paused ? 'play' : 'pause' }}" style="width:17px;height:17px;"></i>
                            </button>
                        @endif

                        {{-- Status --}}
                        @if ($active->status !== 'resolved')
                            <button type="button" wire:click="setStatus('resolved')" class="rf-btn rf-btn-secondary rf-btn-sm"
                                    @rfconfirm(
                                        title:  __('Resolve conversation'),
                                        text:   __('The conversation will be marked as resolved. You can reopen it at any time.'),
                                        action: __('Resolve'),
                                        tone:   'warn',
                                    )>
                                <i data-lucide="check" style="width:15px;height:15px;"></i>{{ __('Resolve') }}
                            </button>
                        @else
                            <button type="button" wire:click="setStatus('open')" class="rf-btn rf-btn-secondary rf-btn-sm">
                                <i data-lucide="rotate-ccw" style="width:15px;height:15px;"></i>{{ __('Reopen') }}
                            </button>
                        @endif

                        {{-- More actions. The destructive item lives behind an
                             overflow menu on purpose: beside Resolve it would be
                             one mis-click from erasing a customer's history. --}}
                        @if ($canSend)
                            <div class="relative" x-data="{ open: false }">
                                <button type="button" @click="open = !open"
                                        class="rf-crm-compose-tool rf-crm-tip rf-crm-tip-down" data-tip="{{ __('More') }}"
                                        aria-label="{{ __('More actions') }}">
                                    <i data-lucide="more-horizontal" style="width:17px;height:17px;"></i>
                                </button>
                                <div x-show="open" x-cloak @click.outside="open = false" x-transition class="rf-crm-assign-menu">
                                    <button type="button" wire:click="deleteConversation({{ $active->id }})" @click="open = false"
                                            class="rf-menu-item rf-menu-item-danger"
                                            @rfconfirm(
                                                title:  __('Delete this conversation'),
                                                text:   __('The whole history of this chat is erased — every message, internal note and automation run.'),
                                                note:   __('The contact is kept. If they write again it arrives as a brand new conversation and your automations run from the start.'),
                                                action: __('Delete conversation'),
                                            )>
                                        <i data-lucide="trash-2" style="width:15px;height:15px;"></i>{{ __('Delete conversation') }}
                                    </button>
                                </div>
                            </div>
                        @endif

                        {{-- Toggle contact panel (desktop) --}}
                        <button type="button" class="rf-crm-compose-tool rf-crm-mobile-hide" @click="ctxCollapsed = !ctxCollapsed"
                                :title="ctxCollapsed ? '{{ __('Show contact') }}' : '{{ __('Hide contact') }}'">
                            <i data-lucide="panel-right-open" style="width:17px;height:17px;"></i>
                        </button>
                        {{-- Contact info (mobile) --}}
                        <button type="button" class="rf-crm-compose-tool rf-crm-mobile-only" @click="mobileView = 'contact'"
                                aria-label="{{ __('Contact details') }}">
                            <i data-lucide="info" style="width:18px;height:18px;"></i>
                        </button>
                    </div>
                </div>

                {{-- Messages — no wire:poll here: Livewire allows a single poll per
                     component (the root has it). A second poll stacks on every morph
                     and floods /livewire/update. The root poll refreshes this pane too. --}}
                <div class="rf-crm-msgs rf-scroll-hover">
                    @php $lastDate = null; $lastDir = null; @endphp
                    @forelse ($messages as $msg)
                        @php $msgDate = $msg->created_at?->toDateString(); @endphp
                        @if ($msgDate !== $lastDate)
                            <div class="rf-crm-daysep">
                                <span>
                                    @if ($msg->created_at?->isToday()) {{ __('Today') }}
                                    @elseif ($msg->created_at?->isYesterday()) {{ __('Yesterday') }}
                                    @else {{ rf_date($msg->created_at) }}
                                    @endif
                                </span>
                            </div>
                            @php $lastDate = $msgDate; $lastDir = null; @endphp
                        @endif

                        @if ($msg->is_note)
                            <div class="rf-crm-note" wire:key="msg-{{ $msg->id }}">
                                <span class="rf-crm-note-head"><i data-lucide="lock"></i>{{ __('Internal note') }}</span>
                                <div style="margin-top:3px;white-space:pre-wrap;word-break:break-word;">{{ $msg->content }}</div>
                                <div class="rf-crm-bubble-time" style="margin-top:3px;">{{ rf_date($msg->created_at, 'g:i A') }}</div>
                            </div>
                            @php $lastDir = null; @endphp
                        @else
                            @php $grouped = $lastDir === $msg->direction; @endphp
                            <div class="rf-crm-msg {{ $msg->direction === 'outbound' ? 'rf-crm-msg-out' : 'rf-crm-msg-in' }} {{ $grouped ? 'rf-crm-msg-grouped' : 'rf-crm-msg-fresh' }}"
                                 wire:key="msg-{{ $msg->id }}">
                                <div class="rf-crm-bubble {{ $msg->direction === 'outbound' ? 'rf-crm-bubble-out' : 'rf-crm-bubble-in' }}">
                                    @if ($msg->media_url)
                                        @if ($msg->type === 'image')
                                            <a href="{{ $msg->media_url }}" target="_blank" rel="noopener" style="display:block;margin-bottom:4px;">
                                                <img src="{{ $msg->media_url }}" alt="{{ __('Image attachment') }}" loading="lazy"
                                                     style="max-width:240px;max-height:280px;border-radius:10px;display:block;">
                                            </a>
                                        @elseif ($msg->type === 'video')
                                            <video controls preload="metadata" style="max-width:240px;border-radius:10px;display:block;margin-bottom:4px;">
                                                <source src="{{ $msg->media_url }}">
                                            </video>
                                        @elseif ($msg->type === 'audio')
                                            <audio controls preload="none" src="{{ $msg->media_url }}" style="max-width:240px;display:block;margin-bottom:4px;"></audio>
                                        @else
                                            <a href="{{ $msg->media_url }}" target="_blank" rel="noopener"
                                               style="display:inline-flex;align-items:center;gap:6px;margin-bottom:4px;text-decoration:underline;">
                                                <i data-lucide="paperclip" style="width:14px;height:14px;"></i>{{ __('Attachment') }}
                                            </a>
                                        @endif
                                    @endif
                                    @if (filled($msg->content))
                                        <div class="rf-crm-bubble-text">{{ $msg->content }}</div>
                                    @endif
                                    <div class="rf-crm-bubble-foot">
                                        <span class="rf-crm-bubble-time">{{ rf_date($msg->created_at, 'g:i A') }}</span>
                                        @if ($msg->direction === 'outbound')
                                            <span class="rf-crm-tick {{ $msg->status === 'read' ? 'rf-crm-tick-read' : '' }}">
                                                <i data-lucide="{{ $msg->status === 'pending' ? 'clock' : ($msg->status === 'failed' ? 'alert-circle' : ($msg->status === 'sent' ? 'check' : 'check-check')) }}"></i>
                                            </span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            @php $lastDir = $msg->direction; @endphp
                        @endif
                    @empty
                        <div class="rf-crm-empty">
                            <span class="rf-crm-empty-badge"><i data-lucide="message-square-dashed"></i></span>
                            <p class="rf-crm-empty-title">{{ __('No messages yet') }}</p>
                            <p class="rf-crm-empty-sub">{{ __('Say hello — your first reply starts the conversation.') }}</p>
                        </div>
                    @endforelse
                </div>

                {{-- Composer. Hidden entirely without crm.send: a viewer who may read
                     the inbox but not write into it is never shown a Send button that
                     the server would refuse. --}}
                @if (! $canSend)
                    <div class="rf-crm-composer">
                        <div class="rf-crm-resolved-bar">
                            <i data-lucide="eye" style="width:16px;height:16px;"></i>
                            <span class="flex-1">{{ __('You have read-only access to this inbox.') }}</span>
                        </div>
                    </div>
                @elseif ($active->status !== 'resolved')
                    <div class="rf-crm-composer"
                         x-data="{
                            emoji: false,
                            qr: false,
                            emojis: ['😀','😂','😊','😍','🥰','😎','🤩','😅','😅','🤗','😏','😒','😔','😢','😭','😤','😡','🤬','😱','😨','😰','🤔','🤭','🤫','🤥','😶','😐','😑','😬','🙄','😴','🤤','🤢','🤧','🥶','🥵','😵','🤯','🥳','🤠','😈','💀','👻','👽','🤖','💩','😺','😸','😹','🙈','🙉','🙊','👋','🤚','✋','🖐','👌','✌️','🤞','🤟','🤘','🤙','👈','👉','☝️','👍','👎','✊','👊','🤛','🤜','👏','🙌','🤲','🙏','❤️','🧡','💛','💚','💙','💜','🖤','🤍','💔','💯','🔥','⭐','✅','❌','🎉','🎊','🎁','🚀','💡','💬','📎','📌','⏰','📈','🏆','🎯','💰'],
                            insert(char) {
                                const ta = this.$refs.replyInput;
                                if (!ta) return;
                                const s = ta.selectionStart ?? ta.value.length;
                                const e = ta.selectionEnd ?? s;
                                ta.value = ta.value.slice(0, s) + char + ta.value.slice(e);
                                ta.dispatchEvent(new Event('input', { bubbles: true }));
                                ta.focus();
                                ta.selectionStart = ta.selectionEnd = s + char.length;
                            }
                         }">
                        {{-- Reply / Note toggle --}}
                        <div class="rf-crm-compose-toggle">
                            <button type="button" wire:click="$set('asNote', false)"
                                    class="rf-crm-compose-tab rf-crm-compose-tab-reply {{ ! $asNote ? 'rf-crm-compose-tab-active' : '' }}">
                                <i data-lucide="reply"></i>{{ __('Reply') }}
                            </button>
                            <button type="button" wire:click="$set('asNote', true)"
                                    class="rf-crm-compose-tab rf-crm-compose-tab-note {{ $asNote ? 'rf-crm-compose-tab-active' : '' }}">
                                <i data-lucide="lock"></i>{{ __('Internal note') }}
                            </button>
                        </div>

                        @php
                            $waWindowClosed = ! $asNote
                                && ($active->channel?->type === 'whatsapp')
                                && ! ($windowStatus['in_window'] ?? true);
                        @endphp

                        @if ($waWindowClosed)
                            {{-- WhatsApp 24h window is closed: template picker replaces the free-form textarea. --}}
                            <div class="rf-crm-wa-window">
                                <div class="rf-crm-wa-window-banner">
                                    <i data-lucide="clock-x" style="width:15px;height:15px;flex-shrink:0;"></i>
                                    <span>{{ __('WhatsApp 24h window is closed — only approved templates can be sent.') }}</span>
                                </div>

                                @if ($waTemplates->isEmpty())
                                    <p class="text-xs" style="color:var(--color-text-muted);">
                                        {{ __('No approved templates found. Sync them from') }}
                                        <a href="{{ route(($shell === 'layouts.crm-panel' ? 'panel' : 'admin').'.crm.channels') }}"
                                           style="color:var(--color-primary-500);text-decoration:underline;">{{ __('Channels') }}</a>.
                                    </p>
                                @else
                                    <div class="space-y-2">
                                        <select wire:model.live="waTemplateId" id="crm-wa-tpl" name="crm_wa_tpl" class="rf-select" data-rf-noautofill>
                                            <option value="">{{ __('Select a template…') }}</option>
                                            @foreach ($waTemplates as $tpl)
                                                <option value="{{ $tpl->id }}">{{ $tpl->name }} ({{ $tpl->language }})</option>
                                            @endforeach
                                        </select>

                                        @if ($waTemplateId)
                                            @php $activeTpl = $waTemplates->firstWhere('id', (int) $waTemplateId); @endphp
                                            @if ($activeTpl && $activeTpl->variables_count > 0)
                                                @for ($n = 1; $n <= $activeTpl->variables_count; $n++)
                                                    @php $varHint = '{{' . $n . '}}'; @endphp
                                                    <input type="text" wire:model="waTemplateVars.{{ $n }}"
                                                           id="crm-wa-var-{{ $n }}" name="crm_wa_var_{{ $n }}"
                                                           class="rf-input" data-rf-noautofill autocomplete="off"
                                                           placeholder="{{ $varHint }}">
                                                @endfor
                                            @endif
                                        @endif
                                    </div>

                                    <div class="flex justify-end" style="margin-top:8px;">
                                        <button type="button" wire:click="sendTemplate" wire:loading.attr="disabled"
                                                class="rf-btn rf-btn-primary rf-btn-sm"
                                                {{ blank($waTemplateId) ? 'disabled' : '' }}>
                                            <i data-lucide="send-horizontal" style="width:15px;height:15px;"></i>
                                            {{ __('Send template') }}
                                        </button>
                                    </div>
                                @endif
                            </div>
                        @else
                            <div class="rf-crm-compose-box {{ $asNote ? 'rf-crm-compose-box-note' : '' }}">
                                <textarea wire:model="reply" x-ref="replyInput" rows="2"
                                          @keydown.enter="if (!$event.shiftKey) { $event.preventDefault(); $wire.send(); }"
                                          placeholder="{{ $asNote ? __('Write an internal note…') : __('Type your reply…') }}"></textarea>

                                <div class="rf-crm-compose-bar">
                                    {{-- Emoji picker (anchored to bar left edge, never clips viewport) --}}
                                    <div x-show="emoji" x-cloak @click.outside="emoji = false" x-transition class="rf-crm-emoji-pop">
                                        <div class="rf-crm-emoji-grid rf-scroll-hover">
                                            <template x-for="e in emojis" :key="e">
                                                <button type="button" @click="insert(e); emoji = false" x-text="e"></button>
                                            </template>
                                        </div>
                                    </div>
                                    {{-- Emoji toggle --}}
                                    <button type="button" class="rf-crm-compose-tool" @click="emoji = !emoji; qr = false" title="{{ __('Emoji') }}">
                                        <i data-lucide="smile"></i>
                                    </button>

                                    {{-- Quick replies --}}
                                    <div class="relative">
                                        <button type="button" class="rf-crm-compose-tool" @click="qr = !qr; emoji = false" title="{{ __('Quick replies') }}">
                                            <i data-lucide="zap"></i>
                                        </button>
                                        <div x-show="qr" x-cloak @click.outside="qr = false" x-transition class="rf-crm-pop">
                                            <div class="rf-crm-qr rf-scroll-hover">
                                                @forelse ($quickReplies as $qr)
                                                    <button type="button" wire:click="useQuickReply({{ $qr->id }})" @click="qr = false"
                                                            class="rf-crm-qr-item">
                                                        <span class="rf-crm-qr-name">
                                                            {{ $qr->name }}
                                                            @if ($qr->shortcut)<span class="rf-crm-qr-shortcut">/{{ $qr->shortcut }}</span>@endif
                                                        </span>
                                                        <span class="rf-crm-qr-body">{{ $qr->content }}</span>
                                                    </button>
                                                @empty
                                                    <p class="rf-hint" style="padding:8px 10px;">{{ __('No quick replies yet.') }}</p>
                                                @endforelse
                                            </div>
                                        </div>
                                    </div>

                                    {{-- Attach (design affordance) --}}
                                    <button type="button" class="rf-crm-compose-tool" title="{{ __('Attach') }}"
                                            @click="$dispatch('toast', { type: 'info', message: '{{ __('Attachments are available once the channel is connected.') }}' })">
                                        <i data-lucide="paperclip"></i>
                                    </button>

                                    {{-- AI assist (design affordance) --}}
                                    <button type="button" class="rf-crm-compose-tool" title="{{ __('AI assist') }}"
                                            @click="$dispatch('toast', { type: 'info', message: '{{ __('Configure an AI agent to draft replies for you.') }}' })">
                                        <i data-lucide="sparkles"></i>
                                    </button>

                                    <span class="ml-auto flex items-center gap-2">
                                        <span class="rf-crm-compose-hint rf-crm-mobile-hide">
                                            <span class="rf-crm-kbd">⏎</span>
                                        </span>
                                        <button type="button" wire:click="send" wire:loading.attr="disabled"
                                                class="rf-btn {{ $asNote ? 'rf-btn-secondary' : 'rf-btn-primary' }} rf-btn-sm">
                                            <i data-lucide="{{ $asNote ? 'lock' : 'send' }}" style="width:15px;height:15px;"></i>
                                            {{ $asNote ? __('Add note') : __('Send') }}
                                        </button>
                                    </span>
                                </div>
                            </div>
                            @error('reply') <p class="rf-hint mt-1" style="color:var(--color-danger);">{{ $message }}</p> @enderror
                        @endif
                    </div>
                @else
                    <div class="rf-crm-composer">
                        <div class="rf-crm-resolved-bar">
                            <i data-lucide="check-circle" style="width:16px;height:16px;"></i>
                            <span class="flex-1">{{ __('This conversation is resolved.') }}</span>
                            <button type="button" wire:click="setStatus('open')" class="rf-btn rf-btn-secondary rf-btn-sm">{{ __('Reopen') }}</button>
                        </div>
                    </div>
                @endif
            @else
                {{-- Empty state --}}
                <div class="rf-crm-empty">
                    <span class="rf-crm-empty-badge"><i data-lucide="messages-square"></i></span>
                    <p class="rf-crm-empty-title">{{ __('Select a conversation') }}</p>
                    <p class="rf-crm-empty-sub">{{ __('Pick a conversation from the list to read the thread and reply across any channel.') }}</p>
                </div>
            @endif
        </div>

        {{-- ==========================================================
             4 · Contact / context panel
             ========================================================== --}}
        <div class="rf-crm-ctx" :class="{ 'rf-crm-ctx-collapsed': ctxCollapsed, 'rf-crm-mobile-hide': mobileView !== 'contact' }">
            @if ($active)
                @php $contact = $active->contact; @endphp
                {{-- Back to thread (mobile) --}}
                <div class="rf-crm-thead rf-crm-mobile-only">
                    <button type="button" class="rf-crm-compose-tool" @click="mobileView = 'thread'" aria-label="{{ __('Back') }}">
                        <i data-lucide="chevron-left" style="width:18px;height:18px;"></i>
                    </button>
                    <span class="rf-crm-thead-name">{{ __('Contact') }}</span>
                </div>
                <div class="rf-crm-ctx-scroll rf-scroll-hover">
                    {{-- Identity card --}}
                    <div class="rf-crm-ctx-card">
                        <img src="{{ $contact?->uid ? route('crm.avatar', $contact->uid) : \App\Support\Avatar::dataUri($contact?->name ?? '?') }}" alt="">
                        <div>
                            <div class="rf-crm-ctx-name">{{ $contact?->name ?? __('Unknown') }}</div>
                            <div class="rf-crm-ctx-sub">{{ $contact?->email ?? __($channels[$active->channel?->type]['label'] ?? '') }}</div>
                        </div>
                        <button type="button" class="rf-btn rf-btn-secondary rf-btn-sm" style="margin-top:4px;"
                                @click="$dispatch('toast', { type: 'info', message: '{{ __('Open the Contacts screen to edit this contact.') }}' })">
                            <i data-lucide="external-link" style="width:14px;height:14px;"></i>{{ __('View contact') }}
                        </button>
                    </div>

                    {{-- Labels — tagging a thread here fires the label_added automation
                         event (a human UI action), so a flow can react to it. --}}
                    <div class="rf-crm-ctx-sec">
                        <div class="rf-crm-ctx-h" style="display:flex;align-items:center;justify-content:space-between;gap:6px;">
                            <span>{{ __('Labels') }}</span>
                            @if ($canSend && $allLabels->isNotEmpty())
                                @php $appliedLabelIds = $active->labels->pluck('id')->all(); @endphp
                                <div class="relative" x-data="{ open: false }">
                                    <button type="button" @click="open = !open" class="rf-btn rf-btn-ghost rf-btn-sm" title="{{ __('Add label') }}">
                                        <i data-lucide="plus" style="width:14px;height:14px;"></i>
                                    </button>
                                    <div x-show="open" x-cloak @click.outside="open = false" x-transition class="rf-crm-assign-menu" style="max-height:240px;overflow-y:auto;">
                                        @forelse ($allLabels->whereNotIn('id', $appliedLabelIds) as $l)
                                            <button type="button" wire:click="addLabel({{ $l->id }})" @click="open = false" class="rf-menu-item">
                                                <span class="rf-crm-label-dot" style="background:{{ $l->color }};"></span>{{ $l->name }}
                                            </button>
                                        @empty
                                            <p class="rf-hint" style="padding:8px 10px;">{{ __('All labels applied.') }}</p>
                                        @endforelse
                                    </div>
                                </div>
                            @endif
                        </div>
                        <div class="rf-crm-ctx-chips">
                            @forelse ($active->labels as $label)
                                <span class="rf-crm-label-chip"
                                      style="color:{{ $label->color }};background:color-mix(in oklab, {{ $label->color }} 14%, transparent);border-color:color-mix(in oklab, {{ $label->color }} 34%, transparent);">
                                    <span class="rf-crm-label-dot" style="background:{{ $label->color }};"></span>{{ $label->name }}
                                    @if ($canSend)
                                        <button type="button" wire:click="removeLabel({{ $label->id }})" title="{{ __('Remove label') }}"
                                                style="margin-left:3px;display:inline-flex;align-items:center;background:none;border:0;padding:0;cursor:pointer;color:inherit;opacity:.65;">
                                            <i data-lucide="x" style="width:11px;height:11px;"></i>
                                        </button>
                                    @endif
                                </span>
                            @empty
                                <span class="rf-hint">{{ __('No labels yet.') }}</span>
                            @endforelse
                        </div>
                    </div>

                    {{-- Contact details --}}
                    <div class="rf-crm-ctx-sec">
                        <div class="rf-crm-ctx-h">{{ __('Contact details') }}</div>
                        <div class="rf-crm-ctx-row"><i data-lucide="user-round"></i><span>{{ $contact?->name ?? '—' }}</span></div>
                        <div class="rf-crm-ctx-row"><i data-lucide="mail"></i><span>{{ $contact?->email ?? '—' }}</span></div>
                        <div class="rf-crm-ctx-row"><i data-lucide="phone"></i><span>{{ $contact?->phone ?? '—' }}</span></div>
                        <div class="rf-crm-ctx-row">
                            <i data-lucide="{{ $channels[$active->channel?->type]['icon'] ?? 'message-square' }}"></i>
                            <span>{{ __($channels[$active->channel?->type]['label'] ?? '—') }}</span>
                        </div>
                        @if ($contact?->user_id)
                            <div class="rf-crm-ctx-row"><i data-lucide="badge-check"></i><span class="rf-mono">{{ __('Client #:id', ['id' => $contact->user_id]) }}</span></div>
                        @endif
                    </div>

                    {{-- Opt-in --}}
                    <div class="rf-crm-ctx-sec">
                        <div class="rf-crm-ctx-h">{{ __('Opt-in') }}</div>
                        <div class="rf-crm-ctx-chips">
                            @if ($contact?->phone)
                                <span class="rf-chip"><i data-lucide="check" style="width:12px;height:12px;color:var(--color-success);"></i>{{ __('WhatsApp') }}</span>
                            @endif
                            @if ($contact?->email)
                                <span class="rf-chip"><i data-lucide="check" style="width:12px;height:12px;color:var(--color-success);"></i>{{ __('Email') }}</span>
                            @endif
                            @unless ($contact?->phone || $contact?->email)
                                <span class="rf-hint">{{ __('No opt-in recorded.') }}</span>
                            @endunless
                        </div>
                    </div>

                    {{-- Internal notes --}}
                    <div class="rf-crm-ctx-sec">
                        <div class="rf-crm-ctx-h">{{ __('Internal notes') }}</div>
                        @php $notes = $messages->where('is_note', true); @endphp
                        @forelse ($notes->take(5) as $note)
                            <div class="rf-crm-ctx-note">
                                {{ \Illuminate\Support\Str::limit($note->content, 160) }}
                                <div class="rf-crm-bubble-time" style="margin-top:4px;">{{ $note->created_at?->diffForHumans() }}</div>
                            </div>
                        @empty
                            <span class="rf-hint">{{ __('No internal notes yet.') }}</span>
                        @endforelse
                    </div>

                    @if ($active->supportTicket)
                        <div class="rf-alert rf-alert-info" style="margin-top:6px;">
                            <i data-lucide="life-buoy" style="width:16px;height:16px;"></i>
                            {{ __('Support ticket — replies post to the ticket thread.') }}
                        </div>
                    @endif
                </div>
            @else
                <div class="rf-crm-ctx-scroll" style="display:flex;align-items:center;justify-content:center;">
                    <p class="rf-hint text-center">{{ __('Contact details appear here.') }}</p>
                </div>
            @endif
        </div>
    </div>
</div>