muzick/frontend/src/components/NowPlayingPanel.tsx

import { X, Play, Pause, SkipBack, SkipForward, Disc3 } from 'lucide-react';
import { useEffect, useRef } from 'react';
import { useQuery } from '@tanstack/react-query';
import { Link } from '@tanstack/react-router';
import { usePlaybackStore } from '../store/usePlaybackStore';
import { Artwork } from './Artwork';
import { ArtistLinks } from './ArtistLinks';
import { TrackRow, formatDuration } from './TrackRow';
import { albumService } from '../services/albumService';
import { useTransport } from '../hooks/useTransport';

export function NowPlayingPanel({ onClose }: { onClose: () => void }) {
  const panelRef = useRef<HTMLElement>(null);
  const closeRef = useRef<HTMLButtonElement>(null);
  useEffect(() => { closeRef.current?.focus(); }, []);
  useEffect(() => {
    const previous = document.activeElement as HTMLElement | null;
    const trap = (event: KeyboardEvent) => {
      if (event.key !== 'Tab' || !panelRef.current) return;
      const focusable = [...panelRef.current.querySelectorAll<HTMLElement>(
        'a[href], button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex="-1"])'
      )].filter((element) => !element.hasAttribute('hidden'));
      if (focusable.length === 0) return;
      const first = focusable[0];
      const last = focusable[focusable.length - 1];
      if (event.shiftKey && document.activeElement === first) {
        event.preventDefault(); last.focus();
      } else if (!event.shiftKey && document.activeElement === last) {
        event.preventDefault(); first.focus();
      }
    };
    document.addEventListener('keydown', trap);
    return () => {
      document.removeEventListener('keydown', trap);
      previous?.focus();
    };
  }, []);
  const { currentTrack, queue, isPlaying, position, duration } = usePlaybackStore();
  const transport = useTransport();

  const currentIdx = currentTrack ? queue.findIndex((t) => t.id === currentTrack.id) : -1;
  const upNext = currentIdx >= 0 ? queue.slice(currentIdx + 1) : queue;

  const albumQ = useQuery({
    queryKey: ['album', currentTrack?.album_id],
    queryFn: () => albumService.getAlbum(currentTrack!.album_id),
    enabled: !!currentTrack?.album_id,
    staleTime: 5 * 60 * 1000,
  });
  const artwork = albumQ.data?.artwork_id ?? currentTrack?.artwork_id ?? null;

  return (
    <aside ref={panelRef} role="dialog" aria-modal="true" aria-label="Now playing queue" className="absolute inset-0 z-30 flex w-full flex-col overflow-hidden border-l border-border/70 bg-bg1 backdrop-blur-sm animate-slide-in sm:left-auto sm:w-96 lg:relative lg:z-auto lg:bg-bg1/80">
      <div className="flex items-center justify-between px-4 py-3 border-b border-border/70">
        <span className="text-sm font-semibold text-text">Now Playing</span>
        <button ref={closeRef} onClick={onClose} aria-label="Close now playing" className="rounded-md p-2 text-muted hover:text-text hover:bg-surface1">
          <X size={16} />
        </button>
      </div>

      {/* The artwork below is capped against viewport height, not just width.
          At full width on a phone the square alone is taller than the space
          between the top bar and the transport, which pushed Up Next — the
          reason the panel opens — entirely off the screen. */}
      <div className="p-3 space-y-3 sm:p-4 sm:space-y-4">
        {currentTrack?.album_id ? (
          <Link to="/albums/$albumId" params={{ albumId: currentTrack.album_id }}
            className="group mx-auto block aspect-square w-full max-w-[min(100%,34vh)] rounded-xl overflow-hidden relative shadow-lg shadow-black/40" title="Go to album">
            <Artwork seed={`${currentTrack.title} ${currentTrack.artist}`} src={artwork} className="w-full h-full transition-transform group-hover:scale-105" rounded="xl" />
            <div className="absolute inset-0 flex items-center justify-center bg-black/0 group-hover:bg-black/40 transition-colors">
              <Disc3 size={28} className="text-on-accent opacity-0 group-hover:opacity-100 transition-opacity" />
            </div>
          </Link>
        ) : (
          <div className="mx-auto aspect-square w-full max-w-[min(100%,34vh)] rounded-xl overflow-hidden shadow-lg shadow-black/40">
            <Artwork seed={currentTrack ? `${currentTrack.title} ${currentTrack.artist}` : 'empty'} src={artwork} className="w-full h-full" rounded="xl" />
          </div>
        )}

        {currentTrack ? (
          <div className="text-center space-y-0.5">
            {currentTrack.album_id ? (
              <Link to="/albums/$albumId" params={{ albumId: currentTrack.album_id }} className="font-bold text-text truncate block hover:underline">
                {currentTrack.title}
              </Link>
            ) : (
              <div className="font-bold text-text truncate">{currentTrack.title}</div>
            )}
            <ArtistLinks artists={currentTrack.artists} fallback={currentTrack.artist} className="block text-sm text-muted truncate" />
          </div>
        ) : (
          <div className="text-center text-sm text-muted italic">No track playing</div>
        )}

        <div className="track-list">
          <input
            type="range" min={0} max={Math.max(duration, 0.1)} step={0.1}
            value={Math.min(position, duration || 0)}
            onChange={(e) => transport.seek(Number(e.target.value))}
            disabled={!currentTrack || duration <= 0}
            className="w-full cursor-pointer"
          />
          <div className="flex justify-between text-xs text-muted tabular-nums">
            <span>{formatDuration(position)}</span>
            <span>{formatDuration(duration)}</span>
          </div>
        </div>

        <div className="flex items-center justify-center gap-4 sm:gap-6">
          <button onClick={transport.prev} aria-label="Previous" className="rounded-md p-2 text-muted hover:text-text hover:bg-surface0"><SkipBack size={20} /></button>
          <button
            onClick={transport.toggle}
            aria-label={isPlaying ? 'Pause' : 'Play'}
            disabled={!currentTrack}
            className="transport-btn"
          >
            {isPlaying ? <Pause size={18} fill="currentColor" /> : <Play size={18} fill="currentColor" />}
          </button>
          <button onClick={transport.next} aria-label="Next" className="rounded-md p-2 text-muted hover:text-text hover:bg-surface0"><SkipForward size={20} /></button>
        </div>
      </div>

      <div className="px-4 py-2 border-t border-border/70 text-xs font-semibold uppercase tracking-wide text-muted">
        Up Next ({upNext.length})
      </div>

      <div className="flex-1 overflow-y-auto px-2 py-2">
        {upNext.length === 0 ? (
          <div className="px-2 py-4 text-sm text-muted italic">Queue is empty.</div>
        ) : (
          <div className="space-y-0.5">
            {upNext.map((track, i) => (
              <TrackRow
                key={`${track.id}-${i}`}
                track={track}
                queue={upNext.slice(i)}
                index={0}
                showActions={false}
                variant="compact"
              />
            ))}
          </div>
        )}
      </div>
    </aside>
  );
}