import { useRef } from 'react'
import { Play, Pause, Volume2, VolumeX, SkipBack, SkipForward } from 'lucide-react'
import { usePlayerStore } from '@/stores/player'
import { formatDuration } from '@/lib/utils'
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)

  if (!current) return null

  const pct = duration ? (progress / duration) * 100 : 0

  function handleSeek(e: React.MouseEvent<HTMLDivElement>) {
    if (!seekRef.current || isExternal) return
    const rect = seekRef.current.getBoundingClientRect()
    const ratio = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))
    seek(ratio * duration)
  }

  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)]">
      {/* Seek bar — full width, always visible */}
      <div
        ref={seekRef}
        className="relative h-1.5 bg-white/10 cursor-pointer group"
        onClick={handleSeek}
      >
        <div
          className="absolute inset-y-0 left-0 bg-gradient-to-r from-primary to-[#7B6AEF] rounded-r-full transition-[width] duration-100"
          style={{ width: `${pct}%` }}
        />
        {!isExternal && (
          <div
            className="absolute top-1/2 -translate-y-1/2 w-3.5 h-3.5 rounded-full bg-white shadow-[0_0_6px_rgba(91,76,219,0.6)] opacity-0 group-hover:opacity-100 transition-opacity"
            style={{ left: `${pct}%`, marginLeft: '-7px' }}
          />
        )}
      </div>

      <div className="max-w-6xl mx-auto px-4 sm:px-6 h-[4.5rem] 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={current.cover_url} alt="" className="w-12 h-12 rounded-lg object-cover" />
            ) : (
              <Avatar name={current.title} size="md" className="!rounded-lg !w-12 !h-12" />
            )}
            {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">
          {!isExternal && (
            <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-12 sm:h-12 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>
          {!isExternal && (
            <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 */}
        <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">
            {!isExternal ? `${formatDuration(progress)} / ${formatDuration(duration)}` : duration > 0 ? 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 [&::-webkit-slider-thumb]:!bg-white [&::-webkit-slider-thumb]:!shadow-none"
          />
        </div>
      </div>
    </div>
  )
}