@extends('layouts.app')

@section('content')

@php
    use GletraChatBox\App\Models\Status;
@endphp

<div class="chat-layout {{ $selectedUser ? 'has-chat' : '' }}" id="chat-layout">

    @include('chat.partials.sidebar')

    <div class="chat-area" id="chat-area">
        @include('chat.partials.header')
        @include('chat.partials.message-modals')
        @include('chat.partials.messages')
        @include('chat.partials.input')
    </div>

    <div
        class="chat-status-viewer-root"
        x-data="statusViewerOverlay(@js([
            'authUser' => [
                'id' => auth()->id(),
                'name' => auth()->user()->name,
                'avatar' => auth()->user()->avatarUrl(),
            ],
            'reactions' => Status::REACTIONS,
        ]))"
    >
        @include('status.partials.viewer-overlay')
    </div>

</div>

<script>
    window.authId = {{ auth()->id() }};
    window.authName = @json(auth()->user()->name);
    window.authAvatar = @json(auth()->user()->avatarUrl());
    window.conversationId = @json($conversationId);
    window.partnerId = @json($selectedUser?->id);
    window.partnerName = @json($selectedUser?->name);
    window.partnerAvatar = @json($selectedUser?->avatarUrl());
    window.firstUnreadId = @json($firstUnreadId ?? null);
    window.unreadCount = @json($unreadCount ?? 0);
    window.csrfToken = @json(csrf_token());
    window.forwardContacts = @json($forwardContacts ?? []);
    window.pinnedMessageId = @json($pinnedMessage?->id);
    window.pinnedMessagePreview = @json($pinnedMessage ? ($pinnedMessage->message ?: $pinnedMessage->replySnippet() ?: ucfirst($pinnedMessage->effectiveType())) : null);
    window.voiceNoteConfig = {
        maxDuration: {{ (int) config('gletra.voice_note.max_duration_seconds', 300) }},
        maxSize: {{ (int) config('gletra.voice_note.max_size_bytes', 16777216) }},
        waveformBars: {{ (int) config('gletra.voice_note.waveform_bars', 48) }},
    };
    window.mediaAccept = @json($mediaAccept ?? []);
    window.statusRingByUser = @json($statusRingByUser ?? []);
    window.mediaConfig = {
        fastUpload: {{ config('gletra.media.fast_upload', true) ? 'true' : 'false' }},
        imageMaxWidth: {{ (int) config('gletra.media.image_max_width', 1920) }},
        imageMaxHeight: {{ (int) config('gletra.media.image_max_height', 1920) }},
        imageQuality: {{ (float) config('gletra.media.image_quality', 82) / 100 }},
        imageSkipCompressBelow: {{ (int) config('gletra.media.keep_original_above', 512000) }},
    };
</script>

@endsection