<script>
import { cache } from '@abide/abide/shared/cache'
import { tail } from '@abide/abide/ui/tail'
import { getMessages } from '$server/rpc/getMessages.ts'
import { publishChat } from '$server/rpc/publishChat.ts'
import { chat } from '$server/sockets/chat.ts'
import Avatar from '$ui/Avatar.abide'

const { room } = props()                                           // typed via src/.abide/routes.d.ts
const history = scope().computed(() => cache(getMessages)({ room })) // SSR snapshot + reactive refetch
const latest = scope().computed(() => tail(chat))                  // re-renders on every new frame

let from = scope().state('alice')
let text = scope().state('')
let filter = scope().state('all')        // all | mine | others
let onlyUnread = scope().state(false)

async function send(event: SubmitEvent) {
    event.preventDefault()
    if (text.trim() === '') return
    await publishChat({ from, text })                              // server validates, then broadcasts
    text = ''
}
</script>

<template name="message" args={m}>                       <!-- snippet: a reusable builder -->
    <li class="row"><Avatar name={m.from} /> <strong>{m.from}</strong>: {m.text}</li>
</template>

<form onsubmit={send}>
    <input bind:value={from} placeholder="you" />
    <input bind:value={text} placeholder="say something…" />
    <label><input type="checkbox" bind:checked={onlyUnread} /> unread only</label>
    <fieldset>
        <label><input type="radio" bind:group={filter} value="all" /> all</label>
        <label><input type="radio" bind:group={filter} value="mine" /> mine</label>
    </fieldset>
    <button type="submit" disabled={text.trim() === ''}>send</button>
</form>

<template if={latest}>
    <p class="ping">latest from <strong>{latest.from}</strong></p>
    <template else>
        <p class="ping muted">no live messages yet</p>
    </template>
</template>

<template switch={filter}>
    <template case={'mine'}><p>showing your messages</p></template>
    <template default><p>showing every message</p></template>
</template>

<template await={history}>
    <p>loading history…</p>
    <template then="messages">
        <ul>
            <template each={messages} as="m" key="m.id">
                {message(m)}                              <!-- render the snippet -->
            </template>
        </ul>
    </template>
    <template catch="err">
        <p class="error">{err.message}</p>
    </template>
</template>

<style>
    .row { display: flex; gap: 0.5rem; }
    .muted { color: #94a3b8; }
    .error { color: #dc2626; }
</style>