(function () {
  console.log("[WebAppClone] apply computed style start");

  const props = [
    "display",
    "position",
    "box-sizing",

    "width",
    "height",
    "min-width",
    "min-height",
    "max-width",
    "max-height",

    "margin-top",
    "margin-right",
    "margin-bottom",
    "margin-left",

    "padding-top",
    "padding-right",
    "padding-bottom",
    "padding-left",

    "border-top-width",
    "border-right-width",
    "border-bottom-width",
    "border-left-width",
    "border-top-style",
    "border-right-style",
    "border-bottom-style",
    "border-left-style",
    "border-top-color",
    "border-right-color",
    "border-bottom-color",
    "border-left-color",
    "border-radius",

    "background-color",
    "background-image",
    "color",

    "font-family",
    "font-size",
    "font-weight",
    "font-style",
    "line-height",
    "letter-spacing",
    "text-align",
    "text-decoration",

    "overflow",
    "overflow-x",
    "overflow-y",

    "opacity",
    "visibility",
    "z-index",

    "flex-direction",
    "justify-content",
    "align-items",
    "align-content",
    "flex-wrap",
    "gap",
    "row-gap",
    "column-gap",

    "grid-template-columns",
    "grid-template-rows",
    "grid-column",
    "grid-row",

    "vertical-align",
    "white-space",
    "word-break",

    "box-shadow",
    "transform"
  ];

  function buildComputedStyleText(el) {
    const cs = window.getComputedStyle(el);
    let s = "";

    for (let i = 0; i < props.length; i++) {
      const p = props[i];
      const v = cs.getPropertyValue(p);

      if (!v) continue;

      // ただし、必要ならここは削って全保存でもよい
      if (v === "normal") continue;
      if (v === "none") continue;

      s += p + ":" + v + ";";
    }

    return s;
  }

  function preserveFormState(el) {
    const tag = el.tagName;

    if (tag === "INPUT") {
      const type = (el.getAttribute("type") || "").toLowerCase();

      if (type === "checkbox" || type === "radio") {
        if (el.checked) {
          el.setAttribute("checked", "checked");
        } else {
          el.removeAttribute("checked");
        }
      } else {
        el.setAttribute("value", el.value || "");
      }
    }

    if (tag === "TEXTAREA") {
      el.textContent = el.value || "";
    }

    if (tag === "SELECT") {
      const opts = el.querySelectorAll("option");
      for (let i = 0; i < opts.length; i++) {
        if (opts[i].selected) {
          opts[i].setAttribute("selected", "selected");
        } else {
          opts[i].removeAttribute("selected");
        }
      }
    }
  }

  function addRectData(el) {
    const r = el.getBoundingClientRect();

    el.setAttribute("data-webappclone-x", String(Math.round(r.x)));
    el.setAttribute("data-webappclone-y", String(Math.round(r.y)));
    el.setAttribute("data-webappclone-w", String(Math.round(r.width)));
    el.setAttribute("data-webappclone-h", String(Math.round(r.height)));
    el.setAttribute("data-webappclone-tag", el.tagName.toLowerCase());
  }

  const elements = document.querySelectorAll("*");

  for (let i = 0; i < elements.length; i++) {
    const el = elements[i];

    try {
      const styleText = buildComputedStyleText(el);

      if (styleText) {
        el.setAttribute("style", styleText);
      }

      preserveFormState(el);
      addRectData(el);
    } catch (e) {
      console.log("[WebAppClone] style apply error", e);
    }
  }

  document.documentElement.setAttribute("data-webappclone-applied", "1");
  document.documentElement.setAttribute("data-webappclone-url", location.href);
  document.documentElement.setAttribute("data-webappclone-title", document.title);
  document.documentElement.setAttribute("data-webappclone-viewport-width", String(window.innerWidth));
  document.documentElement.setAttribute("data-webappclone-viewport-height", String(window.innerHeight));
  document.documentElement.setAttribute("data-webappclone-device-pixel-ratio", String(window.devicePixelRatio));

  console.log("[WebAppClone] apply computed style done:", elements.length);
})();