import { ref } from "vue";
import type { Stack } from "../types/stack";

const isOpen = ref(false);
const currentStack = ref<Stack | null>(null);

const originalUrl = ref<string>("");

// Update URL when modal opens - use clean URL format
function updateUrl(stack: Stack): void {
  if (typeof window === "undefined") return;

  originalUrl.value = window.location.href;
  // Use clean URL: /stacks/{id}
  const cleanUrl = `/stacks/${stack.id}`;
  window.history.pushState({ modal: true, stackId: stack.id }, "", cleanUrl);
}

// Restore URL when modal closes
function restoreUrl(): void {
  if (typeof window === "undefined" || !originalUrl.value) return;

  window.history.pushState({}, "", originalUrl.value);
  originalUrl.value = "";
}

export function useStackModal() {
  function openStackModal(stack: Stack, updateHistory = true): void {
    currentStack.value = stack;
    isOpen.value = true;

    if (typeof window !== "undefined") {
      document.body.style.overflow = "hidden";

      if (updateHistory) {
        updateUrl(stack);
      }
    }
  }

  function closeStackModal(): void {
    isOpen.value = false;
    currentStack.value = null;

    if (typeof window !== "undefined") {
      document.body.style.overflow = "";
      restoreUrl();
    }
  }

  // Check URL on init and open modal if needed
  function checkUrlAndOpen(findStack: (id: string) => Stack | undefined): void {
    if (typeof window === "undefined") return;

    const url = new URL(window.location.href);
    const view = url.searchParams.get("view");
    const id = url.searchParams.get("id");

    if (view === "stack" && id) {
      const stack = findStack(id);
      if (stack) {
        openStackModal(stack, false);
      }
    }
  }

  return {
    isStackModalOpen: isOpen,
    currentStack,
    openStackModal,
    closeStackModal,
    checkUrlAndOpen,
  };
}