import { IconButton, Slider, Tooltip } from 'modern-sk';
import { useAppDispatch, useAppSelector } from '../../hooks/useAppDispatch';
import { pause, resume, toggleMute, setVolume, toggleNowPlaying, toggleQueue } from '../../store/slices/player';
import { useAudioPlayer } from '../../hooks/useAudioPlayer';
import { formatDuration } from '../../lib/format';
import { getCoverUrl } from '../../api/endpoints/streaming';

export function PersistentPlayer() {
  const dispatch = useAppDispatch();
  const { seek, playNext, playPrev } = useAudioPlayer();
  const player = useAppSelector((s) => s.player);
  const queue = useAppSelector((s) => s.queue);
  const currentEntry = queue.entries[queue.currentIndex];

  if (!currentEntry && !player.currentTrackId) {
    return (
      <div style={{ height: '4rem', borderTop: '1px solid var(--color-border)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '0 1.5rem', color: 'var(--color-text-3)', fontSize: '0.875rem' }}>
        Nothing playing
      </div>
    );
  }

  const artUrl = currentEntry?.albumArtUrl ? getCoverUrl(currentEntry.albumArtUrl) : undefined;
  const progressPercent = player.duration > 0 ? (player.position / player.duration) * 100 : 0;

  return (
    <div style={{ height: '4rem', borderTop: '1px solid var(--color-border)', display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'center', padding: '0 1rem', gap: '1rem', background: 'var(--color-surface-1)' }}>
      {/* track info */}
      <div
        style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', minWidth: 0, cursor: 'pointer' }}
        onClick={() => dispatch(toggleNowPlaying())}
      >
        {artUrl ? (
          <img src={artUrl} alt="" width={40} height={40} style={{ borderRadius: 4, objectFit: 'cover', flexShrink: 0 }} />
        ) : (
          <div style={{ width: 40, height: 40, borderRadius: 4, background: 'var(--color-surface-3)', flexShrink: 0 }} />
        )}
        <div style={{ minWidth: 0 }}>
          <div style={{ fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', fontSize: '0.875rem' }}>
            {currentEntry?.title ?? '—'}
          </div>
          <div style={{ fontSize: '0.75rem', color: 'var(--color-text-2)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
            {currentEntry?.artistName ?? ''}
          </div>
        </div>
      </div>

      {/* controls + scrubber */}
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.25rem', minWidth: '20rem' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
          <IconButton variant="ghost" size="sm" onClick={playPrev} aria-label="Previous">⏮</IconButton>
          <IconButton
            variant="primary"
            onClick={() => player.isPlaying ? dispatch(pause()) : dispatch(resume())}
            aria-label={player.isPlaying ? 'Pause' : 'Play'}
          >
            {player.isPlaying ? '⏸' : '▶'}
          </IconButton>
          <IconButton variant="ghost" size="sm" onClick={playNext} aria-label="Next">⏭</IconButton>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', width: '100%' }}>
          <span style={{ fontSize: '0.7rem', color: 'var(--color-text-3)', minWidth: '2.5rem', textAlign: 'right' }}>
            {formatDuration(player.position * 1000)}
          </span>
          <Slider
            min={0}
            max={player.duration || 1}
            step={1}
            value={[player.position]}
            onValueChange={([v]) => seek(v)}
            style={{ flex: 1 }}
          />
          <span style={{ fontSize: '0.7rem', color: 'var(--color-text-3)', minWidth: '2.5rem' }}>
            {formatDuration(player.duration * 1000)}
          </span>
        </div>
      </div>

      {/* volume + queue */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: '0.5rem' }}>
        <Tooltip content={player.muted ? 'Unmute' : 'Mute'}>
          <IconButton variant="ghost" size="sm" onClick={() => dispatch(toggleMute())} aria-label="Toggle mute">
            {player.muted ? '🔇' : '🔊'}
          </IconButton>
        </Tooltip>
        <Slider
          min={0}
          max={1}
          step={0.01}
          value={[player.muted ? 0 : player.volume]}
          onValueChange={([v]) => dispatch(setVolume(v))}
          style={{ width: '6rem' }}
        />
        <Tooltip content="Queue">
          <IconButton variant={player.isQueueOpen ? 'primary' : 'ghost'} size="sm" onClick={() => dispatch(toggleQueue())} aria-label="Toggle queue">
            ≡
          </IconButton>
        </Tooltip>
      </div>

      {/* progress bar at bottom */}
      <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 2, background: 'var(--color-surface-3)' }}>
        <div style={{ width: `${progressPercent}%`, height: '100%', background: 'var(--color-accent)', transition: 'width 0.5s linear' }} />
      </div>
    </div>
  );
}