document.addEventListener("alpine:init", () => {
  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);
      }
    },
  }));
});
console.log("popup.js FINISHED doing something");