bingo

  on('ui.render', { component: 'Pane' }, async ($, e, next) => {
    if (e.requestId !== PANE) return next(e)
    const g = await read($, game)
    const { Box, Text, Button } = $.ui.resolve(e)
    if (!g.you.length) return Text({ children: ['No game loaded. /bingo new starts one.'] })
    const columns = e.props.bodyColumns || 60
    const wide = columns >= 60
    const lastNum = g.called.length ? g.called[g.called.length - 1] : 0
    const recent = g.called.slice(-8).map(callLabel).join('  ')
    // The how-to opens with a fresh game where there is room for it.
    const showHelp = help ?? (wide && g.called.length === 0)

    // Called numbers on your card you haven't marked: the thing to do next.
    const toMark = g.you.map((n, pos) => (pos !== FREE && g.called.includes(n) && !g.yourMarks.includes(pos) ? n : 0)).filter(Boolean)
    const yourLine = g.winner ? null : yourLines(g)[0] ?? null
    const litYours = new Set(lineCells(g.winner === 'you' ? g.winningLine : yourLine))
    const litClaude = new Set(lineCells(g.winner === 'claude' ? g.winningLine : g.claudeLine))

    const status = g.winner === 'you' ? { text: 'BINGO! You won with ' + g.winningLine + '. Press n for a new game.', color: 'success', bold: true }
      : g.winner === 'claude' ? { text: 'Claude won with ' + g.winningLine + '. Press n for a new game.', color: 'error', bold: true }
      : yourLine ? { text: 'You have ' + yourLine + '! Press b to shout Bingo' + (g.claudeLine ? ' before the next call.' : '.'), color: 'success', bold: true }
      : g.claudeLine ? { text: 'Claude has ' + g.claudeLine + ' and claims at the next call. Shout first: b', color: 'warning', bold: true }
      : toMark.length ? { text: 'On your card: ' + toMark.map(callLabel).join(', ') + '. Tab or click the lit cell, then Enter to mark it.', color: 'warning' }
      : g.called.length ? { text: 'Nothing new on your card. Press c for the next number.', dim: true }
      : { text: 'Press c to call the first number.', color: 'suggestion' }

    const header = Box({
      flexDirection: 'column',
      children: [
        Box({ flexDirection: 'row', columnGap: 2, flexWrap: 'wrap', children: [
          Text({ bold: true, children: ['BINGO'] }),
          Text({ dimColor: true, children: ['you vs Claude'] }),
          Text({ children: ['called ' + g.called.length + '/75'] }),
          Text({ bold: true, color: 'inverseText', backgroundColor: 'claude', children: [lastNum ? ' last ' + callLabel(lastNum) + ' ' : ' no call yet '] }),
        ] }),
        Text({ dimColor: true, wrap: 'truncate', children: [recent ? 'recent: ' + recent : 'recent: none'] }),
        Text({ color: status.color, dimColor: status.dim, bold: status.bold, wrap: 'wrap', children: [status.text] }),
      ],
    })

    // Every cell is a fixed-width Box with its content at the right edge, so the
    // columns line up on a surface that collapses spaces or draws a proportional
    // font; nothing is aligned by padding. The center cell reads FREE, four wide.
    const CELL = 4
    const cell = (children, backgroundColor?: string) => Box({ width: CELL, justifyContent: 'flex-end', backgroundColor, children })
    const letters = Box({ flexDirection: 'row', columnGap: 1, children: LETTERS.map((l) => cell([Text({ bold: true, children: [l] })])) })
    const yourRows = [0, 1, 2, 3, 4].map((r) =>
      Box({
        flexDirection: 'row',
        columnGap: 1,
        children: [0, 1, 2, 3, 4].map((c) => {
          const pos = r * 5 + c
          const n = g.you[pos]
          const marked = g.yourMarks.includes(pos)
          const calledNum = pos === FREE || g.called.includes(n)
          const label = pos === FREE ? 'FREE' : String(n)
          // A completed line: the accent. Marked: green. Called and not yet marked:
          // yellow, the cell to press. Not called: dim. The Button itself takes no
          // color, so the Box behind it carries the state.
          const backgroundColor = litYours.has(pos) ? 'suggestion' : marked ? 'success' : calledNum ? 'warning' : undefined
          const button = Button({ key: 'cell-' + pos, label, plain: true, dimColor: !calledNum, onPress: async () => {
            let error: string | undefined
            await change($, (cur) => {
              const r = toggleMark(cur, pos)
              error = r.error
              return r.game
            })
            if (error) $.ui.toast(error)
          } })
          return cell([button], backgroundColor)
        }),
      }),
    )
    const yourCard = Box({ flexDirection: 'column', children: [Text({ bold: true, color: 'success', children: ['Your card'] }), letters, ...yourRows] })

    const claudeRows = [0, 1, 2, 3, 4].map((r) =>
      Box({
        flexDirection: 'row',
        columnGap: 1,
        children: [0, 1, 2, 3, 4].map((c) => {
          const pos = r * 5 + c
          const done = claudeMarked(g, pos)
          const lit = litClaude.has(pos)
          return cell([Text({ color: done ? 'inverseText' : undefined, dimColor: !done, bold: lit, children: [pos === FREE ? 'FREE' : String(g.claude[pos])] })], lit ? 'error' : done ? 'claude' : undefined)
        }),
      }),
    )
    const claudeCard = Box({ flexDirection: 'column', children: [Text({ bold: true, color: 'claude', children: ['Claude\'s card'] }), letters, ...claudeRows] })

    const cards = wide ? Box({ flexDirection: 'row', columnGap: 4, children: [yourCard, claudeCard] }) : Box({ flexDirection: 'column', rowGap: 1, children: [yourCard, claudeCard] })

    const legend = Box({ flexDirection: 'row', columnGap: 2, flexWrap: 'wrap', children: [
      Text({ backgroundColor: 'warning', children: [' 12 '] }),
      Text({ dimColor: true, children: [wide ? 'called, mark it' : 'mark it'] }),
      Text({ backgroundColor: 'success', children: [' 12 '] }),
      Text({ dimColor: true, children: ['marked'] }),
      Text({ backgroundColor: 'suggestion', children: [' 12 '] }),
      Text({ dimColor: true, children: [wide ? 'a full line' : 'line'] }),
      Text({ dimColor: true, children: ['12'] }),
      Text({ dimColor: true, children: ['not called'] }),
    ] })

    const howTo = Box({ flexDirection: 'column', borderStyle: 'round', borderColor: 'suggestion', paddingX: 1, children: [
      Text({ bold: true, children: ['How to play'] }),
      Text({ wrap: 'wrap', children: ['1. Press c to call a number, or a to call one every ' + g.speed + ' seconds.'] }),
      Text({ wrap: 'wrap', children: ['2. A called number on your card lights up yellow: Tab or click it, then Enter to mark it.'] }),
      Text({ wrap: 'wrap', children: ['3. Five in a row, column, or diagonal (FREE counts): press b. Claude claims one call late, so shout first.'] }),
      Text({ dimColor: true, wrap: 'wrap', children: ['Keys need the pane focused: click it if nothing happens. h hides this.'] }),
    ] })

    const footer = Box({
      flexDirection: 'row',
      columnGap: 3,
      flexWrap: 'wrap',
      children: [
        Button({ key: 'call', label: 'Call', hotkey: 'c', plain: true, onPress: () => call($) }),
        Button({ key: 'auto', label: g.auto ? 'Auto on' : 'Auto off', hotkey: 'a', plain: true, onPress: async () => {
          const updated = await change($, (cur) => (cur.winner ? cur : { ...cur, auto: !cur.auto }))
          if (updated.auto) await startAuto($)
          else stopAuto()
        } }),
        Button({ key: 'claim', label: 'Bingo!', hotkey: 'b', plain: true, onPress: async () => {
          let error: string | undefined
          const updated = await change($, (cur) => {
            const r = claim(cur)
            error = r.error
            return r.error ? cur : { ...r.game, auto: false }
          })
          if (error) $.ui.toast(error)
          else {
            stopAuto()
            $.ui.toast('BINGO! You won with ' + updated.winningLine + '.', { timeoutMs: 6000 })
          }
        } }),
        Button({ key: 'new', label: 'New game', hotkey: 'n', plain: true, onPress: () => startNew($) }),
        Button({ key: 'help', label: showHelp ? 'Hide help' : 'Help', hotkey: 'h', plain: true, dimColor: true, onPress: () => {
          help = !showHelp
          $.ui.invalidate('ui.render')
        } }),
        Text({ dimColor: true, children: ['Esc closes · you ' + g.stats.wins + ' · Claude ' + g.stats.losses] }),
      ],
    })

    return Box({ flexDirection: 'column', rowGap: 1, children: showHelp ? [header, cards, legend, howTo, footer] : [header, cards, legend, footer] })
  })