@if($selectedUser ?? false)
<div class="chat-header-menu-wrap">
    <button type="button" class="menu-btn" id="chat-header-menu-btn" title="Menu" aria-expanded="false" aria-haspopup="true">
        <i class="fa-solid fa-ellipsis-vertical"></i>
    </button>
    <div id="chat-header-dropdown" class="chat-header-dropdown" hidden>
        <button type="button" class="chat-header-menu-item" data-action="view-status" id="chat-header-view-status-item">
            <i class="fa-solid fa-circle-notch"></i> View status
        </button>
        <button type="button" class="chat-header-menu-item" data-action="view-profile">
            <i class="fa-solid fa-circle-user"></i> View profile
        </button>
        <button type="button" class="chat-header-menu-item" data-action="search-chat">
            <i class="fa-solid fa-magnifying-glass"></i> Search
        </button>
        <button type="button" class="chat-header-menu-item" data-action="media">
            <i class="fa-solid fa-image"></i> Media
        </button>
        <button type="button" class="chat-header-menu-item" data-action="mute-notifications">
            <i class="fa-solid fa-bell-slash"></i> Mute notifications
        </button>
        <button type="button" class="chat-header-menu-item" data-action="wallpaper">
            <i class="fa-solid fa-palette"></i> Wallpaper
        </button>
        <button type="button" class="chat-header-menu-item" data-action="export-chat">
            <i class="fa-solid fa-file-export"></i> Export chat
        </button>
        <button type="button" class="chat-header-menu-item" data-action="block-user">
            <i class="fa-solid fa-ban"></i> Block user
        </button>
        <button type="button" class="chat-header-menu-item" data-action="report-user">
            <i class="fa-solid fa-flag"></i> Report user
        </button>
        <button type="button" class="chat-header-menu-item danger" data-action="delete-chat">
            <i class="fa-solid fa-trash"></i> Delete chat
        </button>
    </div>
</div>

<div id="chat-search-modal" class="modal-overlay" hidden>
    <div class="modal-card chat-menu-modal">
        <h3>Search in chat</h3>
        <input type="text" id="chat-search-input" class="auth-input" placeholder="Search messages…" autocomplete="off">
        <div id="chat-search-results" class="chat-search-results"></div>
        <div class="modal-actions">
            <button type="button" class="auth-link" id="chat-search-close">Close</button>
        </div>
    </div>
</div>

<div id="chat-media-modal" class="modal-overlay" hidden>
    <div class="modal-card chat-menu-modal">
        <h3>Media</h3>
        <div id="chat-media-grid" class="chat-media-grid"></div>
        <div class="modal-actions">
            <button type="button" class="auth-link" id="chat-media-close">Close</button>
        </div>
    </div>
</div>

<div id="chat-user-profile-modal" class="modal-overlay" hidden>
    <div class="modal-card chat-menu-modal chat-profile-modal">
        <div class="chat-profile-avatar-host" data-user-id="{{ $selectedUser->id }}">
            <img src="{{ $selectedUser->avatarUrl() }}" alt="" class="chat-profile-avatar" id="chat-profile-avatar-img">
        </div>
        <h3>{{ $selectedUser->name }}</h3>
        @if($selectedUser->username)
            <p class="chat-profile-username">@{{ $selectedUser->username }}</p>
        @endif
        <p class="chat-profile-status" id="chat-profile-status">
            @if($selectedUser->isOnlineNow())
                <span class="online-label">online</span>
            @else
                {{ $selectedUser->lastSeenDisplay() ?: 'offline' }}
            @endif
        </p>
        @if($selectedUser->phone)
            <p class="chat-profile-phone"><i class="fa-solid fa-phone"></i> {{ $selectedUser->phone }}</p>
        @endif
        @if($selectedUser->bio)
            <p class="chat-profile-bio">{{ $selectedUser->bio }}</p>
        @endif
        @if($selectedUser->status_message)
            <p class="chat-profile-about">{{ $selectedUser->status_message }}</p>
        @endif
        @if($partnerFollow ?? null)
            <div class="chat-profile-follow-stats" id="chat-profile-follow-stats">
                <span><strong id="chat-profile-followers-count">{{ $partnerFollow['followers_count'] }}</strong> followers</span>
                <span><strong id="chat-profile-following-count">{{ $partnerFollow['following_count'] }}</strong> following</span>
            </div>
            <div class="chat-profile-follow-actions" id="chat-profile-follow-actions" data-user-id="{{ $selectedUser->id }}" data-state="{{ $partnerFollow['follow_state'] }}">
                <button type="button" class="btn-follow btn-follow--primary" id="chat-profile-follow-btn" hidden>Follow</button>
                <button type="button" class="btn-follow btn-follow--accept" id="chat-profile-accept-btn" hidden>Accept request</button>
                <button type="button" class="btn-follow btn-follow--reject" id="chat-profile-reject-btn" hidden>Reject</button>
            </div>
        @endif
        <button
            type="button"
            class="auth-button chat-profile-status-btn"
            id="chat-profile-view-status-btn"
            data-status-profile-btn
            data-user-id="{{ $selectedUser->id }}"
        >
            <i class="fa-solid fa-circle-notch"></i> View status
        </button>
        <a
            href="{{ route('gc.users.page', $selectedUser) }}"
            class="auth-button chat-profile-page-btn"
            id="chat-profile-open-page-btn"
        >
            <i class="fa-solid fa-id-card"></i> Full profile page
        </a>
        <button type="button" class="auth-button chat-profile-share-btn" id="chat-profile-share-page-btn" data-page-url="{{ route('gc.users.page', $selectedUser) }}">
            <i class="fa-solid fa-share-nodes"></i> Share profile
        </button>
        <div class="modal-actions chat-profile-actions">
            <button type="button" class="auth-link" id="chat-profile-close">Close</button>
            <button type="button" class="call-btn auth-button" data-call="audio" data-user-id="{{ $selectedUser->id }}" data-user-name="{{ $selectedUser->name }}" data-user-avatar="{{ $selectedUser->avatarUrl() }}">Voice call</button>
            <button type="button" class="call-btn auth-button secondary" data-call="video" data-user-id="{{ $selectedUser->id }}" data-user-name="{{ $selectedUser->name }}" data-user-avatar="{{ $selectedUser->avatarUrl() }}">Video</button>
        </div>
    </div>
</div>

<div id="chat-mute-modal" class="modal-overlay" hidden>
    <div class="modal-card chat-menu-modal">
        <h3>Mute notifications</h3>
        <p class="chat-menu-modal-hint" id="chat-mute-status">Choose how long to mute this chat.</p>
        <div class="chat-mute-options">
            <button type="button" class="chat-mute-option" data-mute-hours="8">8 hours</button>
            <button type="button" class="chat-mute-option" data-mute-hours="168">1 week</button>
            <button type="button" class="chat-mute-option" data-mute-hours="0">Always</button>
            <button type="button" class="chat-mute-option chat-mute-unmute" data-mute-hours="-1">Unmute</button>
        </div>
        <div class="modal-actions">
            <button type="button" class="auth-link" id="chat-mute-close">Close</button>
        </div>
    </div>
</div>

@php
    $chatAppearance = app(\GletraChatBox\App\Services\UserSettingsService::class)->appearance(auth()->user());
    $chatCustomWallpaperUrl = !empty($chatAppearance['custom_wallpaper'])
        ? storage_url($chatAppearance['custom_wallpaper'])
        : null;
@endphp

<div id="chat-wallpaper-modal" class="modal-overlay" hidden>
    <div class="modal-card chat-menu-modal">
        <h3>Chat wallpaper</h3>
        <p class="chat-menu-modal-hint">Pick a background for this chat or upload your own image.</p>
        <div class="chat-wallpaper-grid">
            <button type="button" class="chat-wallpaper-swatch" data-wallpaper="default" title="Default" aria-label="Default wallpaper"></button>
            <button type="button" class="chat-wallpaper-swatch" data-wallpaper="#1a2a32" style="background:#1a2a32" title="Dark teal"></button>
            <button type="button" class="chat-wallpaper-swatch" data-wallpaper="#128c7e22" style="background:linear-gradient(180deg,#128c7e22,#0b141a)" title="Green tint"></button>
            <button type="button" class="chat-wallpaper-swatch" data-wallpaper="#efeae2" style="background:#efeae2" title="Light"></button>
            <button type="button" class="chat-wallpaper-swatch" data-wallpaper="#e5ddd5" style="background:#e5ddd5" title="Warm light"></button>
            <button type="button" class="chat-wallpaper-swatch" data-wallpaper="#0b141a" style="background:#0b141a" title="Solid dark"></button>
            <button
                type="button"
                class="chat-wallpaper-swatch chat-wallpaper-swatch-custom {{ $chatCustomWallpaperUrl ? 'has-image' : '' }}"
                data-wallpaper="custom"
                title="Custom image"
                aria-label="Custom wallpaper"
                @if($chatCustomWallpaperUrl) style="background-image:url('{{ $chatCustomWallpaperUrl }}')" @endif
            >
                <span><i class="fa-solid fa-image"></i></span>
            </button>
        </div>

        <div class="chat-wallpaper-custom-upload">
            <p class="chat-wallpaper-custom-title">Custom wallpaper</p>
            <div
                id="chat-wallpaper-preview"
                class="chat-wallpaper-preview"
                @if($chatCustomWallpaperUrl) style="background-image:url('{{ $chatCustomWallpaperUrl }}')" @else hidden @endif
            ></div>
            <label class="chat-wallpaper-upload-btn" for="chat-wallpaper-file">
                <i class="fa-solid fa-upload"></i>
                <span id="chat-wallpaper-upload-label">{{ $chatCustomWallpaperUrl ? 'Change image' : 'Choose image' }}</span>
            </label>
            <input type="file" id="chat-wallpaper-file" accept="image/jpeg,image/png,image/webp,image/gif" hidden>
            <button type="button" class="auth-button full" id="chat-wallpaper-apply-custom" hidden>Apply custom wallpaper</button>
        </div>

        <div class="modal-actions">
            <button type="button" class="auth-link" id="chat-wallpaper-close">Close</button>
        </div>
    </div>
</div>
@endif