import { Alpine } from "./alpine";
import { initializeSearch } from "./search";
import {
  initializeTheme,
  changeTheme,
  changeWoodPaneling,
  loadWoodPaneling,
  updateWoodPanelingIndicators,
} from "./theme";
import { getSelectedLibrary } from "./storage";
import { addListener, removeListener } from "./websocket";

const logout = (): void => {
  localStorage.removeItem("token");
  localStorage.removeItem("user");
  window.location.href = "/";
};

const restoreLibrarySelection = (): void => {
  const savedLibrary = getSelectedLibrary();
  if (!savedLibrary) return;

  const dropdownSelectors = [
    "#library-select",
    "#selected-library",
    "#library_id",
  ];

  for (const selector of dropdownSelectors) {
    const dropdown = document.querySelector(selector) as HTMLSelectElement;
    if (dropdown) {
      const option = dropdown.querySelector(`option[value="${savedLibrary}"]`);
      if (option) {
        dropdown.value = savedLibrary;
        dropdown.dispatchEvent(new Event("change", { bubbles: true }));
        console.log("Restored library selection:", savedLibrary);
        return;
      }
    }
  }
};

const initializeScanListener = function (this: any) {
  const handler = (message: any) => {
    switch (message.type) {
      case "scan_progress":
        this.scanning = true;
        this.scanProgress = Math.round((message.data.progress || 0) * 100);
        this.scanNewItems = message.data.new_items || 0;
        this.scanFilesScanned = message.data.files_scanned || 0;
        break;
      case "scan_complete":
        this.scanning = false;
        this.scanProgress = 100;
        this.scanNewItems = message.data?.new_items || this.scanNewItems;
        window.dispatchEvent(
          new CustomEvent("bookhoard:scan-complete", {
            detail: message.data,
          }),
        );
        setTimeout(() => {
          this.scanProgress = 0;
          this.scanNewItems = 0;
          this.scanFilesScanned = 0;
        }, 3000);
        break;
      case "scan_error":
        this.scanning = false;
        this.scanProgress = 0;
        break;
    }
  };

  addListener(handler);

  const headerEl = document.querySelector("[x-data='header']");
  if (headerEl) {
    const observer = new MutationObserver(() => {
      if (!document.contains(headerEl)) {
        removeListener(handler);
        observer.disconnect();
      }
    });
    observer.observe(document.body, { childList: true, subtree: true });
  }
};

export { logout, restoreLibrarySelection };

Alpine.data("header", () => ({
  logout,
  initializeSearch,
  initializeTheme,
  changeTheme,
  changeWoodPaneling,
  loadWoodPaneling,
  updateWoodPanelingIndicators,
  restoreLibrarySelection,
  initializeScanListener,
  scanning: false,
  scanProgress: 0,
  scanNewItems: 0,
  scanFilesScanned: 0,
}));