furumi-ng/furumi-node-player/client/src/FurumiPlayer.tsx

import { useEffect, useRef, useState, type MouseEvent as ReactMouseEvent } from 'react'
import './furumi-player.css'
import {
  API_ROOT,
  getArtists,
  getArtistAlbums,
  getAlbumTracks,
  getArtistTracks,
  searchTracks,
  getTrackInfo,
  preloadStream,
} from './furumiApi'
import { fmt } from './utils'
import { Header } from './components/Header'
import { MainPanel, type Crumb } from './components/MainPanel'
import { PlayerBar } from './components/PlayerBar'
import type { QueueItem } from './components/QueueList'

export function FurumiPlayer() {
  const [breadcrumbs, setBreadcrumbs] = useState<Crumb[]>(
    [],
  )
  const [libraryLoading, setLibraryLoading] = useState(false)
  const [libraryError, setLibraryError] = useState<string | null>(null)
  const [libraryItems, setLibraryItems] = useState<
    Array<{
      key: string
      className: string
      icon: string
      name: string
      detail?: string
      nameClassName?: string
      onClick: () => void
      button?: { title: string; onClick: (ev: ReactMouseEvent<HTMLButtonElement>) => void }
    }>
  >([])
  const [searchResults, setSearchResults] = useState<
    Array<{ result_type: string; slug: string; name: string; detail?: string }>
  >([])
  const [searchOpen, setSearchOpen] = useState(false)
  const searchSelectRef = useRef<(type: string, slug: string) => void>(() => {})

  const [nowPlayingTrack, setNowPlayingTrack] = useState<QueueItem | null>(null)
  const [queueItemsView, setQueueItemsView] = useState<QueueItem[]>([])
  const [queueOrderView, setQueueOrderView] = useState<number[]>([])
  const [queuePlayingOrigIdxView, setQueuePlayingOrigIdxView] = useState<number>(-1)
  const [queueScrollSignal, setQueueScrollSignal] = useState(0)
  const [queue, setQueue] = useState<QueueItem[]>([])

  const queueActionsRef = useRef<{
    playIndex: (i: number) => void
    removeFromQueue: (idx: number) => void
    moveQueueItem: (fromPos: number, toPos: number) => void
  } | null>(null)

  const audioRef = useRef<HTMLAudioElement>(null)

  useEffect(() => {
    // --- Original player script adapted for React environment ---
    const audioEl = audioRef.current
    if (!audioEl) return
    const audio = audioEl

    let queueIndex = -1
    let shuffle = false
    let repeatAll = true
    let shuffleOrder: number[] = []
    let searchTimer: number | null = null
    let toastTimer: number | null = null
    let muted = false

    // Restore prefs
    try {
      const v = window.localStorage.getItem('furumi_vol')
      const volSlider = document.getElementById('volSlider') as HTMLInputElement | null
      if (v !== null && volSlider) {
        audio.volume = Number(v) / 100
        volSlider.value = v
      }
      const btnShuffle = document.getElementById('btnShuffle')
      const btnRepeat = document.getElementById('btnRepeat')
      shuffle = window.localStorage.getItem('furumi_shuffle') === '1'
      repeatAll = window.localStorage.getItem('furumi_repeat') !== '0'
      btnShuffle?.classList.toggle('active', shuffle)
      btnRepeat?.classList.toggle('active', repeatAll)
    } catch {
      // ignore
    }

    // --- Audio events ---
    audio.addEventListener('timeupdate', () => {
      if (audio.duration) {
        const fill = document.getElementById('progressFill')
        const timeElapsed = document.getElementById('timeElapsed')
        const timeDuration = document.getElementById('timeDuration')
        if (fill) fill.style.width = `${(audio.currentTime / audio.duration) * 100}%`
        if (timeElapsed) timeElapsed.textContent = fmt(audio.currentTime)
        if (timeDuration) timeDuration.textContent = fmt(audio.duration)
      }
    })
    audio.addEventListener('ended', () => nextTrack())
    audio.addEventListener('play', () => {
      const btn = document.getElementById('btnPlayPause')
      if (btn) btn.innerHTML = '&#9208;'
    })
    audio.addEventListener('pause', () => {
      const btn = document.getElementById('btnPlayPause')
      if (btn) btn.innerHTML = '&#9654;'
    })
    audio.addEventListener('error', () => {
      showToast('Playback error')
      nextTrack()
    })

    // --- Library navigation ---
    async function showArtists() {
      setBreadcrumb([{ label: 'Artists', action: showArtists }])
      setLibraryLoading(true)
      setLibraryError(null)
      const artists = await getArtists()
      if (!artists) {
        setLibraryLoading(false)
        setLibraryError('Error')
        return
      }
      setLibraryLoading(false)
      setLibraryItems(
        (artists as any[]).map((a) => ({
          key: `artist:${a.slug}`,
          className: 'file-item dir',
          icon: '👤',
          name: a.name,
          detail: `${a.album_count} albums`,
          onClick: () => void showArtistAlbums(a.slug, a.name),
        })),
      )
    }

    async function showArtistAlbums(artistSlug: string, artistName: string) {
      setBreadcrumb([
        { label: 'Artists', action: showArtists },
        { label: artistName, action: () => showArtistAlbums(artistSlug, artistName) },
      ])
      setLibraryLoading(true)
      setLibraryError(null)
      const albums = await getArtistAlbums(artistSlug)
      if (!albums) {
        setLibraryLoading(false)
        setLibraryError('Error')
        return
      }
      setLibraryLoading(false)
      const allTracksItem = {
        key: `artist-all:${artistSlug}`,
        className: 'file-item',
        icon: '▶',
        name: 'Play all tracks',
        nameClassName: 'name',
        onClick: () => void playAllArtistTracks(artistSlug),
      }
      const albumItems = (albums as any[]).map((a) => {
        const year = a.year ? ` (${a.year})` : ''
        return {
          key: `album:${a.slug}`,
          className: 'file-item dir',
          icon: '💿',
          name: `${a.name}${year}`,
          detail: `${a.track_count} tracks`,
          onClick: () => void showAlbumTracks(a.slug, a.name, artistSlug, artistName),
          button: {
            title: 'Add album to queue',
            onClick: (ev: ReactMouseEvent<HTMLButtonElement>) => {
              ev.stopPropagation()
              void addAlbumToQueue(a.slug)
            },
          },
        }
      })
      setLibraryItems([allTracksItem, ...albumItems])
    }

    async function showAlbumTracks(
      albumSlug: string,
      albumName: string,
      artistSlug: string,
      artistName: string,
    ) {
      setBreadcrumb([
        { label: 'Artists', action: showArtists },
        { label: artistName, action: () => showArtistAlbums(artistSlug, artistName) },
        { label: albumName },
      ])
      setLibraryLoading(true)
      setLibraryError(null)
      const tracks = await getAlbumTracks(albumSlug)
      if (!tracks) {
        setLibraryLoading(false)
        setLibraryError('Error')
        return
      }
      setLibraryLoading(false)
      const playAlbumItem = {
        key: `album-play:${albumSlug}`,
        className: 'file-item',
        icon: '▶',
        name: 'Play album',
        onClick: () => {
          void addAlbumToQueue(albumSlug, true)
        },
      }
      const trackItems = (tracks as any[]).map((t) => {
        const num = t.track_number ? `${t.track_number}. ` : ''
        const dur = t.duration_secs ? fmt(t.duration_secs) : ''
        return {
          key: `track:${t.slug}`,
          className: 'file-item',
          icon: '🎵',
          name: `${num}${t.title}`,
          detail: dur,
          onClick: () => {
            addTrackToQueue(
              {
                slug: t.slug,
                title: t.title,
                artist: t.artist_name,
                album_slug: albumSlug,
                duration: t.duration_secs,
              },
              true,
            )
          },
        }
      })
      setLibraryItems([playAlbumItem, ...trackItems])
    }

    function setBreadcrumb(parts: Crumb[]) {
      setBreadcrumbs(parts)
    }

    // --- Queue management ---
    function addTrackToQueue(
      track: {
        slug: string
        title: string
        artist: string
        album_slug: string | null
        duration: number | null
      },
      playNow?: boolean,
    ) {
      const existing = queue.findIndex((t) => t.slug === track.slug)
      if (existing !== -1) {
        if (playNow) playIndex(existing)
        return
      }
      setQueue((q) => [...q, track]);
      updateQueueModel()
      if (playNow || (queueIndex === -1 && queue.length === 1)) {
        playIndex(queue.length - 1)
      }
    }

    async function addAlbumToQueue(albumSlug: string, playFirst?: boolean) {
      const tracks = await getAlbumTracks(albumSlug)
      if (!tracks || !(tracks as any[]).length) return
      const list = tracks as any[]
      let firstIdx = queue.length
      list.forEach((t) => {
        if (queue.find((q) => q.slug === t.slug)) return
        setQueue((q) => [...q, t])
      })
      updateQueueModel()
      if (playFirst || queueIndex === -1) playIndex(firstIdx)
      showToast(`Added ${list.length} tracks`)
    }

    async function playAllArtistTracks(artistSlug: string) {
      const tracks = await getArtistTracks(artistSlug)
      if (!tracks || !(tracks as any[]).length) return
      const list = tracks as any[]
      clearQueue()
      list.forEach((t) => {
        queue.push({
          slug: t.slug,
          title: t.title,
          artist: t.artist_name,
          album_slug: t.album_slug,
          duration: t.duration_secs,
        })
      })
      updateQueueModel()
      playIndex(0)
      showToast(`Added ${list.length} tracks`)
    }

    function playIndex(i: number) {
      if (i < 0 || i >= queue.length) return
      queueIndex = i
      const track = queue[i]
      audio.src = `${API_ROOT}/stream/${track.slug}`
      void audio.play().catch(() => {})
      updateNowPlaying(track)
      updateQueueModel()
      setQueueScrollSignal((s) => s + 1)
      if (window.history && window.history.replaceState) {
        const url = new URL(window.location.href)
        url.searchParams.set('t', track.slug)
        window.history.replaceState(null, '', url.toString())
      }
    }

    function updateNowPlaying(track: QueueItem | null) {
      setNowPlayingTrack(track)
      if (!track) return

      document.title = `${track.title} — Furumi`

      const coverUrl = `${API_ROOT}/tracks/${track.slug}/cover`
      if ('mediaSession' in navigator) {
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        navigator.mediaSession.metadata = new window.MediaMetadata({
          title: track.title,
          artist: track.artist || '',
          album: '',
          artwork: [{ src: coverUrl, sizes: '512x512' }],
        })
      }
    }

    function currentOrder() {
      if (!shuffle) return [...Array(queue.length).keys()]
      if (shuffleOrder.length !== queue.length) buildShuffleOrder()
      return shuffleOrder
    }

    function buildShuffleOrder() {
      shuffleOrder = [...Array(queue.length).keys()]
      for (let i = shuffleOrder.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1))
        ;[shuffleOrder[i], shuffleOrder[j]] = [shuffleOrder[j], shuffleOrder[i]]
      }
      if (queueIndex !== -1) {
        const ci = shuffleOrder.indexOf(queueIndex)
        if (ci > 0) {
          shuffleOrder.splice(ci, 1)
          shuffleOrder.unshift(queueIndex)
        }
      }
    }

    function updateQueueModel() {
      const order = currentOrder()
      setQueueItemsView(queue)
      setQueueOrderView(order.slice())
      setQueuePlayingOrigIdxView(queueIndex)
    }

    function removeFromQueue(idx: number) {
      if (idx === queueIndex) {
        queueIndex = -1
        audio.pause()
        audio.src = ''
        updateNowPlaying(null)
      } else if (queueIndex > idx) {
        queueIndex--
      }

      // queue.splice(idx, 1)
      setQueue((q) => q.filter((_, i) => i !== idx));

      if (shuffle) {
        const si = shuffleOrder.indexOf(idx)
        if (si !== -1) shuffleOrder.splice(si, 1)
        for (let i = 0; i < shuffleOrder.length; i++) {
          if (shuffleOrder[i] > idx) shuffleOrder[i]--
        }
      }
      updateQueueModel()
    }

    function moveQueueItem(from: number, to: number) {
      if (from === to) return
      if (shuffle) {
        const item = shuffleOrder.splice(from, 1)[0]
        shuffleOrder.splice(to, 0, item)
      } else {
        const item = queue.splice(from, 1)[0]
        queue.splice(to, 0, item)
        if (queueIndex === from) queueIndex = to
        else if (from < queueIndex && to >= queueIndex) queueIndex--
        else if (from > queueIndex && to <= queueIndex) queueIndex++
      }
      updateQueueModel()
    }

    queueActionsRef.current = {
      playIndex,
      removeFromQueue,
      moveQueueItem,
    }

    function clearQueue() {
      setQueue([]);
      queueIndex = -1
      shuffleOrder = []
      audio.pause()
      audio.src = ''
      updateNowPlaying(null)
      document.title = 'Furumi Player'
      updateQueueModel()
    }

    // --- Playback controls ---
    function togglePlay() {
      if (!audio.src && queue.length) {
        playIndex(queueIndex === -1 ? 0 : queueIndex)
        return
      }
      if (audio.paused) void audio.play()
      else audio.pause()
    }

    function nextTrack() {
      if (!queue.length) return
      const order = currentOrder()
      const pos = order.indexOf(queueIndex)
      if (pos < order.length - 1) playIndex(order[pos + 1])
      else if (repeatAll) {
        if (shuffle) buildShuffleOrder()
        playIndex(currentOrder()[0])
      }
    }

    function prevTrack() {
      if (!queue.length) return
      if (audio.currentTime > 3) {
        audio.currentTime = 0
        return
      }
      const order = currentOrder()
      const pos = order.indexOf(queueIndex)
      if (pos > 0) playIndex(order[pos - 1])
      else if (repeatAll) playIndex(order[order.length - 1])
    }

    function toggleShuffle() {
      shuffle = !shuffle
      if (shuffle) buildShuffleOrder()
      const btn = document.getElementById('btnShuffle')
      btn?.classList.toggle('active', shuffle)
      window.localStorage.setItem('furumi_shuffle', shuffle ? '1' : '0')
      updateQueueModel()
    }

    function toggleRepeat() {
      repeatAll = !repeatAll
      const btn = document.getElementById('btnRepeat')
      btn?.classList.toggle('active', repeatAll)
      window.localStorage.setItem('furumi_repeat', repeatAll ? '1' : '0')
    }

    // --- Seek & Volume ---
    function seekTo(e: MouseEvent) {
      if (!audio.duration) return
      const bar = document.getElementById('progressBar') as HTMLDivElement | null
      if (!bar) return
      const rect = bar.getBoundingClientRect()
      const pct = (e.clientX - rect.left) / rect.width
      audio.currentTime = pct * audio.duration
    }

    function toggleMute() {
      muted = !muted
      audio.muted = muted
      const volIcon = document.getElementById('volIcon')
      if (volIcon) volIcon.innerHTML = muted ? '&#128263;' : '&#128266;'
    }

    function setVolume(v: number) {
      audio.volume = v / 100
      const volIcon = document.getElementById('volIcon')
      if (volIcon) volIcon.innerHTML = v === 0 ? '&#128263;' : '&#128266;'
      window.localStorage.setItem('furumi_vol', String(v))
    }

    // --- Search ---
    function onSearch(q: string) {
      if (searchTimer) {
        window.clearTimeout(searchTimer)
      }
      if (q.length < 2) {
        closeSearch()
        return
      }
      searchTimer = window.setTimeout(async () => {
        const results = await searchTracks(q)
        if (!results || !(results as any[]).length) {
          closeSearch()
          return
        }
        setSearchResults(results as any[])
        setSearchOpen(true)
      }, 250)
    }

    function closeSearch() {
      setSearchOpen(false)
      setSearchResults([])
    }

    function onSearchSelect(type: string, slug: string) {
      closeSearch()
      if (type === 'artist') void showArtistAlbums(slug, '')
      else if (type === 'album') void addAlbumToQueue(slug, true)
      else if (type === 'track') {
        addTrackToQueue(
          { slug, title: '', artist: '', album_slug: null, duration: null },
          true,
        )
        void preloadStream(slug)
      }
    }
    searchSelectRef.current = onSearchSelect

    // --- Helpers ---
    function showToast(msg: string) {
      const t = document.getElementById('toast')
      if (!t) return
      t.textContent = msg
      t.classList.add('show')
      if (toastTimer) window.clearTimeout(toastTimer)
      toastTimer = window.setTimeout(() => t.classList.remove('show'), 2500)
    }

    function toggleSidebar() {
      const sidebar = document.getElementById('sidebar')
      const overlay = document.getElementById('sidebarOverlay')
      sidebar?.classList.toggle('open')
      overlay?.classList.toggle('show')
    }

    // --- MediaSession ---
    if ('mediaSession' in navigator) {
      try {
        navigator.mediaSession.setActionHandler('play', togglePlay)
        navigator.mediaSession.setActionHandler('pause', togglePlay)
        navigator.mediaSession.setActionHandler('previoustrack', prevTrack)
        navigator.mediaSession.setActionHandler('nexttrack', nextTrack)
        navigator.mediaSession.setActionHandler('seekto', (d: any) => {
          if (typeof d.seekTime === 'number') {
            audio.currentTime = d.seekTime
          }
        })
      } catch {
        // ignore
      }
    }

    // --- Wire DOM events that were inline in HTML ---
    const btnMenu = document.querySelector('.btn-menu')
    btnMenu?.addEventListener('click', () => toggleSidebar())

    const sidebarOverlay = document.getElementById('sidebarOverlay')
    sidebarOverlay?.addEventListener('click', () => toggleSidebar())

    const searchInput = document.getElementById('searchInput') as HTMLInputElement | null
    if (searchInput) {
      searchInput.addEventListener('input', (e) => {
        onSearch((e.target as HTMLInputElement).value)
      })
      searchInput.addEventListener('keydown', (e: KeyboardEvent) => {
        if (e.key === 'Escape') closeSearch()
      })
    }

    const btnShuffle = document.getElementById('btnShuffle')
    btnShuffle?.addEventListener('click', () => toggleShuffle())
    const btnRepeat = document.getElementById('btnRepeat')
    btnRepeat?.addEventListener('click', () => toggleRepeat())
    const btnClear = document.getElementById('btnClearQueue')
    btnClear?.addEventListener('click', () => clearQueue())

    const btnPrev = document.getElementById('btnPrev')
    btnPrev?.addEventListener('click', () => prevTrack())
    const btnPlay = document.getElementById('btnPlayPause')
    btnPlay?.addEventListener('click', () => togglePlay())
    const btnNext = document.getElementById('btnNext')
    btnNext?.addEventListener('click', () => nextTrack())

    const progressBar = document.getElementById('progressBar')
    progressBar?.addEventListener('click', (e) => seekTo(e as MouseEvent))

    const volIcon = document.getElementById('volIcon')
    volIcon?.addEventListener('click', () => toggleMute())
    const volSlider = document.getElementById('volSlider') as HTMLInputElement | null
    if (volSlider) {
      volSlider.addEventListener('input', (e) => {
        const v = Number((e.target as HTMLInputElement).value)
        setVolume(v)
      })
    }

    const clearQueueBtn = document.getElementById('btnClearQueue')
    clearQueueBtn?.addEventListener('click', () => clearQueue())

    // --- Init ---
    ;(async () => {
      const url = new URL(window.location.href)
      const urlSlug = url.searchParams.get('t')
      if (urlSlug) {
        const info = await getTrackInfo(urlSlug)
        if (info) {
          addTrackToQueue(
            {
              slug: (info as any).slug,
              title: (info as any).title,
              artist: (info as any).artist_name,
              album_slug: (info as any).album_slug,
              duration: (info as any).duration_secs,
            },
            true,
          )
        }
      }
      void showArtists()
    })()

    // Cleanup: best-effort remove listeners on unmount
    return () => {
      queueActionsRef.current = null
      audio.pause()
    }
  }, [])

  return (
    <div className="furumi-root">
      <Header
        searchOpen={searchOpen}
        searchResults={searchResults}
        onSearchSelect={(type, slug) => searchSelectRef.current(type, slug)}
      />

      <MainPanel
        breadcrumbs={breadcrumbs}
        libraryLoading={libraryLoading}
        libraryError={libraryError}
        libraryItems={libraryItems}
        queueItemsView={queueItemsView}
        queueOrderView={queueOrderView}
        queuePlayingOrigIdxView={queuePlayingOrigIdxView}
        queueScrollSignal={queueScrollSignal}
        onQueuePlay={(origIdx) => queueActionsRef.current?.playIndex(origIdx)}
        onQueueRemove={(origIdx) =>
          queueActionsRef.current?.removeFromQueue(origIdx)
        }
        onQueueMove={(fromPos, toPos) =>
          queueActionsRef.current?.moveQueueItem(fromPos, toPos)
        }
      />

      <PlayerBar track={nowPlayingTrack} />

      <div className="toast" id="toast" />
      <audio ref={audioRef} />
    </div>
  )
}