headspace

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    let shot: HeadspaceSnapshot | null
    try {
      shot = await read($, snapshot)
    } catch {
      shot = null
    }
    if (shot === null || e.props.hasSurvey) {
      return next(e)
    }
    // One band for every plugin: emcc-core or witness may draw beneath, in the rows headspace's one row leaves.
    // What they draw is never swallowed.
    const below = await next({ ...e, props: { ...e.props, maxRows: Math.max(1, e.props.maxRows - 1) } })
    try {
      const row = await bandRow($, $.ui.resolve(e), shot, e.props.bodyColumns)
      if (isBlank(below)) {
        return row
      }
      const { Box } = $.ui.resolve(e)

      // headspace's row first, then the band beneath; a pair taller than maxRows scrolls in the band's window.
      return (
        <Box flexDirection="column">
          {row}
          {below}
        </Box>
      )
    } catch {
      // Writes are refused while drawing: the band beneath stands in, and the pane says the rest.
      return below
    }
  })

async function bandRow($: EngineInterface, els: Els, shot: HeadspaceSnapshot, bodyColumns: number): Promise<RenderElement> {
  const { Box, Text, Button } = els
  const mode = fallback(bodyColumns)
  const columns = Math.max(BAR_MIN, Math.min(BAR_MAX, bodyColumns - BESIDE[mode]))
  const tokens = Object.fromEntries(shot.segments.map(s => [s.kind, s.tokens])) as Partial<Record<HeadspaceKind, number>>
  const rules = await read($, sessionRules)
  const off = offCount(await read($, applied))
  const marked = (await read($, marks)).length
  const stale = await read($, staleCount)
  const cells = widths(shot.segments, shot.window, columns).filter(cell => cell.width > 0)
  const percent = `${Math.round(shot.percent)}%`
  const labelOf = (kind: HeadspaceKind): string => {
    if (mode === 'bare') {
      return LETTER[kind]
    }

    return mode === 'full' && (kind === 'rules' || kind === 'large') ? `${kind} ${formatTokens(tokens[kind] ?? 0)}` : SHORT[kind]
  }
  const after: Partial<Record<HeadspaceKind, Item>> =
    mode === 'bare'
      ? {}
      : {
          ...(off > 0 ? { rules: { key: 'label-off', text: `${off} off`, opens: 'rules' } } : {}),
          ...(marked > 0 ? { large: { key: 'label-marked', text: `${marked} marked`, opens: 'large' } } : {}),
        }
  const items: Item[] = [
    ...cells.flatMap(cell => [{ key: `label-${cell.kind}`, text: labelOf(cell.kind), opens: cell.kind }, ...(after[cell.kind] === undefined ? [] : [after[cell.kind] as Item])]),
    ...(mode !== 'bare' && stale > 0 ? [{ key: 'stale', text: stale === 1 ? '1 change no longer applies' : `${stale} changes no longer apply`, opens: null }] : []),
  ]
  // The cells the bar and the percentage leave, less the two gaps between them.
  const room = bodyColumns - cells.reduce((sum, cell) => sum + cell.width, 0) - percent.length - 4
  const held = pieces(rules)

  return (
    <Box gap={2}>
      <Box flexShrink={0}>{cells.map(cell => segment($, els, cell.kind, cell.width))}</Box>
      <Button key="label-percent" plain label={percent} onPress={() => press($, 'ui.press', () => openOn($, 'rules'))} />
      <Box gap={GAP[mode]} flexGrow={1} flexShrink={1}>
        {items.map(item =>
          item.opens === null ? (
            <Text key={item.key} color={CLAY} wrap="truncate-end">
              {item.text}
            </Text>
          ) : (
            <Button key={item.key} plain dimColor label={item.text} onPress={() => press($, 'ui.press', () => openOn($, item.opens ?? 'rules'))} />
          ),
        )}
        {mode !== 'bare' && room >= CARD_MIN && cells.map(cell => card(els, cell.kind, cardText(cell.kind, tokens[cell.kind] ?? 0, held), room))}
      </Box>
    </Box>
  )
}

function segment($: EngineInterface, { Box, Text, Button }: Els, kind: HeadspaceKind, width: number): RenderElement {
  const run = glyph(kind).repeat(width)
  const hover = { scope: scopeOf(kind), color: LIGHTER[kind] }

  return (
    <Box key={`seg-${kind}`} flexShrink={0}>
      <Text color={COLOURS[kind]} dimColor={kind === 'free' ? true : undefined} hover={hover}>
        {run}
      </Text>
      <Box position="absolute" top={0} left={0} display="none" hover={{ display: 'flex' }}>
        <Button key={`open-${kind}`} plain label={run} hover={hover} onPress={() => press($, 'ui.press', () => openOn($, kind))} />
      </Box>
    </Box>
  )
}

function card({ Box, Text }: Els, kind: HeadspaceKind, text: string, room: number): RenderElement {
  return (
    <Box key={`card-${kind}`} position="absolute" top={0} left={0} width={room} display="none" hover={{ display: 'flex', scope: scopeOf(kind) }}>
      <Text color={COLOURS[kind]} wrap="truncate-end">
        {cut(text, room).padEnd(room)}
      </Text>
    </Box>
  )
}

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const table = $.ui.resolve(e)
    const { Box, Text, Button } = table
    const Input = 'Input' in table ? table.Input : undefined
    const els = { Box, Text, Button }
    try {
      const kind = await read($, selected)
      const at = cursorOf(await read($, cursor))
      const lost = await read($, lostAt)
      const shot = await read($, snapshot)
      const tokens = shot?.segments.find(s => s.kind === kind)?.tokens ?? 0
      const columns = e.props.bodyColumns
      const body =
        kind === 'rules'
          ? await rulesBody($, els, Input, columns, at)
          : kind === 'large'
            ? await largeBody($, els, columns, at)
            : categoriesBody(els, kind, tokens)

      return (
        <Box flexDirection="column" gap={1}>
          {lost !== null && <Text color={CLAY}>{`headspace lost track at ${lost}`}</Text>}
          {tabs($, els, kind)}
          <Text bold color={COLOURS[kind]}>{`${kind}  ${formatTokens(tokens)}`}</Text>
          {body}
        </Box>
      )
    } catch {
      return <Text color={CLAY}>headspace lost track at ui.render</Text>
    }
  })

function tabs($: EngineInterface, { Box, Text, Button }: Els, shown: HeadspaceKind): RenderElement {
  return (
    <Box gap={2} flexWrap="wrap">
      {ORDER.map(kind =>
        kind === shown ? (
          <Text key={`tab-${kind}-on`} color={COLOURS[kind]} inverse bold>
            {` ${kind} `}
          </Text>
        ) : (
          <Box key={`tab-box-${kind}`} gap={1}>
            <Text color={COLOURS[kind]} dimColor={kind === 'free' ? true : undefined}>
              {glyph(kind)}
            </Text>
            <Button key={`tab-${kind}`} plain label={kind} onPress={() => press($, 'ui.press', () => showKind($, kind))} />
          </Box>
        ),
      )}
    </Box>
  )
}