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
  // - consider separating context menu items (rather than having a sub-menu)
  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) {
      const playlists = JSON.parse(JSON.stringify(this.playlists));

      // Make a copy of the current playlist
      const playlist = [...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 = {
        ...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"]() {
        browser.tabs.update({ url: this.$el.href });
      },
    },

    removeVideoButton: {
      ["@click"]() {
        this.removeVideo(
          this.$el.dataset.playlistName,
          this.$el.dataset.playlistIndex,
        );
      },
    },
  }));
});