doomscroll

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const v = await read($, view)
    const [held, done, likedIds] = await Promise.all([read($, isHeld), read($, isDone), read($, liked)])

    if (e.surface !== 'terminal') {
      const { Box, Text } = $.ui.resolve(e)
      return (
        <Box flexDirection="column" padding={1}>
          <Text bold>For You</Text>
          <Text dimColor>The video plays in the terminal (Ghostty or kitty).</Text>
        </Box>
      )
    }

    const { Box, Text, Button, Image, Raster } = $.ui.resolve(e)
    const bodyCols = e.props.bodyColumns
    const bodyRows = e.props.scroll.bodyRows
    const box = layout(bodyCols, bodyRows, v.cell)
    // Recorded only: the daemon's loop sends it (a send from here dies with
    // this render when a newer one supersedes it).
    if (box.cols !== mounted.cols || box.rows !== mounted.rows) mounted = { cols: box.cols, rows: box.rows }
    if (isHiddenPause) {
      // Drawn again after being out of view: play on if Claude still works.
      isHiddenPause = false
      deniedFrames = 0
      void syncPlayback($)
    }
    videoKey = `video-${box.cols}x${box.rows}`
    barKey = `bar-${box.cols}`

    const item = v.item
    const isPlaying = v.status === 'playing'
    const BG = v.bg ?? BLACK_BG
    background = BG
    const source: ImageSource =
      isPlaying && frame !== null
        ? frame.source
        : v.poster !== null
          ? { file: v.poster.file, format: 'rgb', width: v.poster.width, height: v.poster.height, generation: v.poster.generation }
          : blank(BG)
    const fraction = frame !== null && frame.dur > 0 ? frame.pos / frame.dur : 0
    const isLiked = item !== null && likedIds.includes(item.id)
    const isBackToWork = done && !held && v.status === 'paused'
    const under = box.cols + box.rail // the caption runs under the video and the rail

    // One line under the video: the post, or what is going on instead.
    const caption = (() => {
      if (v.status === 'starting' || v.status === 'warming')
        return <Text color={DIM} wrap="truncate">Loading your For You page…</Text>
      if (v.status === 'empty')
        return <Text color={DIM} wrap="truncate">{v.message ?? 'Nothing to watch. /doomscroll add @someone'}</Text>
      if (isBackToWork)
        return <Text color={ACCENT} bold wrap="truncate">Claude's done. Back to work.</Text>
      if (item === null) return <Text color={DIM}> </Text>
      return (
        <Text color={DIM} wrap="truncate">
          {v.status === 'paused' ? <Text color={FG}>❚❚ </Text> : null}
          {v.status === 'loading' ? <Text color={FG}>… </Text> : null}
          <Text color={FG} bold>{`@${item.author}`}</Text>
          {` ${item.desc}`}
        </Text>
      )
    })()

    const rail = box.rail > 0 && (
      <Box flexDirection="column" width={RAIL} marginLeft={GAP} alignItems="flex-start">
        {item !== null && (
          <Text>
            <Text color={BG} backgroundColor={FG} bold>{` ${item.author.slice(0, 1).toUpperCase()} `}</Text>
            <Text color={ACCENT} bold>+</Text>
          </Text>
        )}
        <Text color={FG}> </Text>
        <Text color={isLiked ? ACCENT : FG}>
          {'♥ '}
          <Text color={FG}>{count(item === null ? null : (item.likes ?? 0) + (isLiked ? 1 : 0))}</Text>
        </Text>
        <Text color={FG}>{`❞ ${count(item?.comments)}`}</Text>
        <Text color={FG}>{`⚑ ${count(item?.saves)}`}</Text>
        <Text color={FG}>{`➦ ${count(item?.shares)}`}</Text>
        {v.muted && <Text color={DIM}>♪ off</Text>}
      </Box>
    )

    // Controls only while the pane holds the keys (a click, ctrl+x tab): the
    // hotkeys need their Buttons drawn. Otherwise a hint for the first few.
    const controls = e.props.isFocused ? (
      <Box flexDirection="row" columnGap={2}>
        <Button key="next" plain hotkey="j" label="↓" onPress={() => swipe($, 'next')} />
        <Button key="prev" plain hotkey="k" label="↑" onPress={() => swipe($, 'prev')} />
        <Button key="pause" plain hotkey="p" label={isPlaying ? '❚❚' : '▶'} onPress={() => togglePause($)} />
        <Button key="mute" plain hotkey="m" label={v.muted ? '♪ on' : '♪ off'} onPress={() => toggleMute($)} />
        {item !== null && <Button key="like" plain hotkey="l" label={isLiked ? '♥ liked' : '♥'} onPress={() => toggleLike($, item)} />}
        {item !== null && <Button key="open" plain hotkey="o" label="↗" onPress={() => send($, { op: 'open' })} />}
      </Box>
    ) : (
      <Text color={DIM} wrap="truncate">{v.watched <= 2 && isPlaying ? 'scroll for the next one · click for keys' : ' '}</Text>
    )

    return (
      <Box flexDirection="column" width={bodyCols} height={bodyRows} backgroundColor={BG} alignItems="center" justifyContent="center">
        <Box flexDirection="row" alignItems="flex-end">
          {box.spacer > 0 && <Box width={box.spacer} />}
          <Image key={videoKey} source={source} columns={box.cols} rows={box.rows} alt="Doomscroll needs Ghostty or kitty" />
          {rail}
        </Box>
        <Box flexDirection="row">
          {box.spacer > 0 && <Box width={box.spacer} />}
          <Box flexDirection="column" width={under}>
            <Raster key={barKey} columns={box.cols} rows={1} cells={barCells(box.cols, fraction, BG)} />
            {caption}
            {controls}
          </Box>
        </Box>
      </Box>
    )
  })