@extends('layouts.user_type.guest')
@section('header_title', __('چت'))
@php
$off_navbar = true;
$off_footer = true;
@endphp

@section('content')
    <style>
        .tg-shell {height:100vh;background:#17212b;border-radius:14px;overflow:hidden;direction:rtl;}
        .tg-sidebar {background:#17212b;color:#fff;height:100vh;overflow:auto;border-left:1px solid rgba(255,255,255,.08);}
        .tg-search {background:#242f3d;border:0;color:#fff;border-radius:22px;padding:10px 16px;width:100%;outline:none;}
        .tg-chat-item {display:flex;gap:10px;padding:12px;color:#dbe7f3;text-decoration:none;border-radius:10px;margin:4px 6px;}
        .tg-chat-item:hover,.tg-chat-item.active {background:#2b5278;color:#fff;text-decoration:none;}
        .tg-avatar {width:48px;height:48px;border-radius:50%;object-fit:cover;background:#34495e;flex:0 0 auto;}
        .tg-chat-title {font-weight:700;font-size:14px;margin-bottom:3px;}
        .tg-chat-last {font-size:12px;color:#9db2c7;max-width:180px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
        .tg-main {height:100vh;background:#0e1621;color:#fff;display:flex;flex-direction:column;}
        .tg-header {height:64px;background:#17212b;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:12px;padding:0 16px;}
        .tg-status {font-size:12px;color:#70b8ff;}
        .tg-body {flex:1;overflow:auto;padding:18px;background:linear-gradient(135deg,#0e1621,#101d2b);}
        .tg-empty {height:100%;display:flex;align-items:center;justify-content:center;color:#8fa6bd;text-align:center;}
        .msg-row {display:flex;margin:8px 0;}
        .msg-row.me {justify-content:flex-start;}
        .msg-row.peer {justify-content:flex-end;}
        .msg-bubble {max-width:72%;padding:8px 10px 5px;border-radius:12px;font-size:14px;line-height:1.8;word-break:break-word;box-shadow:0 2px 6px rgba(0,0,0,.15);}
        .msg-row.me .msg-bubble {background:#2b5278;color:#fff;border-bottom-left-radius:4px;}
        .msg-row.peer .msg-bubble {background:#182533;color:#fff;border-bottom-right-radius:4px;}
        .msg-meta {font-size:11px;color:#b6c5d4;margin-top:2px;text-align:left;direction:ltr;}
        .tg-composer {background:#17212b;border-top:1px solid rgba(255,255,255,.08);padding:10px;display:flex;gap:8px;align-items:center;}
        .tg-input {flex:1;background:#242f3d;color:#fff;border:0;border-radius:24px;padding:12px 16px;outline:none;}
        .tg-btn {border:0;width:42px;height:42px;border-radius:50%;background:#2b5278;color:white;display:flex;align-items:center;justify-content:center;transition:.15s;}
        .tg-btn:hover {filter:brightness(1.12);}
        .tg-btn:disabled {opacity:.45;cursor:not-allowed;}
        .tg-btn.recording {background:#ef4444;animation:pulseVoice 1s infinite;}
        @keyframes pulseVoice {0%{box-shadow:0 0 0 0 rgba(239,68,68,.65)}70%{box-shadow:0 0 0 10px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}
        .ws-dot {width:8px;height:8px;border-radius:50%;background:#f59e0b;display:inline-block;margin-left:6px;}
        .ws-dot.online {background:#22c55e;}
        .ws-dot.offline {background:#ef4444;}
        .tg-file-card {display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.08);border-radius:12px;padding:10px;color:#fff;text-decoration:none;min-width:200px;}
        .tg-file-card:hover {color:#fff;text-decoration:none;background:rgba(255,255,255,.13);}
        .tg-file-icon {width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
        .tg-file-name {font-size:13px;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:ltr;text-align:left;}
        .tg-img-msg {display:block;max-width:240px;max-height:260px;border-radius:12px;object-fit:cover;}
        .tg-audio-msg {width:245px;max-width:100%;}
        .tg-video-msg {width:260px;max-width:100%;max-height:320px;border-radius:12px;background:#000;display:block;}
        .upload-progress {height:4px;background:rgba(255,255,255,.18);border-radius:10px;overflow:hidden;margin-top:6px;}
        .upload-progress > span {display:block;height:100%;width:0;background:#70b8ff;transition:width .2s;}
        .recording-hint {font-size:12px;color:#fca5a5;margin-inline-start:4px;display:none;white-space:nowrap;}
        .recording-hint.show {display:inline;}
        @media (max-width:768px) {
            .tg-shell,.tg-sidebar,.tg-main {height:86vh;}
            .tg-sidebar.mobile-hidden {display:none;}
            .tg-main.mobile-hidden {display:none;}
            .msg-bubble {max-width:86%;}
        }
    </style>

    @php
        $hasChat = !empty($data->chat_id) && !empty($data->chat);

        $fileUrl = function ($file) {
            if (!$file || empty($file->file_path)) return '';
            $path = $file->file_path;
            return filter_var($path, FILTER_VALIDATE_URL) ? $path : asset(ltrim($path, '/'));
        };

        $renderMessageContent = function ($msg) use ($fileUrl) {
            $file = $msg->file ?? null;
            if ($file) {
                $url = $fileUrl($file);
                $name = $file->file_name ?: 'file';
                $format = strtolower($file->file_format ?: pathinfo($name, PATHINFO_EXTENSION));

                if (in_array($format, ['jpg', 'jpeg', 'png', 'webp', 'gif'])) {
                    return '<a href="'.e($url).'" target="_blank"><img class="tg-img-msg" src="'.e($url).'" alt="'.e($name).'"></a>';
                }

                if (($msg->message ?? '') === 'video' || in_array($format, ['mp4', 'mov', 'm4v', 'avi', 'mkv'])) {
                    return '<video class="tg-video-msg" controls playsinline preload="metadata" src="'.e($url).'"></video>';
                }

                if (($msg->message ?? '') === 'voice' || in_array($format, ['mp3', 'wav', 'ogg', 'webm', 'mpeg', 'm4a', 'aac'])) {
                    return '<audio class="tg-audio-msg" controls src="'.e($url).'"></audio>';
                }

                return '<a class="tg-file-card" href="'.e($url).'" target="_blank"><span class="tg-file-icon"><i class="fa fa-file"></i></span><span class="tg-file-name">'.e($name).'</span></a>';
            }

            return nl2br(e($msg->message));
        };
    @endphp

    <div class="container-fluid px-2">
        <div class="row g-0 tg-shell">
            <div class="col-md-4 col-lg-3 tg-sidebar {{ $hasChat ? 'mobile-hidden' : '' }}">
                <div class="p-3">
                    <input class="tg-search" placeholder="{{ __('جستجو') }}" onkeyup="filterChats(this.value)">
                </div>

                @forelse($data->chats as $chatItem)
                    <a class="tg-chat-item {{ $chatItem['active'] ? 'active' : '' }}"
                       href="{{ localized_route('user.chat', ['chat_id' => $chatItem['chat_id']]) }}"
                       data-chat-title="{{ $chatItem['peer_name'] }} {{ $chatItem['last_message'] }}">
                        <img class="tg-avatar" src="{{ $chatItem['peer_avatar'] }}" alt="avatar">
                        <div class="flex-grow-1 min-width-0">
                            <div class="d-flex justify-content-between gap-2">
                                <div class="tg-chat-title">{{ $chatItem['peer_name'] }}</div>
                                <small class="text-muted">{{ $chatItem['last_time'] }}</small>
                            </div>
                            <div class="tg-chat-last">{{ $chatItem['last_message'] ?: __('بدون پیام') }}</div>
                        </div>
                    </a>
                @empty
                    <div class="p-4 text-center text-muted">{{ __('هنوز چتی نداری') }}</div>
                @endforelse
            </div>

            <div class="col-md-8 col-lg-9 tg-main {{ !$hasChat ? 'mobile-hidden' : '' }}">
                @if($hasChat)
                    <div class="tg-header">
                        <a class="d-md-none text-white" href="{{ localized_route('user.chat') }}"><i class="fa fa-arrow-right"></i></a>
                        <img class="tg-avatar" src="{{ $data->peer->avatar }}" alt="avatar">
                        <div>
                            <div class="fw-bold">{{ $data->peer->name }}</div>
                            <div class="tg-status"><span id="wsDot" class="ws-dot"></span><span id="wsStatus">{{ __('در حال اتصال...') }}</span></div>
                        </div>
                    </div>

                    <div id="body_messages" class="tg-body">
                        @foreach($data->messages as $msg)
                            @php $isMe = (int)$msg->owner === (int)$user->id; @endphp
                            <div class="msg-row {{ $isMe ? 'me' : 'peer' }}" id="message_{{ $msg->id }}">
                                <div class="msg-bubble">
                                    <div>{!! $renderMessageContent($msg) !!}</div>
                                    <div class="msg-meta">
                                        {{ optional($msg->created_at)->format('H:i') }}
                                        @if($isMe)
                                            <i class="fa-solid {{ $msg->show ? 'fa-check-double' : 'fa-check' }}"></i>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <div class="tg-composer">
                        <input type="file" id="fileInput" style="display:none">
                        <button class="tg-btn" id="videoBtn" type="button" title="{{ __('ضبط ویدیو کم‌حجم') }}"><i class="fa fa-video"></i></button>
                        <button class="tg-btn" id="selectFile" type="button" title="{{ __('ارسال فایل') }}"><i class="fa fa-paperclip"></i></button>
                        <button class="tg-btn" id="voiceBtn" type="button" title="{{ __('ضبط ویس') }}"><i class="fa fa-microphone"></i></button>
                        <span id="recordingHint" class="recording-hint">{{ __('در حال ضبط...') }}</span>
                        <input id="message_input" class="tg-input" type="text" placeholder="{{ __('پیام بنویسید...') }}" autocomplete="off">
                        <button class="tg-btn" id="send_btn" type="button" title="{{ __('ارسال') }}"><i class="fa fa-paper-plane"></i></button>
                    </div>
                @else
                    <div class="tg-empty">
                        <div>
                            <div style="font-size:48px;margin-bottom:10px"><i class="fa fa-comments"></i></div>
                            <h5>{{ __('یک چت را انتخاب کن') }}</h5>
                            <p>{{ __('لیست تمام چت‌های شما در سمت صفحه قرار دارد.') }}</p>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>

    @if($hasChat)
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const chatId = Number(@json($data->chat_id));
                const session = @json($data->ws_token);
                const wsProtocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
                const wsUrl = wsProtocol + window.location.host + '/ws';

                // این route باید در backend ساخته شود و file_id برگرداند.
                // نمونه: Route::post('/chat/{chat_id}/upload', [ChatController::class, 'upload'])->name('user.chat.upload');
                const uploadUrl = @json(localized_route('user.chat.upload', ['chat_id' => $data->chat_id]));
                const csrfToken = @json(csrf_token());

                let socket = null;
                let reconnectTimer = null;
                let reconnectAttempts = 0;
                let manualClose = false;
                let mediaRecorder = null;
                let voiceChunks = [];
                let isRecording = false;
                let activeStream = null;
                let videoRecorder = null;
                let videoChunks = [];
                let isVideoRecording = false;
                let videoStream = null;
                const pendingMessages = new Map();

                const $body = $('#body_messages');
                const $input = $('#message_input');
                const $send = $('#send_btn');
                const $voiceBtn = $('#voiceBtn');
                const $videoBtn = $('#videoBtn');
                const $recordingHint = $('#recordingHint');

                function setWsStatus(status, text) {
                    $('#wsDot').removeClass('online offline');
                    if (status === 'online') $('#wsDot').addClass('online');
                    if (status === 'offline') $('#wsDot').addClass('offline');
                    $('#wsStatus').text(text);
                }

                function connectWebSocket() {
                    clearTimeout(reconnectTimer);
                    setWsStatus('connecting', @json(__('در حال اتصال...')));

                    socket = new WebSocket(wsUrl);

                    socket.addEventListener('open', function () {
                        reconnectAttempts = 0;
                        setWsStatus('online', @json(__('آنلاین')));
                        socket.send(JSON.stringify({action: 'auth', session}));

                        pendingMessages.forEach(function (payload) {
                            if (socket.readyState === WebSocket.OPEN) {
                                socket.send(JSON.stringify(payload));
                            }
                        });
                    });

                    socket.addEventListener('message', function (event) {
                        let data;
                        try {
                            data = JSON.parse(event.data);
                        } catch (e) {
                            console.log(event.data);
                            return;
                        }

                        if (data.action === 'auth_ok') return;

                        if (data.action === 'access_message') {
                            const randomId = data.random_id;
                            pendingMessages.delete(String(randomId));
                            $('#check_status_' + randomId)
                                .removeClass('fa-clock fa-circle-exclamation text-danger')
                                .addClass('fa-check');
                            $('#random_' + randomId).attr('id', 'message_' + data.new_id);
                            return;
                        }

                        if (data.action === 'new_message') {
                            appendIncomingMessage(data);
                            scrollBottom();
                            return;
                        }

                        if (data.action === 'error') {
                            const randomId = data.random_id;
                            if (randomId) markMessageFailed(randomId);
                            console.error('WS error:', data.message);
                        }
                    });

                    socket.addEventListener('close', function () {
                        setWsStatus('offline', @json(__('قطع شد؛ تلاش برای اتصال مجدد...')));
                        if (!manualClose) scheduleReconnect();
                    });

                    socket.addEventListener('error', function () {
                        setWsStatus('offline', @json(__('خطا در اتصال')));
                        try { socket.close(); } catch (e) {}
                    });
                }

                function scheduleReconnect() {
                    clearTimeout(reconnectTimer);
                    reconnectAttempts++;
                    const delay = Math.min(1000 * Math.pow(2, reconnectAttempts - 1), 15000);
                    reconnectTimer = setTimeout(connectWebSocket, delay);
                }

                function sendWhenReady(payload) {
                    pendingMessages.set(String(payload.random_id), payload);

                    if (socket && socket.readyState === WebSocket.OPEN) {
                        socket.send(JSON.stringify(payload));
                        return;
                    }

                    setWsStatus('offline', @json(__('قطع شد؛ پیام بعد از اتصال ارسال می‌شود')));
                    connectWebSocket();
                }

                function sendMessage() {
                    const text = $input.val().trim();
                    if (!text) return;

                    const randomId = makeRandomId();
                    $input.val('');

                    appendMyPendingMessage(renderText(text), randomId);
                    scrollBottom();

                    sendWhenReady({
                        message: text,
                        chat_id: chatId,
                        random_id: randomId,
                        session: session
                    });
                }

                function uploadAndSend(file, type = 'file') {
                    if (!file) return;

                    const randomId = makeRandomId();
                    const localUrl = URL.createObjectURL(file);
                    const preview = type === 'voice'
                        ? renderAudio(localUrl)
                        : (type === 'video' ? renderVideo(localUrl) : renderLocalFilePreview(file));

                    appendMyPendingMessage(preview + progressHtml(randomId), randomId);
                    scrollBottom();

                    const formData = new FormData();
                    formData.append('file', file);
                    formData.append('files', file); // سازگاری با UploadController قدیمی که key آن files است.
                    formData.append('type', type);
                    formData.append('_token', csrfToken);

                    const xhr = new XMLHttpRequest();
                    xhr.open('POST', uploadUrl, true);
                    xhr.setRequestHeader('X-CSRF-TOKEN', csrfToken);
                    xhr.setRequestHeader('Accept', 'application/json');

                    xhr.upload.addEventListener('progress', function (event) {
                        if (!event.lengthComputable) return;
                        const percent = Math.round((event.loaded / event.total) * 100);
                        $('#progress_' + randomId).css('width', percent + '%');
                    });

                    xhr.onreadystatechange = function () {
                        if (xhr.readyState !== 4) return;

                        $('#progress_wrap_' + randomId).remove();

                        if (xhr.status < 200 || xhr.status >= 300) {
                            markMessageFailed(randomId);
                            console.error('upload failed', xhr.responseText);
                            return;
                        }

                        let res;
                        try {
                            res = JSON.parse(xhr.responseText);
                        } catch (e) {
                            // اگر endpoint قدیمی فقط عدد file_id برگرداند.
                            res = {ok: true, file_id: Number(xhr.responseText)};
                        }

                        const fileId = Number(res.file_id || res.id || res);
                        if (!fileId) {
                            markMessageFailed(randomId);
                            console.error('invalid upload response', res);
                            return;
                        }

                        sendWhenReady({
                            type: type,
                            file_id: fileId,
                            chat_id: chatId,
                            random_id: randomId,
                            session: session
                        });
                    };

                    xhr.onerror = function () {
                        $('#progress_wrap_' + randomId).remove();
                        markMessageFailed(randomId);
                    };

                    xhr.send(formData);
                }

                function appendMyPendingMessage(contentHtml, randomId) {
                    const time = new Date().toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'});
                    $body.append(`
                        <div class="msg-row me" id="random_${randomId}">
                            <div class="msg-bubble">
                                <div>${contentHtml}</div>
                                <div class="msg-meta">${time} <i id="check_status_${randomId}" class="fa-solid fa-clock"></i></div>
                            </div>
                        </div>
                    `);
                }

                function appendIncomingMessage(data) {
                    if (Number(data.chat_id) !== chatId) return;

                    const content = renderServerMessage(data);
                    const time = data.created_at
                        ? new Date(data.created_at).toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'})
                        : '';

                    $body.append(`
                        <div class="msg-row peer" id="message_${data.id}">
                            <div class="msg-bubble">
                                <div>${content}</div>
                                <div class="msg-meta">${time}</div>
                            </div>
                        </div>
                    `);
                }

                function renderServerMessage(data) {
                    if (data.file) {
                        const file = data.file;
                        const url = normalizeAssetUrl(file.file_path || file.path || file.url || '');
                        const name = escapeHtml(file.file_name || file.name || 'file');
                        const format = String(file.file_format || getExtension(name)).toLowerCase();

                        if (isImage(format)) return `<a href="${url}" target="_blank"><img class="tg-img-msg" src="${url}" alt="${name}"></a>`;
                        if (isVideo(format) || data.message === 'video' || data.type === 'video') return renderVideo(url);
                        if (isAudio(format) || data.message === 'voice' || data.type === 'voice') return renderAudio(url);
                        return renderFileCard(url, name);
                    }

                    return renderText(data.message || '');
                }

                function renderLocalFilePreview(file) {
                    const url = URL.createObjectURL(file);
                    const ext = getExtension(file.name);
                    const name = escapeHtml(file.name);

                    if (isImage(ext)) return `<a href="${url}" target="_blank"><img class="tg-img-msg" src="${url}" alt="${name}"></a>`;
                    if (isVideo(ext)) return renderVideo(url);
                    if (isAudio(ext)) return renderAudio(url);
                    return renderFileCard(url, name);
                }

                function renderText(text) {
                    return escapeHtml(text).replace(/\n/g, '<br>');
                }

                function renderAudio(url) {
                    return `<audio class="tg-audio-msg" controls src="${url}"></audio>`;
                }

                function renderVideo(url) {
                    return `<video class="tg-video-msg" controls playsinline preload="metadata" src="${url}"></video>`;
                }

                function renderFileCard(url, name) {
                    return `<a class="tg-file-card" href="${url}" target="_blank"><span class="tg-file-icon"><i class="fa fa-file"></i></span><span class="tg-file-name">${name}</span></a>`;
                }

                function progressHtml(randomId) {
                    return `<div class="upload-progress" id="progress_wrap_${randomId}"><span id="progress_${randomId}"></span></div>`;
                }

                function markMessageFailed(randomId) {
                    pendingMessages.delete(String(randomId));
                    $('#check_status_' + randomId)
                        .removeClass('fa-clock fa-check')
                        .addClass('fa-circle-exclamation text-danger');
                }

                function escapeHtml(value) {
                    return String(value)
                        .replace(/&/g, '&amp;')
                        .replace(/</g, '&lt;')
                        .replace(/>/g, '&gt;')
                        .replace(/"/g, '&quot;')
                        .replace(/'/g, '&#039;');
                }

                function getExtension(name) {
                    const parts = String(name || '').split('.');
                    return parts.length > 1 ? parts.pop().toLowerCase() : '';
                }

                function isImage(ext) {
                    return ['jpg', 'jpeg', 'png', 'webp', 'gif'].includes(ext);
                }

                function isAudio(ext) {
                    return ['mp3', 'wav', 'ogg', 'webm', 'mpeg', 'm4a', 'aac'].includes(ext);
                }

                function isVideo(ext) {
                    return ['mp4', 'mov', 'm4v', 'webm', 'avi', 'mkv'].includes(ext);
                }

                function normalizeAssetUrl(path) {
                    path = String(path || '');
                    if (/^https?:\/\//i.test(path)) return path;
                    return '/' + path.replace(/^\/+/, '');
                }

                function makeRandomId() {
                    return Date.now() + Math.floor(Math.random() * 1000);
                }

                function scrollBottom() {
                    $body.scrollTop($body[0].scrollHeight);
                }

                function getSupportedVideoMimeType() {
                    const types = [
                        'video/webm;codecs=vp9,opus',
                        'video/webm;codecs=vp8,opus',
                        'video/webm'
                    ];

                    for (const type of types) {
                        if (window.MediaRecorder && MediaRecorder.isTypeSupported(type)) return type;
                    }

                    return '';
                }

                async function toggleVideoRecording() {
                    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia || !window.MediaRecorder) {
                        alert(@json(__('مرورگر شما ضبط ویدیو را پشتیبانی نمی‌کند.')));
                        return;
                    }

                    if (!isVideoRecording) {
                        try {
                            videoStream = await navigator.mediaDevices.getUserMedia({
                                audio: {
                                    echoCancellation: true,
                                    noiseSuppression: true,
                                    channelCount: 1
                                },
                                video: {
                                    width: {ideal: 360, max: 480},
                                    height: {ideal: 640, max: 854},
                                    frameRate: {ideal: 15, max: 20},
                                    facingMode: 'user'
                                }
                            });

                            videoChunks = [];
                            const mimeType = getSupportedVideoMimeType();
                            const options = {
                                videoBitsPerSecond: 350000,
                                audioBitsPerSecond: 32000
                            };

                            if (mimeType) options.mimeType = mimeType;

                            videoRecorder = new MediaRecorder(videoStream, options);

                            videoRecorder.ondataavailable = function (event) {
                                if (event.data && event.data.size > 0) videoChunks.push(event.data);
                            };

                            videoRecorder.onstop = function () {
                                const mime = videoRecorder.mimeType || mimeType || 'video/webm';
                                const blob = new Blob(videoChunks, {type: mime});
                                const file = new File([blob], 'video-' + Date.now() + '.webm', {type: mime});

                                if (videoStream) videoStream.getTracks().forEach(track => track.stop());
                                videoStream = null;
                                uploadAndSend(file, 'video');
                            };

                            videoRecorder.start(1000);
                            isVideoRecording = true;
                            $videoBtn.addClass('recording');
                            $videoBtn.find('i').removeClass('fa-video').addClass('fa-stop');
                            $recordingHint.text(@json(__('در حال ضبط ویدیو کم‌حجم...'))).addClass('show');
                        } catch (e) {
                            console.error(e);
                            alert(@json(__('دسترسی به دوربین/میکروفون امکان‌پذیر نیست.')));
                        }
                    } else {
                        if (videoRecorder && videoRecorder.state !== 'inactive') videoRecorder.stop();
                        isVideoRecording = false;
                        $videoBtn.removeClass('recording');
                        $videoBtn.find('i').removeClass('fa-stop').addClass('fa-video');
                        $recordingHint.text(@json(__('در حال ضبط...'))).removeClass('show');
                    }
                }

                async function toggleVoiceRecording() {
                    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
                        alert(@json(__('مرورگر شما ضبط صدا را پشتیبانی نمی‌کند.')));
                        return;
                    }

                    if (!isRecording) {
                        try {
                            activeStream = await navigator.mediaDevices.getUserMedia({audio: true});
                            voiceChunks = [];
                            mediaRecorder = new MediaRecorder(activeStream);

                            mediaRecorder.ondataavailable = function (event) {
                                if (event.data && event.data.size > 0) voiceChunks.push(event.data);
                            };

                            mediaRecorder.onstop = function () {
                                const mime = mediaRecorder.mimeType || 'audio/webm';
                                const ext = mime.includes('ogg') ? 'ogg' : 'webm';
                                const blob = new Blob(voiceChunks, {type: mime});
                                const file = new File([blob], 'voice-' + Date.now() + '.' + ext, {type: mime});

                                if (activeStream) activeStream.getTracks().forEach(track => track.stop());
                                activeStream = null;
                                uploadAndSend(file, 'voice');
                            };

                            mediaRecorder.start();
                            isRecording = true;
                            $voiceBtn.addClass('recording');
                            $voiceBtn.find('i').removeClass('fa-microphone').addClass('fa-stop');
                            $recordingHint.addClass('show');
                        } catch (e) {
                            console.error(e);
                            alert(@json(__('دسترسی به میکروفون امکان‌پذیر نیست.')));
                        }
                    } else {
                        if (mediaRecorder && mediaRecorder.state !== 'inactive') mediaRecorder.stop();
                        isRecording = false;
                        $voiceBtn.removeClass('recording');
                        $voiceBtn.find('i').removeClass('fa-stop').addClass('fa-microphone');
                        $recordingHint.removeClass('show');
                    }
                }

                $('#send_btn').on('click', sendMessage);

                $('#message_input').on('keydown', function (event) {
                    if (event.key === 'Enter' && !event.shiftKey) {
                        event.preventDefault();
                        sendMessage();
                    }
                });

                $('#selectFile').on('click', function () {
                    $('#fileInput').click();
                });

                $('#fileInput').on('change', function () {
                    const file = this.files && this.files[0] ? this.files[0] : null;
                    uploadAndSend(file, 'file');
                    this.value = '';
                });

                $('#voiceBtn').on('click', toggleVoiceRecording);

                $('#videoBtn').on('click', toggleVideoRecording);

                window.addEventListener('beforeunload', function () {
                    manualClose = true;
                    if (isRecording && mediaRecorder && mediaRecorder.state !== 'inactive') mediaRecorder.stop();
                    if (activeStream) activeStream.getTracks().forEach(track => track.stop());
                    if (isVideoRecording && videoRecorder && videoRecorder.state !== 'inactive') videoRecorder.stop();
                    if (videoStream) videoStream.getTracks().forEach(track => track.stop());
                    if (socket) socket.close();
                });

                window.filterChats = function (value) {
                    value = String(value || '').toLowerCase();
                    document.querySelectorAll('.tg-chat-item').forEach(function (item) {
                        const title = (item.getAttribute('data-chat-title') || '').toLowerCase();
                        item.style.display = title.includes(value) ? 'flex' : 'none';
                    });
                };

                connectWebSocket();
                scrollBottom();
            });
        </script>
    @else
        <script>
            window.filterChats = function (value) {
                value = String(value || '').toLowerCase();
                document.querySelectorAll('.tg-chat-item').forEach(function (item) {
                    const title = (item.getAttribute('data-chat-title') || '').toLowerCase();
                    item.style.display = title.includes(value) ? 'flex' : 'none';
                });
            };
        </script>
    @endif
@endsection