<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'
  import { sendMessage } from '$server/rpc/sendMessage'
  import { chat } from '$server/sockets/chat'
  import Card from '$ui/Card.abide'
  import Message from '$ui/Message.abide'
  import Risky from '$ui/Risky.abide'

  // props() is the ambient prop reader — no import; destructure with defaults + rest
  const { channel = 'general', ...rest } = props()

  // destructure-once: reach every reactive primitive through scope(), then call bare
  const { state, computed, linked, effect } = scope()

  let draft = state('')
  let count = state(0)
  let muted = state(false)
  let topic = state('all')
  const doubled = computed(() => count * 2)
  const banner = linked(() => `# ${channel}`)

  // live reads off the §3 socket: latest frame, plus a window of the last 20
  const latest = tail(chat)
  const recent = tail(chat, { last: 20 })

  // effect runs client-only (stripped from SSR)
  effect(() => {
    document.title = `${channel} (${count})`
  })

  // an event handler calling a mutating RPC
  async function send() {
    await sendMessage({ channel, text: draft })
    draft = ''
    count = count + 1
  }

  // the derived two-way binding's accessors
  const get = () => count
  const set = (value) => (count = Number(value))

  // an attachment: runs against the element at mount
  const focus = (node) => node.focus()
</script>

<main {...rest}>
  <h1 class:muted={muted} style:opacity={muted ? 0.5 : 1}>{banner}</h1>
  <p>seen {count} — doubled {doubled}</p>
  <p>{html`<em>latest:</em> ${latest?.text ?? '—'}`}</p>

  <form onsubmit={send}>
    <input bind:value={draft} attach={focus} placeholder="message" />
    <label><input type="checkbox" bind:checked={muted} /> mute</label>
    <label><input type="radio" bind:group={topic} value="all" /> all</label>
    <label><input type="radio" bind:group={topic} value="mine" /> mine</label>
    <input type="range" min="0" max="50" bind:value={{ get, set }} />
    <button>send</button>
  </form>

  {#snippet row(message)}
    <li>{html`<strong>${message.author}</strong>`}: {message.text}</li>
  {/snippet}

  {#if recent.length === 0}
    <p>No messages yet.</p>
  {:else if muted}
    <p>Muted — {recent.length} hidden.</p>
    <script>
      // a nested script scoped to this branch — its own scope(), no imports
      const { computed } = scope()
      const note = computed(() => `${recent.length} while muted`)
    </script>
    <small>{note}</small>
    <style>
      small { color: gray; }
    </style>
  {:else}
    <ul>
      {#for message, i of recent by message.id}
        <Card title={`#${i}`}>{row(message)}</Card>
      {/for}
    </ul>
  {/if}

  <h2>filter</h2>
  {#switch topic}
    {:case 'all'}<p>showing everything</p>
    {:case 'mine'}<p>showing mine</p>
    {:default}<p>unknown filter</p>
  {/switch}

  <h2>history</h2>
  {#await cache(getMessages)({ channel })}
    <p>loading…</p>
  {:then list}
    <ul>
      {#for entry of list by entry.id}
        <Message {...entry} />
      {/for}
    </ul>
  {:catch error}
    <p>failed: {error.message}</p>
  {:finally}
    <hr />
  {/await}

  <h2>live</h2>
  <ul>
    {#for await frame of chat}
      <li>{frame.text}</li>
    {/for}
  </ul>

  {#try}
    <Risky />
  {:catch error}
    <p>widget crashed: {error.message}</p>
  {:finally}
    <span>boundary settled</span>
  {/try}
</main>

<style>
  main { font-family: system-ui; }
  .muted { text-decoration: line-through; }
</style>

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

<section class="card">
  <h3>{title}</h3>
  {#if children}{children()}{:else}<p>empty</p>{/if}
</section>

<style>
  .card { border: 1px solid #ddd; }
</style>