import React, { useState } from 'react';
import AddSongModal from './AddSongModal';

function StationPage() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [currentSong, setCurrentSong] = useState({
    title: "No song playing",
    artist: "Add songs to get started",
    isPlaying: false
  });

  // Empty song list - no songs initially
  const recommendedSongs = [];

  const handlePlayPause = () => {
    setCurrentSong(prev => ({ ...prev, isPlaying: !prev.isPlaying }));
  };

  const handleNext = () => {
    console.log('Next song');
  };

  const handlePrevious = () => {
    console.log('Previous song');
  };

  const openModal = () => {
    setIsModalOpen(true);
  };

  const closeModal = () => {
    setIsModalOpen(false);
  };

  return (
    <div className="station-page">
      <div className="animated-background">
        {[...Array(20)].map((_, i) => (
          <div key={i} className={`star star-${i + 1}`}></div>
        ))}
      </div>

      <div className="station-content">
        <header className="station-header">
          <h1>Serena Station</h1>
          <p className="station-subtitle">Collaborative Music Experience</p>
        </header>

        <div className="media-controls-section">
          <div className="current-song">
            <h3>{currentSong.title}</h3>
            <p>{currentSong.artist}</p>
          </div>
          
          <div className="media-controls">
            <button className="control-btn" onClick={handlePrevious}>
              <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                <path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/>
              </svg>
            </button>
            
            <button className="control-btn play-pause" onClick={handlePlayPause}>
              {currentSong.isPlaying ? (
                <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
                </svg>
              ) : (
                <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M8 5v14l11-7z"/>
                </svg>
              )}
            </button>
            
            <button className="control-btn" onClick={handleNext}>
              <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                <path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/>
              </svg>
            </button>
          </div>
        </div>

        <div className="songs-section">
          <div className="section-header">
            <h2>Song Queue</h2>
            <button className="add-song-btn" onClick={openModal}>
              Add Song
            </button>
          </div>
          
          <div className="songs-list">
            {recommendedSongs.length === 0 ? (
              <div className="empty-songs-state">
                <p>No songs in queue yet. Add some songs to get started!</p>
              </div>
            ) : (
              recommendedSongs.map(song => (
                <div key={song.id} className="song-item">
                  <div className="song-info">
                    <h4>{song.title}</h4>
                    <p>{song.artist}</p>
                  </div>
                  <span className="song-duration">{song.duration}</span>
                </div>
              ))
            )}
          </div>
        </div>
      </div>

      {isModalOpen && <AddSongModal onClose={closeModal} />}
    </div>
  );
}

export default StationPage;