<%
  var canManage = locals.showStaff;
  var kws = keywords || [];

  var tracked = (typeof locals.total === 'number') ? locals.total : kws.length;
  var _show = locals.show || 'all';
  var _ranked = (typeof locals.ranked === 'number') ? locals.ranked : kws.length;
  var _missing = (typeof locals.missing === 'number') ? locals.missing : 0;
  var _fmtPos = function(p){ return p == null ? null : p; };

  var _hist = function(k){
    var rows = (k.history || []).map(function(h){
      return { p: (h.pos == null ? null : h.pos), at: h.at ? new Date(h.at).toISOString() : null, u: h.url || '' };
    });

    var last = rows[rows.length - 1];
    if (last && !last.u && k.url && last.p != null && last.p === k.position) last.u = k.url;
    return JSON.stringify(rows);
  };
  var _dom = websiteDomain || 'your website domain';
  var _cadH = locals.cadence;
  var _lastH = (_cadH && _cadH.label)
    ? '<br><br>Updated ' + String(_cadH.label).toLowerCase() + ' on this plan' + (_cadH.last ? ', last on <b>' + h.date(_cadH.last) + '</b>.' : '. Not checked yet.')
    : '';
  var _extraH = (locals.market && market.extras && market.extras.length)
    ? '<br><br>Checked in the primary market only.'
    : '';
  var _domainHelp = (locals.rankSource === 'gsc')
    ? h.ihelp('What the number means',
        'The <b>average position</b> Google Search Console recorded for <b>' + _dom + '</b> on each search over recent weeks, on desktop in your market. '
        + 'It can differ from what you see when you search yourself.'
        + '<br><br>The date beside each figure is the latest week with data.'
        + '<br><br>A grey figure has a short label under it (for example <b>shown in 3 of 8 weeks</b>). Hover the label for the detail.'
        + _lastH + _extraH)
    : h.ihelp('What the position means',
        'Where <b>' + _dom + '</b> first appears in the top 100 organic Google results. Blank means it was not in the top 100.'
        + '<br><br>Positions are from the last check. Press <b>Check</b> (or <b>Check all</b>) for a current reading.'
        + _lastH + _extraH);
%>
<div class="pg-head" style="margin-bottom:0">
  <div>
    <div class="eyebrow">SEO &amp; Content / Keyword Tracker</div>
  </div>
</div>

<h1 class="claim"><%= title %></h1>
<% if (tracked && winning) { %>
  <p class="claim-lede">You're in the top 10 for <em><%= winning %></em> of your <%= tracked %> tracked keyword<%= tracked===1?'':'s' %>.</p>
<% } else if (tracked) { %>
  <p class="claim-lede">You're tracking <em><%= tracked %></em> keyword<%= tracked===1?'':'s' %>, none in the top 10 yet.</p>
<% } else { %>
  <p class="claim-lede">No keyword is being tracked yet.</p>
<% } %>
<% var _mk = (locals.market && market.chosen && market.primary) ? market.primary.name : null; %>
<p class="claim-sub"><% if (locals.rankSource === 'gsc') { %>Average Google position for each keyword<%= _mk ? ', desktop searches in ' + _mk : '' %><% } else { %>Live Google position for each keyword<%= _mk ? ' in ' + _mk : '' %><% } %><% if (locals.cadence && locals.cadence.label) { %>, updated <%= String(locals.cadence.label).toLowerCase() %><% } %>. <%- _domainHelp %></p>

<% if (!hasSerpApi && canManage) { %>
<div class="voff" style="margin-top:18px">
  <div class="voff-h"><b>Rank checks are off.</b> The rank-checking service is not connected yet.</div>
</div>
<% } else if (!websiteDomain) { %>
<div class="voff" style="margin-top:18px">
  <div class="voff-h"><b>Add the website domain</b> to start rank checks.</div>
  <div class="voff-i"><span class="n">Website domain</span><a href="/settings">Set it in Settings</a></div>
</div>

<% } else if (locals.market && !market.chosen) { %>
<div class="voff" style="margin-top:18px">
  <div class="voff-h"><b>No market chosen.</b> Positions are measured on <b>Google <%= (market.primary && market.primary.name) || 'Egypt' %></b>.</div>
  <div class="voff-i"><span class="n">Target country</span><a href="/settings">Set it in Settings</a></div>
</div>
<% } %>

<% if (canManage) { %>
<details class="addbox" style="margin-top:22px">
  <summary>+ Track keywords</summary>
  <form class="addform js-ajax-form" id="newkwform" method="POST" action="/api/keyword-tracker"
        data-refresh="#kw-body" data-reset-after="#newkwform">
    <div class="fld" style="flex:1 1 100%"><label for="kw-new">Keywords (one per line)</label><textarea id="kw-new" name="keywords" rows="4" placeholder="seo agency cairo&#10;best geo agency&#10;ai visibility tool" required maxlength="6000" style="width:100%; resize:vertical; font:inherit; padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--ink)"></textarea></div>
    <button class="btn btn-primary btn-sm" type="submit">Track &amp; check now</button>
    <div class="rr-meta" style="flex:1 1 100%; margin-top:6px">One keyword per line. Each is checked right away, then whenever you press <b>Check</b>.</div>
  </form>
</details>
<% } %>

<div class="bento" id="kw-body" style="margin-top:22px">

  <% if (tracked) { %>
  <div class="card shelf-c b3 sc-lime"><div class="cl">Tracked</div><div class="cv tnum"><%= tracked %></div></div>
  <div class="card shelf-c b3 sc-violet"><div class="cl">Top 10</div><div class="cv tnum"><%= winning %></div></div>
  <div class="card shelf-c b3 sc-navy"><div class="cl">Outside top 20</div><div class="cv tnum"><%= losing %></div></div>

  <% if (rankSource === 'gsc') { %>
  <div class="card shelf-c b3 sc-sky"><div class="cl">No Search Console data</div><div class="cv tnum"><%= _missing %></div></div>
  <% } else { %>
  <div class="card shelf-c b3 sc-sky"><div class="cl">Outside 50</div><div class="cv tnum"><%= locals.outside50 || 0 %></div></div>
  <% } %>
  <% } %>

  <div class="card b12">
    <div class="card-h">
      <h3>Tracked keywords</h3>
      <span class="hint"><%= rankSource === 'gsc' ? 'Search Console average' : 'live Google check' %></span>
      <% if (canManage && tracked) { %>
        <span class="rr-end">
          <form method="POST" action="/api/keyword-tracker/check-all" class="inline-form js-ajax-form" data-refresh="#kw-body">
            <button class="btn btn-sm" type="submit">Check all</button>
          </form>
        </span>
      <% } %>
    </div>

    <% if (tracked) { %>
    <div class="kw-tabs" role="tablist" aria-label="Filter tracked keywords">
      <a class="kw-tab<%= _show==='all' ? ' on' : '' %>" href="/keyword-tracker" aria-current="<%= _show==='all' ? 'page' : 'false' %>">All <b><%= tracked %></b></a>
      <a class="kw-tab<%= _show==='ranked' ? ' on' : '' %>" href="/keyword-tracker?show=ranked" aria-current="<%= _show==='ranked' ? 'page' : 'false' %>">Ranking <b><%= _ranked %></b></a>
      <a class="kw-tab<%= _show==='missing' ? ' on' : '' %>" href="/keyword-tracker?show=missing" aria-current="<%= _show==='missing' ? 'page' : 'false' %>">Not found <b><%= _missing %></b></a>

      <a class="kw-tab<%= _show==='top10' ? ' on' : '' %>" href="/keyword-tracker?show=top10" aria-current="<%= _show==='top10' ? 'page' : 'false' %>">Top 10 <b><%= winning %></b></a>
      <a class="kw-tab<%= _show==='out20' ? ' on' : '' %>" href="/keyword-tracker?show=out20" aria-current="<%= _show==='out20' ? 'page' : 'false' %>">Outside top 20 <b><%= losing %></b></a>
      <a class="kw-tab<%= _show==='out50' ? ' on' : '' %>" href="/keyword-tracker?show=out50" aria-current="<%= _show==='out50' ? 'page' : 'false' %>">Outside 50 <b><%= locals.outside50 || 0 %></b></a>

      <% var _bandTab = ({ top3: 'Top 3', top4to10: '4 to 10', top11to20: '11 to 20', top21to50: '21 to 50', past50: 'Outside 50 or no position' })[_show]; %>
      <% if (_bandTab) { %><a class="kw-tab on" href="/keyword-tracker?show=<%= _show %>" aria-current="page"><%= _bandTab %> <b><%= locals.bandCount != null ? bandCount : kws.length %></b></a><% } %>
    </div>

    <%
      var _intent = locals.intent || '';
      var _cat = locals.cat || '';
      var _ic = locals.intentCounts || {};
      var _cats = locals.catsInUse || [];

      function _kwLink(over) {
        var q = { show: _show === 'all' ? '' : _show, intent: _intent, cat: _cat };
        Object.keys(over).forEach(function (k) { q[k] = over[k]; });
        var parts = [];
        Object.keys(q).forEach(function (k) { if (q[k]) parts.push(k + '=' + encodeURIComponent(q[k])); });
        return '/keyword-tracker' + (parts.length ? '?' + parts.join('&') : '');
      }
    %>
    <% if (_ic.commercial || _ic.informational || _cats.length) { %>
    <div class="kw-tags-bar">
      <span class="rr-meta">Intent</span>
      <a class="kw-tag-f<%= !_intent ? ' on' : '' %>" href="<%= _kwLink({ intent: '' }) %>">Any</a>
      <a class="kw-tag-f<%= _intent==='commercial' ? ' on' : '' %>" href="<%= _kwLink({ intent: 'commercial' }) %>">Commercial <b><%= _ic.commercial || 0 %></b></a>
      <a class="kw-tag-f<%= _intent==='informational' ? ' on' : '' %>" href="<%= _kwLink({ intent: 'informational' }) %>">Informational <b><%= _ic.informational || 0 %></b></a>

      <a class="kw-tag-f<%= _intent==='untagged' ? ' on' : '' %>" href="<%= _kwLink({ intent: 'untagged' }) %>">Not judged <b><%= _ic.untagged || 0 %></b></a>
      <% if (_cats.length) { %>
        <span class="rr-meta" style="margin-left:10px">Group</span>
        <a class="kw-tag-f<%= !_cat ? ' on' : '' %>" href="<%= _kwLink({ cat: '' }) %>">Any</a>
        <% _cats.forEach(function(c){ %>
          <a class="kw-tag-f<%= String(_cat).toLowerCase()===String(c).toLowerCase() ? ' on' : '' %>" href="<%= _kwLink({ cat: c }) %>"><%= c %></a>
        <% }) %>
      <% } %>
    </div>
    <% } %>
    <% } %>
    <div style="overflow-x:auto">
      <% if (kws.length) { %>
      <table class="tbl">

        <thead><tr><th>Keyword</th><th><%= rankSource === 'gsc' ? 'Avg. position' : 'Position' %></th><th><%= rankSource === 'gsc' ? 'Page shown' : 'Ranking URL' %></th><th><%= rankSource === 'gsc' ? 'Data up to' : 'Last checked' %></th><% if(canManage){ %><th></th><% } %></tr></thead>
        <tbody>
          <% kws.forEach(function(k){ %>
            <tr>

              <td class="strong">
                <button type="button" class="kw-open" data-kw="<%= k.keyword %>" data-id="<%= k._id %>"
                        data-pos="<%= k.position == null ? '' : k.position %>"
                        data-url="<%= k.url || '' %>"
                        data-checked="<%= k.checkedAt ? new Date(k.checkedAt).toISOString() : '' %>"
                        data-hist="<%= _hist(k) %>"
                        data-week="<%= k.weekOf || '' %>"
                        data-source="<%= rankSource %>"
                        title="<%= rankSource === 'gsc' ? 'Average position history' : 'Rank history' %> for “<%= k.keyword %>”">
                  <span><%= k.keyword %></span>
                  <svg viewBox="0 0 14 14" width="12" height="12" fill="none" aria-hidden="true" class="kw-open-i"><path d="M1.5 10.5L5 6.6l2.6 2.2L12.5 3" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
                </button>

                <% var _cats = (k.categories || []).filter(Boolean); %>
                <% if (k.intent || _cats.length) { %>
                  <div class="kw-tags">

                    <% if (k.intent) { %><span class="chip <%= k.intent === 'commercial' ? 'pos' : 'flat' %>" title="<%= k.intent === 'commercial' ? 'A search with buying intent' : 'A search looking for information' %>"><%= k.intent %><% if (canManage) { %><form class="js-ajax-form kw-tag-x" method="POST" action="/api/keyword-tracker/<%= k._id %>/tag" data-refresh="#kw-body"><input type="hidden" name="intent" value=""><button type="submit" aria-label="Remove <%= k.intent %> from <%= k.keyword %>" title="Remove">×</button></form><% } %></span><% } %>
                    <% _cats.forEach(function(c){ %><span class="chip flat"><%= c %><% if (canManage) { %><form class="js-ajax-form kw-tag-x" method="POST" action="/api/keyword-tracker/<%= k._id %>/tag" data-refresh="#kw-body"><input type="hidden" name="categories" value="<%= _cats.filter(function (x) { return x !== c; }).join(', ') %>"><button type="submit" aria-label="Remove <%= c %> from <%= k.keyword %>" title="Remove">×</button></form><% } %></span><% }) %>
                  </div>
                <% } %>
                <% if (canManage) { %>

                  <details class="kw-tagbox">
                    <summary><%= (k.intent || _cats.length) ? 'Edit tags' : '+ Tag' %></summary>
                    <form class="js-ajax-form" method="POST" action="/api/keyword-tracker/<%= k._id %>/tag" data-refresh="#kw-body">
                      <select name="intent" aria-label="Intent for <%= k.keyword %>">

                        <option value=""<%= !k.intent ? ' selected' : '' %>>Not judged</option>
                        <option value="commercial"<%= k.intent === 'commercial' ? ' selected' : '' %>>Commercial</option>
                        <option value="informational"<%= k.intent === 'informational' ? ' selected' : '' %>>Informational</option>
                      </select>
                      <input type="text" name="categories" value="<%= _cats.join(', ') %>"
                             placeholder="pricing, comparison with ChurchTrac"
                             aria-label="Categories for <%= k.keyword %>" maxlength="400">
                      <button class="btn btn-sm" type="submit">Save</button>
                    </form>
                  </details>
                <% } %>
              </td>

              <% if (k.position != null) { %>
                <td>

                  <% var _rare = k.seenWeeks != null && k.seenWeeks <= 4;
                     var _thin = k.sample != null && k.sample < 30;

                     var _ageDays = k.weekOf ? Math.round((Date.now() - new Date(k.weekOf + 'T00:00:00').getTime()) / 86400000) : null;
                     var _stale = _ageDays != null && _ageDays > 21;
                     var _soft = k.verified === false || _rare || _thin || _stale; %>
                  <span class="rank <%= _soft ? 'unsure' : (k.position<=10?'win':(k.position>20?'lose':'')) %>"><%= _fmtPos(k.position) %></span>
                  <% if (k.verified === false) { %>
                    <div class="rr-meta unsure-note" title="<%= k.verifyNote || '' %>">unconfirmed</div>
                  <% } else if (_stale) { %>
                    <div class="rr-meta unsure-note" title="<%= k.verifyNote || '' %>">week of <%= k.weekOf %></div>
                  <% } else if (_rare) { %>
                    <div class="rr-meta unsure-note" title="<%= k.verifyNote || '' %>">shown in <%= k.seenWeeks %> of 8 weeks</div>
                  <% } else if (_thin) { %>
                    <div class="rr-meta unsure-note" title="<%= k.verifyNote || '' %>">from <%= k.sample %> impression<%= k.sample === 1 ? '' : 's' %></div>
                  <% } %>
                </td>
                <td class="muted"><% if (k.url) { %><a href="<%= k.url %>" target="_blank" rel="noopener noreferrer"><%= k.url %></a><% } else { %>—<% } %></td>
              <% } else if (k.checkedAt) { %>

                <td colspan="2">
                  <div style="display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--surface-2); border-radius:10px; color:var(--muted)">
                    <svg width="15" height="15" viewBox="0 0 16 16" fill="none" aria-hidden="true" style="flex:none"><circle cx="7" cy="7" r="4.4" stroke="currentColor" stroke-width="1.4"/><path d="M10 10l3.2 3.2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><path d="M4.8 4.8l4.4 4.4M9.2 4.8l-4.4 4.4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>

                    <span class="kw-nf"<% if (k.verifyNote) { %> title="<%= k.verifyNote %>"<% } %>><% if (k.verified === false) { %>Not found (not confirmed yet)<% } else if (rankSource === 'gsc') { %>No searches recorded in 3 months<% } else { %>Not in the results checked<% } %></span>
                  </div>
                </td>
              <% } else { %>
                <td><span class="noval">—</span></td>
                <td class="muted">—</td>
              <% } %>

              <td class="rr-meta"><% if (rankSource === 'gsc' && k.weekOf) { %><b>week of <%= k.weekOf %></b><br><span class="muted">checked <%= h.timeAgo(k.checkedAt) %></span><% } else { %><%= k.checkedAt ? h.timeAgo(k.checkedAt) : 'never' %><% } %><% if (k.checkedAt && k.market && k.market !== market.primary.name) { %><br><span style="color:var(--warn, var(--muted))">measured in <%= k.market %></span><% } %><% if(k.lastError && canManage){ %><br><span style="color:var(--neg)"><%= k.lastError %></span><% } %><%

                var _lc = k.liveCheck;
                if (canManage && _lc && _lc.at) { %><br><span class="live-line"><% if (_lc.error) { %><span class="kw-nf" style="color:var(--neg)" title="<%= _lc.error %>">Live check failed</span><% } else { %>Live <b>#<%= _lc.position != null ? _lc.position : '—' %></b><%= _lc.position == null ? ' (not in top ' + (_lc.depth || '?') + ')' : '' %> · <%= h.timeAgo(_lc.at) %><% if (_lc.verified === false) { %> · <span class="unsure-note" title="<%= _lc.note || '' %>">unconfirmed</span><% } else if (_lc.verified) { %> · matches Search Console<% } %><% } %></span><% } %></td>
              <% if (canManage) { %>
              <td style="white-space:nowrap; display:flex; gap:6px">
                <form method="POST" action="/api/keyword-tracker/<%= k._id %>/check" class="inline-form js-ajax-form" data-refresh="#kw-body">

                  <button class="icon-btn act" title="Check rank now" aria-label="Check rank now">
                    <svg viewBox="0 0 12 12" fill="none" width="13" height="13" aria-hidden="true"><path d="M10 6a4 4 0 11-1.2-2.85M10 1.6V4H7.6" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>
                  </button>
                </form>

                <form method="POST" action="/api/keyword-tracker/<%= k._id %>/live" class="inline-form js-ajax-form" data-refresh="#kw-body">
                  <button class="icon-btn act" title="Check live on Google (uses 1+ SerpApi search)" aria-label="Check live on Google">
                    <svg viewBox="0 0 16 16" fill="none" width="13" height="13" aria-hidden="true"><circle cx="7" cy="7" r="4.4" stroke="currentColor" stroke-width="1.5"/><path d="M10.2 10.2l3.2 3.2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
                  </button>
                </form>
                <form method="POST" action="/api/keyword-tracker/<%= k._id %>/delete" class="inline-form js-delete-form" data-confirm="Stop tracking this keyword?" data-refresh="#kw-body">
                  <button class="icon-btn" title="Remove" aria-label="Remove keyword">&times;</button>
                </form>
              </td>
              <% } %>
            </tr>
          <% }) %>
        </tbody>
      </table>
      <% } else if (tracked) { %>

        <div class="card-p rr-meta" style="text-align:center; padding:30px">
          <%= ({
            ranked:  'None of the tracked keywords ranked in the last check.',
            missing: 'Every tracked keyword ranked in the last check.',
            top10:   'None of the tracked keywords are in the top 10 yet.',
            out20:   'Every keyword that has been checked is inside the top 20.',
            out50:   'Every keyword that has been checked is inside the top 50.'
          })[_show] || 'Nothing in this list.' %>
          <a href="/keyword-tracker">Show all <%= tracked %></a>
        </div>
      <% } else { %>
      <div class="card-p rr-meta" style="text-align:center; padding:30px">No keywords tracked yet. <% if(canManage){ %>Add one above and it's checked against Google immediately.<% } else { %>Your VOCTOS team adds the keywords you're targeting.<% } %></div>
      <% } %>
    </div>
  </div>
</div>

<div class="kwm" id="kwm" hidden>
  <div class="kwm-back" data-kwm-close></div>
  <div class="kwm-box" role="dialog" aria-modal="true" aria-labelledby="kwm-title">
    <button type="button" class="kwm-x" data-kwm-close aria-label="Close">&times;</button>
    <div class="eyebrow"><%= rankSource === 'gsc' ? 'Average position history' : 'Rank history' %></div>
    <h3 id="kwm-title"></h3>
    <div class="kwm-now"></div>
    <div class="kwm-body"></div>

    <div class="kwm-peers"></div>
  </div>
</div>
<script src="<%= (locals.asset||function(p){return p;})('/js/keyword-history.js') %>" defer></script>
