// Wood paneling management functionality

type WoodPanelingType = "none" | "wood-light" | "wood-dark" | "wood-mahogany";

const WOOD_STORAGE_KEY = "wood-paneling";

// Apply wood paneling to collections container
const applyWoodPaneling = (paneling: WoodPanelingType): void => {
  const container = document.getElementById("collections-container");
  const body = document.body;
  if (!container || !body) return;

  // Remove all wood background classes from container
  container.classList.remove(
    "bg-wood-light",
    "bg-wood-dark",
    "bg-wood-mahogany",
  );
  container.removeAttribute("data-wood");

  // Remove from body
  body.classList.remove("bg-wood-light", "bg-wood-dark", "bg-wood-mahogany");

  if (paneling !== "none") {
    // Add selected wood background class to both container and body
    const woodClass = `bg-${paneling}`;
    container.classList.add(woodClass);
    container.setAttribute("data-wood", paneling);

    // Add to body for overscroll area
    body.classList.add(woodClass);
  }

  // Save to localStorage
  localStorage.setItem(WOOD_STORAGE_KEY, paneling);
};

// Load wood paneling from localStorage on page load
const loadWoodPaneling = (): void => {
  const stored = localStorage.getItem(
    WOOD_STORAGE_KEY,
  ) as WoodPanelingType | null;
  if (stored) {
    applyWoodPaneling(stored);
  } else {
    // Default to none
    applyWoodPaneling("none");
  }
};

// Change wood paneling (called from theme dropdown)
const changeWoodPaneling = (paneling: WoodPanelingType): void => {
  applyWoodPaneling(paneling);

  // Update active indicators
  updateWoodPanelingIndicators();

  // Close dropdown
  const dropdown = document.getElementById("theme-dropdown");
  if (dropdown) {
    dropdown.classList.add("hidden");
  }
};

// Update visual indicators for wood paneling buttons
const updateWoodPanelingIndicators = (): void => {
  const currentWood = localStorage.getItem(WOOD_STORAGE_KEY) || "none";

  // Update wood paneling buttons
  document.querySelectorAll(".wood-paneling-btn").forEach((btn) => {
    const wood = btn.getAttribute("data-wood");
    if (wood === currentWood) {
      // Active state - use CSS class instead of inline style
      btn.classList.add("bg-wood-active");
      btn.classList.remove("bg-wood-inactive");
    } else {
      // Inactive state
      btn.classList.remove("bg-wood-active");
      btn.classList.add("bg-wood-inactive");
    }
  });
};

// Make functions available globally
(window as any).changeWoodPaneling = changeWoodPaneling;
(window as any).loadWoodPaneling = loadWoodPaneling;
(window as any).updateWoodPanelingIndicators = updateWoodPanelingIndicators;

// Auto-initialize when DOM is ready
if (typeof document !== "undefined") {
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", () => {
      loadWoodPaneling();
      updateWoodPanelingIndicators();
    });
  } else {
    loadWoodPaneling();
    updateWoodPanelingIndicators();
  }
}