<%

var channels = d.channels || [];
var total = (d.totals || {}).cost || 0;
var COLOR = { search:'var(--teal)', pmax:'var(--navy)', shopping:'var(--green)', display:'var(--muted-2)',
              video:'var(--neg)', demand_gen:'var(--blue)', social:'var(--warn)', other:'var(--line)' };
var NICE = { search:'Search', pmax:'Performance Max', shopping:'Shopping', display:'Display',
             video:'Video', demand_gen:'Demand Gen', social:'Social', other:'Other' };
var byChannel = {};
(campaigns || []).forEach(function(c){ (byChannel[c.channel] = byChannel[c.channel] || []).push(c); });
var groupsBy = {};
(groups || []).forEach(function(g){ (groupsBy[String(g.campaign)] = groupsBy[String(g.campaign)] || []).push(g); });
var arrow = '<svg class="go" width="12" height="12" viewBox="0 0 16 16" fill="none"><path d="M6 3l5 5-5 5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>';
var chev = '<svg class="chev" width="13" height="13" viewBox="0 0 16 16" fill="none"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>';
%>
<div class="card card-p">
  <div class="row-between"><div class="rr-lbl">Where the money went</div><span class="chip flat">click through</span></div>

  <% if (!channels.length) { %>

    <div class="muted" style="font-size:var(--fs-sm);margin-top:10px">No spend recorded in this window.</div>
  <% } else { %>
    <div class="stack">
      <% channels.forEach(function(ch){ %><i style="width:<%= ch.share %>%;background:<%= COLOR[ch.channel] || 'var(--line)' %>"></i><% }) %>
    </div>

    <div class="spend-list">
      <% channels.forEach(function(ch, ci){
           var list = byChannel[ch.channel] || [];
           var isPmax = ch.channel === 'pmax';
      %>
        <details class="schan"<%= ci === 0 ? ' open' : '' %>>
          <summary>
            <i class="sd" style="background:<%= COLOR[ch.channel] || 'var(--line)' %>"></i>

            <span class="sn"><%= NICE[ch.channel] || ch.channel %><% if (isPmax) { %> <span class="chip flat" style="font-size:var(--fs-2xs);padding:1px 6px;margin-left:4px">cross-surface</span><%- h.ihelp('Why Performance Max is not a channel',
              '<b>Performance Max runs on Search, Display, YouTube, Discover, Gmail and Maps at once.</b> '
              + 'Google reports its cost per asset group, not per surface, so it is shown as one line.') %><% } %></span>
            <span class="sv"><%= m(ch.cost) %></span>
            <span class="sp"><%= ch.share %>%</span>
            <%- chev %>
          </summary>
          <div class="skids">
            <% list.forEach(function(c){ %>
              <a class="skid" href="/ppc/campaigns/<%= c._id %>">
                <span class="kn"><%= c.name %></span>
                <span class="kv"><%= m((c.metrics || {}).cost) %></span>
                <%- arrow %>
              </a>
            <% }) %>

            <% if (isPmax) { %>
              <% list.forEach(function(c){
                   var ags = (groupsBy[String(c._id)] || []).sort(function(a,b){ return ((b.metrics||{}).cost||0) - ((a.metrics||{}).cost||0); });
                   if (!ags.length) return; %>
                <div class="rr-lbl" style="margin:8px 0 2px">Asset groups in <%= c.name %></div>
                <% ags.forEach(function(g){
                     var gm = g.metrics || {};
                     var cpa = (gm.cost != null && gm.conversions) ? gm.cost / gm.conversions : null;
                     var bad = cfg && cfg.targetCpa && cpa != null && cpa > cfg.targetCpa; %>
                  <div class="skid" style="cursor:default">
                    <span class="kn"><%= g.name %>

                      <span class="muted" style="font-size:var(--fs-xs)<%= bad ? ';color:var(--neg)' : '' %>">· <%= n0(gm.conversions) %> conv<%= cpa != null ? ' · ' + m(cpa) : '' %></span>
                    </span>
                    <span class="kv"><%= m(gm.cost) %></span>
                  </div>
                <% }) %>
              <% }) %>
              <% if (!list.some(function(c){ return (groupsBy[String(c._id)] || []).length; })) { %>

                <div class="subnote">No asset-group rows in the export yet.<% if (locals.showStaff) { %> Add the <span class="code">ad_groups</span> tab to the Ads Script and this fills in on the next sync.<% } %></div>
              <% } %>
            <% } %>
          </div>
        </details>
      <% }) %>
    </div>
  <% } %>
</div>
