<%
  var v = snap || {}; var b = d || {}; var c = counters || {};
  var money = locals.money || { billing: true, internal: true };

  var num = function (val) { return (val == null || val === '') ? '<span class="noval">—</span>' : String(val); };

  var _svgEye  = '<svg viewBox="0 0 16 16" width="15" height="15" fill="none"><path d="M1.6 8s2.4-4.2 6.4-4.2S14.4 8 14.4 8s-2.4 4.2-6.4 4.2S1.6 8 1.6 8z" stroke="currentColor" stroke-width="1.4"/><circle cx="8" cy="8" r="1.9" stroke="currentColor" stroke-width="1.4"/></svg>';
  var _svgPen  = '<svg viewBox="0 0 16 16" width="15" height="15" fill="none"><path d="M11.2 2.6l2.2 2.2-8 8-2.9.7.7-2.9z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg>';
  var _svgUp   = '<svg viewBox="0 0 16 16" width="15" height="15" fill="none"><path d="M8 12.6V4.2M4.6 7.6L8 4.2l3.4 3.4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>';
  var _svgGrid = '<svg viewBox="0 0 16 16" width="15" height="15" fill="none"><rect x="2" y="2" width="5" height="5" rx="1.2" stroke="currentColor" stroke-width="1.4"/><rect x="9" y="2" width="5" height="5" rx="1.2" stroke="currentColor" stroke-width="1.4"/><rect x="2" y="9" width="5" height="5" rx="1.2" stroke="currentColor" stroke-width="1.4"/><rect x="9" y="9" width="5" height="5" rx="1.2" stroke="currentColor" stroke-width="1.4"/></svg>';
  var _svgClk  = '<svg viewBox="0 0 16 16" width="15" height="15" fill="none"><circle cx="8" cy="8" r="5.8" stroke="currentColor" stroke-width="1.4"/><path d="M8 4.8V8l2.3 1.4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>';

  var _acts = [];
  _acts.push({ href: '/staff/upload?w=' + ws.slug,            lb: 'Add for them', ic: _svgUp, lead: true });
  _acts.push({ href: '/staff/clients/' + ws.slug + '/edit',   lb: 'Edit client',  ic: _svgPen });
  _acts.push({ href: '/staff/clients',                        lb: 'All clients',  ic: _svgGrid });
  _acts.push({ href: '/staff/time?w=' + ws.slug,              lb: 'Log time',     ic: _svgClk });
  _acts.push({ href: '/staff/view/' + ws.slug,                lb: 'View portal',  ic: _svgEye });
%>
<div class="pg-head" style="margin-bottom:0">
  <div>
    <div class="eyebrow">Agency / Mission Control</div>
  </div>
  <div class="ph-right" style="display:flex; gap:8px; align-items:center">
    <%- include('../partials/demo-toggle') %>
    <form method="GET" action="/staff/mission-control" class="picker-wrap">
      <select class="picker" name="w" onchange="this.form.submit()">
        <% workspaces.forEach(function(x){ %><option value="<%= x.slug %>" <%= x.slug===ws.slug?'selected':'' %>><%= x.name %></option><% }) %>
      </select>
    </form>
    <span class="chip <%= ws.riskLevel==='High'?'neg':(ws.riskLevel==='Medium'?'warn':'pos') %>">Risk: <%= ws.riskLevel %></span>
  </div>
</div>

<h1 class="claim"><%= title %></h1>
<% if (c.urgent) { %>
  <p class="claim-lede"><%= ws.name %> has <em><%= c.urgent %></em> issue<%= c.urgent === 1 ? '' : 's' %> waiting on you.</p>
<% } else if (v.visibilityScore != null) { %>
  <p class="claim-lede"><%= ws.name %> sits at <em><%= v.visibilityScore %></em> AI Visibility.</p>
<% } else { %>
  <p class="claim-lede">Nothing has been measured for <%= ws.name %> yet.</p>
<% } %>
<p class="claim-sub"><%
  if (v.visibilityScore != null || c.urgent) { %>Health, delivery, money and risk for this client, from their latest runs.<%
  } else { %>Readings appear after this client's first run.<% }
%></p>

<div class="qbar">
  <div class="qbar-acts">
    <% _acts.forEach(function (a) { %>
      <a class="qact<%= a.lead ? ' qact-lead' : '' %>" href="<%= a.href %>"><%- a.ic %><span><%= a.lb %></span></a>
    <% }) %>
  </div>
  <% if (meeting) { %>
  <div class="qmeet">
    <div class="qmeet-d">
      <b><%= new Date(meeting.startsAt).getDate() %></b>
      <span><%= new Date(meeting.startsAt).toLocaleDateString('en-GB', { month: 'short' }) %></span>
    </div>
    <div style="min-width:0">
      <div class="qmeet-t"><%= meeting.title %></div>
      <div class="qmeet-m"><%= h.time(meeting.startsAt) %></div>
    </div>
    <% if (meeting.zoomLink) { %><a class="btn btn-primary btn-sm" href="<%= meeting.zoomLink %>">Join</a><% } %>
  </div>
  <% } %>
</div>

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

  <div class="vdark vd-cut b8">
    <span class="vn-fillet"></span>
    <a class="vn-cut" href="/staff/view/<%= ws.slug %>">View their portal
      <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">AI Visibility</div>
    <div class="vd-row">
      <div class="vd-num tnum"><%- num(v.visibilityScore) %></div>

      <% if (v.delta) { %><span class="vd-d <%= v.delta >= 0 ? 'pos' : 'neg' %>"><%= v.delta >= 0 ? '▲' : '▼' %> <%= Math.abs(v.delta) %></span><% } %>
    </div>
    <div class="vd-sub">The same number the client sees on their own dashboard, from their latest run.</div>

    <div class="ov-strip ov-2" style="margin-top:20px">
      <div class="ov"><div class="ovl">SEO Health</div><div class="ovv tnum"><%- num(b.seoHealth) %></div></div>
      <div class="ov"><div class="ovl">Organic traffic</div><div class="ovv tnum"><%- num(b.organicTraffic) %></div></div>
      <div class="ov"><div class="ovl">Positive sentiment</div><div class="ovv tnum"><%- b.sentimentPos != null ? b.sentimentPos + '%' : '<span class="noval">—</span>' %></div></div>
      <div class="ov"><div class="ovl">Retainer</div><div class="ovv tnum"><%- time.mrr != null ? h.money(time.mrr) : '<span class="noval">—</span>' %></div></div>
      <div class="ov"><div class="ovl">Hours this month</div><div class="ovv tnum"><%- time.hours ? time.hours + 'h' : '<span class="noval">—</span>' %></div></div>
    </div>
  </div>

  <div class="card card-p b4">
    <div class="card-h" style="padding:0 0 12px"><h3>Commercial</h3></div>

    <div style="display:flex; flex-direction:column; gap:12px; font-size:var(--fs-sm)">
      <div class="row-between"><span>Retainer</span><span class="num strong"><%- time.mrr != null ? h.money(time.mrr, ws.subscription && ws.subscription.currency) + ' / mo' : '<span class="noval">—</span>' %></span></div>
      <div class="row-between"><span>Hours used <span class="rr-meta">this month</span></span><span class="num strong"><%- time.hours ? time.hours + ' h' : '<span class="noval">—</span>' %></span></div>
      <div class="divider"></div>
      <div class="row-between"><span>Risk level</span><span class="chip <%= ws.riskLevel==='High'?'neg':(ws.riskLevel==='Medium'?'warn':'pos') %>"><%= ws.riskLevel||'Low' %></span></div>
    </div>
    <% if (invoice) { %>
    <div class="divider" style="margin:14px 0"></div>
    <div class="row-between"><span class="rr-lbl">Invoice <%= invoice.number %></span><span class="tag pending">Pending</span></div>
    <div class="inv-amt tnum" style="margin-top:6px"><%= h.money(invoice.amount, invoice.currency || (ws.subscription && ws.subscription.currency)) %></div>
    <div class="rr-meta">due <%= h.date(invoice.dueDate) %></div>
    <% } %>
  </div>

  <div class="card shelf-c b2 sc-rose"><div class="cl">Urgent issues</div><div class="cv tnum"><%= c.urgent||0 %></div></div>
  <div class="card shelf-c b2 sc-sand"><div class="cl">Delayed tasks</div><div class="cv tnum"><%= c.delayed||0 %></div></div>
  <div class="card shelf-c b2 sc-violet"><div class="cl">AI recs open</div><div class="cv tnum"><%= c.recOpen||0 %></div></div>
  <div class="card shelf-c b2 sc-sky"><div class="cl">Content waiting</div><div class="cv tnum"><%= c.contentWaiting||0 %></div></div>
  <div class="card shelf-c b2 sc-lime"><div class="cl">New citations</div><div class="cv tnum">+<%= c.newC||0 %></div></div>
  <div class="card shelf-c b2 sc-navy"><div class="cl">Lost citations</div><div class="cv tnum"><%= c.lostC||0 %></div></div>

  <div class="card b8">
    <div class="card-h"><h3>Urgent issues</h3><span class="hint">needs action</span></div>
    <div class="card-p" style="padding-top:12px"><div class="recs">
      <% (urgent||[]).forEach(function(r){ %>
        <div class="rec alert"><div class="ricon">!</div><div style="flex:1"><div class="rtitle"><%= r.title %></div><div class="rbody"><%= r.body %></div><div class="rmeta"><span class="pri high">High</span><span class="act">Assign</span></div></div></div>
      <% }) %>
      <% if(!(urgent&&urgent.length)){ %><div class="rr-meta" style="padding:8px">Nothing urgent on this client.</div><% } %>
    </div></div>
  </div>

  <div class="card card-p b4">
    <div class="card-h" style="padding:0 0 12px"><h3>Content pipeline</h3><span class="hint"><%= (artCounts&&artCounts.total)||0 %> articles</span></div>
    <div style="display:flex; flex-direction:column; gap:14px">
      <% var a = artCounts||{}; var tot = a.total||0;
         var prows = [['Published', a.published||0],['Optimizing', a.optimizing||0],['In review', a.review||0],['Approved', a.approved||0],['Draft', a.draft||0]]; %>
      <% if(tot){ prows.forEach(function(r){ var pct = Math.round((r[1]/tot)*100); %>

        <div><div class="row-between" style="font-size:var(--fs-sm)"><span><b><%= r[0] %></b></span><span class="num"><%= r[1] %>, <%= pct %>%</span></div><div class="meter"><span style="width:<%= pct %>%"></span></div></div>
      <% }); } else { %>
        <div class="rr-meta">No articles yet. Add them in the client's Content Center.</div>
      <% } %>
    </div>
  </div>
</div>
