spotify

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey) return next(e)
    const s = await read($, settings)
    const GREEN = accentOf(s)
    const shout = await read($, flash)
    const f = await read($, focus)
    const left = f ? await read($, focusLeft) : 0
    const p = isOn(s, 'band') ? await read($, player) : null
    if (!p && !shout && !f) return next(e)
    const { Box, Text, Button } = $.ui.resolve(e)
    const line = p && isOn(s, 'bandLyrics') ? await currentLyric($) : undefined
    const canControl = (await read($, premium)) !== false
    const busy = await read($, busyKeys)

    return (
      <Box flexDirection="column">
        {shout !== '' && (
          <Text color={GREEN} bold wrap="wrap">
            {shout}
          </Text>
        )}
        {f && (
          <Box flexDirection="row" gap={1}>
            <Text color={f.phase === 'focus' ? GREEN : 'yellow'} bold>
              {f.phase === 'focus' ? '◎ Focus' : '☕ Break'} {clockLeft(left * 1000)}
            </Text>
            <Button key="focus-stop" label="stop" plain dimColor onPress={() => quiet(stopFocus($))} />
          </Box>
        )}
        {p && (
          <Box flexDirection="row" gap={1}>
            <Text color={GREEN}>{p.isPlaying ? '♫' : '⏸'}</Text>
            <Box flexShrink={1}>
              <Text wrap="truncate-end">
                <Text bold>{p.title}</Text>
                <Text dimColor> — {p.artists}</Text>
              </Text>
            </Box>
            {isOn(s, 'bandTime') && e.props.bodyColumns > 70 && <Text dimColor>{clock(p.progressMs)}/{clock(p.durationMs)}</Text>}
            {canControl && isOn(s, 'bandControls') && <Button key="band-prev" label={busyText(busy, 'band-prev', '⏮', '…')} plain onPress={() => quiet(withBusy($, 'band-prev', () => back($)))} />}
            {canControl && isOn(s, 'bandControls') && <Button key="band-toggle" label={busyText(busy, 'band-toggle', p.isPlaying ? '⏸' : '▶', '…')} plain onPress={() => quiet(withBusy($, 'band-toggle', () => toggle($)))} />}
            {canControl && isOn(s, 'bandControls') && <Button key="band-next" label={busyText(busy, 'band-next', '⏭', '…')} plain onPress={() => quiet(withBusy($, 'band-next', () => skip($)))} />}
            {isOn(s, 'bandControls') && <Button key="band-like" label={busyText(busy, 'band-like', p.liked ? '♥' : '♡', '…')} plain onPress={() => quiet(withBusy($, 'band-like', () => like($, undefined)))} />}
            {isOn(s, 'bandControls') && <Button key="band-open" label="☰" plain dimColor onPress={() => quiet(openPane($, undefined))} />}
          </Box>
        )}
        {line !== undefined && p?.isPlaying && (
          <Text italic color={GREEN} dimColor wrap="truncate-end">
            {'  ♪ '}
            {line}
          </Text>
        )}
      </Box>
    )
  })

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const ui = $.ui.resolve(e)
    const { Box, Text, Button } = ui
    const width = Math.max(20, e.props.bodyColumns)
    paneColumns = width
    const height = e.viewport?.rows ?? 30
    const isAuthed = await read($, authed)
    const message = await read($, notice)
    const busy = await read($, busyKeys)
    const s = await read($, settings)
    const GREEN = accentOf(s)
    const good = message.startsWith('✓')
    const messageLine = message !== '' && (
      <Text color={good ? GREEN : undefined} dimColor={!good} wrap="wrap">
        {message}
      </Text>
    )

    if (!isAuthed) {
      return (
        <Box flexDirection="column" gap={1}>
          <Text bold color={GREEN}>Spotify</Text>
          <Text>Not connected.</Text>
          <Box flexDirection="column">
            <Text dimColor wrap="wrap">1. Create an app at developer.spotify.com/dashboard (Web API, redirect URI {REDIRECT_URI})</Text>
            <Text dimColor>2. /spotify setup &lt;client-id&gt;</Text>
            <Text dimColor>3. Press Log in, or run /spotify login</Text>
          </Box>
          <Box>
            <Button key="login" label={busyText(busy, 'login', 'Log in', 'Opening browser…')} variant="primary" hotkey="l" onPress={() => quiet(withBusy($, 'login', () => pressLogin($)))} />
          </Box>
          {messageLine}
        </Box>
      )
    }

    const current = await read($, tab)
    const p = await read($, player)
    const free = (await read($, premium)) === false
    const tabButton = (key: SpotifyTab, label: string, hotkey: string) => (
      <Button
        key={`tab-${key}`}
        label={label}
        hotkey={hotkey}
        variant={current === key ? 'primary' : undefined}
        dimColor={current !== key}
        onPress={() => quiet(showTab($, key))}
      />
    )
    const tabs = (
      <Box flexDirection="row" flexWrap="wrap" columnGap={1}>
        {tabButton('player', 'Player', '1')}
        {tabButton('lyrics', 'Lyrics', '2')}
        {tabButton('dj', 'DJ', '3')}
        {tabButton('recap', 'Recap', '4')}
        {tabButton('library', 'Library', '5')}
        {tabButton('settings', 'Settings', '6')}
      </Box>
    )
    const header = p ? (
      <Text wrap="truncate-end">
        <Text color={GREEN}>{p.isPlaying ? '♫ ' : '⏸ '}</Text>
        <Text bold>{p.title}</Text>
        <Text dimColor> — {p.artists}</Text>
      </Text>
    ) : (
      <Text dimColor>Nothing playing.</Text>
    )
    const playLabel = (key: string, isCurrent: boolean) => busyText(busy, key, free ? '↗' : isCurrent && p?.isPlaying ? '♫' : '▶', '…')

    // ----- lyrics tab -----
    if (current === 'lyrics') {
      const l = await read($, lyrics)
      const idx = await read($, lyricIndex)
      const offset = await read($, lyricOffset)
      const room = Math.max(5, Math.min(24, height - 10))
      let body
      if (!isOn(s, 'lyrics')) body = <Text dimColor>Lyrics are off. Turn them on in Settings (6).</Text>
      else if (!p) body = <Text dimColor>Start a track to see its lyrics.</Text>
      else if (!l || l.trackId !== p.id || l.status === 'loading') body = <Text dimColor>Looking up lyrics…</Text>
      else if (l.status === 'instrumental') body = <Text dimColor>♪ Instrumental ♪</Text>
      else if (l.status === 'missing') body = <Text dimColor>No lyrics found on LRCLIB for this track.</Text>
      else if (l.status === 'error') body = <Text dimColor>Could not reach LRCLIB.</Text>
      else if (l.status === 'plain') {
        body = (
          <Box flexDirection="column">
            <Text dimColor italic>Unsynced lyrics</Text>
            {l.lines.slice(0, room).map(x => <Text wrap="wrap">{x.text || ' '}</Text>)}
          </Box>
        )
      } else {
        const start = Math.max(0, Math.min(Math.max(0, idx) - Math.floor(room / 3), l.lines.length - room))
        body = (
          <Box flexDirection="column">
            {l.lines.slice(start, start + room).map((x, k) => {
              const i = start + k
              return (
                <Button
                  key={`ly-${i}`}
                  plain
                  label={`${i === idx ? '▶ ' : '  '}${x.text || '♪'}`}
                  dimColor={i !== idx}
                  onPress={() => quiet(seekTo($, x.t - offset))}
                />
              )
            })}
            <Box flexDirection="row" columnGap={1}>
              <Text dimColor>timing{offset !== 0 ? ` ${offset > 0 ? '+' : ''}${offset / 1000}s` : ''}:</Text>
              <Button key="ly-earlier" label="earlier" hotkey="z" plain dimColor onPress={() => quiet(nudgeLyrics($, 500))} />
              <Button key="ly-later" label="later" hotkey="x" plain dimColor onPress={() => quiet(nudgeLyrics($, -500))} />
              {offset !== 0 && <Button key="ly-reset" label="reset" hotkey="c" plain dimColor onPress={() => quiet(nudgeLyrics($, null))} />}
            </Box>
            <Text dimColor>press a line to jump there · lyrics from lrclib.net</Text>
          </Box>
        )
      }
      return (
        <Box flexDirection="column" gap={1}>
          {tabs}
          {header}
          {body}
        </Box>
      )
    }

    // ----- DJ tab -----
    if (current === 'dj') {
      const d = await read($, dj)
      const auto = isOn(s, 'autopilot')
      return (
        <Box flexDirection="column" gap={1}>
          {tabs}
          {header}
          <Box flexDirection="column">
            <Text bold>Claude DJ</Text>
            {d.status === 'idle' && <Text dimColor wrap="wrap">Picks music for what you are working on in this session, then plays or queues it.</Text>}
            {d.status === 'thinking' && <Text color={GREEN}>Reading the session and digging through crates…</Text>}
            {d.status === 'error' && <Text color="yellow" wrap="wrap">{d.reason}</Text>}
            {d.status === 'done' && (
              <Box flexDirection="column">
                <Text>
                  <Text color={GREEN} bold>{d.vibe}</Text>
                  <Text dimColor> · {d.source === 'autopilot' ? 'autopilot' : 'on request'} at {hhmm(d.at)}</Text>
                </Text>
                <Text italic wrap="wrap">{d.reason}</Text>
              </Box>
            )}
          </Box>
          {d.picks.length > 0 && (
            <Box flexDirection="column">
              {d.picks.map((x, i) => (
                <Box flexDirection="row" gap={1}>
                  <Button key={`dj-play-${i}`} label={playLabel(`dj-play-${i}`, p?.uri === x.uri)} plain onPress={() => quiet(withBusy($, `dj-play-${i}`, () => playPick($, x)))} />
                  <Box flexShrink={1}>
                    <Text wrap="truncate-end">
                      {x.title}
                      <Text dimColor> — {x.subtitle}</Text>
                    </Text>
                  </Box>
                </Box>