xo

  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.seed) return Text({ children: ['No game loaded. /xo new starts one.'] })
    const columns = e.props.bodyColumns || 60
    const wide = columns >= 50
    const me = claudeMark(g)
    const yourTurn = !g.winner && g.turn === g.you
    const last = g.moves.length ? g.moves[g.moves.length - 1] : -1
    const showHelp = help ?? (wide && g.moves.length === 0)

    const status = g.winner === 'you' ? { text: 'You win! Press n for a new game.', color: 'success', bold: true }
      : g.winner === 'claude' ? { text: 'Claude wins. Press n for a new game.', color: 'error', bold: true }
      : g.winner === 'draw' ? { text: 'A draw. Press n for a new game.', color: 'warning', bold: true }
      : !yourTurn ? { text: 'Claude is thinking…', color: 'claude' }
      : g.moves.length === 0 ? { text: 'Your move: press a digit, or click a square.', color: 'suggestion' }
      : last >= 0 && g.board[last] === me ? { text: 'Claude played ' + (last + 1) + '. Your move.', color: 'suggestion' }
      : { text: 'Your move.', color: 'suggestion' }

    const header = Box({ flexDirection: 'column', children: [
      Box({ flexDirection: 'row', columnGap: 2, flexWrap: 'wrap', children: [
        Text({ bold: true, children: ['XO'] }),
        Text({ children: ['you ', Text({ bold: true, color: 'success', children: [g.you] }), ' · Claude ', Text({ bold: true, color: 'claude', children: [me] })] }),
        Text({ children: ['level ' + g.level] }),
        Text({ dimColor: true, children: ['you ' + g.stats.wins + ' · Claude ' + g.stats.losses + ' · draws ' + g.stats.draws] }),
      ] }),
      Text({ color: status.color, bold: status.bold, wrap: 'wrap', children: [status.text] }),
      ...(g.level === 'hard' && !g.winner ? [Text({ dimColor: true, children: ['Claude plays perfectly on hard: a draw is the best you can get.'] })] : []),
    ] })

    // Every square is a fixed-width Box so the grid lines up on any surface; the
    // Box's color says whose mark it is, since a Button takes no color of its own.
    // An empty square's digit is its hotkey. The desktop draws a hotkey as a key
    // badge beside the label, so there the label is left blank rather than
    // doubling the digit; a taken square has no hotkey and shows its mark.
    const desktop = e.surface === 'desktop'
    const square = (i: number) => {
      const m = g.board[i]
      const lit = g.winningLine?.includes(i)
      const backgroundColor = lit ? 'suggestion' : m === g.you ? 'success' : m ? 'claude' : undefined
      const label = m ?? (desktop ? ' ' : String(i + 1))
      return Box({ width: 6, justifyContent: 'center', backgroundColor, children: [
        Button({ key: 'sq-' + i, label, hotkey: m ? undefined : String(i + 1), dimColor: !m, onPress: async () => {
          let error: string | undefined
          const after = await change($, (cur) => {
            const r = play(cur, i, cur.you)
            error = r.error
            return r.game
          })
          if (error) {
            $.ui.toast(error)
            return
          }
          if (after.winner) endToast($, after)
          else scheduleClaude($, after)
        } }),
      ] })
    }
    const grid = Box({ flexDirection: 'column', children: [0, 1, 2].map((r) => Box({ flexDirection: 'row', columnGap: 1, children: [0, 1, 2].map((c) => square(r * 3 + c)) })) })

    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 the digit shown in a square to play there, or click it. You are ' + g.you + '.'] }),
      Text({ wrap: 'wrap', children: ['2. Claude answers after a moment. Three in a row, column, or diagonal wins.'] }),
      Text({ wrap: 'wrap', children: ['3. u takes your last move back, s swaps sides, l changes the level (easy, normal, hard).'] }),
      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: 'new', label: 'New game', hotkey: 'n', plain: true, onPress: async () => scheduleClaude($, await startNew($)) }),
      Button({ key: 'undo', label: 'Undo', hotkey: 'u', plain: true, onPress: async () => {
        stopThinking()
        let error: string | undefined
        const after = await change($, (cur) => {
          const r = undo(cur)
          error = r.error
          return r.game
        })
        if (error) {
          $.ui.toast(error)
          // Nothing was taken back: if Claude was about to move, it still is.
          scheduleClaude($, after)
        }
      } }),
      Button({ key: 'swap', label: 'Play ' + me, hotkey: 's', plain: true, onPress: async () => scheduleClaude($, await startNew($, { you: me })) }),
      Button({ key: 'level', label: 'Level: ' + g.level, hotkey: 'l', plain: true, onPress: async () => {
        await change($, (cur) => ({ ...cur, level: LEVELS[(LEVELS.indexOf(cur.level) + 1) % LEVELS.length] }))
      } }),
      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'] }),
    ] })

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