<script>
import { cache } from '@abide/abide/shared/cache'
import { tail } from '@abide/abide/ui/tail'
import { html } from '@abide/abide/ui/html'
import { getMessages } from '$server/rpc/getMessages.ts'
import { postMessage } from '$server/rpc/postMessage.ts'
import { messages } from '$server/sockets/messages.ts'
import MessageCard from '$ui/MessageCard.abide'

const { state, computed, linked, effect } = scope()
const { room = 'lobby' } = props()

let draft = state('')
let showRaw = state(false)
let filter = state('all')
const trimmed = computed(() => draft.trim())
const outgoing = linked(() => room + ': ' + trimmed)
const banner = html`<strong>#${room}</strong>`

// client-only reaction — never runs during SSR
effect(() => console.log('draft is now', draft))

// the derived two-way binding target, read down / written up
const get = () => outgoing
const set = (value) => (draft = value)
// mutating RPC from an event handler
const send = () => {
    postMessage({ room, text: trimmed })
    draft = ''
}
</script>

{#snippet chip(label)}
    <span class="rounded bg-slate-100 px-2 text-xs">{label}</span>
{/snippet}

<section class="p-4" attach={(node) => node.focus()} {...{ id: 'chat' }}>
    <h1 class:live={showRaw} style:opacity={showRaw ? 1 : 0.6}>{banner}</h1>

    {#await cache(getMessages)({ room })}
        <p>loading…</p>
    {:then history}
        {#if history.length > 0}
            {#for message, i of history by message.id}
                <MessageCard {...message}>
                    {chip(i)}
                    <p>{message.text}</p>
                </MessageCard>
            {/for}
        {:else if showRaw}
            <p>no history yet</p>
        {:else}
            <p>say hello</p>
        {/if}
    {:catch error}
        <p>failed to load: {error.message}</p>
    {:finally}
        <hr />
    {/await}

    {#for await frame of messages.tail(10)}
        <p class="live-frame">{frame.text}</p>
    {/for}

    {#switch filter}
        {:case 'all'}<p>showing all rooms</p>
        {:case 'mine'}<p>showing my rooms</p>
        {:default}<p>—</p>
    {/switch}

    {#try}
        {#if showRaw}
            <script>const { computed } = scope()
const label = computed(() => 'raw view active')</script>
            <pre>{label}</pre>
        {/if}
    {:catch error}
        <p>render error: {error.message}</p>
    {:finally}
        <small>rendered</small>
    {/try}

    <form onsubmit={send}>
        <input bind:value={draft} placeholder="message" />
        <label><input type="checkbox" bind:checked={showRaw} /> raw</label>
        <label><input type="radio" bind:group={filter} value="all" /> all</label>
        <label><input type="radio" bind:group={filter} value="mine" /> mine</label>
        <input bind:value={{ get, set }} />
        <button type="submit">send</button>
    </form>
</section>

<style>
    .live { color: teal; }
</style>

<script>
const { text = '' } = props()
</script>

<article class="card rounded border p-2">
    <p class="font-medium">{text}</p>
    {#if children}{children()}{:else}<em>no body</em>{/if}
</article>