<%

  var isSeo = type === 'seo';
  var q = function (t, m) { return '/reports/editor?type=' + t + '&month=' + m; };
%>
<div id="re-root">
<div class="pg-head" style="margin-bottom:0">
  <div><div class="eyebrow"><a href="/reports" style="text-decoration:none">Reports</a> / Report editor</div></div>
  <div class="ph-right" style="display:flex; gap:10px; align-items:center; flex-wrap:wrap">
    <div class="segt" role="group" aria-label="Report">
      <a class="segt-o<%= !isSeo ? ' on' : '' %>" href="<%= q('ai', month) %>">AI Visibility</a>
      <a class="segt-o<%= isSeo ? ' on' : '' %>" href="<%= q('seo', month) %>">SEO Performance</a>
    </div>
    <select class="re-month" aria-label="Month" data-base="<%= q(type, '') %>">
      <% months.forEach(function (m) { %><option value="<%= m.key %>"<%= m.key === month ? ' selected' : '' %>><%= m.label %></option><% }) %>
    </select>
    <a class="btn btn-sm" href="<%= previewUrl %>" target="_blank" rel="noopener">Open full size ↗</a>
  </div>
</div>

<h1 class="claim"><%= isSeo ? 'SEO Performance' : 'AI Visibility' %> report, <%= monthLabel %></h1>
<p class="claim-sub">Write the notes next to the page they appear on. Notes belong to this month only; settings marked “every month” apply to all reports.</p>

<div class="re-grid">
  <div class="re-preview card">
    <div class="re-loading"><span></span><span></span><span></span><em>Building the report…</em></div>
    <iframe src="<%= previewUrl %>" title="Report preview"></iframe>
  </div>

  <form class="re-panel card card-p" method="POST" action="/reports/editor">
    <input type="hidden" name="type" value="<%= type %>">
    <input type="hidden" name="month" value="<%= month %>">
    <% if (!isSeo) { %>
      <h3 class="re-h">Settings <span class="chip flat">every month</span></h3>
      <div class="fld">
        <label for="re-direct">AI visits hidden in Direct (%)</label>
        <input id="re-direct" name="aiDirectShare" type="number" min="0" max="100" step="1" value="<%= ws.aiDirectShare == null ? 60 : ws.aiDirectShare %>">
        <div class="rr-meta">Share of Direct traffic counted as AI visits. 0 turns it off.</div>
      </div>
      <h3 class="re-h">Notes <span class="chip pos"><%= monthLabel %></span></h3>
      <div class="fld">
        <label for="re-engine">Engines page</label>
        <textarea id="re-engine" name="aiEngine" rows="6" maxlength="1200" placeholder="A short read of this month’s engine results. Optional."><%= aiNote || '' %></textarea>
      </div>
    <% } else { var _fr = (ws.seoReportFilters || []).length ? ws.seoReportFilters : []; %>
      <h3 class="re-h">Filters <span class="chip flat">every month</span></h3>
      <input type="hidden" name="filtersForm" value="1">
      <div class="re-fl" id="re-fl">
        <% _fr.concat(_fr.length ? [] : [{ mode: 'exclude', field: 'landing', match: 'regex', regex: '', source: 'both' }]).forEach(function (f) { var fk = filterFields[f.field] ? f.field : 'landing'; %>
          <div class="re-fr">
            <button type="button" class="re-fr-x" title="Remove this rule" aria-label="Remove this rule">×</button>
            <select name="f_mode" aria-label="Include or exclude"><option value="exclude"<%= f.mode !== 'include' ? ' selected' : '' %>>Exclude</option><option value="include"<%= f.mode === 'include' ? ' selected' : '' %>>Include</option></select>
            <select name="f_field" class="re-fr-field" aria-label="Field">
              <% Object.keys(filterFields).forEach(function (k) { var F = filterFields[k]; %><option value="<%= k %>" data-gsc="<%= F.gsc ? 1 : 0 %>" data-ga4="<%= F.ga4 ? 1 : 0 %>"<%= k === fk ? ' selected' : '' %>><%= F.label %><%= !F.gsc ? ' (GA4)' : !F.ga4 ? ' (Search Console)' : '' %></option><% }) %>
            </select>
            <select name="f_match" aria-label="Condition"><% Object.keys(filterMatches).forEach(function (k) { %><option value="<%= k %>"<%= k === (f.match || 'regex') ? ' selected' : '' %>><%= filterMatches[k].label %></option><% }) %></select>
            <input name="f_regex" value="<%= f.regex || '' %>" placeholder="Value" spellcheck="false" autocomplete="off" class="re-fr-rx">
            <select name="f_source" class="re-fr-src" aria-label="Applies to"><option value="both"<%= f.source === 'both' || !f.source ? ' selected' : '' %>>Search Console and GA4</option><option value="gsc"<%= f.source === 'gsc' ? ' selected' : '' %>>Search Console only</option><option value="ga4"<%= f.source === 'ga4' ? ' selected' : '' %>>GA4 only</option></select>
          </div>
        <% }) %>
      </div>
      <button type="button" class="btn btn-sm" id="re-fl-add" style="align-self:flex-start">+ Add rule</button>

      <h3 class="re-h">Notes <span class="chip pos"><%= monthLabel %></span></h3>
      <% seoKeys.forEach(function (k) { var own = seoNotes[k[0]]; %>
        <div class="fld">
          <label for="re-<%= k[0] %>"><%= k[1] %> page</label>
          <textarea id="re-<%= k[0] %>" name="seo_<%= k[0] %>" rows="3" maxlength="1200" placeholder="Optional. Leave empty to leave it out."><%= own || '' %></textarea>
        </div>
      <% }) %>
    <% } %>
    <button class="btn btn-primary" type="submit" style="width:100%">Save and refresh preview</button>
    <div class="rr-meta" style="margin-top:8px">Saving also updates the report already filed in this month's folder. It takes a minute or two.</div>
  </form>
</div>
</div>

<style>
  .re-grid{display:grid; grid-template-columns:minmax(0, 1fr) 360px; gap:18px; margin-top:20px; align-items:start}
  .re-preview{padding:0; overflow:hidden; height:calc(100vh - 170px); min-height:560px}
  .re-preview iframe{width:100%; height:100%; border:0; background:#fff; display:block; transform-origin:0 0}
  .re-panel{position:sticky; top:84px; max-height:calc(100vh - 110px); overflow-y:auto; display:flex; flex-direction:column; gap:12px}
  .re-panel .fld{display:flex; flex-direction:column; gap:5px}
  .re-panel label{font-size:12.5px; font-weight:600; color:var(--ink-2)}
  .re-panel input, .re-panel textarea{width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink); font:inherit; font-size:13.5px; resize:vertical; box-sizing:border-box}
  .re-h{display:flex; align-items:center; gap:8px; font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:6px 0 0}
  .re-h .chip{text-transform:none; letter-spacing:0; font-size:11px}
  .re-fl{display:flex; flex-direction:column; gap:8px}
  .re-fr{position:relative; display:flex; flex-direction:column; gap:8px; padding:12px 40px 12px 12px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2)}
  .re-fr select, .re-fr input{width:100%; box-sizing:border-box}
  .re-fr select{padding:7px 9px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--ink); font:inherit; font-size:12.5px}
  .re-fr-x{position:absolute; top:10px; right:8px; border:0; background:transparent; color:var(--muted); font-size:18px; line-height:1; cursor:pointer; padding:2px 6px; border-radius:6px} .re-fr-x:hover{color:var(--neg); background:var(--neg-tint)}
  .re-panel input.re-fr-rx{font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:13px}
  .re-panel code{font-size:11.5px; background:var(--surface-2); padding:1px 5px; border-radius:5px}
  .re-month{padding:7px 10px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink); font:inherit; font-size:13px}
  .re-preview{position:relative}
  .re-loading{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:8px; background:var(--surface); z-index:1; transition:opacity .2s}
  .re-loading.done{opacity:0; pointer-events:none}
  .re-loading span{width:9px; height:9px; border-radius:50%; background:var(--accent-strong); animation:rep 1s infinite ease-in-out}
  .re-loading span:nth-child(2){animation-delay:.15s} .re-loading span:nth-child(3){animation-delay:.3s}
  .re-loading em{font-style:normal; font-size:13px; color:var(--muted); margin-left:6px}
  @keyframes rep{0%,80%,100%{opacity:.25; transform:scale(.8)} 40%{opacity:1; transform:none}}
  @media (max-width: 1100px){ .re-grid{grid-template-columns:1fr} .re-panel{position:static; max-height:none} }
</style>

<script>
(function () {
  if (window.__reBound) return; window.__reBound = true;

  function fit() {
    var f = document.querySelector('#re-root .re-preview iframe'); if (!f) return;
    var box = f.parentElement;
    f.style.transform = ''; f.style.width = '100%'; f.style.height = '100%';
    var w = 0;
    try { var d = f.contentDocument; w = Math.max(d.documentElement.scrollWidth, d.body ? d.body.scrollWidth : 0); } catch (e) { return; }
    var bw = box.clientWidth;
    if (!w || w <= bw + 2) return;
    var k = bw / w;
    f.style.width = w + 'px';
    f.style.height = (box.clientHeight / k) + 'px';
    f.style.transform = 'scale(' + k + ')';
  }
  function watchFrame() {
    var f = document.querySelector('#re-root .re-preview iframe'), l = document.querySelector('#re-root .re-loading');
    if (!f || !l) return;
    l.classList.remove('done');
    f.addEventListener('load', function () { fit(); l.classList.add('done'); }, { once: true });

    try { var d = f.contentDocument; if (d && d.readyState === 'complete' && d.location.href !== 'about:blank') { fit(); l.classList.add('done'); } } catch (e) {}
  }
  var rt; window.addEventListener('resize', function () { clearTimeout(rt); rt = setTimeout(fit, 150); });
  function go(url, push) {
    var root = document.getElementById('re-root'); if (!root) return location.href = url;
    root.style.opacity = '.6';
    fetch(url, { headers: { Accept: 'text/html' }, credentials: 'same-origin' })
      .then(function (r) { return r.text(); })
      .then(function (html) {
        var fresh = new DOMParser().parseFromString(html, 'text/html').getElementById('re-root');
        if (!fresh) throw 0;
        root.replaceWith(fresh);
        if (push) history.pushState(null, '', url);
        watchFrame();
        fresh.querySelectorAll('#re-fl .re-fr').forEach(srcFor);
      })
      .catch(function () { location.href = url; });
  }
  function toast(t, bad) {
    var el = document.createElement('div'); el.className = 'vtoast'; el.textContent = t;
    if (bad) el.style.background = 'var(--neg)';
    document.body.appendChild(el); requestAnimationFrame(function () { el.classList.add('on'); });
    setTimeout(function () { el.classList.remove('on'); setTimeout(function () { el.remove(); }, 300); }, 2600);
  }

  function srcFor(row) {
    var o = row.querySelector('.re-fr-field').selectedOptions[0], s = row.querySelector('.re-fr-src'); if (!o || !s) return;
    var g = o.dataset.gsc === '1', a = o.dataset.ga4 === '1';
    s.querySelector('[value=both]').disabled = !(g && a); s.querySelector('[value=gsc]').disabled = !g; s.querySelector('[value=ga4]').disabled = !a;
    if (s.selectedOptions[0].disabled) s.value = g ? 'gsc' : 'ga4';
  }
  document.querySelectorAll('#re-fl .re-fr').forEach(srcFor);
  document.addEventListener('change', function (e) { if (e.target.matches && e.target.matches('.re-fr-field')) srcFor(e.target.closest('.re-fr')); });

  document.addEventListener('click', function (e) {
    if (e.target.id === 're-fl-add') {
      var box = document.getElementById('re-fl'), first = box && box.querySelector('.re-fr'); if (!first) return;
      if (box.querySelectorAll('.re-fr').length >= 8) return;
      var row = first.cloneNode(true);
      row.querySelector('.re-fr-rx').value = ''; row.querySelectorAll('select').forEach(function (s) { s.selectedIndex = 0; });
      box.appendChild(row); srcFor(row); row.querySelector('.re-fr-rx').focus();
      return;
    }
    var x = e.target.closest && e.target.closest('.re-fr-x');
    if (x) {
      var rows = document.querySelectorAll('#re-fl .re-fr'), r = x.closest('.re-fr');
      if (rows.length > 1) r.remove(); else r.querySelector('.re-fr-rx').value = '';
    }
  });
  document.addEventListener('click', function (e) {
    var a = e.target.closest && e.target.closest('#re-root .segt-o');
    if (!a || e.metaKey || e.ctrlKey) return;
    e.preventDefault(); if (!a.classList.contains('on')) go(a.getAttribute('href'), true);
  });
  document.addEventListener('change', function (e) {
    if (e.target.matches && e.target.matches('#re-root .re-month')) go(e.target.getAttribute('data-base') + e.target.value, true);
  });
  document.addEventListener('submit', function (e) {
    var form = e.target.closest && e.target.closest('#re-root .re-panel');
    if (!form) return;
    e.preventDefault();
    var btn = form.querySelector('button[type=submit]'); btn.disabled = true;
    fetch(form.action, { method: 'POST', body: new URLSearchParams(new FormData(form)), headers: { Accept: 'application/json' }, credentials: 'same-origin' })
      .then(function (r) { return r.json(); })
      .then(function (d) {
        btn.disabled = false;
        if (!d || !d.ok) return toast((d && d.error) || 'Could not save.', true);
        toast(d.refiling ? 'Saved. The filed report updates in a minute or two.' : 'Saved');
        var f = document.querySelector('#re-root .re-preview iframe');
        if (f) { watchFrame(); f.src = f.src.split('&_t=')[0] + '&_t=' + Date.now(); }
      })
      .catch(function () { btn.disabled = false; form.submit(); });
  });
  window.addEventListener('popstate', function () { go(location.href, false); });
  watchFrame();
})();
</script>
