import { Play, Pause, SkipForward, Music } from 'lucide-react'
import { useMusicPlayer } from '../contexts/MusicPlayerContext'
import { hapticFeedback } from '../utils/telegram'
import './MiniPlayer.css'

export default function MiniPlayer() {
  const {
    currentTrack,
    isPlaying,
    progress,
    duration,
    togglePlay,
    playNext,
    toggleExpanded
  } = useMusicPlayer()

  if (!currentTrack) return null

  const progressPercent = duration > 0 ? (progress / duration) * 100 : 0

  const handleTogglePlay = (e) => {
    e.stopPropagation()
    hapticFeedback('light')
    togglePlay()
  }

  const handleNext = (e) => {
    e.stopPropagation()
    hapticFeedback('light')
    playNext()
  }

  const handleExpand = () => {
    hapticFeedback('light')
    toggleExpanded()
  }

  return (
    <div className="mini-player" onClick={handleExpand}>
      <div className="mini-player-progress" style={{ width: `${progressPercent}%` }} />
      
      <div className="mini-player-content">
        <div className="mini-player-cover">
          {currentTrack.coverImage ? (
            <img src={currentTrack.coverImage} alt={currentTrack.title} />
          ) : (
            <Music size={20} />
          )}
        </div>

        <div className="mini-player-info">
          <div className="mini-player-title">{currentTrack.title}</div>
          <div className="mini-player-artist">{currentTrack.artist?.name || 'Unknown'}</div>
        </div>

        <div className="mini-player-controls">
          <button className="mini-player-btn" onClick={handleTogglePlay}>
            {isPlaying ? <Pause size={24} fill="currentColor" /> : <Play size={24} fill="currentColor" />}
          </button>
          <button className="mini-player-btn" onClick={handleNext}>
            <SkipForward size={24} />
          </button>
        </div>
      </div>
    </div>
  )
}

