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);
      }
    },

    async exportPlaylists() {
      try {
        // Get current playlists
        const playlistResult = await browser.storage.local.get("playlists");
        const playlists = playlistResult.playlists || {};

        // Get playback history
        const historyResult = await browser.storage.local.get("history");
        const playbackHistory = historyResult.history || {};

        // Create export data object
        const exportData = {
          playlists,
          playbackHistory,
          exportDate: new Date().toISOString(),
        };

        // Convert to JSON
        const jsonString = JSON.stringify(exportData, null, 2);

        // Create download
        const blob = new Blob([jsonString], { type: "application/json" });
        const url = URL.createObjectURL(blob);

        // Trigger download
        const a = document.createElement("a");
        a.href = url;
        a.download = `playlists-export-${new Date().toISOString().split("T")[0]}.json`;
        document.body.appendChild(a);
        a.click();

        // Clean up
        setTimeout(() => {
          document.body.removeChild(a);
          URL.revokeObjectURL(url);
        }, 100);
      } catch (error) {
        console.error("Error exporting playlists:", 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,
        );
      },
    },

    exportButton: {
      ["@click"]() {
        this.exportPlaylists();
      },
    },
  }));
});