// nowplaying.js

const NowPlaying = (() => {
  function renderTrack(track) {
    if (!track) return;

    const trackName = track.name || "Unknown Track";
    const artistName = (track.artists && track.artists.length > 0)
      ? track.artists[0].name
      : "Unknown Artist";
    const albumUri = track.album ? track.album.uri : null;

    // Update text elements
    const trackEl = document.getElementById("nowPlayingTrack");
    const artistEl = document.getElementById("nowPlayingArtist");
    if (trackEl) trackEl.textContent = trackName;
    if (artistEl) artistEl.textContent = artistName;

    // Get album art
    if (albumUri) {
      client.call("core.library.get_images", { uris: [albumUri] })
        .then(images => {
          if (
            images &&
            images[albumUri] &&
            images[albumUri].length > 0
          ) {
            // Pick the first (largest?) image
            const artUri = images[albumUri][0].uri;
            const artEl = document.getElementById("nowPlayingArt");
            if (artEl) artEl.src = artUri;
          }
        })
        .catch(err => console.error("Image load error:", err));
    }
  }

  function init() {
    // On WS open, fetch current track
    client.on("open", () => {
      client
        .call("core.playback.get_current_track")
        .then(track => {
          console.log("Initial now playing:", track);
          renderTrack(track);
        })
        .catch(err => console.error("get_current_track error:", err));
    });

    // Listen for events on the WS
    client.on("message", msg => {
      if (!msg.event) return; // ignore non-event JSON
      switch (msg.event) {
        case "track_playback_started":
          if (msg.tl_track && msg.tl_track.track) {
            console.log("Now playing:", msg.tl_track.track);
            renderTrack(msg.tl_track.track);
          }
          break;

        case "track_playback_ended":
          console.log("Track ended:", msg.tl_track);
          break;

        case "playback_state_changed":
          console.log(
            `Playback state changed: ${msg.old_state} → ${msg.new_state}`
          );
          break;

        default:
          // Other events are ignored for now
          break;
      }
    });
  }

  return { init };
})();

// Auto-init after DOM loads
document.addEventListener("DOMContentLoaded", () => {
  NowPlaying.init();
});