poker

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const els = $.ui.resolve(e)
    const g = await read($, game)
    const why = await read($, alert)
    const up = await read($, logScroll)
    const columns = e.props.bodyColumns ?? e.viewport?.columns ?? 80
    const rows = e.props.scroll?.bodyRows ?? e.viewport?.rows ?? 24
    const open = await read($, settingsOpen)
    return tableView(els as never, g, why, up, open, columns, rows, await background($), intents($))
  })

export function tableView(els: Els, g: Game, alert: Alert | null, logScroll: number, settingsOpen: boolean, columns: number, rows: number, background: string | undefined, on: Intents) {
  const { Box, Text } = els
  const lang = g.profile.lang
  return (
    <Box flexDirection="column" width={columns} minHeight={rows} backgroundColor={background}>
      {header(els, g, lang, settingsOpen, on)}
      {settingsOpen && settings(els, g, lang, on)}
      {/* one row held for the alert, shown or not, so nothing below it moves */}
      <Box justifyContent="center" height={1}>
        {alert && (
          <Text color={alert === 'done' ? 'green' : 'yellow'} bold>
            {t(lang, alert === 'permission' ? 'alertPermission' : alert === 'question' ? 'alertQuestion' : 'alertDone')}
          </Text>
        )}
      </Box>
      <Box flexDirection="column" flexGrow={1} justifyContent="center" alignItems="center">
        {g.table ? seated(els, g, g.table, lang, columns, logScroll, on) : lobby(els, g, lang, columns, on)}
      </Box>
    </Box>
  )
}

function header(els: Els, g: Game, lang: Lang, settingsOpen: boolean, on: Intents) {
  const { Box, Text, Button } = els
  const p = g.profile
  const stake = g.table ? ` · ${g.table.smallBlind}/${g.table.bigBlind}` : ''
  return (
    <Box flexDirection="row" justifyContent="space-between" marginBottom={1}>
      <Text>
        <Text color={ACCENT} bold>
          ♠ {t(lang, 'title')}
        </Text>
        <Text dimColor>{stake}</Text>
        <Text dimColor>
          {' · '}
          {t(lang, 'bankroll')} {chips(p.bankroll)} · {t(lang, 'hands')} {p.hands} · {t(lang, 'net')}{' '}
        </Text>
        <Text color={p.net > 0 ? 'green' : p.net < 0 ? 'red' : undefined} dimColor={p.net === 0}>
          {signed(p.net)}
        </Text>
      </Text>
      <Button key="settings" hotkey="s" plain onPress={on.toggleSettings}>
        {`${t(lang, 'settings')} ${settingsOpen ? '▴' : '▾'}`}
      </Button>
    </Box>
  )
}

function settings(els: Els, g: Game, lang: Lang, on: Intents) {
  const { Box, Button } = els
  return (
    <Box flexDirection="row" gap={3} justifyContent="flex-end" flexWrap="wrap">
      <Button key="lang" hotkey="l" plain onPress={on.toggleLang}>
        {t(lang, 'language')}
      </Button>
      <Button key="cards" hotkey="v" plain onPress={on.toggleCards}>
        {`${t(lang, 'cardStyle')} ${g.profile.cardStyle === 'compact' ? 'A♠' : '[A♠]'}`}
      </Button>
      <Button key="unit" hotkey="u" plain onPress={on.toggleUnit}>
        {`${t(lang, 'unit')} ${g.profile.chipUnit === 'bb' ? 'BB' : t(lang, 'chips')}`}
      </Button>
    </Box>
  )
}

function seated(els: Els, g: Game, table: TableState, lang: Lang, columns: number, logScroll: number, on: Intents) {
  const { Box } = els
  const wide = columns >= TABLE_COLS
  return (
    <Box flexDirection="column" width={wide ? TABLE_COLS : columns}>
      {wide ? drawTable(els, g, table, lang) : drawList(els, g, table, lang, columns)}
      {/* fixed heights below the table: the centered block keeps one size through the Hand */}
      <Box marginTop={1}>{drawLog(els, g, table, lang, wide ? TABLE_COLS : columns, logScroll, { up: () => on.scrollLog(1), down: () => on.scrollLog(-1) })}</Box>
      <Box flexDirection="column" minHeight={CONTROL_ROWS} marginTop={1}>
        {controls(els, g, table, lang, on)}
      </Box>
    </Box>
  )
}

export function drawLog(els: Els, g: Game, table: TableState, lang: Lang, cols: number, scroll: number, on: { up: () => void; down: () => void }) {
  const fmt = amountOf(g, table)
  const inner = cols - 4
  const lines: Runs[] = []
  let line: Runs = []
  let used = 0
  const name = (seat: number): [string, Ink?] => {
    const o = table.seats[seat]
    return [o?.kind === 'player' ? t(lang, 'you') : (o?.name ?? '?'), { bold: o?.kind === 'player' }]
  }
  const runsWidth = (runs: Runs) => runs.reduce((w, [text]) => w + width(text), 0)
  const newLine = (label: Runs = []) => {
    if (line.length) lines.push(line)
    const pad = LABEL_COLS - runsWidth(label)
    line = [...label, [' '.repeat(Math.max(1, pad))]]
    used = Math.max(LABEL_COLS, runsWidth(label) + 1)
  }
  /** Adds one item after a separator, wrapping onto an indented line when it does not fit. */
  const add = (item: Runs) => {
    const w = runsWidth(item)
    const first = used <= LABEL_COLS
    if (!first && used + 3 + w > inner) newLine()
    if (used > LABEL_COLS && line.length > 1) {
      line.push([' · ', DIM])
      used += 3
    }
    line.push(...item)
    used += w
  }
  const board = table.hand?.board ?? []
  let settled = false
  const SIZE = { preflop: 0, flop: 3, turn: 4, river: 5 } as const

  newLine([[t(lang, 'preflop'), DIM]])
  for (const e of g.log) {
    switch (e.kind) {
      case 'blind':
        add([name(e.seat), [` ${e.blind} `, DIM], [fmt(e.amount)]])
        break
      case 'action': {
        const amount: Runs = e.action === 'fold' || e.action === 'check' ? [] : [[` ${fmt(e.to)}`]]
        add([name(e.seat), [` ${t(lang, e.action)}`, DIM], ...amount])
        break
      }
      case 'street':
        newLine([[t(lang, e.street), DIM]])
        line.push(...compact(board.slice(0, SIZE[e.street])))
        used += runsWidth(compact(board.slice(0, SIZE[e.street])))
        newLine()
        break
      case 'pot': {
        // the first pot starts the result group under its label; the rest follow beneath
        newLine(settled ? [] : [[t(lang, 'settle'), DIM]])
        settled = true
        const label = e.index === 0 ? t(lang, 'mainPot') : `${t(lang, 'sidePot')} ${e.index}`
        const who = e.winners.map((s) => name(s)[0]).join(', ')
        const verb = e.winners.length > 1 ? t(lang, 'split') : t(lang, 'wins')
        const how = e.category === null ? '' : ` (${categoryName(lang, e.category)})`
        line.push([`${label} ${fmt(e.amount)}: ${who} ${verb}${how}`, { color: 'green' }])
        used = inner
        break
      }
    }
  }
  if (line.some(([text]) => text.trim() !== '')) lines.push(line)

  // the window over the lines: from row `scroll`, or the newest rows while following (-1)
  const maxTop = Math.max(0, lines.length - LOG_ROWS)
  logMaxTop = maxTop
  const top = scroll < 0 ? maxTop : Math.min(scroll, maxTop)
  const shown = lines.slice(top, top + LOG_ROWS)

  // the top border is a row of its own, carrying the scroll keys; the canvas draws the rest
  const { Box, Text, Button } = els
  const title = ` ${t(lang, 'logTitle')} `
  const keys = 4 + 1 + 4 // `k: ↑`, a rule, `j: ↓`
  const rule = Math.max(1, cols - 2 - width(title) - keys - 3)
  const canvas = new Canvas(cols, LOG_ROWS + 1)
  for (let y = 0; y < LOG_ROWS; y++) {
    canvas.put(0, y, '│', DIM)
    canvas.put(cols - 1, y, '│', DIM)
  }
  canvas.put(0, LOG_ROWS, '╰' + '─'.repeat(cols - 2) + '╯', DIM)
  if (top > 0) canvas.put(cols - 1, 0, '▲', { color: ACCENT })
  if (top < maxTop) canvas.put(cols - 1, LOG_ROWS - 1, '▼', { color: ACCENT })
  shown.forEach((runs, i) => canvas.spans(2, i, runs))
  return (
    <Box key="log" flexDirection="column" width={cols}>
      <Box flexDirection="row">
        <Text dimColor>{`╭─${title}${'─'.repeat(rule)}─`}</Text>
        <Button key="log-up" hotkey="k" plain onPress={on.up}>
          ↑
        </Button>
        <Text dimColor>─</Text>
        <Button key="log-down" hotkey="j" plain onPress={on.down}>
          ↓
        </Button>
        <Text dimColor>─╮</Text>
      </Box>
      {canvas.draw(els, 'log-body')}
    </Box>
  )
}