import { useEffect } from "react";

export function UTMInjector() {
  useEffect(() => {
    const form = document.querySelector("form");
    const utmInput = form?.querySelector('input[name="utm_id"]');
    if (!form || !utmInput) return;

    const utmKeys = ["utm_source", "utm_medium", "utm_campaign", "utm_term", "utm_content"];
    const urlParams = new URLSearchParams(window.location.search);

    // Save to localStorage
    utmKeys.forEach(key => {
      const value = urlParams.get(key);
      if (value) localStorage.setItem(key, value);
    });

    // Inject right before submit
    form.addEventListener("submit", () => {
      const utmParts = utmKeys
        .map(key => {
          const val = localStorage.getItem(key);
          return val ? `${key}=${val}` : null;
        })
        .filter(Boolean);
      utmInput.value = utmParts.join("&");
      console.log("📤 UTM ID submitted:", utmInput.value);
    });
  }, []);

  return null;
}