import { useEffect, useState } from 'react'
import { playSound, SFX_BUTTON_DEFAULT } from '../lib/sounds'

interface Props {
  videoRef: React.RefObject<HTMLVideoElement | null>
  settingsOpen: boolean
}

function formatTime(seconds: number): string {
  const m = Math.floor(seconds / 60)
  const s = Math.floor(seconds % 60)
  return `${m}:${s.toString().padStart(2, '0')}`
}

export function TransportBar({ videoRef, settingsOpen }: Props) {
  const [paused, setPaused] = useState(false)
  const [playbackTime, setPlaybackTime] = useState(0)
  const [duration, setDuration] = useState(0)

  useEffect(() => {
    const video = videoRef.current
    if (!video) return

    const onTimeUpdate = () => setPlaybackTime(video.currentTime)
    const onDurationChange = () => setDuration(video.duration || 0)
    const onPlay = () => setPaused(false)
    const onPause = () => setPaused(true)

    video.addEventListener('timeupdate', onTimeUpdate)
    video.addEventListener('durationchange', onDurationChange)
    video.addEventListener('play', onPlay)
    video.addEventListener('pause', onPause)

    return () => {
      video.removeEventListener('timeupdate', onTimeUpdate)
      video.removeEventListener('durationchange', onDurationChange)
      video.removeEventListener('play', onPlay)
      video.removeEventListener('pause', onPause)
    }
  }, [videoRef])

  const handlePlayPause = () => {
    const video = videoRef.current
    if (!video) return
    if (video.paused) video.play()
    else video.pause()
  }

  const handleSeek = (time: number) => {
    const video = videoRef.current
    if (!video) return
    video.currentTime = time
  }

  return (
    <div className={`transport-bar${settingsOpen ? ' settings-open' : ''}`}>
      <button
        type="button"
        className="transport-btn"
        onClick={() => {
          playSound(SFX_BUTTON_DEFAULT)
          handleSeek(0)
        }}
        title="Rewind"
      >
        ⏮
      </button>
      <button
        type="button"
        className="transport-btn"
        onClick={() => {
          playSound(SFX_BUTTON_DEFAULT)
          handleSeek(Math.max(0, playbackTime - 5))
        }}
        title="Back 5s"
      >
        -5s
      </button>
      <button
        type="button"
        className="transport-btn play-pause"
        onClick={() => {
          playSound(SFX_BUTTON_DEFAULT)
          handlePlayPause()
        }}
        title={paused ? 'Play' : 'Pause'}
      >
        {paused ? '▶' : '⏸'}
      </button>
      <button
        type="button"
        className="transport-btn"
        onClick={() => {
          playSound(SFX_BUTTON_DEFAULT)
          handleSeek(Math.min(duration, playbackTime + 5))
        }}
        title="Forward 5s"
      >
        +5s
      </button>
      <input
        className="transport-scrub"
        type="range"
        min={0}
        max={duration || 1}
        step={0.1}
        value={playbackTime}
        onChange={(e) => handleSeek(Number(e.target.value))}
      />
      <span className="transport-time">
        {formatTime(playbackTime)} / {formatTime(duration)}
      </span>
    </div>
  )
}
