import React, { useState, useEffect, useRef } from 'react';
import { Play, Pause, Volume2, Volume1, VolumeX, Radio, Music, Disc, Zap } from 'lucide-react';

export default function RadioStation() {
  // State for player
  const [isPlaying, setIsPlaying] = useState(false);
  const [volume, setVolume] = useState(80);
  const [currentTrackIndex, setCurrentTrackIndex] = useState(0);
  const [elapsed, setElapsed] = useState(0);
  const [showDJMessage, setShowDJMessage] = useState(false);
  const [listeners, setListeners] = useState(Math.floor(Math.random() * 1500) + 500);
  const audioRef = useRef(null);
  const timerRef = useRef(null);

  // Playlist data
  const playlist = [
    { 
      title: "Good Days (Disco Remix)", 
      artist: "SZA", 
      genre: "Pop/Disco", 
      duration: 215,
      coverUrl: "https://images.unsplash.com/photo-1614613535308-eb5fbd3d2c17?q=80&w=200&auto=format&fit=crop"
    },
    { 
      title: "Shape of You (Jazz Fusion)", 
      artist: "Ed Sheeran", 
      genre: "Jazz/Pop", 
      duration: 240,
      coverUrl: "https://images.unsplash.com/photo-1470225620780-dba8ba36b745?q=80&w=200&auto=format&fit=crop"
    },
    { 
      title: "Super Bass (Electronic Remix)", 
      artist: "Nicki Minaj", 
      genre: "Electronic/Hip-Hop", 
      duration: 198,
      coverUrl: "https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?q=80&w=200&auto=format&fit=crop"
    },
    { 
      title: "Viva La Vida (Mashup)", 
      artist: "Coldplay", 
      genre: "Mashup/Alternative", 
      duration: 225,
      coverUrl: "https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?q=80&w=200&auto=format&fit=crop"
    },
    { 
      title: "Blinding Lights (Disco Edit)", 
      artist: "The Weeknd", 
      genre: "Disco/Synth-pop", 
      duration: 203,
      coverUrl: "https://images.unsplash.com/photo-1514525253161-7a46d19cd819?q=80&w=200&auto=format&fit=crop"
    },
    { 
      title: "Levitating (Jazz Club Mix)", 
      artist: "Dua Lipa", 
      genre: "Jazz/Pop", 
      duration: 231,
      coverUrl: "https://images.unsplash.com/photo-1504509546545-e000b4a62425?q=80&w=200&auto=format&fit=crop"
    },
    { 
      title: "Uptown Funk (Electronic Fusion)", 
      artist: "Mark Ronson ft. Bruno Mars", 
      genre: "Electronic/Funk", 
      duration: 270,
      coverUrl: "https://images.unsplash.com/photo-1571330735066-03aaa9429d89?q=80&w=200&auto=format&fit=crop"
    },
    { 
      title: "Bad Guy (Remix)", 
      artist: "Billie Eilish", 
      genre: "Electronic/Pop", 
      duration: 194,
      coverUrl: "https://images.unsplash.com/photo-1598387993281-cecf8b71a8f8?q=80&w=200&auto=format&fit=crop"
    },
  ];

  // DJ messages
  const djMessages = [
    "That was a hot track! Keep it locked to Mashup Mix FM 44.7!",
    "You're listening to the best mashups and remixes on Mashup Mix FM 44.7!",
    "We're mixing genres and breaking boundaries here on Mashup Mix FM!",
    "Don't touch that dial! More great music coming up on 44.7 FM!",
    "Shoutout to all our listeners tuning in from around the world!",
    "That beat was fire! Up next, we've got another banger for you!"
  ];

  // Simulate audio playback
  useEffect(() => {
    if (isPlaying) {
      timerRef.current = setInterval(() => {
        setElapsed(prev => {
          const currentTrack = playlist[currentTrackIndex];
          if (prev >= currentTrack.duration) {
            // Show DJ message between tracks
            setShowDJMessage(true);
            setTimeout(() => {
              setShowDJMessage(false);
              setCurrentTrackIndex((currentTrackIndex + 1) % playlist.length);
              setElapsed(0);
              // Update random listener count
              setListeners(Math.floor(Math.random() * 1500) + 500);
            }, 5000);
            clearInterval(timerRef.current);
            return prev;
          }
          return prev + 1;
        });
      }, 1000);
    } else {
      clearInterval(timerRef.current);
    }

    return () => clearInterval(timerRef.current);
  }, [isPlaying, currentTrackIndex, playlist]);

  // Format time from seconds to MM:SS
  const formatTime = (seconds) => {
    const mins = Math.floor(seconds / 60);
    const secs = seconds % 60;
    return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
  };

  // Handle play/pause
  const togglePlay = () => {
    setIsPlaying(!isPlaying);
  };

  // Handle volume change
  const handleVolumeChange = (e) => {
    setVolume(e.target.value);
  };

  // Get volume icon based on level
  const getVolumeIcon = () => {
    if (volume === 0) return <VolumeX size={20} />;
    if (volume < 50) return <Volume1 size={20} />;
    return <Volume2 size={20} />;
  };

  // Get random DJ message
  const getRandomDJMessage = () => {
    return djMessages[Math.floor(Math.random() * djMessages.length)];
  };

  // Current track
  const currentTrack = playlist[currentTrackIndex];
  
  // Next few tracks for playlist display
  const upcomingTracks = [];
  for (let i = 1; i <= 3; i++) {
    const index = (currentTrackIndex + i) % playlist.length;
    upcomingTracks.push(playlist[index]);
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-[#121212] to-[#2D1B69] text-white font-sans">
      {/* Header */}
      <header className="p-6 flex flex-col items-center justify-center border-b border-[#5D3FD3]/30">
        <div className="flex items-center gap-2 mb-2">
          <Radio className="text-[#FF5DA2]" size={28} />
          <h1 className="text-4xl font-bold bg-gradient-to-r from-[#FF5DA2] to-[#00FFFF] text-transparent bg-clip-text">
            Mashup Mix FM
          </h1>
          <span className="text-[#00FFFF] font-bold text-2xl">44.7</span>
        </div>
        <p className="text-gray-300 text-sm">Mixing Genres, Breaking Boundaries</p>
      </header>

      {/* Main content */}
      <main className="max-w-5xl mx-auto p-6">
        {/* Now Playing Section */}
        <div className="bg-[#1A1A1A] rounded-xl p-6 shadow-lg border border-[#5D3FD3]/20 mb-8">
          <div className="flex flex-col md:flex-row gap-6 items-center">
            {/* Album Art */}
            <div className="relative w-64 h-64 flex-shrink-0">
              <div className="absolute inset-0 rounded-lg overflow-hidden">
                <img 
                  src={currentTrack.coverUrl} 
                  alt={`${currentTrack.title} cover`} 
                  className="w-full h-full object-cover"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
              </div>
              
              {/* Live indicator */}
              <div className="absolute top-4 left-4 bg-[#FF5DA2] text-white px-3 py-1 rounded-full text-xs font-bold flex items-center gap-1">
                <span className="relative flex h-2 w-2">
                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-white opacity-75"></span>
                  <span className="relative inline-flex rounded-full h-2 w-2 bg-white"></span>
                </span>
                LIVE
              </div>
              
              {/* Listeners */}
              <div className="absolute bottom-4 left-4 bg-black/50 text-white px-3 py-1 rounded-full text-xs flex items-center gap-1">
                <Radio size={12} />
                {listeners.toLocaleString()} listeners
              </div>
            </div>
            
            {/* Track Info */}
            <div className="flex-1">
              {showDJMessage ? (
                <div className="bg-[#5D3FD3]/20 p-4 rounded-lg mb-4 border border-[#5D3FD3]/30">
                  <div className="flex items-center gap-2 mb-2">
                    <Zap className="text-[#FF5DA2]" size={20} />
                    <h3 className="font-bold text-[#FF5DA2]">DJ Announcement</h3>
                  </div>
                  <p className="text-gray-200">{getRandomDJMessage()}</p>
                </div>
              ) : (
                <>
                  <div className="flex items-center gap-2 mb-1">
                    <Music className="text-[#FF5DA2]" size={16} />
                    <span className="text-sm text-gray-400">Now Playing</span>
                  </div>
                  <h2 className="text-3xl font-bold mb-2">{currentTrack.title}</h2>
                  <p className="text-xl text-gray-300 mb-4">{currentTrack.artist}</p>
                  <div className="flex items-center gap-2 mb-6">
                    <span className="bg-[#5D3FD3] text-white text-xs px-3 py-1 rounded-full">{currentTrack.genre}</span>
                  </div>
                </>
              )}
              
              {/* Progress bar */}
              <div className="mb-4">
                <div className="h-1 w-full bg-gray-700 rounded-full overflow-hidden">
                  <div 
                    className="h-full bg-gradient-to-r from-[#FF5DA2] to-[#00FFFF]" 
                    style={{ width: `${(elapsed / currentTrack.duration) * 100}%` }}
                  ></div>
                </div>
                <div className="flex justify-between text-xs text-gray-400 mt-1">
                  <span>{formatTime(elapsed)}</span>
                  <span>{formatTime(currentTrack.duration)}</span>
                </div>
              </div>
              
              {/* Controls */}
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-4">
                  <button 
                    onClick={togglePlay}
                    className="w-14 h-14 rounded-full bg-[#FF5DA2] hover:bg-[#FF5DA2]/90 flex items-center justify-center transition-all"
                  >
                    {isPlaying ? <Pause size={24} /> : <Play size={24} />}
                  </button>
                  
                  <div className="flex items-center gap-2">
                    {getVolumeIcon()}
                    <input
                      type="range"
                      min="0"
                      max="100"
                      value={volume}
                      onChange={handleVolumeChange}
                      className="w-24 accent-[#00FFFF]"
                    />
                  </div>
                </div>
                
                <div className="hidden md:flex items-center gap-2">
                  <span className="text-xs text-gray-400">Streaming URL:</span>
                  <span className="text-xs bg-black/30 px-2 py-1 rounded">
                    https://stream.mashupmixfm.com/44.7/live
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        {/* Visualizer */}
        <div className="bg-[#1A1A1A] rounded-xl p-4 mb-8 border border-[#5D3FD3]/20">
          <div className="h-16 flex items-end justify-between gap-1">
            {Array.from({ length: 32 }).map((_, i) => {
              const height = isPlaying ? 
                Math.floor(Math.random() * 100) + (i % 3 === 0 ? 20 : 10) : 
                10;
              
              return (
                <div 
                  key={i} 
                  className="w-full bg-gradient-to-t from-[#FF5DA2] to-[#00FFFF] rounded-sm transition-all duration-75"
                  style={{ height: `${height}%` }}
                ></div>
              );
            })}
          </div>
        </div>
        
        {/* Upcoming tracks */}
        <div className="bg-[#1A1A1A] rounded-xl p-6 border border-[#5D3FD3]/20">
          <div className="flex items-center gap-2 mb-4">
            <Disc className="text-[#FF5DA2]" size={20} />
            <h3 className="text-xl font-bold">Coming Up Next</h3>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            {upcomingTracks.map((track, index) => (
              <div key={index} className="bg-black/30 rounded-lg p-4 hover:bg-black/50 transition-all">
                <div className="flex gap-3">
                  <img 
                    src={track.coverUrl} 
                    alt={`${track.title} cover`} 
                    className="w-16 h-16 object-cover rounded"
                  />
                  <div>
                    <h4 className="font-bold text-sm">{track.title}</h4>
                    <p className="text-gray-400 text-xs mb-1">{track.artist}</p>
                    <span className="bg-[#5D3FD3]/30 text-[#00FFFF] text-xs px-2 py-0.5 rounded-full">
                      {track.genre}
                    </span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </main>
      
      {/* Footer */}
      <footer className="p-4 text-center text-gray-400 text-xs mt-8">
        <p>© 2023 Mashup Mix FM 44.7 | The Ultimate Genre-Blending Radio Experience</p>
      </footer>
    </div>
  );
}