switchboard

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (!isOn || e.props.hasSurvey) return next(e)
    const line = bandLine(await read($, rows))
    if (line === null) return next(e)
    const rest = await next(e)
    const { Box, Button, Text } = $.ui.resolve(e)
    return (
      <Box key="switchboard-wrap" flexDirection="column">
        {rest}
        <Box key="switchboard" flexDirection="row" gap={1}>
          <Text color="warning" wrap="truncate-end">{`! ${line}`}</Text>
          <Button key="switchboard-show" label="Show" onPress={() => openPane($)} />
        </Box>
      </Box>
    )
  })

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const elements = $.ui.resolve(e)
    const { Box, Button, Text } = elements
    if (!isOn) {
      return (
        <Box flexDirection="column">
          <Text key="off" dimColor>
            {OFF_TEXT}
          </Text>
        </Box>
      )
    }
    const list = await read($, rows)
    const isQuietShown = await read($, showQuiet)
    const now = (await read($, readAt)) || (await $.clock.now())
    const columns = e.props.bodyColumns
    const isWide = columns >= 72
    const hero = heroLine(list)
    const others = list.filter(row => !row.isMine)
    const quiet = others.filter(row => row.isQuiet)
    const gone = others.filter(row => row.state === 'gone')
    const active = others.filter(row => !row.isQuiet && row.state !== 'gone')

    // One row per session. The name gives way first, so what it is doing and where always show;
    // a session waiting on you says what for on a line of its own, never cut by the pane's edge.
    const rowOf = (row: SwitchboardRow, isDim = false) => {
      const mark = MARK[row.state]
      const isWaiting = row.state === 'needs-you'
      const words = <Text color={mark.color === 'success' ? undefined : mark.color} dimColor={mark.dimColor}>{stateWords(row, now)}</Text>
      const line = (
        <Box key="line" flexDirection="row" gap={1}>
          <Box key="mark" width={1} flexShrink={0}>
            <Text color={mark.color} dimColor={mark.dimColor}>{mark.shape}</Text>
          </Box>
          <Box key="name" flexGrow={1} flexShrink={1} minWidth={8}>
            <Text wrap="truncate-end" dimColor={isDim} bold={isWaiting}>{row.name}</Text>
          </Box>
          {isWaiting ? null : (
            <Box key="state" flexShrink={0}>
              {words}
            </Box>
          )}
          {isWide ? (
            <Box key="where" width={10} flexShrink={0} justifyContent="flex-end">
              <Text color="subtle">{WHERE_WORDS[row.where]}</Text>
            </Box>
          ) : null}
          {isWide ? (
            <Box key="cost" width={8} flexShrink={0} justifyContent="flex-end">
              <Text color="subtle">{costWords(row.costUsd)}</Text>
            </Box>
          ) : null}
        </Box>
      )
      return (
        <Box key={`row-${row.id}`} flexDirection="column">
          {line}
          {isWaiting ? (
            <Box key="waiting" paddingLeft={2}>
              <Text color="warning" wrap="wrap">{stateWords(row, now)}</Text>
            </Box>
          ) : null}
        </Box>
      )
    }

    const isRoomy = columns >= BOLT_COLUMNS.tiny + 30
    const body: RenderNode[] = [
      <Box key="hero" flexDirection="row" gap={1} alignItems="center">
        {isRoomy ? boltSprite(elements, e.surface, { size: 'tiny', pose: hero.tone === 'warning' ? 'jump' : 'sleep' }, 'hero-bolt') : null}
        <Box key="hero-text">
          <Text bold color={hero.tone}>{hero.text}</Text>
        </Box>
      </Box>,
    ]
    const here = hereLine(list)
    if (here !== null) {
      body.push(
        <Box key="here">
          <Text color="subtle" wrap="truncate-end">{here}</Text>
        </Box>,
      )
    }
    if (others.length === 0) {
      body.push(
        <Box key="empty" marginTop={1}>
          <Text dimColor wrap="wrap">{EMPTY_LINE}</Text>
        </Box>,
      )
    } else {
      body.push(<Box key="gap" height={1} />)
      for (const row of active) body.push(rowOf(row))
      if (quiet.length > 0) {
        body.push(
          <Box key="quiet" flexDirection="row" gap={1}>
            <Box key="mark" width={1} flexShrink={0}>
              <Text dimColor>{MARK.idle.shape}</Text>
            </Box>
            <Text dimColor wrap="truncate-end">{quietLine(quiet.length)}</Text>
            <Button key="quiet-toggle" label={isQuietShown ? 'Hide' : 'Show'} onPress={() => update($, showQuiet, shown => !shown)} />
          </Box>,
        )
        if (isQuietShown) for (const row of quiet) body.push(rowOf(row, true))
      }
      for (const row of gone) body.push(rowOf(row, true))
    }
    body.push(
      <Box key="foot" marginTop={1}>
        <Text color="subtle" wrap="wrap">It only watches: go to a session to answer it. Sessions show up once Switchboard runs in them.</Text>
      </Box>,
    )
    return (
      <Box key="switchboard-pane" flexDirection="column">
        {body}
      </Box>
    )
  })

export function boltSprite(elements: Elements, surface: string, pick: BoltPick, key = 'bolt'): RenderElement {
  const { Box, Text, Raster } = elements
  const cells = boltOf(pick)
  const columns = cells[0]?.length ?? 0
  if (surface === 'terminal' && Raster !== undefined) {
    return <Raster key={key} columns={columns} rows={cells.length} cells={rasterCells(cells)} />
  }
  const paint = (cell: BoltCell): TextProps => ({
    ...(cell.fg !== undefined ? { color: cell.fg } : {}),
    ...(cell.bg !== undefined ? { backgroundColor: cell.bg } : {}),
  })
  if (surface === 'desktop') {
    return (
      <Box key={key} flexDirection="column" flexShrink={0}>
        {cells.map(line => (
          <Box flexDirection="row" flexWrap="nowrap">
            {line.map(cell =>
              cell.fg === undefined && cell.bg === undefined ? <Box width={1} /> : <Box width={1}><Text {...paint(cell)}>{cell.ch}</Text></Box>,
            )}
          </Box>
        ))}
      </Box>
    )
  }
  return (
    <Box key={key} flexDirection="column" flexShrink={0}>
      {cells.map(line => (
        <Text>
          {boltRuns(line).map(run => {
            const text = run.ch.replace(/ /g, ' ')
            return run.fg === undefined && run.bg === undefined ? text : <Text {...paint(run)}>{text}</Text>
          })}
        </Text>
      ))}
    </Box>
  )
}