{# New installations publish a website-bound artifact on the HubSpot server.
   No browser fetch, iframe, shadow DOM or workspace credential is required. #}
{% if module.connection.snapshot_configured or module.connection.published_footer_html %}
{% if module.connection.published_footer_html %}
  {% require_css %}<style>{{ module.connection.published_footer_css }}</style>{% end_require_css %}
  <div class="onefooter-root" data-onefooter-root="true" data-onefooter-domain="{{ module.connection.footer_domain|escape_attr }}" data-onefooter-website-id="{{ module.connection.website_id|escape_attr }}">
    {{ module.connection.published_footer_html }}
  </div>
  {% require_js %}<script defer src="https://app.1footer.com/footer-activity.js?websiteId={{ module.connection.website_id|urlencode }}"></script>{% end_require_js %}
{% endif %}
{% else %}
{% set module_name = "onefooter-managed-footer" %}
{% set api_key = module.connection.api_key|default("", true)|trim %}
{# Kept as a legacy fallback for existing instances created before the domain field was removed. #}
{% set footer_domain = module.connection.footer_domain|default("", true)|trim %}

{% require_css %}
  <style>
    {% scope_css %}
      .onefooter-managed-footer {
        display: block;
        width: 100%;
        {{ module.styles.spacing.outer_spacing.css }}
      }

      .onefooter-managed-footer__mount {
        display: block;
        width: 100%;
        min-height: 96px;
      }

      .onefooter-managed-footer__state {
        background: var(--onefooter-state-bg, rgba(255, 255, 255, 0.92));
        border: 1px dashed var(--onefooter-state-border, rgba(15, 23, 42, 0.22));
        border-radius: 8px;
        color: var(--onefooter-state-text, #475569);
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        font-size: 14px;
        line-height: 1.5;
        padding: 16px;
      }

      @media (prefers-color-scheme: dark) {
        .onefooter-managed-footer {
          --onefooter-state-bg: rgba(15, 23, 42, 0.72);
          --onefooter-state-border: rgba(148, 163, 184, 0.34);
          --onefooter-state-text: #cbd5e1;
        }
      }
    {% end_scope_css %}
  </style>
{% end_require_css %}

<div
  class="{{ module_name }}"
  data-onefooter-managed-module="true"
  data-onefooter-api-key="{{ api_key|escape_attr }}"
  data-onefooter-domain="{{ footer_domain|escape_attr }}"
>
  <div class="{{ module_name }}__mount" data-onefooter-managed-mount="true">
    <div class="{{ module_name }}__state">
      {% if api_key %}
        Loading 1Footer...
      {% else %}
        Paste your 1Footer API key to load your websites.
      {% endif %}
    </div>
  </div>
</div>

{% require_js %}
  <script>
    (function () {
      var roots = document.querySelectorAll('[data-onefooter-managed-module="true"]');
      roots.forEach(function (root) {
        var mount = root.querySelector('[data-onefooter-managed-mount="true"]');
        if (!mount) return;

        var apiKey = (root.getAttribute('data-onefooter-api-key') || '').trim();
        var configuredDomain = normalizeDomain(root.getAttribute('data-onefooter-domain') || '');
        var domain = configuredDomain || inferRuntimeDomain();
        var origin = 'https://1footer.com';
        var missingConfigText = 'Paste your 1Footer API key to load your websites.';
        var errorText =
          '1Footer could not load this footer. Check that the API key is valid, the domain is connected in 1Footer, and the footer is published.';
        var configKey = [apiKey, domain, origin].join('|');
        var websitesApiPath = '/api/plugin/framer/websites';

        if (root.getAttribute('data-onefooter-config') === configKey) return;
        root.setAttribute('data-onefooter-config', configKey);

        function showState(message) {
          var html =
            '<div class="onefooter-managed-footer__state">' +
            String(message || '').replace(/[&<>"']/g, function (char) {
              return {
                '&': '&amp;',
                '<': '&lt;',
                '>': '&gt;',
                '"': '&quot;',
                "'": '&#39;',
              }[char];
            }) +
            '</div>';

          if (mount.shadowRoot) {
            mount.shadowRoot.innerHTML = html;
            return;
          }

          mount.innerHTML = html;
        }

        function getSetupCss() {
          return [
            ':host{display:block;width:100%;box-sizing:border-box}',
            ':host{--onefooter-setup-bg:#fff;--onefooter-setup-text:#334155;--onefooter-setup-title:#0f172a;--onefooter-setup-muted:#64748b;--onefooter-setup-border:rgba(15,23,42,.14);--onefooter-setup-control-bg:#fff;--onefooter-setup-control-border:rgba(15,23,42,.22);--onefooter-setup-control-text:#0f172a;--onefooter-setup-button-bg:#0f172a;--onefooter-setup-button-text:#fff;--onefooter-setup-error:#b91c1c;--onefooter-setup-focus:rgba(249,115,22,.24)}',
            '@media (prefers-color-scheme:dark){:host{color-scheme:dark;--onefooter-setup-bg:rgba(15,23,42,.86);--onefooter-setup-text:#cbd5e1;--onefooter-setup-title:#f8fafc;--onefooter-setup-muted:#94a3b8;--onefooter-setup-border:rgba(148,163,184,.28);--onefooter-setup-control-bg:rgba(2,6,23,.58);--onefooter-setup-control-border:rgba(148,163,184,.32);--onefooter-setup-control-text:#f8fafc;--onefooter-setup-button-bg:#f8fafc;--onefooter-setup-button-text:#0f172a;--onefooter-setup-error:#fca5a5;--onefooter-setup-focus:rgba(251,146,60,.34)}}',
            '.onefooter-setup{border:1px solid var(--onefooter-setup-border);border-radius:8px;color:var(--onefooter-setup-text);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;padding:16px;max-width:720px;background:var(--onefooter-setup-bg);box-sizing:border-box}',
            '.onefooter-setup__title{font-size:14px;font-weight:700;margin:0 0 8px;color:var(--onefooter-setup-title)}',
            '.onefooter-setup__copy{font-size:13px;line-height:1.5;margin:0 0 12px;color:var(--onefooter-setup-muted)}',
            '.onefooter-setup__row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 10px}',
            '.onefooter-setup select,.onefooter-setup input{background:var(--onefooter-setup-control-bg);border:1px solid var(--onefooter-setup-control-border);border-radius:6px;color:var(--onefooter-setup-control-text);font:inherit;font-size:13px;min-height:38px;padding:8px 10px}',
            '.onefooter-setup select:focus,.onefooter-setup input:focus{border-color:var(--onefooter-setup-focus);box-shadow:0 0 0 3px var(--onefooter-setup-focus);outline:0}',
            '.onefooter-setup input::placeholder{color:var(--onefooter-setup-muted)}',
            '.onefooter-setup select{min-width:260px}',
            '.onefooter-setup input{min-width:220px}',
            '.onefooter-setup button{appearance:none;border:1px solid var(--onefooter-setup-border);border-radius:6px;background:var(--onefooter-setup-button-bg);color:var(--onefooter-setup-button-text);cursor:pointer;font:inherit;font-size:13px;font-weight:700;min-height:38px;padding:8px 12px}',
            '.onefooter-setup button[disabled]{cursor:not-allowed;opacity:.55}',
            '.onefooter-setup__message{font-size:12px;line-height:1.45;margin:8px 0 0;color:var(--onefooter-setup-muted)}',
            '.onefooter-setup__error{color:var(--onefooter-setup-error)}',
          ].join('\n');
        }

        function renderSetupHelper(statusMessage, suggestedDomain) {
          var shadow = mount.shadowRoot || mount.attachShadow({ mode: 'open' });
          shadow.innerHTML = '';

          var style = document.createElement('style');
          style.textContent = getSetupCss();
          shadow.appendChild(style);

          var setup = document.createElement('div');
          setup.className = 'onefooter-setup';
          setup.innerHTML =
            '<p class="onefooter-setup__title">Choose a 1Footer website</p>' +
            '<p class="onefooter-setup__copy">Select an existing website to preview it here, or add the live page domain to this API key. Published pages automatically use the matching live domain.</p>' +
            '<div class="onefooter-setup__row">' +
            '<select data-onefooter-website-select><option value="">Loading websites...</option></select>' +
            '<button type="button" data-onefooter-preview-website disabled>Preview</button>' +
            '</div>' +
            '<div class="onefooter-setup__row">' +
            '<input data-onefooter-new-domain type="text" placeholder="new-domain.com" />' +
            '<button type="button" data-onefooter-add-website>Add website</button>' +
            '</div>' +
            '<p class="onefooter-setup__message" data-onefooter-setup-message>' +
            escapeHtml(statusMessage || 'Loading websites...') +
            '</p>';
          shadow.appendChild(setup);

          var select = setup.querySelector('[data-onefooter-website-select]');
          var previewButton = setup.querySelector('[data-onefooter-preview-website]');
          var input = setup.querySelector('[data-onefooter-new-domain]');
          var addButton = setup.querySelector('[data-onefooter-add-website]');
          var message = setup.querySelector('[data-onefooter-setup-message]');
          var suggestedWebsiteDomain = normalizeDomain(suggestedDomain || '');
          if (suggestedWebsiteDomain) input.value = suggestedWebsiteDomain;

          function setMessage(value, isError) {
            message.textContent = value || '';
            message.className = isError
              ? 'onefooter-setup__message onefooter-setup__error'
              : 'onefooter-setup__message';
          }

          function setOptions(websites, selectedDomain) {
            var options = websites.map(function (website) {
              var label = website.name && website.name !== website.domain
                ? website.name + ' - ' + website.domain
                : website.domain;
              return '<option value="' + escapeAttr(website.domain) + '">' + escapeHtml(label) + '</option>';
            });
            select.innerHTML = options.length
              ? '<option value="">Select a website...</option>' + options.join('')
              : '<option value="">No websites yet</option>';
            if (selectedDomain) select.value = selectedDomain;
            previewButton.disabled = !select.value;
          }

          function loadWebsites(selectedDomain) {
            select.disabled = true;
            previewButton.disabled = true;
            setMessage('Loading websites...');

            var listUrl = new URL(origin + websitesApiPath);
            listUrl.searchParams.set('apiKey', apiKey);

            return fetchJsonp(listUrl.toString())
              .then(function (payload) {
                if (payload && payload.error) throw new Error(payload.error);
                return payload;
              })
              .then(function (payload) {
                setOptions(Array.isArray(payload.websites) ? payload.websites : [], selectedDomain);
                setMessage('Select a website to preview it. On published pages, 1Footer uses the live page domain automatically.');
              })
              .catch(function (error) {
                select.innerHTML = '<option value="">Could not load websites</option>';
                setMessage(error.message || 'Could not load websites', true);
              })
              .then(function () {
                select.disabled = false;
                previewButton.disabled = !select.value;
              });
          }

          select.addEventListener('change', function () {
            previewButton.disabled = !select.value;
          });

          previewButton.addEventListener('click', function () {
            var selectedDomain = normalizeDomain(select.value);
            if (!selectedDomain) return;
            domain = selectedDomain;
            loadManagedFooter();
          });

          addButton.addEventListener('click', function () {
            var newDomain = normalizeDomain(input.value);
            if (!newDomain) {
              setMessage('Enter a domain first.', true);
              return;
            }

            addButton.disabled = true;
            setMessage('Adding ' + newDomain + '...');

            var addUrl = new URL(origin + websitesApiPath);
            addUrl.searchParams.set('apiKey', apiKey);

            fetch(addUrl.toString(), {
              method: 'POST',
              headers: {
                Accept: 'application/json',
                'Content-Type': 'application/json',
              },
              body: JSON.stringify({ domain: newDomain }),
            })
              .then(function (response) {
                return response.json().then(function (payload) {
                  if (!response.ok) throw new Error(payload && payload.error ? payload.error : 'Failed to add website');
                  return payload;
                });
              })
              .then(function (payload) {
                var nextDomain = payload && payload.website ? payload.website.domain : newDomain;
                input.value = '';
                return loadWebsites(nextDomain).then(function () {
                  setMessage('Added ' + nextDomain + '. Preview it here, then publish on that live domain.');
                });
              })
              .catch(function (error) {
                setMessage(error.message || 'Failed to add website', true);
              })
              .then(function () {
                addButton.disabled = false;
              });
          });

          loadWebsites(suggestedWebsiteDomain || undefined);
        }

        function normalizeDomain(value) {
          var trimmed = String(value || '').trim().toLowerCase();
          if (!trimmed) return '';

          try {
            var parsed = new URL(trimmed.indexOf('://') >= 0 ? trimmed : 'https://' + trimmed);
            return parsed.hostname.replace(/^www\./, '');
          } catch (error) {
            return trimmed
              .replace(/^https?:\/\//, '')
              .replace(/^www\./, '')
              .split('/')[0]
              .split('?')[0]
              .split('#')[0]
              .trim();
          }
        }

        function inferRuntimeDomain() {
          var documentDomain = inferDocumentDomain();
          if (documentDomain) return documentDomain;
          if (!window.location || !window.location.hostname) return '';

          var hostname = normalizeDomain(window.location.hostname);
          if (!hostname || isHubSpotEditorHost(hostname)) return '';

          return hostname;
        }

        function inferDocumentDomain() {
          var selectors = [
            'link[rel="canonical"]',
            'meta[property="og:url"]',
            'meta[name="twitter:url"]',
          ];

          for (var index = 0; index < selectors.length; index += 1) {
            var element = document.querySelector(selectors[index]);
            var value =
              element &&
              (element.getAttribute('href') || element.getAttribute('content') || '');
            var hostname = normalizeDomain(value);
            if (hostname && !isHubSpotEditorHost(hostname)) return hostname;
          }

          return '';
        }

        function isHubSpotEditorHost(hostname) {
          return (
            hostname === 'localhost' ||
            hostname === '127.0.0.1' ||
            hostname.indexOf('hubspot') >= 0 ||
            hostname.indexOf('hubspotpreview') >= 0 ||
            hostname.indexOf('hubspotusercontent') >= 0 ||
            hostname.indexOf('hsappstatic') >= 0
          );
        }

        function escapeHtml(value) {
          return String(value || '').replace(/[&<>"']/g, function (char) {
            return {
              '&': '&amp;',
              '<': '&lt;',
              '>': '&gt;',
              '"': '&quot;',
              "'": '&#39;',
            }[char];
          });
        }

        function escapeAttr(value) {
          return escapeHtml(value).replace(/`/g, '&#96;');
        }

        function getIntegrationCss() {
          return [
            ':host{display:block;width:100%;box-sizing:border-box}',
            '.onefooter-root,.onefooter-root *{box-sizing:border-box}',
            '.onefooter-root{display:block;width:100%;max-width:100%;container-type:inline-size;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}',
            '.onefooter-root a{cursor:pointer}',
            '.onefooter-root a:not(.onefooter-badge):hover{opacity:.8;transition:opacity .2s ease}',
            '.onefooter-root a.onefooter-badge:hover{opacity:1;transition:none}',
            '.onefooter-hubspot-root,.onefooter-hubspot-root>*{width:100%;max-width:100%}',
            '.onefooter-hubspot-root .onefooter-generated.footer{display:grid;grid-auto-flow:row;grid-template-columns:minmax(0,1fr);align-items:start;justify-items:start;width:100%}',
            '.onefooter-hubspot-root .onefooter-generated .footer__nav,.onefooter-hubspot-root .onefooter-generated .footer__brand{min-width:0;max-width:100%}',
            '.onefooter-hubspot-root .onefooter-generated.footer-horizontal{grid-auto-flow:column;grid-template-columns:none}',
            '@container (max-width:39.999rem){.onefooter-hubspot-root .onefooter-generated.footer.sm\\:footer-horizontal{grid-auto-flow:row;grid-template-columns:minmax(0,1fr)}}',
            '@container (min-width:40rem){.onefooter-hubspot-root .onefooter-generated.footer.sm\\:footer-horizontal{grid-auto-flow:column;grid-template-columns:none}}',
          ].join('\n');
        }

        function fetchText(url, fallbackText) {
          if (!url) return Promise.resolve(fallbackText || '');

          return fetch(url, { headers: { Accept: 'text/css,text/plain,*/*' } }).then(function (response) {
            if (!response.ok) return fallbackText || '';
            return response.text();
          }).catch(function () {
            return fallbackText || '';
          });
        }

        function fetchJsonp(url) {
          return new Promise(function (resolve, reject) {
            var callbackName =
              '__onefooterHubspot' + Date.now().toString(36) + Math.random().toString(36).slice(2);
            var script = document.createElement('script');
            var timeout = window.setTimeout(function () {
              cleanup();
              reject(new Error('Website list request timed out'));
            }, 10000);

            function cleanup() {
              window.clearTimeout(timeout);
              if (script.parentNode) script.parentNode.removeChild(script);
              try {
                delete window[callbackName];
              } catch (error) {
                window[callbackName] = undefined;
              }
            }

            window[callbackName] = function (payload) {
              cleanup();
              resolve(payload || {});
            };

            script.onerror = function () {
              cleanup();
              reject(new Error('Failed to load websites'));
            };
            script.src = url + (url.indexOf('?') >= 0 ? '&' : '?') + 'callback=' + encodeURIComponent(callbackName);
            document.head.appendChild(script);
          });
        }

        function renderFooter(html, cssText) {
          var shadow = mount.shadowRoot || mount.attachShadow({ mode: 'open' });
          shadow.innerHTML = '';

          var style = document.createElement('style');
          style.textContent = String(cssText || '') + '\n' + getIntegrationCss();
          shadow.appendChild(style);

          var container = document.createElement('div');
          container.className = 'onefooter-root onefooter-hubspot-root';
          container.setAttribute('data-onefooter-root', 'true');

          var syncTheme = function () {
            var isDark =
              window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
            container.setAttribute('data-theme', isDark ? 'dark' : 'light');
          };
          syncTheme();
          if (window.matchMedia) {
            var mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
            if (mediaQuery.addEventListener) {
              mediaQuery.addEventListener('change', syncTheme);
            } else if (mediaQuery.addListener) {
              mediaQuery.addListener(syncTheme);
            }
          }

          container.innerHTML = html;
          shadow.appendChild(container);
        }

        if (!apiKey) {
          showState(missingConfigText);
          return;
        }

        if (!domain) {
          renderSetupHelper();
          return;
        }

        function loadManagedFooter() {
          var manifestUrl = new URL(origin + '/api/v2/manifest');
          manifestUrl.searchParams.set('apiKey', apiKey);
          manifestUrl.searchParams.set('domain', domain);

          return fetch(manifestUrl.toString(), { headers: { Accept: 'application/json' } })
            .then(function (response) {
              if (!response.ok) {
                throw new Error('1Footer manifest request failed: ' + response.status);
              }
              return response.json().then(function (manifest) {
                if (!manifest || !manifest.htmlUrl || !manifest.cssUrl) {
                  throw new Error('1Footer manifest is missing artifact URLs');
                }
                return Promise.all([
                  fetch(manifest.htmlUrl, { headers: { Accept: 'text/html' } }).then(function (htmlResponse) {
                    if (!htmlResponse.ok) throw new Error('Footer artifact request failed: ' + htmlResponse.status);
                    return htmlResponse.text();
                  }),
                  fetchText(manifest.cssUrl, ''),
                ]).then(function (result) {
                  var html = result[0];
                  var cssText = result[1];
                  if (!html || !html.trim()) throw new Error('No footer HTML returned');
                  renderFooter(html, cssText);
                });
              });
            })
            .catch(function (error) {
              console.error('1Footer HubSpot module:', error);
              if (!configuredDomain && domain) {
                renderSetupHelper(
                  'Detected ' + domain + ', but no published 1Footer footer loaded for it yet. Select it if it already exists, or add it below.',
                  domain
                );
                return;
              }
              showState(errorText);
            });
        }

        loadManagedFooter();
      });
    })();
  </script>
{% end_require_js %}

{% endif %}