now-playing

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const players = await read($, playersAtom)
    const active = await read($, trackAtom)
    const picked = await read($, sourceAtom)
    const covers = await read($, coversAtom)
    const artMode = await read($, artModeAtom)
    await read($, tickAtom) // subscribes the pane to the 1 s redraw
    const lyricsOn = await read($, lyricsOnAtom)
    await read($, lyricsRevAtom) // redraws when a lyrics fetch lands
    const now = await $.clock.now()
    const width = Math.max(1, e.props.bodyColumns)

    // An empty list means no poll has answered yet, which is not the same as
    // a poll that found nothing installed.
    const installed = players.filter(p => p.isInstalled)
    const shown: PlayerApp = picked ?? active?.app ?? installed[0]?.app ?? 'Music'
    const player = players.find(p => p.app === shown)
    const track = player?.track ?? null

    // The pane redraws on success; a control that failed says so in a toast.
    const press = (action: Action, value?: number) => async () => {
      try {
        const result = await control($, action, shown, value)
        if (!result.startsWith(`${shown} is playing`) && !result.startsWith(`${shown} is paused`)) $.ui.toast(result)
      } catch (error) {
        $.ui.toast(`${action} failed: ${String(error)}`)
      }
    }

    const cover = covers[shown]
    const hasCover = track !== null && cover !== undefined && cover.trackId === track.id
    const accent = readable(hasCover && cover.accent !== undefined ? cover.accent : NEUTRAL)
    const layout = layoutFor(width)

    const state: PaneView['state'] =
      players.length > 0 && installed.length === 0 ? 'none-installed' : player === undefined || !player.isRunning ? 'closed' : track === null ? 'stopped' : 'track'

    const position = track === null ? 0 : positionNow(track, polledAt[track.app] ?? now, now)
    let lyrics: PaneView['lyrics'] = { status: 'off' }
    if (track !== null && state === 'track' && lyricsOn) {
      const entry = lyricsCache.get(track.id)
      lyrics =
        entry === undefined
          ? { status: 'loading' }
          : entry.status === 'none'
            ? { status: 'none' }
            : { status: 'found', ...lyricWindow(entry.lines, position) }
    }
    isTicking = state === 'track' && track?.state === 'playing'
    isPaneOpen = true

    // The sleeve: the cover, with the record peeking out from behind it.
    // Image and Raster are the terminal's alone; the engine draws an Image
    // only where it detects kitty graphics, so half-block cells are the default.
    record = null
    let sleeve = null
    if (track !== null && state === 'track' && e.surface === 'terminal' && layout.art !== 0) {
      const { Box, Image, Raster } = $.ui.resolve(e)
      const size = layout.art
      const artRows = size / 2
      const cells = hasCover ? cover.cells[`${size}`] : undefined
      const art =
        hasCover && (artMode === 'image' || cells === undefined) ? (
          <Image
            key="cover"
            source={{ file: cover.file, format: 'png', generation: cover.generation }}
            columns={size}
            rows={artRows}
            alt={`${track.album} cover (try /music art blocks)`}
          />
        ) : cells !== undefined ? (
          <Raster key="cover" columns={size} rows={artRows} cells={cells} />
        ) : null
      if (art !== null) {
        record = layout.peek > 0 ? { columns: layout.peek, rows: artRows, label: accent, isPlaying: track.state === 'playing' } : null
        sleeve = (
          <Box flexDirection="row">
            {art}
            {record !== null && (
              <Raster key="record" columns={record.columns} rows={record.rows} cells={recordCells(record.columns, record.rows, theta, accent)} />
            )}
          </Box>
        )
      }
    }

    const view: PaneView = {
      width,
      tabs: installed.map(({ app }) => ({
        app,
        label: LABELS[app],
        isShown: app === shown,
        isPlaying: players.find(p => p.app === app)?.track?.state === 'playing',
      })),
      shown,
      shownLabel: LABELS[shown],
      canFavorite: shown === 'Music' && track?.favorited !== undefined,
      state,
      track,
      position,
      lyrics,
      accent,
      layout,
      sleeve,
      handlers: {
        toggleLyrics: () => void setLyricsOn($, !lyricsOn),
        pickTab: app => void update($, sourceAtom, () => app),
        open: () => void openApp($, shown),
        press,
        toggleShuffle: () => playModeBusy.shuffle || void notify($, setPlayMode($, 'shuffle', undefined, shown), 'Shuffle'),
        cycleRepeat: () => playModeBusy.repeat || void notify($, setPlayMode($, 'repeat', undefined, shown), 'Repeat'),
        toggleFavorite: () =>
          void (async () => {
            try {
              const result = await setFavorite($, !(track?.favorited ?? false))
              if (!result.startsWith('Added') && !result.startsWith('Removed')) $.ui.toast(result)
            } catch (error) {
              $.ui.toast(`Favorite failed: ${String(error)}`)
            }
          })(),
      },
    }
    return paneTree($.ui.resolve(e), view)
  })

export function paneTree(ui: Pick<Elements['desktop'], 'Box' | 'Text' | 'Button'>, view: PaneView) {
  const { Box, Text, Button } = ui
  const row = (key: string, ...children: RenderChildren[]) => (
    <Box key={key} flexDirection="row" justifyContent="center" width={view.width}>
      {children}
    </Box>
  )
  const tabs =
    view.tabs.length > 1
      ? row(
          'row-tabs',
          <Box flexDirection="row" columnGap={3}>
            {view.tabs.map((t, i) => (
              <Button
                key={`tab-${t.app}`}
                label={t.isPlaying ? `${t.label} ♪` : t.label}
                hotkey={String(i + 1)}
                plain
                dimColor={!t.isShown}
                onPress={() => view.handlers.pickTab(t.app)}
              />
            ))}
          </Box>,
        )
      : null
  const label = view.shownLabel

  if (view.state === 'none-installed') {
    return (
      <Box flexDirection="column">
        {row('row-message', <Text dimColor>Install Apple Music or Spotify to use this player.</Text>)}
      </Box>
    )
  }
  if (view.state === 'closed') {
    return (
      <Box flexDirection="column" rowGap={1}>
        {tabs}
        {row('row-message', <Text dimColor>{label} is closed.</Text>)}
        {row('row-action', <Button key="open" label={`Open ${label}`} hotkey="o" plain onPress={view.handlers.open} />)}
      </Box>
    )
  }
  if (view.state === 'stopped' || view.track === null) {
    return (
      <Box flexDirection="column" rowGap={1}>
        {tabs}
        {row('row-message', <Text dimColor>{label} is stopped.</Text>)}
        {row(
          'row-action',
          <Button
            key="toggle"
            label="▶ Play"
            hotkey="k"
            plain
            onPress={view.handlers.press('play')}
          />,
        )}
      </Box>
    )
  }

  const track = view.track
  const isPlaying = track.state === 'playing'
  const isShuffle = track.shuffle === true
  const isRepeat = track.repeat === 'all' || track.repeat === 'one'
  const played = track.duration > 0 ? Math.min(view.width - 1, Math.floor((view.position / track.duration) * view.width)) : 0
  return (
    <Box flexDirection="column">
      {tabs}
      <Box height={1} />
      {view.sleeve !== null && row('row-sleeve', view.sleeve as RenderChildren)}
      <Box height={1} />
      {wrapLines(track.name, view.width).map((line, i) => row(`row-title-${i}`, <Text bold>{line}</Text>))}
      {wrapLines(track.artist, view.width).map((line, i) => row(`row-artist-${i}`, <Text>{line}</Text>))}
      {wrapLines(track.album, view.width).map((line, i) => row(`row-album-${i}`, <Text dimColor>{line}</Text>))}
      {view.lyrics.status !== 'off' && <Box height={1} />}
      {view.lyrics.status === 'found' && row('row-lyric-prev', <Text dimColor wrap="truncate-end">{view.lyrics.prev || ' '}</Text>)}
      {view.lyrics.status === 'found' && row('row-lyric-current', <Text bold color={hex(view.accent)} wrap="truncate-end">{view.lyrics.current || ' '}</Text>)}
      {view.lyrics.status === 'found' && row('row-lyric-next', <Text dimColor wrap="truncate-end">{view.lyrics.next || ' '}</Text>)}
      {(view.lyrics.status === 'none' || view.lyrics.status === 'loading') &&
        row('row-lyric-none', <Text dimColor>{view.lyrics.status === 'none' ? 'No synced lyrics' : 'Looking for lyrics…'}</Text>)}
      <Box height={1} />
      <Box key="row-bar" flexDirection="row" width={view.width}>
        <Text color={hex(view.accent)}>{'━'.repeat(played)}</Text>
        <Text color={hex(view.accent)} bold>╸</Text>
        <Text dimColor>{'─'.repeat(Math.max(0, view.width - played - 1))}</Text>
      </Box>
      <Box key="row-times" flexDirection="row" justifyContent="space-between" width={view.width}>
        <Text dimColor>{formatTime(view.position)}</Text>
        <Text dimColor>{formatTime(track.duration)}</Text>
      </Box>
      <Box height={1} />
      {row(
        'row-transport',
        <Box flexDirection="row" columnGap={4}>
          <Button key="prev" label="⏮" hotkey="b" plain onPress={view.handlers.press('previous')} />
          <Button key="toggle" label={isPlaying ? '⏸' : '▶'} hotkey="k" plain onPress={view.handlers.press('toggle')} />
          <Button key="next" label="⏭" hotkey="n" plain onPress={view.handlers.press('next')} />
          {view.canFavorite && (
            <Button key="fav" label={track.favorited === true ? '♥' : '♡'} hotkey="f" plain onPress={view.handlers.toggleFavorite} />
          )}
        </Box>,
      )}
      {row(
        'row-playmode',
        <Box flexDirection="row" columnGap={3}>
          <Box flexDirection="row" columnGap={1}>
            {isShuffle ? <Text color={hex(view.accent)}>●</Text> : <Text> </Text>}
            <Button key="shuffle" label={`⇄ Shuffle ${isShuffle ? 'on' : 'off'}`} hotkey="s" plain dimColor={!isShuffle} onPress={view.handlers.toggleShuffle} />
            {/* "on" is one column narrower than "off"; keep the row's width fixed */}
            {isShuffle && <Text> </Text>}
          </Box>
          <Box flexDirection="row" columnGap={1}>
            {isRepeat ? <Text color={hex(view.accent)}>●</Text> : <Text> </Text>}
            <Button key="repeat" label={`↻ Repeat ${track.repeat ?? 'off'}`} hotkey="r" plain dimColor={!isRepeat} onPress={view.handlers.cycleRepeat} />
          </Box>
        </Box>,
      )}
      {row(
        'row-volume',
        <Box flexDirection="row" columnGap={1}>
          <Button key="vol-down" label="−" hotkey="d" plain dimColor onPress={view.handlers.press('volume', track.volume - 10)} />
          <Text dimColor>vol {track.volume}</Text>
          <Button key="vol-up" label="+" hotkey="u" plain dimColor onPress={view.handlers.press('volume', track.volume + 10)} />
          <Button key="lyrics" label={view.lyrics.status === 'off' ? 'lyrics off' : 'lyrics on'} hotkey="l" plain dimColor onPress={view.handlers.toggleLyrics} />
        </Box>,
      )}
    </Box>
  )
}