import { ref } from "vue";
import type { Template } from "../types/template";

const isOpen = ref(false);
const currentTemplate = ref<Template | null>(null);
const originalUrl = ref<string>("");

// Declare GTM dataLayer
declare global {
  interface Window {
    dataLayer: any[];
  }
}

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

  originalUrl.value = window.location.href;
  // Use clean URL: /templates/{type}s/{name}
  const cleanUrl = `/templates/${template.type}s/${template.name}`;
  window.history.pushState(
    { modal: true, type: template.type, name: template.name },
    "",
    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 useModal() {
  function openModal(template: Template, updateHistory = true): void {
    currentTemplate.value = template;
    isOpen.value = true;

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

      // Update URL for shareability
      if (updateHistory) {
        updateUrl(template);
      }

      // Track template view in GTM
      if (window.dataLayer) {
        window.dataLayer.push({
          event: "template_view",
          template_name: template.name,
          template_type: template.type,
        });
      }
    }
  }

  function closeModal(): void {
    isOpen.value = false;
    currentTemplate.value = null;

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

  // Check URL on init and open modal if needed
  function checkUrlAndOpen(
    findTemplate: (type: string, name: string) => Template | undefined,
  ): void {
    if (typeof window === "undefined") return;

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

    if (view === "template" && type && name) {
      const template = findTemplate(type, name);
      if (template) {
        openModal(template, false);
      }
    }
  }

  return {
    isOpen,
    currentTemplate,
    openModal,
    closeModal,
    checkUrlAndOpen,
  };
}