import { useRef, useState, useCallback } from 'react'
import { Play, Pause, Volume2, VolumeX, SkipBack, SkipForward } from 'lucide-react'
import { usePlayerStore } from '@/stores/player'
import { formatDuration } from '@/lib/utils'
import { publicUrl } from '@/lib/storage'
import { Avatar } from '@/components/ui/Avatar'

export function PlayerBar() {
  const { current, isPlaying, isExternal, progress, duration, volume, toggle, seek, setVolume } = usePlayerStore()
  const seekRef = useRef<HTMLDivElement>(null)
  const [isDragging, setIsDragging] = useState(false)
  const [dragPct, setDragPct] = useState(0)

  const calcPct = useCallback((clientX: number) => {
    if (!seekRef.current) return 0
    const rect = seekRef.current.getBoundingClientRect()
    return Math.max(0, Math.min(100, ((clientX - rect.left) / rect.width) * 100))
  }, [])

  if (!current) return null

  const pct = duration > 0 ? (progress / duration) * 100 : 0
  const displayPct = isDragging ? dragPct : pct
  // Allow seeking for native audio and YouTube (via IFrame API)
  const canSeek = duration > 0
  const showBar = true

  function startDrag(clientX: number) {
    if (!canSeek) return
    setIsDragging(true)
    setDragPct(calcPct(clientX))
  }

  function handleMouseDown(e: React.MouseEvent) {
    if (!canSeek) return
    e.preventDefault()
    startDrag(e.clientX)

    const onMove = (ev: MouseEvent) => setDragPct(calcPct(ev.clientX))
    const onUp = (ev: MouseEvent) => {
      setIsDragging(false)
      const p = calcPct(ev.clientX)
      seek((p / 100) * duration)
      window.removeEventListener('mousemove', onMove)
      window.removeEventListener('mouseup', onUp)
    }
    window.addEventListener('mousemove', onMove)
    window.addEventListener('mouseup', onUp)
  }

  function handleTouchStart(e: React.TouchEvent) {
    if (!canSeek) return
    startDrag(e.touches[0].clientX)

    const el = seekRef.current!
    const onMove = (ev: TouchEvent) => { ev.preventDefault(); setDragPct(calcPct(ev.touches[0].clientX)) }
    const onEnd = (ev: TouchEvent) => {
      setIsDragging(false)
      seek((calcPct(ev.changedTouches[0].clientX) / 100) * duration)
      el.removeEventListener('touchmove', onMove)
      el.removeEventListener('touchend', onEnd)
    }
    el.addEventListener('touchmove', onMove, { passive: false })
    el.addEventListener('touchend', onEnd)
  }

  function handleClick(e: React.MouseEvent) {
    if (!canSeek || isDragging) return
    seek((calcPct(e.clientX) / 100) * duration)
  }

  const currentTime = isDragging ? (dragPct / 100) * duration : progress

  return (
    <div className="fixed bottom-0 left-0 right-0 z-50 bg-[#1E1B33] text-white shadow-[0_-2px_20px_rgba(0,0,0,0.3)]">
      <div className="max-w-6xl mx-auto px-4 sm:px-6">
        {/* Main row */}
        <div className="h-16 flex items-center gap-3 sm:gap-5">
          {/* Cover + info */}
          <div className="flex items-center gap-3 min-w-0 flex-1">
            <div className="relative shrink-0">
              {current.cover_url ? (
                <img src={publicUrl(current.cover_url)} alt="" className="w-11 h-11 rounded-lg object-cover" />
              ) : (
                <Avatar name={current.title} size="md" className="!rounded-lg !w-11 !h-11" />
              )}
              {isPlaying && (
                <div className="absolute -bottom-0.5 -right-0.5 flex items-end gap-[2px] h-3 p-[2px] bg-[#1E1B33] rounded-md">
                  <div className="wave-bar !bg-white/80" /><div className="wave-bar !bg-white/80" /><div className="wave-bar !bg-white/80" />
                </div>
              )}
            </div>
            <div className="min-w-0">
              <p className="text-[13px] font-semibold truncate text-white">{current.title}</p>
              <p className="text-[11px] text-white/50 truncate">{current.creator?.username}</p>
            </div>
          </div>

          {/* Controls */}
          <div className="flex items-center gap-1.5 sm:gap-3">
            {canSeek && (
              <button
                className="hidden sm:flex text-white/50 hover:text-white transition-colors cursor-pointer p-1.5 rounded-full hover:bg-white/10"
                onClick={() => seek(Math.max(0, progress - 15))}
              >
                <SkipBack size={18} />
              </button>
            )}
            <button
              onClick={toggle}
              className="w-10 h-10 sm:w-11 sm:h-11 rounded-full bg-white text-[#1E1B33] flex items-center justify-center hover:scale-105 transition-transform active:scale-95 cursor-pointer shadow-[0_2px_12px_rgba(255,255,255,0.2)]"
            >
              {isPlaying ? <Pause size={18} /> : <Play size={18} className="ml-0.5" />}
            </button>
            {canSeek && (
              <button
                className="hidden sm:flex text-white/50 hover:text-white transition-colors cursor-pointer p-1.5 rounded-full hover:bg-white/10"
                onClick={() => seek(Math.min(duration, progress + 15))}
              >
                <SkipForward size={18} />
              </button>
            )}
          </div>

          {/* Time + Volume (desktop) */}
          <div className="hidden sm:flex items-center gap-3 flex-1 justify-end">
            <span className="text-[11px] text-white/40 tabular-nums font-medium min-w-[5rem] text-right">
              {duration > 0
                ? `${formatDuration(currentTime)} / ${formatDuration(duration)}`
                : ''}
            </span>
            <button
              onClick={() => setVolume(volume === 0 ? 0.8 : 0)}
              className="text-white/50 hover:text-white transition-colors cursor-pointer p-1 rounded-full hover:bg-white/10"
            >
              {volume === 0 ? <VolumeX size={15} /> : <Volume2 size={15} />}
            </button>
            <input
              type="range"
              min={0}
              max={1}
              step={0.01}
              value={volume}
              onChange={(e) => setVolume(parseFloat(e.target.value))}
              className="w-20 accent-white"
            />
          </div>
        </div>

        {/* Seek bar */}
        {showBar && <div
          ref={seekRef}
          className={`relative ${canSeek ? 'cursor-pointer' : ''}`}
          onMouseDown={canSeek ? handleMouseDown : undefined}
          onTouchStart={canSeek ? handleTouchStart : undefined}
          onClick={canSeek ? handleClick : undefined}
          style={{ touchAction: 'none', height: '24px', marginBottom: '4px' }}
        >
          {/* Track background — centered vertically */}
          <div
            className="absolute left-0 right-0 rounded-full"
            style={{ height: '5px', background: 'rgba(255,255,255,0.15)', top: '50%', transform: 'translateY(-50%)' }}
          >
            {/* Track filled */}
            <div
              className="absolute inset-y-0 left-0 rounded-full"
              style={{
                width: `${displayPct}%`,
                background: 'linear-gradient(90deg, #5B4CDB, #7B6AEF)',
              }}
            />
          </div>

          {/* Thumb — centered on track */}
          {canSeek && (
            <div
              className="absolute"
              style={{
                left: `calc(${displayPct}% - 8px)`,
                top: '50%',
                transform: 'translateY(-50%)',
                width: '16px',
                height: '16px',
                borderRadius: '50%',
                background: '#ffffff',
                boxShadow: '0 0 10px rgba(91,76,219,0.7), 0 0 0 2px rgba(255,255,255,0.3)',
                transition: isDragging ? 'none' : 'left 0.1s',
                zIndex: 2,
              }}
            />
          )}
        </div>}
      </div>
    </div>
  )
}