import { useRef, useEffect, useState, useCallback } from 'react'

interface Clip {
  id: string
  title?: string
  prompt: string
  duration_seconds: number
}

interface Props {
  clip: Clip
  isPlaying: boolean
  onTogglePlay: () => void
  onStop: () => void
  onClose: () => void
}

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

export default function Player({ clip, isPlaying, onTogglePlay, onStop, onClose }: Props) {
  const audioRef = useRef<HTMLAudioElement>(null)
  const [currentTime, setCurrentTime] = useState(0)
  const [duration, setDuration] = useState(clip.duration_seconds)
  const [volume, setVolume] = useState(1)
  const [isMuted, setIsMuted] = useState(false)
  const [isDragging, setIsDragging] = useState(false)
  const [isRepeating, setIsRepeating] = useState(false)
  const progressRef = useRef<HTMLDivElement>(null)

  // Sync play/pause with audio element
  useEffect(() => {
    if (audioRef.current) {
      if (isPlaying) {
        audioRef.current.play().catch(() => {
          // Autoplay blocked or other error
        })
      } else {
        audioRef.current.pause()
      }
    }
  }, [isPlaying, clip.id])

  // Update duration when metadata loads
  const handleLoadedMetadata = () => {
    if (audioRef.current) {
      setDuration(audioRef.current.duration || clip.duration_seconds)
    }
  }

  // Update current time during playback
  const handleTimeUpdate = () => {
    if (audioRef.current && !isDragging) {
      setCurrentTime(audioRef.current.currentTime)
    }
  }

  // Track ended
  const handleEnded = () => {
    if (!isRepeating) {
      onTogglePlay()
    }
    setCurrentTime(0)
  }

  // Toggle repeat
  const toggleRepeat = () => {
    setIsRepeating(prev => {
      const next = !prev
      if (audioRef.current) {
        audioRef.current.loop = next
      }
      return next
    })
  }

  // Seek to position
  const handleSeek = useCallback((clientX: number) => {
    if (!progressRef.current || !audioRef.current) return
    const rect = progressRef.current.getBoundingClientRect()
    const ratio = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width))
    const newTime = ratio * duration
    audioRef.current.currentTime = newTime
    setCurrentTime(newTime)
  }, [duration])

  // Progress bar mouse events
  const handleProgressMouseDown = (e: React.MouseEvent) => {
    setIsDragging(true)
    handleSeek(e.clientX)
  }

  const handleProgressMouseMove = (e: React.MouseEvent) => {
    if (isDragging) {
      handleSeek(e.clientX)
    }
  }

  const handleProgressMouseUp = () => {
    setIsDragging(false)
  }

  // Global mouse events for drag
  useEffect(() => {
    if (isDragging) {
      const handleMouseMove = (e: MouseEvent) => handleSeek(e.clientX)
      const handleMouseUp = () => setIsDragging(false)
      window.addEventListener('mousemove', handleMouseMove)
      window.addEventListener('mouseup', handleMouseUp)
      return () => {
        window.removeEventListener('mousemove', handleMouseMove)
        window.removeEventListener('mouseup', handleMouseUp)
      }
    }
  }, [isDragging, handleSeek])

  // Volume control
  const handleVolumeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newVol = parseFloat(e.target.value)
    setVolume(newVol)
    if (audioRef.current) {
      audioRef.current.volume = newVol
    }
    if (newVol > 0 && isMuted) {
      setIsMuted(false)
    }
  }

  const toggleMute = () => {
    if (!audioRef.current) return
    if (isMuted) {
      audioRef.current.volume = volume > 0 ? volume : 0.5
      setIsMuted(false)
    } else {
      audioRef.current.volume = 0
      setIsMuted(true)
    }
  }

  // Restart from beginning
  const handleRestart = () => {
    if (audioRef.current) {
      audioRef.current.currentTime = 0
      setCurrentTime(0)
      if (!isPlaying) {
        onTogglePlay()
      }
    }
  }

  // Stop
  const handleStop = () => {
    if (audioRef.current) {
      audioRef.current.pause()
      audioRef.current.currentTime = 0
      setCurrentTime(0)
    }
    onStop()
  }

  const progress = duration > 0 ? (currentTime / duration) * 100 : 0
  const displayTitle = clip.title || clip.prompt
  const marqueeDuration = Math.max(3, displayTitle.length * 0.15)

  return (
    <>
      <div className="fixed bottom-0 left-0 right-0 bg-lyria-panel border-t border-white/10 px-4 py-3 z-40">
        <div className="max-w-6xl mx-auto flex items-center gap-3">
          {/* Play/Pause */}
          <button
            onClick={onTogglePlay}
            className="w-9 h-9 rounded-full bg-lyria-accent flex items-center justify-center text-white hover:bg-lyria-accent/90 transition-colors shrink-0"
            title={isPlaying ? 'Pause' : 'Play'}
          >
            {isPlaying ? (
              <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                <path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z" />
              </svg>
            ) : (
              <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                <path d="M8 5v14l11-7z" />
              </svg>
            )}
          </button>

          {/* Stop */}
          <button
            onClick={handleStop}
            className="w-7 h-7 rounded flex items-center justify-center text-lyria-muted hover:text-white hover:bg-white/5 transition-colors shrink-0"
            title="Stop"
          >
            <svg className="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24">
              <rect x="6" y="6" width="12" height="12" rx="1" />
            </svg>
          </button>

          {/* Restart — ISO skip backwards to beginning */}
          <button
            onClick={handleRestart}
            className="w-7 h-7 rounded flex items-center justify-center text-lyria-muted hover:text-white hover:bg-white/5 transition-colors shrink-0"
            title="Skip to beginning"
          >
            <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
              <path d="M6 6h2v12H6V6zm3.5 6l8.5 6V6l-8.5 6z" />
            </svg>
          </button>

          {/* Repeat — ISO repeat indefinitely with glowing toggle */}
          <button
            onClick={toggleRepeat}
            className={`w-7 h-7 rounded flex items-center justify-center transition-colors shrink-0 ${
              isRepeating
                ? 'text-lyria-accent bg-lyria-accent/10 shadow-[0_0_8px_rgba(255,107,53,0.4)]'
                : 'text-lyria-muted hover:text-white hover:bg-white/5'
            }`}
            title={isRepeating ? 'Repeat on' : 'Repeat off'}
          >
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
            </svg>
          </button>

          {/* Time + Scrubber */}
          <div className="flex-1 min-w-0 flex items-center gap-3">
            <span className="text-xs text-lyria-muted tabular-nums shrink-0 w-10 text-right">
              {formatTime(currentTime)}
            </span>

            <div
              ref={progressRef}
              className="flex-1 h-2 bg-white/10 rounded-full cursor-pointer relative group"
              onMouseDown={handleProgressMouseDown}
              onMouseMove={handleProgressMouseMove}
              onMouseUp={handleProgressMouseUp}
            >
              <div
                className="absolute inset-y-0 left-0 bg-lyria-accent rounded-full transition-all duration-75"
                style={{ width: `${progress}%` }}
              />
              {/* Scrubber handle */}
              <div
                className="absolute top-1/2 -translate-y-1/2 w-3 h-3 bg-white rounded-full shadow opacity-0 group-hover:opacity-100 transition-opacity"
                style={{ left: `calc(${progress}% - 6px)` }}
              />
            </div>

            <span className="text-xs text-lyria-muted tabular-nums shrink-0 w-10">
              {formatTime(duration)}
            </span>
          </div>

          {/* Track info with artwork */}
          <div className="hidden sm:flex items-center gap-2.5 min-w-0 max-w-[220px] shrink-0">
            <div className="w-8 h-8 rounded bg-white/5 flex items-center justify-center shrink-0 overflow-hidden">
              <img
                src={`/api/clips/${clip.id}/artwork`}
                alt=""
                className="w-full h-full object-cover"
                onError={(e) => {
                  // Fallback to treble clef on error
                  const target = e.target as HTMLImageElement
                  target.style.display = 'none'
                  const parent = target.parentElement
                  if (parent) {
                    parent.innerHTML = `<svg class='w-4 h-4 text-lyria-accent/40' viewBox='0 0 24 24'><text x='12' y='19' text-anchor='middle' font-size='16' fill='currentColor'>𝄞</text></svg>`
                  }
                }}
              />
            </div>
            {/* Marquee scrolling track name */}
            <div className="overflow-hidden flex-1 min-w-0 group group-hover:overflow-visible">
              <div
                className="text-xs text-white truncate group-hover:overflow-visible group-hover:whitespace-nowrap group-hover:animate-marquee"
                style={{ animationDuration: `${marqueeDuration}s` }}
              >
                {displayTitle}
                <span className="inline-block w-8" />
                {displayTitle}
              </div>
            </div>
          </div>

          {/* Volume */}
          <div className="flex items-center gap-2 shrink-0">
            <button
              onClick={toggleMute}
              className="text-lyria-muted hover:text-white transition-colors"
              title={isMuted ? 'Unmute' : 'Mute'}
            >
              {isMuted || volume === 0 ? (
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" />
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2" />
                </svg>
              ) : volume < 0.5 ? (
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" />
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.536 8.464a5 5 0 010 7.072" />
                </svg>
              ) : (
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" />
                </svg>
              )}
            </button>
            <input
              type="range"
              min="0"
              max="1"
              step="0.01"
              value={isMuted ? 0 : volume}
              onChange={handleVolumeChange}
              className="w-20 h-1 bg-white/20 rounded-full appearance-none cursor-pointer
                [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-2.5 [&::-webkit-slider-thumb]:h-2.5
                [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:rounded-full
                [&::-moz-range-thumb]:w-2.5 [&::-moz-range-thumb]:h-2.5 [&::-moz-range-thumb]:bg-white [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0"
            />
          </div>

          {/* Close */}
          <button
            onClick={onClose}
            className="text-lyria-muted hover:text-white transition-colors shrink-0"
            title="Close player"
          >
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>

        <audio
          ref={audioRef}
          src={`/api/clips/${clip.id}/audio`}
          onLoadedMetadata={handleLoadedMetadata}
          onTimeUpdate={handleTimeUpdate}
          onEnded={handleEnded}
          className="hidden"
        />
      </div>
    </>
  )
}