document.addEventListener("alpine:init", () => {
  //TODO
  // - reorder videos in playlist
  // - remove videos from playlist
  // - preserve playlist order (sort)
  // - "play/resume playlist" button (pick up where you left off)
  //   - track timestamp to truly resume where you left off
  // - periodically remove watched videos
  Alpine.data("playlistManager", () => ({
    playlists: {},

    init() {
      this.loadPlaylists();
    },

    async loadPlaylists() {
      try {
        const result = await browser.storage.local.get("playlists");
        console.log("LOAD RESULT", result.playlists);
        this.playlists = result.playlists || {};
      } catch (error) {
        console.error("Error loading playlists:", error);
      }
    },

    formatPlaylistName(name) {
      // Convert "listening-1" to "Listening - 1"
      return name
        .split("-")
        .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
        .join(" - ");
    },

    openVideo(url) {
      browser.tabs.create({ url });
    },

    async removeVideo(playlistName, index) {
      // Make a copy of the current playlist
      const playlist = [...this.playlists[playlistName]];

      // Remove the video at the specified index
      playlist.splice(index, 1);

      // Create an updated playlists object with the remaining playlists unchanged
      const updatedPlaylists = {
        ...this.playlists,
        [playlistName]: playlist,
      };

      // Update the playlists in storage
      try {
        await browser.storage.local.set({ playlists: updatedPlaylists });
        this.playlists = updatedPlaylists;
      } catch (error) {
        console.error("Error removing video:", error);
      }
    },

    videotitle: {
      ["@click"]() {
        console.log('TITLE CLICK', this.$el);
      },
    },

    videoPlayLink: {
      ["@click.prevent"](evt) {
        if (evt.target && evt.target.href) {
          browser.tabs.update({ url: evt.target.href });
        }
      },
    },

    removeVideoButton: {
      ["@click"](evt) {
        if (evt.target && evt.target.attributes.playlistName && evt.target.attributes.playlistIndex) {
            this.removeVideo(evt.target.attributes.playlistName.value, evt.target.attributes.playlistIndex.value);
        }
      },
    },
  }));
});