@php
    $chatConfig = [
            'contacts' => $contacts->values(),
            'selected' => $selected,
            'me' => auth()->id(),
            'urls' => [
                'poll' => route('chat.poll'),
                'store' => route('chat.store'),
                'messages' => route('chat.messages', ['user' => '__ID__']),
                'read' => route('chat.read', ['user' => '__ID__']),
                'page' => route('chat.index'),
            ],
            'maxLength' => \App\Models\ChatMessage::MAX_LENGTH,
        ];
@endphp
<x-layouts.app title="Messages" subtitle="Chat with your colleagues." :breadcrumbs="['Messages' => null]">
    <div x-data="chatApp(@js($chatConfig))"
         class="card flex h-[calc(100vh-13rem)] min-h-[480px] overflow-hidden">

        {{-- Conversation list --}}
        <aside class="flex w-full flex-col border-r border-ink-100 sm:w-80 dark:border-ink-800" :class="selected && 'hidden sm:flex'">
            <div class="border-b border-ink-100 p-3 dark:border-ink-800">
                <div class="relative">
                    <x-heroicon-o-magnifying-glass class="pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-ink-400" />
                    <input type="search" x-model="filter" placeholder="Search people…" class="form-input pl-9" aria-label="Search people">
                </div>
                <div class="mt-2 flex items-center justify-between px-1 text-xs text-ink-500">
                    <span x-text="filtered.length + ' people'"></span>
                    <span x-show="unreadTotal > 0" x-cloak class="badge badge-red" x-text="unreadTotal + ' unread'"></span>
                </div>
            </div>
            <ul class="flex-1 overflow-y-auto">
                <template x-for="c in filtered" :key="c.id">
                    <li>
                        <button type="button" @click="open(c)"
                                class="flex w-full items-center gap-3 px-4 py-3 text-left transition hover:bg-ink-50 dark:hover:bg-ink-800/60"
                                :class="selected && selected.id === c.id ? 'bg-brand-50/70 dark:bg-brand-500/10' : ''">
                            <span class="relative shrink-0">
                                <template x-if="c.avatar"><img :src="c.avatar" alt="" class="h-10 w-10 rounded-full object-cover"></template>
                                <template x-if="!c.avatar"><span class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-gradient-to-br from-brand-400 to-orange-500 text-xs font-semibold text-ink-950" x-text="c.initials"></span></template>
                            </span>
                            <span class="min-w-0 flex-1">
                                <span class="flex items-center justify-between gap-2">
                                    <span class="truncate text-sm font-medium text-ink-900 dark:text-white" x-text="c.name"></span>
                                    <span class="shrink-0 text-[11px] text-ink-400" x-text="c.when || ''"></span>
                                </span>
                                <span class="flex items-center justify-between gap-2">
                                    <span class="truncate text-xs" :class="c.unread ? 'font-medium text-ink-800 dark:text-ink-200' : 'text-ink-500'" x-text="c.preview || c.role || ''"></span>
                                    <span x-show="c.unread > 0" class="flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full bg-rose-500 px-1.5 text-[10px] font-semibold text-white" x-text="c.unread"></span>
                                </span>
                            </span>
                        </button>
                    </li>
                </template>
                <li x-show="filtered.length === 0" x-cloak class="p-6 text-center text-sm text-ink-500">No one matches your search.</li>
            </ul>
        </aside>

        {{-- Thread --}}
        <section class="flex min-w-0 flex-1 flex-col" :class="!selected && 'hidden sm:flex'">
            <template x-if="!selected">
                <div class="flex flex-1 flex-col items-center justify-center p-8 text-center">
                    <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-brand-50 text-brand-600 dark:bg-brand-500/10">
                        <x-heroicon-o-chat-bubble-left-right class="h-7 w-7" />
                    </div>
                    <h3 class="mt-4 text-sm font-semibold text-ink-900 dark:text-white">Select a conversation</h3>
                    <p class="mt-1 max-w-xs text-sm text-ink-500">Pick a colleague on the left to read and send messages.</p>
                </div>
            </template>

            <template x-if="selected">
                <div class="flex min-h-0 flex-1 flex-col">
                    <header class="flex items-center gap-3 border-b border-ink-100 px-4 py-3 dark:border-ink-800">
                        <button type="button" class="btn-icon sm:hidden" @click="selected = null" aria-label="Back to conversations"><x-heroicon-m-arrow-left class="h-5 w-5" /></button>
                        <div class="min-w-0">
                            <div class="truncate text-sm font-semibold text-ink-900 dark:text-white" x-text="selected.name"></div>
                            <div class="text-xs text-ink-500" x-text="contactById(selected.id)?.role || ''"></div>
                        </div>
                    </header>

                    <div x-ref="thread" class="flex-1 space-y-1 overflow-y-auto bg-ink-50/50 px-4 py-4 dark:bg-ink-950/40">
                        <div class="text-center" x-show="hasMore" x-cloak>
                            <button type="button" class="btn btn-ghost btn-sm" @click="loadOlder" :disabled="loading">Load earlier messages</button>
                        </div>
                        <template x-if="!loading && messages.length === 0">
                            <p class="py-10 text-center text-sm text-ink-500">No messages yet — say hello 👋</p>
                        </template>
                        <template x-for="(m, i) in messages" :key="m.id">
                            <div>
                                <div x-show="i === 0 || messages[i - 1].day !== m.day" class="my-3 text-center">
                                    <span class="rounded-full bg-white px-3 py-1 text-[11px] font-medium text-ink-500 shadow-sm ring-1 ring-ink-100 dark:bg-ink-800 dark:ring-ink-700" x-text="m.day_label"></span>
                                </div>
                                <div class="flex" :class="m.mine ? 'justify-end' : 'justify-start'">
                                    <div class="max-w-[75%] rounded-2xl px-3.5 py-2 text-sm shadow-sm"
                                         :class="m.mine ? 'rounded-br-md bg-ink-900 text-white dark:bg-brand-500 dark:text-ink-950' : 'rounded-bl-md bg-white text-ink-800 ring-1 ring-ink-100 dark:bg-ink-800 dark:text-ink-100 dark:ring-ink-700'">
                                        <p class="break-words whitespace-pre-wrap" x-text="m.message"></p>
                                        <div class="mt-0.5 flex items-center justify-end gap-1 text-[10px] opacity-60">
                                            <span x-text="m.time"></span>
                                            <template x-if="m.mine"><span x-text="m.read ? '✓✓' : '✓'" :title="m.read ? 'Read' : 'Sent'"></span></template>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>

                    <form @submit.prevent="send" class="flex items-end gap-2 border-t border-ink-100 p-3 dark:border-ink-800">
                        <div class="flex-1">
                            <textarea x-ref="input" x-model="draft" rows="1" :maxlength="maxLength" placeholder="Type a message…" aria-label="Message"
                                      @keydown.enter="if (!$event.shiftKey) { $event.preventDefault(); send(); }"
                                      class="form-input max-h-32 resize-none"></textarea>
                            <div class="mt-1 text-right text-[10px] text-ink-400" x-show="draft.length > maxLength - 40" x-cloak x-text="draft.length + ' / ' + maxLength"></div>
                        </div>
                        <button class="btn btn-brand" :disabled="sending || !draft.trim()" aria-label="Send"><x-heroicon-m-paper-airplane class="h-4 w-4" /></button>
                    </form>
                </div>
            </template>
        </section>
    </div>

    @push('scripts')
        <script>
            document.addEventListener('alpine:init', () => {
                window.Alpine.data('chatApp', (cfg) => ({
                    contacts: cfg.contacts, selected: cfg.selected, me: cfg.me, urls: cfg.urls, maxLength: cfg.maxLength,
                    messages: [], hasMore: false, loading: false, sending: false, draft: '', filter: '', timer: null,

                    init() {
                        if (this.selected) this.open(this.contactById(this.selected.id) || this.selected);
                        this.timer = setInterval(() => this.poll(), 10000);
                        document.addEventListener('visibilitychange', () => { if (!document.hidden) this.poll(); });
                    },
                    destroy() { clearInterval(this.timer); },
                    url(name, id) { return this.urls[name].replace('__ID__', id); },
                    contactById(id) { return this.contacts.find((c) => c.id === id); },
                    get unreadTotal() { return this.contacts.reduce((s, c) => s + (c.unread || 0), 0); },
                    get filtered() {
                        const f = this.filter.trim().toLowerCase();
                        return f ? this.contacts.filter((c) => c.name.toLowerCase().includes(f)) : this.contacts;
                    },
                    lastMessageId() { return this.messages.length ? this.messages[this.messages.length - 1].id : 0; },
                    scrollDown() { this.$nextTick(() => { const t = this.$refs.thread; if (t) t.scrollTop = t.scrollHeight; }); },

                    async open(c) {
                        this.selected = { id: c.id, name: c.name };
                        this.messages = []; this.hasMore = false; this.loading = true;
                        try { history.replaceState(null, '', this.urls.page + '?user=' + c.id); } catch (e) { /* ignore */ }
                        try {
                            const res = await window.axios.get(this.url('messages', c.id));
                            if (!this.selected || this.selected.id !== c.id) return;
                            this.messages = res.data.messages; this.hasMore = res.data.has_more;
                            this.scrollDown();
                            await this.markRead(c.id);
                        } catch (e) { window.toast('Could not load the conversation.', 'error'); }
                        finally { this.loading = false; this.$nextTick(() => this.$refs.input?.focus()); }
                    },

                    async loadOlder() {
                        if (!this.messages.length || !this.selected) return;
                        this.loading = true;
                        const t = this.$refs.thread, before = t.scrollHeight;
                        try {
                            const res = await window.axios.get(this.url('messages', this.selected.id), { params: { before: this.messages[0].id } });
                            this.messages = [...res.data.messages, ...this.messages]; this.hasMore = res.data.has_more;
                            this.$nextTick(() => { t.scrollTop = t.scrollHeight - before; });
                        } finally { this.loading = false; }
                    },

                    async markRead(id) {
                        const c = this.contactById(id);
                        if (c && !c.unread) return;
                        await window.axios.post(this.url('read', id));
                        if (c) c.unread = 0;
                    },

                    async send() {
                        const text = this.draft.trim();
                        if (!text || this.sending || !this.selected) return;
                        if (text.length > this.maxLength) { window.toast('Messages can be at most ' + this.maxLength + ' characters.', 'error'); return; }
                        this.sending = true;
                        try {
                            const res = await window.axios.post(this.urls.store, { receiver_id: this.selected.id, message: text });
                            if (!this.messages.some((m) => m.id === res.data.message.id)) this.messages.push(res.data.message);
                            this.draft = '';
                            const c = this.contactById(this.selected.id);
                            if (c) { c.preview = 'You: ' + text.slice(0, 60); c.when = res.data.message.time; c.last_id = res.data.message.id; this.resort(); }
                            this.scrollDown();
                        } catch (err) {
                            window.toast(err.response?.data?.message || 'Message not sent.', 'error');
                        } finally { this.sending = false; }
                    },

                    resort() {
                        this.contacts.sort((a, b) => (b.last_id - a.last_id) || a.name.localeCompare(b.name));
                    },

                    async poll() {
                        if (document.hidden) return;
                        try {
                            const res = await window.axios.get(this.urls.poll);
                            this.contacts = res.data.contacts;
                            if (this.selected && res.data.last_id > this.lastMessageId()) {
                                const more = await window.axios.get(this.url('messages', this.selected.id), { params: { after: this.lastMessageId() } });
                                const known = new Set(this.messages.map((m) => m.id));
                                const fresh = more.data.messages.filter((m) => !known.has(m.id));
                                if (fresh.length) { this.messages.push(...fresh); this.scrollDown(); }
                                if (fresh.some((m) => !m.mine)) await this.markRead(this.selected.id);
                            }
                        } catch (e) { /* transient network error — retry on next tick */ }
                    },
                }));
            });
        </script>
    @endpush
</x-layouts.app>