import { Play, Pause, SkipBack, SkipForward, Volume2, ListMusic, Shuffle, Repeat, Repeat1, MicVocal, ThumbsDown } from 'lucide-react';
import { Link } from '@tanstack/react-router';
import { usePlaybackStore } from '../store/usePlaybackStore';
import { useDislikeTrack } from '../hooks/useDislikeTrack';
import { Artwork } from './Artwork';
import { ArtistLinks } from './ArtistLinks';
import { formatDuration } from './TrackRow';

interface PlaybackBarProps {
  queueOpen: boolean;
  lyricsOpen: boolean;
  onToggleQueue: () => void;
  onToggleLyrics: () => void;
}

export function PlaybackBar({ queueOpen, lyricsOpen, onToggleQueue, onToggleLyrics }: PlaybackBarProps) {
  const { currentTrack, isPlaying, position, duration, volume, shuffle, repeat, play, pause, next, prev, setPosition, setVolume, toggleShuffle, cycleRepeat } = usePlaybackStore();
  const dislikeTrack = useDislikeTrack();

  const handleDislike = () => {
    if (!currentTrack) return;
    dislikeTrack(currentTrack.id);
  };

  return (
    <div className="glass h-20 border-t border-border/70 px-4 flex items-center gap-4 shrink-0 z-20">
      {/* Track info */}
      <div className="flex items-center gap-3 w-64 min-w-0 shrink-0">
        {currentTrack ? (
          <>
            {currentTrack.album_id ? (
              <Link to="/albums/$albumId" params={{ albumId: currentTrack.album_id }}
                className="w-12 h-12 flex-none rounded-lg overflow-hidden shadow-md shadow-black/40 ring-1 ring-border/50 hover:ring-accent/50 transition-shadow" title="Go to album">
                <Artwork seed={`${currentTrack.title} ${currentTrack.artist}`} src={currentTrack.artwork_id} className="w-full h-full" rounded="lg" eager />
              </Link>
            ) : (
              <div className="w-12 h-12 flex-none rounded-lg overflow-hidden shadow-md shadow-black/40 ring-1 ring-border/50">
                <Artwork seed={`${currentTrack.title} ${currentTrack.artist}`} src={currentTrack.artwork_id} className="w-full h-full" rounded="lg" eager />
              </div>
            )}
            <div className="min-w-0">
              {currentTrack.album_id ? (
                <Link to="/albums/$albumId" params={{ albumId: currentTrack.album_id }}
                  className="block text-sm font-semibold text-text truncate hover:underline">
                  {currentTrack.title}
                </Link>
              ) : (
                <div className="text-sm font-semibold text-text truncate">{currentTrack.title}</div>
              )}
              <ArtistLinks artists={currentTrack.artists} fallback={currentTrack.artist} className="block text-xs text-muted truncate" />
            </div>
            <button
              onClick={handleDislike}
              title="Dislike (sends to quarantine)"
              className="flex-none rounded-md p-1.5 text-muted hover:bg-surface1 hover:text-red-400 transition-colors"
              aria-label="Dislike — move to quarantine"
            >
              <ThumbsDown size={16} />
            </button>
          </>
        ) : (
          <div className="text-sm text-muted italic">Nothing playing</div>
        )}
      </div>

      {/* Controls + scrubber */}
      <div className="flex-1 flex flex-col items-center gap-1">
        <div className="flex items-center gap-3">
          <button
            onClick={toggleShuffle}
            className={`p-1.5 rounded-md transition-colors ${shuffle ? 'text-accent' : 'text-muted hover:text-text'}`}
            aria-label={shuffle ? 'Disable shuffle' : 'Enable shuffle'}
            title={shuffle ? 'Shuffle on' : 'Shuffle off'}
          >
            <Shuffle size={18} />
          </button>
          <button onClick={prev} className="text-muted hover:text-text" aria-label="Previous">
            <SkipBack size={20} />
          </button>
          <button
            onClick={() => isPlaying ? pause() : play()}
            disabled={!currentTrack}
            className="transport-btn"
            aria-label={isPlaying ? 'Pause' : 'Play'}
          >
            {isPlaying ? <Pause size={18} fill="currentColor" /> : <Play size={18} fill="currentColor" />}
          </button>
          <button onClick={next} className="text-muted hover:text-text" aria-label="Next">
            <SkipForward size={20} />
          </button>
          <button
            onClick={cycleRepeat}
            className={`p-1.5 rounded-md transition-colors ${repeat !== 'none' ? 'text-accent' : 'text-muted hover:text-text'}`}
            aria-label={`Repeat: ${repeat}`}
            title={repeat === 'none' ? 'Repeat off' : repeat === 'all' ? 'Repeat all' : 'Repeat one'}
          >
            {repeat === 'one' ? <Repeat1 size={18} /> : <Repeat size={18} />}
          </button>
        </div>
        <div className="flex w-full max-w-lg items-center gap-2">
          <span className="text-xs text-muted w-9 text-right tabular-nums">{formatDuration(position)}</span>
          <input
            type="range" min={0} max={Math.max(duration, 0.1)} step={0.1}
            value={Math.min(position, duration || 0)}
            onChange={(e) => setPosition(Number(e.target.value))}
            disabled={!currentTrack || duration <= 0}
            className="flex-1 h-1 cursor-pointer"
            aria-label="Seek"
          />
          <span className="text-xs text-muted w-9 tabular-nums">{formatDuration(duration)}</span>
        </div>
      </div>

      {/* Volume + panel toggle */}
      <div className="flex items-center gap-3 w-48 justify-end shrink-0">
        <Volume2 size={18} className="text-muted flex-none" />
        <input
          type="range" min={0} max={1} step={0.01} value={volume}
          onChange={(e) => setVolume(Number(e.target.value))}
          className="w-20 h-1 cursor-pointer"
          aria-label="Volume"
        />
        <button
          onClick={onToggleLyrics}
          disabled={!currentTrack}
          className={`p-2 rounded-md transition-colors disabled:opacity-30 ${lyricsOpen ? 'bg-accent/20 text-accent' : 'text-muted hover:text-text'}`}
          aria-label="Toggle lyrics"
          title="Lyrics"
        >
          <MicVocal size={18} />
        </button>
        <button
          onClick={onToggleQueue}
          className={`p-2 rounded-md transition-colors ${queueOpen ? 'bg-accent/20 text-accent' : 'text-muted hover:text-text'}`}
          aria-label="Toggle queue panel"
          title="Up Next"
        >
          <ListMusic size={18} />
        </button>
      </div>
    </div>
  );
}
