@extends('layouts.master')

@section('title', 'Chat')

@section('content')
<div id="ChatApp" class="container-fluid">

    <div class="row chat-layout">

        <!-- ================= LEFT PANEL (1/3) ================= -->
        <div class="col-md-4 chat-left">

            <!-- USER INFO -->
            <div class="chat-user-info d-flex">
                <img :src="me.avatar_url" class="avatar-md">
                <div class="ms-2 flex-1">
                    <div class="fw-bold">(( me.name ))</div>
                    <div class="text-muted small">(( me.email ))</div>
                </div>
                <i class="fa-solid fa-pen-to-square pointer" @click="createGroup"></i>
            </div>

            <!-- SEARCH USER -->
            <div class="chat-search">
                <input type="text"
                    class="form-control"
                    placeholder="ユーザーを検索してチャット..."
                    v-model="searchUser"
                    @input="searchSuggest">

                <!-- SUGGEST LIST -->
                <ul class="suggest-list" v-if="suggestUsers.length">
                    <li v-for="u in suggestUsers"
                        :key="u.id"
                        @click="openPrivateChat(u)">
                        <img :src="u.avatar_url" class="avatar-xs">
                        <span>(( u.name ))</span>
                    </li>
                </ul>

            </div>

            <!-- CHAT LIST -->
            <div class="chat-room-list">
                <div class="chat-room"
                    v-for="room in chatRooms"
                    :key="room.id"
                    :class="{ active: activeRoom && activeRoom.id === room.id }"
                    @click="openRoom(room)">

                    <div class="d-flex align-items-center position-relate">
                        <div class="avatar-sm d-flex align-items-center justify-content-center">

                            <img v-if="room.type === 'private'" :src="room.avatar" class="avatar-sm">
                            <img
                                v-else-if="room.type === 'group' && room.avatar"
                                :src="room.avatar"
                                class="avatar-sm">
                            <i v-else class="fas fa-users text-primary"></i>
                            <div v-if="onlineUserIds.includes(Number(room.peer_id))" class="online-dot online">
                                <i class="online-status fa fa-check" aria-hidden="true"></i>
                            </div>
                            <div v-else class="online-dot offline">
                                <i class="offline-status fa fa-times" aria-hidden="true"></i>
                            </div>
                        </div>



                        <div class="flex-grow-1 ms-2 avatar-sm-right">
                            <div
                                class="fw-semibold"
                                :class="{ 'fw-bold text-dark': room.unread_count > 0 }">
                                (( room.title ))
                            </div>

                            <div
                                class="small text-truncate"
                                :class="{ 'fw-bold text-dark': room.unread_count > 0, 'text-muted': room.unread_count === 0 }">
                                (( room.last_message || 'まだメッセージはありません' ))
                            </div>
                        </div>

                        <span
                            v-if="room.unread_count > 0"
                            class="badge bg-danger rounded-pill ms-2 count-read">
                            (( room.unread_count ))
                        </span>


                    </div>
                </div>
            </div>

        </div>

        <!-- ================= RIGHT PANEL ================= -->
        <div class="col-md-8 chat-right d-flex flex-column p-0">

            <div v-if="activeRoom"
                class="chat-header gap-1 d-flex justify-content-between align-items-center">
                <img
                    v-if="activeRoom.type === 'private' && activeRoom.avatar"
                    :src="activeRoom.avatar"
                    class="avatar-sm me-2">

                <i
                    v-else-if="activeRoom.type === 'private'"
                    class="fas fa-user text-primary"></i>
                <img
                    v-else-if="activeRoom.type === 'group' && activeRoom.avatar"
                    :src="activeRoom.avatar"
                    class="avatar-sm me-2">

                <i
                    v-else-if="activeRoom.type === 'group'"
                    class="fas fa-users text-primary"></i>
                <span class="flex-1">(( activeRoom.title ))</span>

                <button v-if="activeRoom.type === 'group'"
                    class="btn btn-sm btn-outline-secondary"
                    @click="openGroupSetting" data-bs-toggle="modal" data-bs-target="#groupModal">
                    ⚙️
                </button>
            </div>

            <div v-if="activeRoom" class="chat-body flex-grow-1 p-3" ref="chatBody">

                <div
                    v-for="(m, i) in messages"
                    :key="m.id"
                    :class="['chat-msg-wrap', m.sender_id == me.id ? 'me' : 'other']">
                    <!-- DATE SEPARATOR -->
                    <div
                        v-if="shouldShowDate(i)"
                        class="chat-date-separator">
                        (( formatDate(messages[i].created_at) ))
                    </div>


                    <div :class="['chat-msg-wrap', m.sender_id == me.id ? 'me' : 'other']">
                        <!-- AVATAR (group + other) -->
                        <div class="group-avatar-name" v-if="activeRoom.type === 'group' && m.sender_id != me.id && showAvatar(i)">
                            <img
                                v-if="activeRoom.type === 'group' && m.sender_id != me.id && showAvatar(i)"
                                :src="getAvatarUrl(m.sender_avatar)"
                                class="msg-avatar">
                            <!-- NAME -->
                            <div
                                v-if="activeRoom.type === 'group' && m.sender_id != me.id && showName(i)"
                                class="msg-sender">
                                (( m.sender_name ))
                            </div>
                        </div>

                        <!-- TIME (GROUPED) -->


                        <div class="chat-msg-box">


                            <div class="chat-msg" :class="m.sender_id == me.id ? 'me' : 'other'">

                                <!-- TEXT -->
                                <span v-if="m.type === 'text'">
                                    (( m.content ))
                                    <div v-if="shouldShowTime(i)" class="chat-time-group">
                                        (( formatTime(m.created_at) ))
                                    </div>
                                </span>

                                <!-- IMAGE -->
                                <a class="cursor" v-else-if="m.type === 'image'"
                                    :href="m.file_path"
                                    target="_blank">
                                    <img
                                        :src="m.file_path"
                                        class="chat-image">
                                </a>

                                <!-- FILE -->
                                <a v-else
                                    :href="m.file_path"
                                    target="_blank"
                                    class="chat-file cursor">
                                    <i class="fas fa-file"></i>
                                    (( m.content ))
                                </a>

                            </div>
                            <div
                                v-if="shouldShowReadReceipt(i)"
                                class="chat-read-eye">
                                <i class="fa-regular fa-eye"></i>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <div class="chat-input p-3 border-top d-flex align-items-center" v-if="activeRoom">
                <div class="input-group">
                    <div v-if="pendingImage" class="chat-image-preview">
                        <img :src="pendingImagePreview">
                        <span class="remove-image" @click="removePendingImage">✕</span>
                    </div>
                    <div v-if="pendingFile" class="chat-file-preview">
                        <i class="fas fa-paperclip"></i>
                        <span class="file-name">(( pendingFileName ))</span>
                        <span class="remove-file" @click="removePendingFile">✕</span>
                    </div>
                    <textarea
                        ref="messageInput"
                        class="form-control me-2 chat-textarea"
                        v-model="newMessage"
                        rows="1"
                        placeholder="Type a message..."
                        @input="autoResize"
                        @keydown.enter.exact.prevent="sendMessage"
                        @paste="handlePaste"></textarea>

                    <label class="upload-file">
                        <i class="fa-solid fa-paperclip"></i>
                        <input
                            type="file"
                            hidden
                            accept="*/*"
                            @change="attachFile">
                    </label>
                    <label class="upload-image">
                        <i class="fa-solid fa-image"></i>
                        <input type="file" hidden accept="image/*" @change="attachImage">

                    </label>



                    <button class="btn-send-data" @click="sendMessage">
                        <i class="fa fa-paper-plane" aria-hidden="true"></i>
                    </button>
                </div>

            </div>


            <div v-if="!activeRoom" class="m-auto text-muted">
                会話を選択してください
            </div>

        </div>

    </div>
    <!-- GROUP UPDATE MODAL -->
    <div class="modal fade gino-modal"
        id="groupModal"
        tabindex="-1"
        role="dialog"
        aria-hidden="true">

        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content custom-modal-content">

                <!-- HEADER -->
                <div class="modal-header border-0 bg-light p-3">
                    <h6 class="modal-title" id="updateModalLabel">
                        グループ編集
                    </h6>
                    <button type="button" class="btn btn-sm btn-maximize"><svg xmlns="http://www.w3.org/2000/svg"
                            class="full-screen-open full-screen-icon header-link-icon" height="24px" viewBox="0 0 24 24"
                            width="24px" fill="currentColor">
                            <path d="M0 0h24v24H0V0z" fill="none"></path>
                            <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"></path>
                        </svg>
                        <svg xmlns="http://www.w3.org/2000/svg"
                            class="full-screen-close full-screen-icon header-link-icon d-none" fill="currentColor"
                            height="24" viewBox="0 -960 960 960" width="24">
                            <path
                                d="M320-200v-120H200v-80h200v200h-80Zm240 0v-200h200v80H640v120h-80ZM200-560v-80h120v-120h80v200H200Zm360 0v-200h80v120h120v80H560Z">
                            </path>
                        </svg></button>
                    <button type="button" class="btn-close btn-close-black " data-bs-dismiss="modal"
                        aria-label="{{ trans('label.close') }}"><span aria-hidden="true">&times;</span>
                    </button>

                </div>

                <!-- BODY -->
                <div class="modal-body p-20">
                    <div class="col-12">
                        <div class="logo-upload-control text-center">
                            <div class="control-img-wrapper">
                                <img alt="update_avatar" width="72" height="72" v-if="editingGroup && editingGroup.avatar"
                                    :src="editingGroup.avatar">
                                <img v-else alt="update_avatar" width="72" height="72"
                                    :src="'/assets/images/user.png'">
                                <label for="update_avatar" title="label.select_image">
                                    <div class="icon-wrapper"><i width="14" height="14" class="ri ri-image-fill"></i></div>
                                    <input type="file"
                                    hidden
                                    accept="image/*"
                                    @change="updateGroupAvatar" id="update_avatar">
                                </label>
                            </div>
                        </div>
                    </div>
                    <!-- GROUP NAME -->
                    <div class="mb-3">
                        <label class="form-label fw-semibold">グループ名</label>
                        <input type="text"
                            class="form-control"
                            v-model="groupName"
                            placeholder="グループ名">
                    </div>
                    <!-- MEMBER LIST -->
                    <div class="mb-3">
                        <div class="fw-semibold mb-1">メンバー</div>

                        <ul class="list-group">
                            <li class="list-group-item d-flex
                                   justify-content-between
                                   align-items-center"
                                v-for="m in groupMembers"
                                :key="m.id">

                                <div>
                                    <div class="fw-semibold">(( m.name ))</div>
                                    <div class="small text-muted">(( m.email ))</div>
                                </div>

                                <button class="btn btn-sm btn-outline-danger"
                                    @click="removeMember(m)">
                                    ×
                                </button>
                            </li>
                        </ul>
                    </div>

                    <!-- ADD MEMBER -->
                    <div class="mb-3">
                        <input class="form-control"
                            v-model="searchMember"
                            @input="searchUserToAdd"
                            placeholder="Thêm thành viên...">

                        <ul class="list-group mt-2"
                            v-if="searchResult.length">
                            <li class="list-group-item list-group-item-action"
                                v-for="u in searchResult"
                                :key="u.id"
                                @click="addMemberToGroup(u)">
                                (( u.name ))
                            </li>
                        </ul>
                    </div>

                </div>

                <!-- FOOTER -->
                <div class="modal-footer border-0 p-3 pt-0">
                    <button class="btn btn-light"
                        data-bs-dismiss="modal" aria-hidden="true">
                        キャンセル
                    </button>

                    <button class="btn btn-primary" @click="updateGroupName">
                        保存
                    </button>
                </div>

            </div>
        </div>
    </div>


</div>

@endsection

@section('script-footer')

<!-- Chartjs Chart JS -->
{{-- <script src="{{ asset('assets/js/index.js') }}"></script> --}}

<script src="{{ asset('assets/js/custom-switcher.min.js') }}"></script>
<!-- Custom JS -->
<script src="{{ asset('assets/js/custom.js') }}"></script>
<script src="{{ asset('assets/js/csrf.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<script>
    window.ChatApp = new Vue({
        el: '#ChatApp',
        delimiters: ['((', '))'],

        data: {
            me: @json($me),

            socket: null,

            searchUser: '',
            suggestUsers: [],

            chatRooms: [],
            onlineUserIds: [],

            activeRoom: null,
            messages: [],
            newMessage: '',
            lastMessageId: null,
            loadingHistory: false,
            isAtBottom: true,
            isFirstLoad: true,
            showGroupModal: false,
            editingGroup: null,
            groupName: '',
            groupMembers: [],
            searchMember: '',
            searchResult: [],
            pendingImage: null, // File
            pendingImagePreview: '', // blob url
            pendingFile: null, // File
            pendingFileName: '', // string
        },

        mounted() {
            this.initSocket();
            this.$nextTick(() => {
                const el = this.$refs.chatBody;
                if (!el) return;

                el.addEventListener('scroll', () => {
                    const threshold = 50;
                    this.isAtBottom =
                        el.scrollTop + el.clientHeight >= el.scrollHeight - threshold;

                    // nếu kéo lên đầu → load thêm
                    if (el.scrollTop === 0 && this.lastMessageId) {
                        this.loadHistory();
                    }
                });
            });
        },

        methods: {
            createGroup() {
                const name = prompt('Tên group');
                if (!name) return;

                axios.post('/api/realtime/chat/group', {
                        name
                    })
                    .then(() => this.loadChatRooms());
            },
            openGroupSetting() {
                if (!this.activeRoom) return;

                this.editingGroup = this.activeRoom;
                this.groupName = this.activeRoom.title;
                this.showGroupModal = true;

                axios.get(`/api/realtime/chat/group/${this.editingGroup.id}/members`)
                    .then(res => {
                        this.groupMembers = res.data.members || [];
                    });
            },
            updateGroupAvatar(e) {
                const file = e.target.files[0];
                if (!file || !this.editingGroup) return;

                const form = new FormData();
                form.append('image', file);

                axios.post(
                    `/api/realtime/chat/group/${this.editingGroup.id}/avatar`,
                    form, {
                        headers: {
                            'Content-Type': 'multipart/form-data'
                        }
                    }
                ).then(res => {
                    if (!res.data.ok) return;

                    const image = res.data.image;

                    // update local group
                    this.editingGroup.avatar = image;

                    // update active room nếu đang mở
                    if (this.activeRoom?.id === this.editingGroup.id) {
                        this.activeRoom.avatar = image;
                    }

                    // update list bên trái
                    const room = this.chatRooms.find(r => r.id === this.editingGroup.id);
                    if (room) room.avatar = image;


                }).catch(err => {
                    console.error('updateGroupAvatar error', err);
                });
            },
            updateGroupName() {
                axios.post(`/api/realtime/chat/group/${this.editingGroup.id}`, {
                    name: this.groupName
                }).then(res => {
                    this.editingGroup.title = this.groupName;
                    this.showGroupModal = false;
                });
            },
            shouldShowReadReceipt(index) {
                if (!this.activeRoom) return false;

                if (this.activeRoom.type !== 'private') return false;

                const msg = this.messages[index];

                if (msg.sender_id !== this.me.id) return false;
                if (index !== this.messages.length - 1) return false;

                return !!msg.is_read;
            },
            searchUserToAdd() {
                if (!this.searchMember) {
                    this.searchResult = [];
                    return;
                }

                axios.get('{{ route("api.users.select2_list") }}', {
                    params: {
                        search: this.searchMember
                    }
                }).then(res => {
                    this.searchResult = res.data.data || [];
                });
            },

            addMemberToGroup(user) {
                axios.post(`/api/realtime/chat/group/${this.editingGroup.id}/members`, {
                    user_id: user.id
                }).then(() => {
                    this.searchMember = '';
                    this.searchResult = [];

                    // reload member list
                    return axios.get(`/api/realtime/chat/group/${this.editingGroup.id}/members`);
                }).then(res => {
                    this.groupMembers = res.data.members || [];
                });
            },
            /* ================= SOCKET INIT ================= */
            initSocket() {
                //http://127.0.0.1:3000
                 this.socket = io('https://socket.ginosan.com', {
                //this.socket = io('http://127.0.0.1:3000', {
                    transports: ['websocket'],
                });

                this.socket.on('connect', () => {

                    // 🔑 register user
                    this.socket.emit('chat-register', {
                        user_id: this.me.id,
                        company_id: this.me.company_id,
                    });

                    // ✅ load online users ban đầu
                    this.socket.emit(
                        'chat-get-online-users',
                        this.me.company_id,
                        (res) => {
                            if (res.ok) {
                                this.onlineUserIds = res.users.map(Number);
                            }
                        }
                    );

                    // ✅ load rooms SAU KHI register
                    this.loadChatRooms();
                });

                // realtime online/offline
                this.socket.on('chat-online-users', (payload) => {
                    if (payload.company_id === this.me.company_id) {
                        this.onlineUserIds = payload.users.map(Number);
                    }
                });
                this.socket.on('chat-read-receipt', (payload) => {
                    if (!this.activeRoom) return;
                    if (payload.room_id !== this.activeRoom.id) return;

                    const msg = this.messages.find(m => m.id === payload.message_id);
                    if (!msg) return;

                    if (msg.sender_id === this.me.id) {
                        this.$set(msg, 'is_read', true);
                    }
                });

                // realtime message
                this.socket.on('chat-new-message', (msg) => {
                    let room = this.chatRooms.find(r => r.id === msg.room_id);

                    // ✅ ROOM CHƯA TỒN TẠI → LOAD LẠI LIST
                    if (!room) {
                        this.loadChatRooms();
                        return;
                    }

                    room.last_message = msg.content;
                    this.moveRoomToTop(room.id);

                    if (!this.activeRoom || msg.room_id !== this.activeRoom.id) {
                        room.unread_count = (room.unread_count || 0) + 1;
                        return;
                    }

                    this.messages.push(msg);

                    // ✅ nếu đang đứng trong room + message của người khác
                    if (msg.sender_id !== this.me.id) {
                        this.socket.emit(
                            'chat-mark-read',
                            this.activeRoom.id,
                            msg.id
                        );
                    }

                    this.$nextTick(() => {
                        if (this.isAtBottom) this.scrollBottom();
                    });
                });

            },
            sendFile(e) {
                const file = e.target.files[0];
                if (!file) return;

                const form = new FormData();
                form.append('file', file);

                fetch('/api/realtime/chat/upload', {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': document
                                .querySelector('meta[name="csrf-token"]')
                                .getAttribute('content')
                        },
                        body: form
                    })
                    .then(r => r.json())
                    .then(res => {
                        const fileUrl = `/storage/${res.path}`;

                        this.socket.emit('chat-send-message', {
                            room_id: this.activeRoom.id,
                            type: res.type, // image | file
                            content: res.name,
                            file_path: fileUrl,
                            file_size: res.size
                        });
                    })
                    .catch(err => {
                        console.error('Upload error', err);
                    });
            },
            showAvatar(index) {
                if (index === 0) return true;
                return this.messages[index - 1].sender_id !== this.messages[index].sender_id;
            },
            showName(index) {
                return this.showAvatar(index);
            },
            /* ================= LOAD ROOMS ================= */
            loadChatRooms() {
                this.socket.emit('chat-get-rooms', async (res) => {
                    if (!res.ok) return;

                    const rooms = res.rooms || [];

                    // 🔥 JOIN TẤT CẢ ROOM ĐỂ NHẬN REALTIME
                    rooms.forEach(r => {
                        this.socket.emit('chat-join-room', r.id);
                    });

                    // lấy peer_id của private rooms
                    const peerIds = rooms
                        .filter(r => r.type === 'private' && r.peer_id)
                        .map(r => r.peer_id);

                    const userMap = {};

                    if (peerIds.length) {
                        await new Promise((resolve) => {
                            $.ajax({
                                url: '/api/users/by-ids',
                                type: 'GET',
                                data: {
                                    ids: peerIds
                                },
                                success(users) {
                                    if (Array.isArray(users)) {
                                        users.forEach(u => userMap[u.id] = u);
                                    }
                                    resolve();
                                },
                                error() {
                                    resolve();
                                }
                            });
                        });
                    }

                    this.chatRooms = rooms.map(r => {
                        if (r.type === 'private' && userMap[r.peer_id]) {
                            return {
                                ...r,
                                title: userMap[r.peer_id].name,
                                avatar: userMap[r.peer_id].avatar_url,
                            };
                        }
                        return r;
                    });
                });
            },

            /* ================= SEARCH USER ================= */
            searchSuggest() {
                if (!this.searchUser) {
                    this.suggestUsers = [];
                    return;
                }

                $.ajax({
                    url: '{{ route("api.users.select2_list") }}',
                    type: 'GET',
                    data: {
                        search: this.searchUser
                    },
                    success: (res) => {
                        this.suggestUsers = res.data || [];
                    }
                });
            },
            removeMember(member) {
                if (!confirm(`Xóa ${member.name}?`)) return;

                axios.delete(`/api/realtime/chat/group/${this.editingGroup.id}/members/${member.id}`)
                    .then(() => {
                        this.groupMembers =
                            this.groupMembers.filter(m => m.id !== member.id);
                    });
            },
            /* ================= OPEN PRIVATE CHAT ================= */
            openPrivateChat(user) {
                this.searchUser = '';
                this.suggestUsers = [];

                this.socket.emit('chat-create-private', user.id, (res) => {
                    if (!res.ok) return;

                    const room = {
                        id: res.room_id,
                        type: 'private',
                        title: user.name,
                        peer_id: user.id,
                        avatar: user.avatar_url,
                        last_message: null,
                        unread_count: 0,
                    };

                    // ✅ JOIN ROOM NGAY
                    this.socket.emit('chat-join-room', room.id);

                    // ✅ PUSH VÀO LIST TRƯỚC
                    this.chatRooms.unshift(room);

                    // ✅ OPEN ROOM
                    this.openRoom(room);
                });
            },

            /* ================= OPEN ROOM ================= */
            openRoom(room) {
                this.activeRoom = room;
                room.unread_count = 0;
                this.messages = [];
                this.lastMessageId = null;
                this.isFirstLoad = true;

                this.socket.emit('chat-join-room', room.id);

                // 🔥 MARK READ ALL NGAY KHI MỞ ROOM
                this.socket.emit('chat-mark-read-all', room.id);

                this.loadHistory();
            },

            /* ================= LOAD HISTORY ================= */
            loadHistory() {
                if (this.loadingHistory || !this.activeRoom) return;
                this.loadingHistory = true;

                const el = this.$refs.chatBody;
                const oldHeight = el ? el.scrollHeight : 0;

                this.socket.emit(
                    'chat-load-history', {
                        room_id: this.activeRoom.id,
                        last_id: this.lastMessageId,
                        limit: 20,
                    },
                    (res) => {
                        if (res.ok && res.messages.length) {

                            // LẦN LOAD ĐẦU
                            if (this.isFirstLoad) {
                                this.messages = res.messages;
                                this.lastMessageId = res.messages[0].id;

                                // 🔥 MARK READ
                                const lastMsg = this.messages[this.messages.length - 1];
                                if (lastMsg) {
                                    this.socket.emit(
                                        'chat-mark-read',
                                        this.activeRoom.id,
                                        lastMsg.id
                                    );
                                }

                                this.$nextTick(() => {
                                    this.scrollBottom();
                                    this.isFirstLoad = false;
                                });
                            }
                            // LOAD THÊM (KÉO LÊN)
                            else {
                                const el = this.$refs.chatBody;
                                const oldHeight = el ? el.scrollHeight : 0;

                                this.lastMessageId = res.messages[0].id;
                                this.messages = [...res.messages, ...this.messages];

                                this.$nextTick(() => {
                                    if (el) {
                                        el.scrollTop = el.scrollHeight - oldHeight;
                                    }
                                });
                            }
                        }
                        this.loadingHistory = false;
                    }
                );
            },
            bindChatScroll() {
                this.$nextTick(() => {
                    const el = this.$refs.chatBody;
                    if (!el) return;

                    el.onscroll = () => {
                        const threshold = 40;

                        this.isAtBottom =
                            el.scrollTop + el.clientHeight >= el.scrollHeight - threshold;

                        // kéo lên đầu → load thêm
                        if (el.scrollTop <= 5 && this.lastMessageId && !this.loadingHistory) {
                            this.loadHistory();
                        }
                    };
                });
            },
            /* ================= SEND MESSAGE ================= */
            async sendMessage() {
                if (!this.newMessage.trim() && !this.pendingImage && !this.pendingFile) return;

                const roomId = this.activeRoom.id;

                // 1️⃣ SEND TEXT TRƯỚC
                if (this.newMessage.trim()) {

                    // ⭐ bỏ newline dư ở đầu & cuối
                    const content = this.newMessage
                        .replace(/^\n+/, '')
                        .replace(/\n+$/, '');

                    this.socket.emit('chat-send-message', {
                        room_id: roomId,
                        type: 'text',
                        content,
                    });

                    const room = this.chatRooms.find(r => r.id === roomId);
                    if (room) {
                        room.last_message = content.replace(/\n/g, ' ');
                    }

                    this.newMessage = '';

                    // reset textarea height
                    this.$nextTick(() => {
                        const el = this.$refs.messageInput;
                        if (el) el.style.height = 'auto';
                    });
                }

                // 2️⃣ SEND IMAGE SAU
                if (this.pendingImage) {
                    const form = new FormData();
                    form.append('file', this.pendingImage);

                    try {
                        const res = await fetch('/api/realtime/chat/upload', {
                            method: 'POST',
                            headers: {
                                'X-CSRF-TOKEN': document
                                    .querySelector('meta[name="csrf-token"]')
                                    .getAttribute('content')
                            },
                            body: form
                        }).then(r => r.json());

                        this.socket.emit('chat-send-message', {
                            room_id: roomId,
                            type: 'image',
                            content: 'image',
                            file_path: `/storage/${res.path}`,
                            file_size: res.size
                        });

                    } catch (e) {
                        console.error('upload image error', e);
                    }

                    this.removePendingImage();
                }
                // 3️⃣ SEND FILE SAU
                if (this.pendingFile) {
                    const form = new FormData();
                    form.append('file', this.pendingFile);

                    try {
                        const res = await fetch('/api/realtime/chat/upload', {
                            method: 'POST',
                            headers: {
                                'X-CSRF-TOKEN': document
                                    .querySelector('meta[name="csrf-token"]')
                                    .getAttribute('content')
                            },
                            body: form
                        }).then(r => r.json());

                        this.socket.emit('chat-send-message', {
                            room_id: roomId,
                            type: 'file',
                            content: this.pendingFileName,
                            file_path: `/storage/${res.path}`,
                            file_size: res.size
                        });

                    } catch (e) {
                        console.error('upload file error', e);
                    }

                    this.removePendingFile();
                }
            },
            autoResize() {
                this.$nextTick(() => {
                    const el = this.$refs.messageInput;
                    if (!el) return;

                    el.style.height = 'auto';
                    el.style.height = el.scrollHeight + 'px';
                });
            },

            /* ================= UTILS ================= */
            scrollBottom() {
                const el = this.$refs.chatBody;
                if (el) el.scrollTop = el.scrollHeight;
            },

            moveRoomToTop(roomId) {
                const idx = this.chatRooms.findIndex(r => r.id === roomId);
                if (idx !== -1) {
                    const room = this.chatRooms.splice(idx, 1)[0];
                    this.chatRooms.unshift(room);
                }
            },
            attachImage(e) {
                const file = e.target.files[0];
                if (!file) return;

                this.setPendingImage(file);
                e.target.value = '';
            },
            handlePaste(e) {
                const items = e.clipboardData?.items || [];
                for (const item of items) {
                    if (item.type.startsWith('image/')) {
                        const file = item.getAsFile();
                        this.setPendingImage(file);
                        e.preventDefault();
                        break;
                    }
                }
            },
            setPendingImage(file) {
                this.pendingImage = file;
                this.pendingImagePreview = URL.createObjectURL(file);
            },
            removePendingImage() {
                this.pendingImage = null;
                this.pendingImagePreview = '';
            },
            attachFile(e) {
                const file = e.target.files[0];
                if (!file) return;

                // ❌ chặn image
                if (file.type.startsWith('image/')) {
                    alert('Vui lòng chọn file, không phải hình ảnh');
                    e.target.value = '';
                    return;
                }

                this.pendingFile = file;
                this.pendingFileName = this.shortenFileName(file.name);
                e.target.value = '';
            },
            removePendingFile() {
                this.pendingFile = null;
                this.pendingFileName = '';
            },
            shortenFileName(name) {
                if (name.length <= 20) return name;
                const ext = name.split('.').pop();
                return name.slice(0, 12) + '….' + ext;
            },
            shouldShowDate(index) {
                if (index === 0) return true;

                const prev = this.messages[index - 1].created_at;
                const curr = this.messages[index].created_at;

                return !this.isSameDay(prev, curr);
            },

            isSameDay(a, b) {
                const da = new Date(a);
                const db = new Date(b);
                return (
                    da.getFullYear() === db.getFullYear() &&
                    da.getMonth() === db.getMonth() &&
                    da.getDate() === db.getDate()
                );
            },
            getAvatarUrl(avatar) {
                if (!avatar) {
                    return '/assets/images/default-avatar.png'
                }

                // đã là full url hoặc đã có /storage
                if (
                    avatar.startsWith('http') ||
                    avatar.startsWith('/storage')
                ) {
                    return avatar
                }

                // chưa có => prepend
                return '/storage' + avatar
            },
            formatDate(dateStr) {
                const d = new Date(dateStr);
                const now = new Date();

                const isToday =
                    d.getFullYear() === now.getFullYear() &&
                    d.getMonth() === now.getMonth() &&
                    d.getDate() === now.getDate();

                const yesterday = new Date();
                yesterday.setDate(now.getDate() - 1);

                const isYesterday =
                    d.getFullYear() === yesterday.getFullYear() &&
                    d.getMonth() === yesterday.getMonth() &&
                    d.getDate() === yesterday.getDate();

                const time = d.toLocaleTimeString('ja-JP', {
                    hour: '2-digit',
                    minute: '2-digit'
                });

                if (isToday) return `今日 ${time}`;
                if (isYesterday) return `昨日 ${time}`;

                return d.toLocaleDateString('ja-JP', {
                    year: 'numeric',
                    month: '2-digit',
                    day: '2-digit'
                }) + ` ${time}`;
            },
            shouldShowTime(index) {
                if (index === 0) return true;

                const prev = this.messages[index - 1];
                const curr = this.messages[index];

                // đổi người → hiện time
                if (prev.sender_id !== curr.sender_id) return true;

                // khác phút → hiện time
                return !this.isWithin5Minutes(prev.created_at, curr.created_at);
            },

            isWithin5Minutes(a, b) {
                const da = new Date(a).getTime();
                const db = new Date(b).getTime();

                // chênh lệch mili giây
                const diffMs = Math.abs(da - db);

                // 5 phút = 300000 ms
                return diffMs < 5 * 60 * 1000;
            },
            isSameMinute(a, b) {
                const da = new Date(a);
                const db = new Date(b);

                return (
                    da.getFullYear() === db.getFullYear() &&
                    da.getMonth() === db.getMonth() &&
                    da.getDate() === db.getDate() &&
                    da.getHours() === db.getHours() &&
                    da.getMinutes() === db.getMinutes()
                );
            },
            formatTime(dateStr) {
                const d = new Date(dateStr);
                return d.toLocaleTimeString('ja-JP', {
                    hour: 'numeric',
                    minute: '2-digit'
                });
            },
        }

    });
</script>

<style>
    .chat-layout {
        height: calc(100vh - 120px);
    }

    .chat-left {
        border-right: 1px solid #e5e7eb;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .chat-user-info {
        padding: 15px;
        border-bottom: 1px solid #e5e7eb;
        justify-content: space-between;
        align-items: center;
    }

    .flex-1 {
        flex: 1;
    }

    .chat-search {
        padding: 10px;
        position: relative;
    }

    .suggest-list {
        position: absolute;
        top: 45px;
        left: 10px;
        right: 10px;
        background: #fff;
        border: 1px solid #ddd;
        z-index: 10;
        max-height: 250px;
        overflow-y: auto;
    }

    .pointer {
        cursor: pointer;
    }

    .suggest-list li {
        padding: 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
    }

    .suggest-list li:hover {
        background: #f5f5f5;
    }

    .chat-room-list {
        flex: 1;
        overflow-y: auto;
        height: 100%;
    }

    /* Chrome / Edge / Safari */
    .chat-room-list::-webkit-scrollbar {
        width: 8px;
    }

    .chat-room-list::-webkit-scrollbar-track {
        background: transparent;
    }

    .chat-room-list::-webkit-scrollbar-thumb {
        background-color: #cfd4da;
        border-radius: 10px;
        border: 2px solid transparent;
        background-clip: content-box;
        transition: background-color 0.2s ease;
    }

    .chat-room-list::-webkit-scrollbar-thumb:hover {
        background-color: #adb5bd;
    }

    .chat-room {
        padding: 12px;
        border-bottom: 1px solid #f0f0f0;
        cursor: pointer;
    }

    .chat-room.active {
        background: #e7f1ff;
    }

    .chat-room:hover {
        background: #f8f9fa;
    }

    .online-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #ccc;
    }

    .online-dot.online {
        background: #28a745;
        position: absolute;
        right: 0px;
        bottom: 0px;
        width: 15px;
        height: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .online-dot.online i {
        font-size: 8px;
        color: #fff;
    }

    .online-dot.offline {
        background: #fff;
        position: absolute;
        right: 0px;
        bottom: 0px;
        width: 15px;
        height: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #ddd;
    }

    .online-dot.offline i {
        font-size: 8px;
        color: #ddd;
    }

    .online-dot.online i {
        font-size: 8px;
        color: #fff;
    }

    .avatar-md {
        width: 48px;
        height: 48px;
        border-radius: 50%;
    }

    .avatar-sm {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        position: relative;
        margin-left: 15px;
    }

    .avatar-sm-right {
        width: calc(100% - 44px);
    }

    .avatar-xs {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        margin-right: 8px;
    }

    .avatar-sm i {
        font-size: 18px;
    }

    .chat-right {
        height: 100%;
    }

    .chat-body {
        overflow-y: auto;
        height: 100%;
    }

    .chat-layout {
        height: calc(100vh - 120px);
    }

    .chat-left {
        border-right: 1px solid #e5e7eb;
        display: flex;
        flex-direction: column;
        background: #fff;
    }

    .chat-right {
        display: flex;
        flex-direction: column;
        height: 100%;
        background: #f5f7fb;
    }

    .chat-body {
        flex: 1;
        overflow-y: auto;
        padding: 16px;
        scrollbar-width: thin;
    }

    .chat-body::-webkit-scrollbar {
        width: 6px;
    }

    .chat-body::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 4px;
    }

    .chat-header {
        background: #fff;
        border-bottom: 1px solid #e5e7eb;
        padding: 24px 10px 25px;
    }

    .chat-header i {
        font-size: 28px;
        margin-right: 10px;
    }

    .chat-input {
        background: #fff;
        border-top: 1px solid #e5e7eb;
    }

    .chat-input .input-group {
        border-radius: 10px;
        border: 1px solid #ddd;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        padding: 0px 10px;
    }

    .chat-input .input-group .upload-image i {
        color: #8d8d8dff;
        font-size: 14px;
    }

    .chat-input .input-group .btn-send-data {
        background: unset;
        border: unset;
        border-left: 1px solid #8d8d8dff;
        padding-left: 10px;
    }

    .chat-input .input-group .btn-send-data i {
        color: #8d8d8dff;
        font-size: 14px;
    }

    .chat-input .input-group input {
        border: unset !important;
        flex: 1;
    }

    .chat-input input {
        border-radius: 20px;
    }

    .chat-input .btn {
        border-radius: 20px;
        width: 90px;
    }

    .msg-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        margin-right: 6px;
    }



    .msg-sender {
        font-size: 12px;
        color: #64748b;
        margin-bottom: 2px;
    }

    .chat-msg-wrap {
        display: flex;
        width: 100%;
    }

    .chat-msg-wrap.me {
        justify-content: flex-end;
        align-items: flex-end;
        margin-bottom: 3px;
    }

    .chat-msg-wrap.other {
        justify-content: flex-start;
        flex-direction: column;
        gap: 5px
    }

    .chat-msg-box {
        max-width: 70%;
    }

    .chat-msg {
        padding: 10px 14px;
        border-radius: 14px;
        font-size: 14px;
        line-height: 1.4;
        word-break: normal;
        float: right;
        position: relative;
    }

    .chat-msg.me {
        background: #dcf8c6;
        border-bottom-right-radius: 4px;
        position: relative;
    }

    .chat-msg.other {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-bottom-left-radius: 4px;
        float: left;
    }

    .chat-image {
        max-width: 220px;
        width: 100%;
        border-radius: 8px;
        display: block;
    }

    .chat-file {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: #2563eb;
        text-decoration: none;
        font-weight: 500;
    }

    .chat-file:hover {
        text-decoration: underline;
    }

    .modal-backdrop-custom {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .4);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 999;
    }

    .modal-box {
        background: #fff;
        padding: 20px;
        width: 360px;
        border-radius: 8px;
    }

    .avatar-group {
        font-size: 25px;
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
    }

    .group-label {
        font-weight: 600 !important;
        margin-bottom: .25rem !important;
        font-size: 14px;
    }

    .gap-1 {
        gap: 10px;
    }

    .chat-image-preview {
        position: relative;
        display: inline-block;
        margin: 8px;
    }

    .chat-image-preview img {
        max-width: 120px;
        max-height: 120px;
        border-radius: 8px;
        border: 1px solid #ddd;
    }

    .chat-image-preview .remove-image {
        position: absolute;
        top: -6px;
        right: -6px;
        background: #ef4444;
        color: #fff;
        border-radius: 50%;
        width: 18px;
        height: 18px;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .upload-file i {
        color: #8d8d8dff;
    }

    .chat-file-preview {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 10px;
        border: 1px solid #ddd;
        border-radius: 6px;
        margin: 8px;
        background: #f9fafb;
        font-size: 13px;
    }

    .chat-file-preview i {
        color: #2563eb;
    }

    .chat-file-preview .file-name {
        max-width: 160px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .chat-file-preview .remove-file {
        cursor: pointer;
        color: #ef4444;
        font-weight: bold;
    }

    .chat-date-separator {
        text-align: center;
        font-size: 12px;
        color: #6b7280;
        margin: 16px 0;
        position: relative;
        width: 100%;
    }

    .chat-date-separator::before,
    .chat-date-separator::after {
        content: '';
        position: absolute;
        top: 50%;
        width: 30%;
        height: 1px;
        background: #e5e7eb;
    }

    .chat-date-separator::before {
        left: 0;
    }

    .chat-date-separator::after {
        right: 0;
    }

    .chat-msg-wrap:has(.chat-date-separator),
    .chat-msg-wrap:has(.chat-time-group) {
        flex-direction: column;
    }

    .chat-time-group {
        font-size: 9px;
        color: #9ca3af;
        margin: 10px 0px 0px;
        text-align: center;
    }

    .chat-msg-wrap.me .chat-time-group {
        text-align: right;
        padding-right: 12px;
    }

    .chat-msg-wrap.other .chat-time-group {
        text-align: left;
        padding-left: 12px;
        text-align: left;
        padding-left: 12px;
        position: absolute;
        right: 7px;
        bottom: 1px;
    }

    .chat-msg-wrap.me .chat-time-group {
        position: absolute;
        left: 15px;
        bottom: 1px;
    }

    .chat-msg-box {
        position: relative;
    }

    /* icon con mắt */
    .chat-read-eye {
        position: absolute;
        bottom: -20px;
        right: 6px;
        font-size: 12px;
        color: #000;
        opacity: 0.7;
    }

    /* nếu là message bên trái (other) thì né sang trái */
    .chat-msg-wrap.other .chat-read-eye {
        right: auto;
        left: 6px;
    }

    .chat-textarea {
        resize: none;
        overflow-y: hidden;
        min-height: 38px;
        max-height: 120px;
        line-height: 1.4;
        border: unset;
    }

    .chat-msg {
        padding: 0px 14px 15px;
        border-radius: 14px;
        font-size: 14px;
        line-height: 1.25;
        white-space: pre-line;
        word-break: break-word
    }

    .list-group-item {
        cursor: pointer;
    }

    .footer-modal-group {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        gap: 10px;
    }

    .text-truncate {
        max-width: 80% !important;
    }

    .position-relate {
        position: relative;
    }

    .position-relate .count-read {
        position: absolute;
        left: 0px;
        top: 32%;
        margin: 0px;
        margin-left: 0px !important;
    }

    .group-avatar-name {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        margin-top: 20px;
    }
</style>
@endsection