import { useState } from 'react'
import {
  Play,
  Pause,
  SkipBack,
  SkipForward,
  Shuffle,
  Repeat,
  Repeat1,
  X,
  ListMusic,
  Heart,
  Volume2,
  VolumeX,
  ChevronDown,
} from '../../lib/icons'
import { motion, AnimatePresence } from 'framer-motion'
import { useMusicStore } from '../../stores/music-store'
import { getBestImage, getStoredServerUrl } from '../../api/jellyfin'

interface NowPlayingProps {
  isOpen: boolean
  onClose: () => void
}

export default function NowPlaying({ isOpen, onClose }: NowPlayingProps) {
  const [showQueue, setShowQueue] = useState(false)
  const {
    currentTrack,
    isPlaying,
    currentTime,
    duration,
    shuffle,
    repeat,
    queue,
    queueIndex,
    volume,
    isMuted,
    pause,
    resume,
    nextTrack,
    prevTrack,
    toggleShuffle,
    cycleRepeat,
    seekTo,
    toggleMute,
    setVolume,
  } = useMusicStore()

  const serverUrl = getStoredServerUrl()

  const imageUrl = currentTrack
    ? getBestImage(serverUrl, currentTrack, 'primary', 800)
    : ''
  const bgImageUrl = currentTrack
    ? getBestImage(serverUrl, currentTrack, 'primary', 320)
    : ''

  const title = currentTrack?.Name || 'Unknown track'
  const artist = currentTrack?.AlbumArtist || currentTrack?.Artists?.[0] || ''
  const album = currentTrack?.Album || ''

  const RepeatIcon = repeat === 'one' ? Repeat1 : Repeat
  const VolIcon = isMuted || volume === 0 ? VolumeX : Volume2

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

  const playedPercent = duration > 0 ? (currentTime / duration) * 100 : 0

  function handleScrubClick(e: React.MouseEvent<HTMLDivElement>) {
    const rect = e.currentTarget.getBoundingClientRect()
    const pct = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))
    seekTo(pct * duration)
  }

  return (
    <AnimatePresence>
      {isOpen && currentTrack && (
        <motion.div
          initial={{ y: '100%' }}
          animate={{ y: 0 }}
          exit={{ y: '100%' }}
          transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
          className="fixed inset-0 z-fullscreen flex"
        >
          {/* ── Cinematic background ────────────────────────────── */}
          <div className="absolute inset-0 overflow-hidden">
            {bgImageUrl && (
              <>
                {/* Heavy blurred album art as ambient backdrop */}
                <motion.div
                  initial={{ scale: 1.04 }}
                  animate={{ scale: 1.12 }}
                  transition={{ duration: 30, ease: 'linear', repeat: Infinity, repeatType: 'reverse' }}
                  className="absolute inset-0 bg-cover bg-center"
                  style={{
                    backgroundImage: `url(${bgImageUrl})`,
                    filter: 'blur(80px) saturate(140%)',
                    opacity: 0.55,
                  }}
                />
                {/* Color wash */}
                <div className="absolute inset-0 bg-void/65" />
                <div className="absolute inset-0 bg-gradient-to-b from-void/40 via-transparent to-void/80" />
              </>
            )}
          </div>

          {/* ── Header ────────────────────────────────────────── */}
          <div className="absolute top-0 left-0 right-0 z-20 flex items-center justify-between px-6 pt-5">
            <button
              onClick={onClose}
              className="group flex items-center gap-2 text-white/70 hover:text-white transition-colors px-2 py-1 rounded-md focus-ring"
            >
              <ChevronDown size={20} strokeWidth={2.25} className="transition-transform duration-200 group-hover:translate-y-0.5" />
              <span className="text-[12px] font-medium uppercase tracking-[0.14em]">Hide</span>
            </button>

            <span className="text-[11px] uppercase tracking-[0.18em] text-white/55 font-semibold">
              Now playing
            </span>

            <button
              onClick={onClose}
              className="w-9 h-9 rounded-full bg-white/8 hover:bg-white/15 backdrop-blur grid place-items-center text-white/70 hover:text-white transition-all duration-200 focus-ring"
              aria-label="Close"
            >
              <X size={17} />
            </button>
          </div>

          {/* ── Main content ─────────────────────────────────── */}
          <div className="relative flex-1 flex flex-col items-center justify-center px-8 pt-14 pb-10">
            {/* Album art */}
            <motion.div
              initial={{ opacity: 0, y: 30, scale: 0.94 }}
              animate={{ opacity: 1, y: 0, scale: 1 }}
              transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1], delay: 0.15 }}
              className="relative mb-9"
            >
              {/* Glow halo */}
              <div className="absolute inset-0 rounded-2xl bg-accent/20 blur-3xl scale-110" />
              {/* Reflection-like shadow */}
              <div className="absolute -bottom-6 left-4 right-4 h-12 bg-black/60 blur-2xl rounded-full opacity-70" />

              <div className="relative w-[300px] h-[300px] md:w-[340px] md:h-[340px] rounded-2xl overflow-hidden ring-1 ring-white/10 shadow-[0_30px_80px_-20px_rgba(0,0,0,0.8)] bg-elevated">
                {imageUrl ? (
                  <img src={imageUrl} alt={title} className="w-full h-full object-cover" />
                ) : (
                  <div className="w-full h-full grid place-items-center bg-gradient-to-br from-elevated to-surface">
                    <ListMusic size={72} className="text-text-3" />
                  </div>
                )}
              </div>
            </motion.div>

            {/* Track info */}
            <motion.div
              initial={{ opacity: 0, y: 14 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1], delay: 0.3 }}
              className="text-center mb-7 max-w-2xl"
            >
              <h2 className="font-display text-3xl md:text-4xl font-bold text-white tracking-tight mb-2 line-clamp-2">
                {title}
              </h2>
              <p className="text-[15px] text-white/70 truncate">
                {artist}
                {album && (
                  <>
                    <span className="text-white/30 mx-2">·</span>
                    <span className="text-white/55">{album}</span>
                  </>
                )}
              </p>
            </motion.div>

            {/* Scrubber */}
            <motion.div
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1], delay: 0.4 }}
              className="w-full max-w-md mb-6"
            >
              <div
                onClick={handleScrubClick}
                className="relative h-5 cursor-pointer group/scrub"
              >
                <div className="absolute left-0 right-0 top-1/2 -translate-y-1/2 h-1 group-hover/scrub:h-1.5 rounded-full bg-white/15 overflow-hidden transition-all duration-150">
                  <div
                    className="absolute left-0 top-0 bottom-0 bg-accent rounded-full"
                    style={{ width: `${playedPercent}%` }}
                  />
                </div>
                <div
                  className="absolute top-1/2 -translate-y-1/2 -translate-x-1/2 w-3.5 h-3.5 rounded-full bg-accent shadow-[0_0_12px_rgba(245,182,66,0.6)] pointer-events-none transition-opacity duration-150 opacity-0 group-hover/scrub:opacity-100"
                  style={{ left: `${playedPercent}%` }}
                />
              </div>
              <div className="flex justify-between text-[11px] text-white/55 mt-1.5 tabular-nums font-medium">
                <span>{formatTime(currentTime)}</span>
                <span>-{formatTime(Math.max(0, duration - currentTime))}</span>
              </div>
            </motion.div>

            {/* Transport */}
            <motion.div
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1], delay: 0.5 }}
              className="flex items-center gap-5 mb-6"
            >
              <NPButton onClick={toggleShuffle} active={shuffle} aria-label="Shuffle">
                <Shuffle size={18} />
              </NPButton>
              <NPButton onClick={prevTrack} aria-label="Previous">
                <SkipBack size={22} fill="currentColor" />
              </NPButton>

              <button
                onClick={isPlaying ? pause : resume}
                className="relative w-16 h-16 rounded-full bg-white text-void grid place-items-center transition-all duration-200 hover:scale-105 active:scale-95 shadow-[0_8px_24px_-6px_rgba(0,0,0,0.6)] focus-ring"
                aria-label={isPlaying ? 'Pause' : 'Play'}
              >
                <div className="absolute inset-0 rounded-full bg-white/30 blur-2xl scale-110 opacity-0 hover:opacity-100 transition-opacity" />
                {isPlaying ? (
                  <Pause size={26} fill="currentColor" />
                ) : (
                  <Play size={26} fill="currentColor" className="translate-x-0.5" />
                )}
              </button>

              <NPButton onClick={nextTrack} aria-label="Next">
                <SkipForward size={22} fill="currentColor" />
              </NPButton>
              <NPButton onClick={cycleRepeat} active={repeat !== 'off'} aria-label="Repeat">
                <RepeatIcon size={18} />
              </NPButton>
            </motion.div>

            {/* Secondary controls */}
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ duration: 0.5, delay: 0.6 }}
              className="flex items-center gap-2"
            >
              <NPButton aria-label="Favorite">
                <Heart
                  size={16}
                  className={currentTrack.UserData?.IsFavorite ? 'text-accent' : ''}
                  fill={currentTrack.UserData?.IsFavorite ? 'currentColor' : 'none'}
                />
              </NPButton>

              {/* Volume */}
              <div className="flex items-center gap-2 px-3 h-9 rounded-full bg-white/8 hover:bg-white/12 transition-colors">
                <button onClick={toggleMute} className="text-white/70 hover:text-white transition-colors">
                  <VolIcon size={14} />
                </button>
                <input
                  type="range"
                  min={0}
                  max={1}
                  step={0.01}
                  value={isMuted ? 0 : volume}
                  onChange={e => setVolume(Number(e.target.value))}
                  className="slider w-24"
                  aria-label="Volume"
                />
              </div>

              <button
                onClick={() => setShowQueue(!showQueue)}
                className={`flex items-center gap-2 h-9 px-3 rounded-full transition-all duration-200 text-[12px] font-medium focus-ring ${
                  showQueue
                    ? 'bg-accent/15 text-accent border border-accent/25'
                    : 'bg-white/8 text-white/70 hover:bg-white/12 hover:text-white border border-transparent'
                }`}
              >
                <ListMusic size={14} />
                Queue
                <span className="text-white/40">·</span>
                <span className="tabular-nums">{queue.length}</span>
              </button>
            </motion.div>
          </div>

          {/* ── Queue panel ───────────────────────────────────── */}
          <AnimatePresence>
            {showQueue && (
              <motion.div
                initial={{ x: 360, opacity: 0 }}
                animate={{ x: 0, opacity: 1 }}
                exit={{ x: 360, opacity: 0 }}
                transition={{ duration: 0.36, ease: [0.16, 1, 0.3, 1] }}
                className="relative w-[340px] glass-strong border-l border-border overflow-y-auto content-scroll"
              >
                <div className="sticky top-0 px-6 py-4 bg-glass-strong backdrop-blur-xl border-b border-border z-10">
                  <p className="text-[10px] font-semibold text-text-2 uppercase tracking-[0.14em]">Up next</p>
                  <h3 className="text-[15px] font-semibold text-text-1 tracking-tight mt-0.5">
                    {queue.length} {queue.length === 1 ? 'track' : 'tracks'}
                  </h3>
                </div>
                <div className="p-3 space-y-1">
                  {queue.map((track, i) => {
                    const isActive = i === queueIndex
                    const thumbUrl = getBestImage(serverUrl, track, 'primary', 100)
                    return (
                      <div
                        key={`${track.Id}-${i}`}
                        className={`group flex items-center gap-3 p-2 rounded-lg transition-all duration-150 ${
                          isActive ? 'bg-accent/12 ring-1 ring-accent/25' : 'hover:bg-glass-light'
                        }`}
                      >
                        <div className="relative w-10 h-10 rounded-md overflow-hidden bg-elevated shrink-0 ring-1 ring-border">
                          {thumbUrl ? (
                            <img src={thumbUrl} alt="" className="w-full h-full object-cover" />
                          ) : (
                            <div className="w-full h-full grid place-items-center text-text-3">
                              <ListMusic size={14} />
                            </div>
                          )}
                          {isActive && isPlaying && <Equalizer />}
                        </div>
                        <div className="min-w-0 flex-1">
                          <p className={`text-[13px] truncate font-medium tracking-tight ${isActive ? 'text-accent' : 'text-text-1'}`}>
                            {track.Name || 'Unknown'}
                          </p>
                          <p className="text-[11.5px] text-text-3 truncate">
                            {track.AlbumArtist || track.Artists?.[0] || 'Unknown artist'}
                          </p>
                        </div>
                        <span className="text-[10px] text-text-4 tabular-nums shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
                          {track.RunTimeTicks
                            ? formatTime(Number(track.RunTimeTicks) / 10000000)
                            : ''}
                        </span>
                      </div>
                    )
                  })}
                </div>
              </motion.div>
            )}
          </AnimatePresence>
        </motion.div>
      )}
    </AnimatePresence>
  )
}

function NPButton({
  active,
  children,
  ...props
}: React.ButtonHTMLAttributes<HTMLButtonElement> & { active?: boolean }) {
  return (
    <button
      {...props}
      className={`w-10 h-10 grid place-items-center rounded-full transition-all duration-200 hover:bg-white/12 focus-ring ${
        active ? 'text-accent bg-accent/12' : 'text-white/80 hover:text-white'
      }`}
    >
      {children}
    </button>
  )
}

function Equalizer() {
  return (
    <div className="absolute inset-0 grid place-items-center bg-black/55 backdrop-blur-sm">
      <div className="flex items-end gap-[2px] h-3.5">
        {[0, 1, 2].map(i => (
          <div
            key={i}
            className="w-[3px] bg-accent rounded-full origin-bottom"
            style={{
              animation: `equalizer-bar 0.9s ease-in-out infinite`,
              animationDelay: `${i * 0.15}s`,
            }}
          />
        ))}
      </div>
    </div>
  )
}