<% function riskChip(r){ return '<span class="chip '+(r==='High'?'neg':(r==='Medium'?'warn':'pos'))+'">'+r+'</span>'; } %>
<%

  var money = locals.money || { billing: true, internal: true };

  var _rows = rows || [];
  var _high = _rows.filter(function (r) { return r.risk === 'High'; });
  var _owing = _rows.filter(function (r) { return r.unpaid; });
  var _util = utilization || [];

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

  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 _svgPlus = '<svg viewBox="0 0 16 16" width="15" height="15" fill="none"><path d="M8 3.2v9.6M3.2 8h9.6" stroke="currentColor" stroke-width="1.6" stroke-linecap="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 _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 _svgUsr  = '<svg viewBox="0 0 16 16" width="15" height="15" fill="none"><circle cx="8" cy="5.6" r="2.6" stroke="currentColor" stroke-width="1.4"/><path d="M3.2 13.4a4.8 4.8 0 0 1 9.6 0" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>';

  var _acts = [];
  _acts.push({ href: '/staff/clients/new', lb: 'Add client',   ic: _svgPlus, lead: true });
  _acts.push({ href: '/staff/clients',     lb: 'All clients',  ic: _svgGrid, n: _rows.length });
  _acts.push({ href: '/staff/upload',      lb: 'Upload centre', ic: _svgUp });
  _acts.push({ href: '/staff/time',        lb: 'Log time',     ic: _svgClk });
  _acts.push({ href: '/staff/team',        lb: 'Team',         ic: _svgUsr });
%>
<div class="pg-head" style="margin-bottom:0">
  <div>
    <div class="eyebrow">Agency</div>
  </div>
  <div class="ph-right"><%- include('../partials/demo-toggle') %></div>
</div>

<h1 class="claim"><%= title %></h1>
<% if (money.billing && agg.mrr) { %>
  <p class="claim-lede">The agency runs on <em><%= h.money(agg.mrr) %></em> a month.</p>
<% } else if (agg.clients) { %>
  <p class="claim-lede"><em><%= agg.clients %></em> client<%= agg.clients === 1 ? '' : 's' %> on the books.</p>
<% } else { %>
  <p class="claim-lede">No client is set up yet.</p>
<% } %>
<p class="claim-sub"><%
  if (agg.clients) { %><%= h.dateLong(new Date()) %>. <%= _high.length %> client<%= _high.length === 1 ? '' : 's' %> flagged at high risk, <%= locals.dueTodayCount || 0 %> task<%= locals.dueTodayCount === 1 ? '' : 's' %> due or overdue.<%
  } else { %>Add the first client to fill in this page.<% }
%></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 %><% if (a.n) { %> <b class="qn"><%= a.n %></b><% } %></span></a>
    <% }) %>
  </div>
</div>

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

  <div class="vdark vd-cut vd-cut-sm b8">
    <span class="vn-fillet"></span>
    <a class="vn-cut" href="/staff/mission-control">Mission Control
      <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"><%= money.billing ? 'Recurring revenue' : 'Active clients' %></div>
    <div class="vd-row">
      <div class="vd-num tnum"><% if (money.billing) { %><%- agg.mrr ? h.money(agg.mrr) : '<span class="noval">—</span>' %><% } else { %><%- num(agg.clients) %><% } %></div>
    </div>
    <div class="vd-sub"><b><%= agg.clients %></b> active client<%= agg.clients === 1 ? '' : 's' %><%= agg.atRisk ? ', ' + agg.atRisk + ' at risk' : '' %><%= (money.billing && agg.mrrUnset) ? ', ' + agg.mrrUnset + ' with no retainer set' : '' %><%= (money.billing && agg.mrrOff) ? '. ' + agg.mrrOff + ' paused or ended, not counted' : '' %>.</div>

    <div class="ov-strip ov-2" style="margin-top:20px">
      <div class="ov"><div class="ovl">Active clients</div><div class="ovv tnum"><%- num(agg.clients) %></div></div>

      <div class="ov"><div class="ovl">Avg AI Visibility</div><div class="ovv tnum"><%- num(agg.avgVis) %></div></div>
      <div class="ov"><div class="ovl">Hours this month</div><div class="ovv tnum"><%- num(agg.hours) %></div></div>
      <div class="ov"><div class="ovl">At risk</div><div class="ovv tnum"><%- num(agg.atRisk) %></div></div>
      <% if (money.billing) { %>
        <div class="ov"><div class="ovl">Unpaid</div><div class="ovv tnum"><%- agg.unpaid ? h.money(agg.unpaid) : '<span class="noval">—</span>' %></div></div>
      <% } %>
    </div>
  </div>

  <div class="card card-p b4">
    <div class="card-h" style="padding:0 0 12px"><h3>Revenue</h3><span class="hint">recurring</span></div>

    <div class="row-between"><span class="rr-meta">MRR, active clients</span><span class="disp tnum" style="font-weight:700; font-size:var(--fs-xl)"><%- agg.mrr ? h.money(agg.mrr) : '<span class="noval">—</span>' %></span></div>
    <div class="row-between" style="margin-top:12px"><span class="rr-meta">Active clients</span><span class="num strong"><%- num(agg.clients) %></span></div>
    <% if (money.billing) { %>
    <div class="row-between" style="margin-top:10px"><span class="rr-meta">Unpaid</span><span class="num strong" style="<%= agg.unpaid?'color:var(--warn-ink)':'' %>"><%- agg.unpaid ? h.money(agg.unpaid) : '<span class="noval">—</span>' %></span></div>
    <% } %>
    <div class="rr-meta" style="margin-top:14px">Contracted retainers only<%= (money.billing && agg.mrrUnset) ? '. ' + agg.mrrUnset + ' client' + (agg.mrrUnset===1?' has':'s have') + ' no retainer set yet' : '' %><%= (money.billing && agg.mrrOff) ? '. ' + agg.mrrOff + ' paused or ended client' + (agg.mrrOff===1?' is':'s are') + ' left out' : '' %>.</div>
  </div>

  <div class="card shelf-c b3 sc-violet"><div class="cl">Clients at high risk</div><div class="cv tnum"><%= _high.length %></div></div>
  <div class="card shelf-c b3 sc-lime"><div class="cl">Tasks due or overdue</div><div class="cv tnum"><%= locals.dueTodayCount || 0 %></div></div>
  <div class="card shelf-c b3 sc-navy"><div class="cl">People logging time</div><div class="cv tnum"><%= _util.length %></div></div>
  <div class="card shelf-c b3 sc-sky"><div class="cl"><%= money.billing ? 'Clients owing money' : 'Clients measured' %></div><div class="cv tnum"><%= money.billing ? _owing.length : _rows.filter(function(r){ return r.aiVis != null; }).length %></div></div>

  <div class="card b8">
    <div class="card-h"><h3>Clients needing attention</h3><span class="hint">sorted by risk</span><span class="rr-end"><a class="more" href="/staff/clients">All clients</a><%- h.ihelp('What risk means here',
      'Risk is set by the delivery team and is never shown to the client.<br><br>A dash in <b>AI Vis.</b> or <b>SEO</b> means that client has not been measured yet.') %></span></div>
    <div style="overflow-x:auto">
      <% if (_rows.length) { %>
      <table class="tbl"><thead><tr><th>Client</th><th>AI Vis.</th><th>SEO</th><th>Risk</th><th>Open</th><% if (money.billing) { %><th>Unpaid</th><% } %><th></th></tr></thead><tbody>
        <% _rows.slice().sort(function(a,b){ var o={High:0,Medium:1,Low:2}; return o[a.risk]-o[b.risk]; }).forEach(function(r){ %>
          <tr><td class="strong"><%= r.ws.name %></td><td class="num"><%- num(r.aiVis) %></td><td class="num"><%- num(r.seo) %></td><td><%- riskChip(r.risk) %></td><td class="num"><%= r.openTasks %></td><% if (money.billing) { %><td class="num" style="<%= r.unpaid?'color:var(--warn-ink)':'' %>"><%- r.unpaid ? h.money(r.unpaid) : '<span class="noval">—</span>' %></td><% } %><td><a class="more" href="/staff/mission-control?w=<%= r.ws.slug %>">Open</a></td></tr>
        <% }) %>
      </tbody></table>
      <% } else { %>
      <%- include('../partials/empty', { title: 'No clients yet', line: 'Clients appear here once they are added.', cta: { href: '/staff/clients/new', label: 'Add client' } }) %>
      <% } %>
    </div>
  </div>

  <% if (money.hours) { %>
  <div class="card card-p b4">
    <div class="card-h" style="padding:0 0 12px"><h3>Team utilization</h3><span class="hint">this month</span><span class="rr-end"><a class="more" href="/staff/time">Log time</a></span></div>
    <% if (!_util.length) { %>
      <div class="rr-meta">No time logged this month yet.</div>
    <% } else { %>
      <div style="display:flex; flex-direction:column; gap:11px">
        <% var top = _util[0].minutes || 1; %>
        <% _util.forEach(function(u){ %>
          <div>
            <div class="row-between"><span><%= u.user.name %></span><span class="num"><%= u.hours %>h</span></div>
            <div class="meter" style="margin-top:5px"><span class="grad" style="width:<%= Math.max(4, Math.round(u.minutes/top*100)) %>%"></span></div>
            <div class="rr-meta"><%= u.billablePct %>% billable</div>
          </div>
        <% }) %>
      </div>
    <% } %>
  </div>
  <% } %>

  <div class="card b12">
    <div class="card-h"><h3>Due or overdue</h3><span class="hint"><%= (locals.dueTodayCount || 0) > (dueToday || []).length ? (dueToday || []).length + ' of ' + dueTodayCount + ' shown' : '' %></span></div>
    <div class="feed">
      <% if (!(dueToday || []).length) { %><div class="rr-meta" style="padding:18px 4px">Nothing is due today.</div><% } %>
      <% (dueToday || []).forEach(function(t){ %>
        <div class="fi"><%- include('../partials/avatar', { url: t.owner && t.owner.avatarUrl, initials: (t.owner && t.owner.initials) || '—', color: t.owner && t.owner.avatarColor, name: t.owner && t.owner.name, cls: 'fav' }) %><div><div class="ft"><b><%= t.title %></b>, <%= t.workspace?t.workspace.name:'' %></div><div class="ftime"><% var _od = t.due && new Date(t.due) < new Date(new Date().setHours(0,0,0,0)); %><%= _od ? 'Overdue since ' + h.date(t.due) : 'Due today' %><%= t.priority==='high' ? ', high priority' : '' %></div></div></div>
      <% }) %>
    </div>
  </div>
</div>
