/* global React, Icon, TrackArt, fmtTime */

const SongScreen = ({ onNav, track, tracks = [], onPlayTrack, isPlaying, setPlaying, showExplicitContent = true, isLiked = false, onToggleLike }) => {
  const visBars = Array.from({ length: 80 }).map((_, i) => ({
    h: 30 + Math.abs(Math.sin(i * .3)) * 60,
    d: (i * 35) % 1800,
  }));

  return (
    <div className="song" data-screen-label="03 Song Detail">
      <div className="song-bg">
        <img src="assets/hero-vocalist.jpg" alt="" />
      </div>
      <div className="visualizer">
        {visBars.map((b, i) => (
          <i key={i} style={{ height: `${b.h}%`, animationDelay: `${b.d}ms` }}></i>
        ))}
      </div>

      <div className="song-primary">
        <div className="song-art">
          <TrackArt track={track} variant="mic" />
        </div>
      </div>

      <div className="song-meta">
        <span className="eyebrow">Now Playing</span>
        <h1 className="song-title">{track.shortTitle || track.title}</h1>
        <div className="song-artist">{track.artist} {track.explicit && !showExplicitContent && <em className="explicit-badge">E</em>}</div>

        <div className="song-actions song-actions-simple">
          <button className="btn-circle is-primary" style={{ width: 64, height: 64 }} aria-label="Play" onClick={() => setPlaying(!isPlaying)}>
            <Icon name={isPlaying ? "pause" : "play"} size={22} />
          </button>
          <button className={`btn-circle like ${isLiked ? "is-on" : ""}`} style={{ width: 54, height: 54 }} aria-label={isLiked ? "Unlike song" : "Like song"} onClick={onToggleLike}>
            <Icon name={isLiked ? "heart" : "heartOutline"} size={20} />
          </button>
        </div>
      </div>

      <div className="song-side-section">
        <div className="section-title">
          <h2>Similar Songs</h2>
        </div>
        <div className="related-list">
          {tracks.slice(0, 12).map((r) => {
            const isCurrent = r.id === track.id;
            return (
            <button key={r.id} className={`related-row ${isCurrent ? "is-current" : ""} ${r.explicit && !showExplicitContent ? "is-explicit-muted" : ""}`} onClick={() => isCurrent ? setPlaying(!isPlaying) : onPlayTrack(r)}>
              <div className="rart"><TrackArt track={r} /></div>
              <div>
                <strong>{r.explicit && !showExplicitContent && <em className="explicit-badge">E</em>} {r.shortTitle || r.title}</strong>
                <span>{r.artist}</span>
              </div>
              {isCurrent && (
                <span className="playing-bars" aria-label="Currently playing">
                  <i></i><i></i><i></i>
                </span>
              )}
              <span className="dur">{fmtTime(r.duration || 0)}</span>
            </button>
            );
          })}
        </div>
      </div>
    </div>
  );
};

window.SongScreen = SongScreen;