"use client";

import { useEffect } from "react";

/**
 * Безопасно инжектит произвольный HTML (код внедрения из Настроек) в <head> или
 * <body> ЧЕРЕЗ DOM после гидрации.
 *
 * Почему не <head dangerouslySetInnerHTML>: в App Router + React 19 ручной <head>
 * при гидрации затирает хойстнутый React'ом <link rel="stylesheet"> → весь дизайн
 * слетает. Этот компонент добавляет узлы программно, не трогая управление head,
 * поэтому стили остаются на месте. <script> из innerHTML не исполняются — поэтому
 * пересоздаём их как настоящие script-элементы.
 */
export function HtmlInjector({ html, target }: { html: string; target: "head" | "body" }) {
  useEffect(() => {
    if (!html) return;
    const dest = target === "head" ? document.head : document.body;
    const tpl = document.createElement("template");
    tpl.innerHTML = html;

    const added: Node[] = [];
    Array.from(tpl.content.childNodes).forEach((node) => {
      let toAppend: Node;
      if (node.nodeName === "SCRIPT") {
        const orig = node as HTMLScriptElement;
        const s = document.createElement("script");
        for (const attr of Array.from(orig.attributes)) s.setAttribute(attr.name, attr.value);
        s.textContent = orig.textContent;
        toAppend = s;
      } else {
        toAppend = node.cloneNode(true);
      }
      dest.appendChild(toAppend);
      added.push(toAppend);
    });

    return () => {
      added.forEach((n) => n.parentNode?.removeChild(n));
    };
  }, [html, target]);

  return null;
}
