tokenbreak

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.viewport !== undefined) {
      run.seen = {
        columns: e.viewport.columns,
        rows: e.viewport.rows,
        isFullscreen: e.viewport.isFullscreen,
        maxRows: e.props.maxRows,
      }
    }

    const until = await read($, pausedUntil)
    const ad = currentBanner(await read($, ads), await read($, bannerIndex))

    const state = await read($, updateState)

    if (e.props.hasSurvey || until !== null || (ad === undefined && state.kind !== 'required')) {
      run.drawnBanner = undefined

      return next(e)
    }

    if (state.kind === 'required' || ad === undefined) {
      // Too old to earn: the update notice takes the ad's place, and nothing is counted.
      const { Box, Text } = $.ui.resolve(e)

      run.drawnBanner = undefined

      return (
        <Box width={e.props.bodyColumns} marginTop={1} flexDirection="row" gap={1}>
          <Text color={AD_YELLOW}>⬆</Text>
          <Box flexGrow={1} flexShrink={1}>
            <Text wrap="truncate-end">
              <Text bold>Update Tokenbreak to keep earning.</Text>
              {state.kind === 'required' ? ` Version ${state.latest} is out; you have ${MOD_VERSION}.` : ''}
            </Text>
          </Box>
          <Text backgroundColor={tint(AD_YELLOW, 0.22)} color={AD_YELLOW} bold>
            {' /ads update '}
          </Text>
        </Box>
      )
    }

    run.drawnBanner = ad.id

    const { Box, Text, Link, Button } = $.ui.resolve(e)
    const Image = e.surface === 'terminal' && arePicturesOn() ? $.ui.resolve(e).Image : undefined
    const style = await read($, bannerStyle)
    const href = linkable(ad.clickUrl)
    const accent = isHex(ad.accent) ? ad.accent : FALLBACK_ACCENT
    const cta = ad.cta ?? 'Learn more'
    // A logo only within LOGO_MAX_BYTES (parseBatch drops bigger ones): the band redraws
    // constantly, and a small picture goes in one short piece that a redraw can't cut.
    const mark =
      Image !== undefined && ad.logo !== undefined ? (
        <Image key="banner-logo" source={{ png: ad.logo.png }} columns={2} rows={1} alt={ad.glyph ?? ' '} />
      ) : (
        <Text color={accent}>{ad.glyph ?? '●'}</Text>
      )
    // Brand and headline are one link, so the whole line opens the ad.
    const words = (
      <Text wrap="truncate-end">
        <Text color={accent} bold>
          {ad.brand}
        </Text>
        {'  '}
        {ad.headline}
      </Text>
    )
    const action =
      href === undefined ? undefined : style === 'pill' ? (
        // The brand color on a dark tint of itself: reads as a button without a solid block of color.
        <Link href={href}>
          <Text backgroundColor={tint(accent, 0.22)} color={accent} bold>
            {` ${cta} ↗ `}
          </Text>
        </Link>
      ) : (
        <Link href={href}>
          <Text color={accent} bold underline>
            {`${cta} →`}
          </Text>
        </Link>
      )
    const row = (
      <Box flexDirection="row" gap={1} flexGrow={1}>
        {style === 'rule' && <Text color={accent}>▎</Text>}
        {mark}
        <Box flexGrow={1} flexShrink={1}>
          {href === undefined ? words : <Link href={href}>{words}</Link>}
        </Box>
        {action}
        <Box flexDirection="row" gap={1} marginLeft={1}>
          <Text dimColor>sponsored</Text>
          <Text dimColor>·</Text>
          <Button key="hide" label="✕" plain dimColor onPress={() => void hideFor($, 3_600_000)} />
        </Box>
      </Box>
    )

    // marginTop keeps a blank row between the banner and the spinner or transcript above it.
    return style === 'card' ? (
      <Box width={e.props.bodyColumns} borderStyle="round" borderColor={accent} paddingX={1}>
        {row}
      </Box>
    ) : (
      <Box width={e.props.bodyColumns} marginTop={1}>
        {row}
      </Box>
    )
  })

  on('ui.render', { component: 'Pane', requestId: 'tokenbreak-theater' }, async ($, e) => {
    const showing = await read($, theater)
    const list = await read($, ads)
    const isSoundOn = await read($, theaterSound)
    const ad = list.find(one => one.id === showing?.adId) ?? theaterOf(list)
    const href = linkable(ad.clickUrl)
    const accent = isHex(ad.accent) ? ad.accent : FALLBACK_ACCENT
    const { Box, Text, Link, Button } = $.ui.resolve(e)
    const isTextOnly = e.surface !== 'terminal' || !arePicturesOn()
    // The same parts as the banner: brand in its color, a dim label, a button in the brand's color.
    const card = (
      <Box flexDirection="column" gap={1}>
        <Box flexDirection="row" gap={1}>
          <Text color={accent} bold>
            {isTextOnly ? `${ad.glyph ?? '●'} ${ad.brand}` : ad.brand}
          </Text>
          <Text dimColor>sponsored</Text>
        </Box>
        <Text>{ad.headline}</Text>
        <Box flexDirection="row" gap={2}>
          {href !== undefined && (
            <Link href={href}>
              <Text backgroundColor={tint(accent, 0.22)} color={accent} bold>
                {` ${ad.cta ?? 'Learn more'} ↗ `}
              </Text>
            </Link>
          )}
          {ad.audio !== undefined && (
            // Mutes or unmutes; a mute is remembered. Sound always stops when the pane closes.
            <Button
              key="sound"
              label={isSoundOn ? '🔊 mute' : '🔇 sound'}
              plain
              dimColor={!isSoundOn}
              onPress={() => void toggleSound($, ad)}
            />
          )}
        </Box>
        <Text dimColor>Closes when Claude finishes · /ads pause hides ads</Text>
      </Box>
    )

    if (isTextOnly || e.surface !== 'terminal') {
      run.drawnCut = undefined

      return card
    }

    const { Image } = $.ui.resolve(e)
    const cuts = hasVideo(ad) ? cutsOf(ad) : []
    const art = cuts.length === 0 && ad.image === undefined ? theaterArt() : undefined
    const shapes =
      cuts.length > 0
        ? cuts.map(cut => ({ width: cut.width, height: cut.height }))
        : [{ width: ad.image?.width ?? art?.width ?? 16, height: ad.image?.height ?? art?.height ?? 9 }]
    // The cut and arrangement that show the biggest picture in this pane, tall or wide.
    const layout = theaterLayout(e.props.bodyColumns, e.props.scroll.bodyRows, shapes)
    const length = cuts.length > 0 ? lengthOf(ad, layout.shape) : 0

    run.drawnCut = cuts.length > 0 ? { adId: ad.id, index: layout.shape } : undefined

    // A video starts on its poster frame, or where playback is; playVideo swaps the rest in.
    const source: ImageSource =
      (length > 0 ? frameSource(ad, layout.shape, Math.max(0, run.frame ?? posterOf(length)) % length) : undefined) ??
      (ad.image !== undefined ? { png: ad.image.png } : { rgba: art?.rgba ?? '', width: shapes[0]?.width ?? 16, height: shapes[0]?.height ?? 9 })
    const picture = (
      <Image key="theater-image" source={source} columns={layout.columns} rows={layout.rows} alt={`${ad.brand}: ${ad.headline}`} />
    )

    return layout.mode === 'side' ? (
      <Box flexDirection="row" gap={2}>
        {picture}
        <Box flexDirection="column" flexGrow={1} flexShrink={1}>
          {card}
        </Box>
      </Box>
    ) : (
      <Box flexDirection="column" gap={1}>
        <Box flexDirection="row" justifyContent="center">
          {picture}
        </Box>
        {card}
      </Box>
    )
  })