"use client";

import { useEffect } from "react";
import { useTrackingCodesQuery } from "@/hooks/queries/api-hooks";

export function TrackingScriptsLoader() {
  const headScriptsQuery = useTrackingCodesQuery("head");
  const bodyScriptsQuery = useTrackingCodesQuery("body_end");

  useEffect(() => {
    const insertedNodes: HTMLElement[] = [];

    const mountScript = (container: HTMLElement, key: string, scriptCode: string) => {
      const wrapper = document.createElement("div");
      wrapper.setAttribute("data-tracking-script", key);
      wrapper.style.display = "none";
      wrapper.innerHTML = scriptCode;
      container.appendChild(wrapper);
      insertedNodes.push(wrapper);
    };

    for (const item of headScriptsQuery.data ?? []) {
      mountScript(document.head, `head-${item.id}-${item.slug}`, item.script_code);
    }

    for (const item of bodyScriptsQuery.data ?? []) {
      mountScript(document.body, `body-${item.id}-${item.slug}`, item.script_code);
    }

    return () => {
      insertedNodes.forEach((node) => node.remove());
    };
  }, [headScriptsQuery.data, bodyScriptsQuery.data]);

  return null;
}