<%
var cfg = locals.cfg || {}, cur = cfg.currency || 'USD';
var SYM = { USD:'$', EUR:'€', GBP:'£', EGP:'E£', SAR:'SAR ', AED:'AED ' };

function m(n){
  if (n === undefined || n === null) return '—';
  var s = SYM[cur] || (cur + ' '), v = Number(n);
  var dp = Math.abs(v) < 100 ? 2 : 0;
  return s + v.toLocaleString('en-US', { minimumFractionDigits: dp, maximumFractionDigits: dp });
}
function n0(v){ return (v === undefined || v === null) ? '—' : Number(v).toLocaleString('en-US'); }

var nov = '<span class="noval">—</span>';
var mm = c.metrics || {}, pm = c.prevMetrics || {};
var cpa = (mm.cost != null && mm.conversions) ? mm.cost / mm.conversions : null;
var prevCpa = (pm.cost != null && pm.conversions) ? pm.cost / pm.conversions : null;
var cr = (mm.conversions != null && mm.clicks) ? mm.conversions / mm.clicks * 100 : null;
var cpc = (mm.cost != null && mm.clicks) ? mm.cost / mm.clicks : null;
var ctr = (mm.clicks != null && mm.impressions) ? mm.clicks / mm.impressions * 100 : null;
var NICE = { search:'Search', pmax:'Performance Max', shopping:'Shopping', display:'Display', video:'Video', demand_gen:'Demand Gen', social:'Social', other:'Other' };
function chip(cur_, prev, lowerBetter){
  if (cur_ == null || !prev) return '';
  var v = (cur_ - prev) / prev * 100;
  if (Math.abs(v) < 0.5) return '';
  var good = lowerBetter ? v < 0 : v > 0;
  return '<span class="chip ' + (good ? 'pos' : 'neg') + '">' + (v > 0 ? '+' : '') + v.toFixed(0) + '%</span>';
}
var SMART_FLOOR = 30;
var isPmax = c.channel === 'pmax';
var termCost = (locals.terms || []).reduce(function(a, t){ return a + (t.cost || 0); }, 0);

var _staff = (canWrite === true && !locals.isExport) || (locals.showStaff);
%>

<div class="crumb">
  <a href="/ppc">PPC</a> › <a href="/ppc/campaigns">Campaigns</a> › <span><%= c.name %></span>
</div>

<div class="pg-head" style="margin-bottom:0">
  <div>
    <div class="eyebrow"><a href="/ppc/campaigns" style="text-decoration:none">Campaigns</a></div>
  </div>
  <div class="ph-right">
    <%- include('../partials/range-picker') %>
    <span class="chip <%= c.status === 'enabled' ? 'pos' : 'flat' %>"><%= c.status %></span>
  </div>
</div>

<h1 class="claim"><%= title %></h1>
<% if (cpa != null) { %>
  <p class="claim-lede"><%= c.name %> is buying conversions at <em><%= m(cpa) %></em> each.</p>
<% } else if (mm.cost != null && mm.conversions === 0) { %>
  <p class="claim-lede"><%= c.name %> spent <em><%= m(mm.cost) %></em> without a conversion.</p>
<% } else if (mm.cost != null) { %>
  <p class="claim-lede"><%= c.name %> spent <em><%= m(mm.cost) %></em> in this period.</p>
<% } else { %>
  <p class="claim-lede">No data for <%= c.name %> in this period.</p>
<% } %>
<p class="claim-sub"><%= NICE[c.channel] || c.channel %><% if (c.windowStart) { %>, <%= h.date(c.windowStart) %> to <%= h.date(c.windowEnd) %><% } %><% if (c.syncedAt) { %>. Synced <%= h.timeAgo(c.syncedAt) %><% } %>.<% if (cfg.targetCpa && cpa != null) { %> The agreed target is <%= m(cfg.targetCpa) %>, so this is <%= cpa <= cfg.targetCpa ? Math.round((1 - cpa/cfg.targetCpa)*100) + '% below it' : Math.round((cpa/cfg.targetCpa - 1)*100) + '% above it' %>.<% } else if (!cfg.targetCpa) { %> No target CPA is set yet.<% } %></p>

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

  <div class="vdark vd-cut b8">
    <span class="vn-fillet"></span>
    <a class="vn-cut" href="/ppc/keywords?c=<%= c._id %>">Its search terms
      <svg viewBox="0 0 12 12" fill="none" width="13" height="13" aria-hidden="true"><path d="M3 9L9 3M9 3H4.2M9 3v4.8" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>
    </a>
    <div class="vd-k">Spend in this window</div>
    <div class="vd-row">
      <div class="vd-num tnum"><% if (mm.cost != null) { %><%= m(mm.cost) %><% } else { %><%- nov %><% } %></div>
      <%- chip(mm.cost, pm.cost, false) %>
    </div>
    <div class="vd-sub"><%= NICE[c.channel] || c.channel %><% if (c.bidStrategy) { %> on <b><%= c.bidStrategy %></b><% } %><% if (c.budgetDaily != null) { %>, capped at <b><%= m(c.budgetDaily) %></b> a day<% } %>.<%- h.ihelp('What the change chips compare',
      'Every change chip compares this window against the one immediately before it.') %></div>

    <div class="ov-strip ov-2" style="margin-top:20px">
      <div class="ov">
        <div class="ovl">Conversions</div>
        <div class="ovv tnum"><% if (mm.conversions != null) { %><%= n0(mm.conversions) %><% } else { %><%- nov %><% } %> <%- chip(mm.conversions, pm.conversions, false) %></div>
        <div class="rr-meta" style="margin-top:5px"><% if (cr != null) { %><%= cr.toFixed(2) %>% of clicks converted<% } else { %>Nothing to divide by yet<% } %></div>
      </div>
      <div class="ov">
        <div class="ovl">Cost per conversion</div>
        <div class="ovv tnum"><% if (cpa != null) { %><%= m(cpa) %><% } else { %><%- nov %><% } %> <%- chip(cpa, prevCpa, true) %></div>
        <div class="rr-meta" style="margin-top:5px"><% if (cfg.targetCpa) { %>against a <%= m(cfg.targetCpa) %> target<% } else { %>No target agreed to judge this against<% } %></div>
      </div>
      <div class="ov">
        <div class="ovl">Avg. CPC</div>
        <div class="ovv tnum"><% if (cpc != null) { %><%= m(cpc) %><% } else { %><%- nov %><% } %></div>
        <div class="rr-meta" style="margin-top:5px"><% if (mm.clicks != null) { %>across <%= n0(mm.clicks) %> clicks<% } else { %>No click rows in this export<% } %></div>
      </div>
      <div class="ov">
        <div class="ovl">CTR</div>
        <div class="ovv tnum"><% if (ctr != null) { %><%= ctr.toFixed(2) %>%<% } else { %><%- nov %><% } %></div>
        <div class="rr-meta" style="margin-top:5px"><% if (mm.impressions != null) { %>from <%= n0(mm.impressions) %> impressions<% } else { %>No impression data<% } %></div>
      </div>
      <div class="ov">
        <div class="ovl">Impressions<%- h.ihelp('Impressions', 'Times an ad from this campaign was shown.') %></div>
        <div class="ovv tnum"><% if (mm.impressions != null) { %><%= n0(mm.impressions) %><% } else { %><%- nov %><% } %></div>
      </div>
      <div class="ov">
        <div class="ovl">Impression share <span class="periodonly" title="Google reports impression share for a period, not per day, so this figure keeps the sync's own window whatever range you pick">period</span></div>
        <% if (mm.impressionShare != null) { %>
          <div class="ovv tnum"><%= Math.round(mm.impressionShare * 100) %><small>%</small></div>
          <div class="rr-meta" style="margin-top:5px"><%= Math.round((mm.lostIsBudget || 0) * 100) %>% lost to budget · <%= Math.round((mm.lostIsRank || 0) * 100) %>% to rank</div>
        <% } else { %>
          <div class="ovv tnum"><%- nov %></div>
          <div class="lockwhy">No impression share for <%= NICE[c.channel] || c.channel %> campaigns.</div>
        <% } %>
      </div>
    </div>
  </div>

  <div class="card card-p b4">
    <div class="card-h" style="padding:0 0 12px"><h3>How it is set up<%- h.ihelp('How it is set up',
      'A dash means the account did not report that setting. Without a campaign target CPA, the client target is shown.') %></h3><span class="hint">from the account</span></div>

    <div style="display:flex;flex-direction:column;gap:11px;font-size:var(--fs-sm)">
      <div class="row-between"><span class="muted">Daily budget</span><span class="num strong"><%= m(c.budgetDaily) %></span></div>
      <div class="row-between"><span class="muted">Bid strategy</span><span class="num strong"><%= c.bidStrategy || '—' %></span></div>
      <div class="row-between"><span class="muted">Target CPA</span><span class="num strong"><%= m(c.targetCpa != null ? c.targetCpa : cfg.targetCpa) %></span></div>
      <div class="row-between"><span class="muted">Actual CPA</span><span class="num strong" style="<%= (cpa != null && cfg.targetCpa) ? 'color:var(--' + (cpa <= cfg.targetCpa ? 'pos' : 'neg') + ')' : '' %>"><%= m(cpa) %></span></div>
      <div class="row-between"><span class="muted">Conversions this window</span><span class="num strong"><%= n0(mm.conversions) %></span></div>
      <div class="row-between"><span class="muted">Last synced</span><span class="num strong"><%= c.syncedAt ? h.timeAgo(c.syncedAt) : '—' %></span></div>
    </div>
  </div>

  <%

    var _gN = (locals.groups || []).length, _kN = (locals.keywords || []).length;
    var _tN = (locals.terms || []).length, _aN = (locals.ads || []).length;
    var _shelf = [
      { l: isPmax ? 'Asset groups' : 'Ad groups', v: _gN },
      { l: 'Keywords in the export', v: _kN },
      { l: 'Flagged search terms', v: _tN },
      { l: 'Ads in this campaign', v: _aN }
    ];
    var _tints = ['sc-violet', 'sc-lime', 'sc-navy', 'sc-sky', 'sc-sand', 'sc-rose'];
  %>
  <% _shelf.forEach(function (s, i) { %>
    <div class="card shelf-c b3 <%= _tints[i % _tints.length] %>">
      <div class="cl"><%= s.l %></div>
      <div class="cv tnum"><%= s.v %></div>
    </div>
  <% }) %>

  <% if (mm.impressionShare != null) { var w = Math.round(mm.impressionShare*100), b = Math.round((mm.lostIsBudget||0)*100), r = Math.round((mm.lostIsRank||0)*100); %>
  <div class="card card-p b12">
    <div class="card-h" style="padding:0 0 12px"><h3>Impression share (where the rest goes)</h3>
      <% if (b > 10) { %><span class="rr-end"><span class="chip warn"><%= b %>% lost to budget</span></span><% } %></div>
    <div class="isbar">
      <i style="width:<%= w %>%;background:var(--teal)">Won <%= w %>%</i>
      <i style="width:<%= b %>%;background:var(--warn)"><%= b >= 8 ? 'Budget ' + b + '%' : '' %></i>
      <i style="width:<%= r %>%;background:var(--muted-2)"><%= r >= 8 ? 'Rank ' + r + '%' : '' %></i>
    </div>
    <div class="grid g-2" style="margin-top:16px;gap:14px">

      <div class="muted" style="font-size:var(--fs-sm);line-height:1.65"><b style="color:var(--ink)">Lost to budget (<%= b %>%).</b> The campaign hit its budget cap. More budget brings this back.</div>

      <div class="muted" style="font-size:var(--fs-sm);line-height:1.65"><b style="color:var(--ink)">Lost to rank (<%= r %>%).</b> Fixed through Quality Score, ad relevance and the landing page, not budget.</div>
    </div>
  </div>
  <% } %>

  <div class="card b8">
    <div class="card-h"><h3><%= isPmax ? 'Asset groups' : 'Ad groups' %></h3><span class="hint"><%= (locals.groups || []).length %> in the export</span></div>
    <% if (!(locals.groups || []).length) { %>

      <div class="card-p"><div class="muted" style="font-size:var(--fs-sm)">No <%= isPmax ? 'asset' : 'ad' %> group rows for this campaign in the latest export.<% if (isPmax) { %> For Performance Max this is the deepest cost breakdown Google provides, so it is worth adding to the script.<% } %></div></div>
    <% } else { %>
      <div style="overflow-x:auto">
      <table class="tbl">
        <thead><tr><th><%= isPmax ? 'Asset group' : 'Ad group' %></th><th style="text-align:right">Spend</th><th style="text-align:right">Clicks</th><th style="text-align:right">Conv</th><th style="text-align:right">CPA</th></tr></thead>
        <tbody>
        <% groups.forEach(function(g){ var gm = g.metrics || {}; var gc = (gm.cost != null && gm.conversions) ? gm.cost/gm.conversions : null;
             var gbad = cfg.targetCpa && gc != null && gc > cfg.targetCpa; var ggood = cfg.targetCpa && gc != null && gc <= cfg.targetCpa * 0.8; %>
          <tr class="<%= gm.cost > 0 && gm.conversions === 0 ? 'is-waste' : (ggood ? 'is-winner' : '') %>">
            <td class="strong"><%= g.name %></td>
            <td class="num" style="text-align:right"><%= m(gm.cost) %></td>
            <td class="num" style="text-align:right"><%= n0(gm.clicks) %></td>
            <td class="num" style="text-align:right"><%= n0(gm.conversions) %></td>
            <td class="num" style="text-align:right<%= gbad ? ';color:var(--neg)' : (ggood ? ';color:var(--pos)' : '') %>"><%= m(gc) %></td>
          </tr>
        <% }) %>
        </tbody>
      </table>
      </div>
    <% } %>
  </div>

  <div class="col b4">
    <div class="card card-p">
      <div class="row-between"><div class="rr-lbl">Smart bidding health</div>
        <span class="chip <%= (mm.conversions >= SMART_FLOOR) ? 'pos' : 'warn' %>"><%= (mm.conversions >= SMART_FLOOR) ? 'Healthy' : 'Thin signal' %></span></div>

      <div style="display:flex;flex-direction:column;gap:9px;margin-top:12px;font-size:var(--fs-sm)">
        <div class="row-between"><span class="muted">Conversions in window</span><span class="money"><%= n0(mm.conversions) %></span></div>
        <div class="row-between"><span class="muted">Google's floor for Target CPA</span><span class="money"><%= SMART_FLOOR %></span></div>

        <div class="row-between"><span class="muted">Bid strategy</span><span class="money" style="font-size:var(--fs-sm)"><%= c.bidStrategy || '—' %></span></div>
      </div>

      <div class="muted" style="font-size:var(--fs-xs);margin-top:12px;line-height:1.55">
        <% if (mm.conversions >= SMART_FLOOR) { %>
          Comfortably above the signal floor, so a budget change is safe. Keep each step under 20% with 7 days between them, or the strategy re-enters learning and CPA wobbles for a week.
        <% } else { %>
          Below Google's documented 30-conversion floor, the algorithm has too little signal and bids get erratic. Consolidating this campaign into one with more volume usually beats tuning it.
        <% } %>
      </div>
    </div>

    <% if (locals.opp) { %>
    <div class="card card-p oppcard">
      <div class="rr-lbl">Open recommendation</div>
      <div class="rr-title">Raise the budget in 20% steps</div>
      <div class="rr-meta">Capped by budget while under target CPA</div>

      <div style="display:flex;flex-direction:column;gap:7px;margin-top:12px;font-size:var(--fs-sm)">
        <div class="row-between"><span class="muted">Extra monthly spend</span><span class="money"><%= m(opp.extraSpend) %></span></div>
        <div class="row-between"><span class="muted">Incremental CPA assumed</span><span class="money"><%= m(opp.incCpa) %></span></div>
        <div class="row-between"><span class="muted">Expected conversions</span><span class="money" style="color:var(--pos)">≈ <%= opp.expected %></span></div>
        <div class="row-between"><span class="muted">Theoretical ceiling</span><span class="money" style="color:var(--muted-2)"><%= opp.ceiling %></span></div>
      </div>
      <div class="rr-actions"><a class="btn btn-sm btn-teal" href="/ppc/budget">See the model</a></div>
    </div>
    <% } %>

    <% if (_staff) { %>
    <div class="staffonly">
      <div class="so-l">VOCTOS staff only</div>

      <div class="muted" style="font-size:var(--fs-xs);margin-top:9px;line-height:1.55">Changes are made in Google Ads and show here after the next sync.</div>
    </div>
    <% } %>
  </div>

  <% if (!isPmax) { %>
  <div class="card b12">
    <div class="card-h"><h3>Keywords</h3><span class="hint">top <%= (locals.keywords || []).length %> by spend</span>

      <a class="more" href="/ppc/keywords?c=<%= c._id %>">All keywords in this campaign</a></div>
    <% if (!(locals.keywords || []).length) { %>

      <div class="card-p"><div class="muted" style="font-size:var(--fs-sm)">No keyword rows for this campaign.</div></div>
    <% } else { %>
    <div style="overflow-x:auto">
    <table class="tbl">
      <thead><tr><th>Keyword</th><th>Match</th><th>Ad group</th><th style="text-align:right">Clicks</th><th style="text-align:right">Cost</th><th style="text-align:right">Conv</th><th style="text-align:right">CPA</th><th style="text-align:center">QS</th></tr></thead>
      <tbody>
      <% keywords.forEach(function(k){ var kc = (k.cost != null && k.conversions) ? k.cost/k.conversions : null;
           var q = k.qualityScore; var qcls = q == null ? '' : (q >= 7 ? 'good' : (q >= 5 ? 'ok' : 'bad')); %>
        <tr class="<%= k.flag === 'waste' ? 'is-waste' : (k.flag === 'winner' ? 'is-winner' : '') %>">
          <td dir="auto" class="strong"><%= k.text %></td>
          <td><span class="chip flat"><%= k.matchType %></span></td>
          <td class="muted"><%= k.adGroupName || '—' %></td>
          <td class="num" style="text-align:right"><%= n0(k.clicks) %></td>
          <td class="num" style="text-align:right"><%= m(k.cost) %></td>
          <td class="num" style="text-align:right"><%= n0(k.conversions) %></td>
          <td class="num" style="text-align:right"><%= m(kc) %></td>
          <td style="text-align:center"><% if (q != null) { %><span class="qs <%= qcls %>"><%= q %></span><% } else { %>—<% } %></td>
        </tr>
      <% }) %>
      </tbody>
    </table>
    </div>
    <% } %>
  </div>
  <% } %>

  <% if ((locals.terms || []).length) { %>
  <div class="card b12">
    <div class="card-h"><h3>Search terms flagged in this campaign</h3><span class="hint">excludes the last <%= cfg.lagDays %> days</span>
      <a class="more" href="/ppc/keywords?c=<%= c._id %>">Review all</a></div>

    <div style="overflow-x:auto">
    <table class="tbl">
      <thead><tr><th>Search term</th><th>Why</th><th style="text-align:right">Clicks</th><th style="text-align:right">Cost</th><th style="text-align:right">Conv</th></tr></thead>
      <tbody>
      <% terms.forEach(function(t){ %>
        <tr class="is-waste">
          <td dir="auto" class="strong"><%= t.text %></td>
          <td><span class="flag waste"><%= t.flagReason || 'no conversions' %></span><% if (t.flagConfidence === 'low') { %> <span class="chip warn">low confidence</span><% } %></td>
          <td class="num" style="text-align:right"><%= n0(t.clicks) %></td>
          <td class="num" style="text-align:right;color:var(--neg)"><%= m(t.cost) %></td>
          <td class="num" style="text-align:right"><%= n0(t.conversions) %></td>
        </tr>
      <% }) %>
      </tbody>
    </table>
    </div>
    <div class="card-p" style="border-top:1px solid var(--line)"><span class="chip neg"><%= m(termCost) %> across <%= terms.length %> term<%= terms.length > 1 ? 's' : '' %></span></div>
  </div>
  <% } %>

  <% if ((locals.ads || []).length) { %>
  <div class="card b12">
    <div class="card-h"><h3>Ads</h3><span class="hint"><%= ads.length %> in this campaign</span>
      <a class="more" href="/ppc/creatives">Ad creatives</a></div>

    <div style="overflow-x:auto">
    <table class="tbl">
      <thead><tr><th>Ad</th><th>Strength</th><th>Status</th><th style="text-align:right">CTR</th><th style="text-align:right">Conv</th></tr></thead>
      <tbody>
      <% ads.forEach(function(a){ var am = a.metrics || {}; var actr = (am.clicks != null && am.impressions) ? am.clicks/am.impressions*100 : null; %>
        <tr class="<%= a.status === 'rejected' ? 'is-waste' : '' %>">
          <td class="strong"><%= (a.headlines || [])[0] || a.externalId || 'Ad' %></td>
          <td><%= a.adStrength ? '<span class="chip ' + (/excellent|good/i.test(a.adStrength) ? 'pos' : 'warn') + '">' + a.adStrength + '</span>' : '<span class="chip flat">n/a</span>' %></td>
          <td><span class="chip <%= a.status === 'rejected' ? 'neg' : (a.status === 'live' ? 'pos' : 'flat') %>"><%= a.status %></span></td>
          <td class="num" style="text-align:right"><%= actr == null ? '—' : actr.toFixed(2) + '%' %></td>
          <td class="num" style="text-align:right"><%= n0(am.conversions) %></td>
        </tr>
      <% }) %>
      </tbody>
    </table>
    </div>
  </div>
  <% } %>
</div>
