<%
  var money = locals.money || { billing: true, internal: true };
  var mine  = !!locals.mine;

  var _entries = entries || [];
  var _billMin = 0, _wsSeen = {};
  _entries.forEach(function (e) {
    if (e.billable) _billMin += (e.minutes || 0);
    if (e.workspace && e.workspace.name) _wsSeen[e.workspace.name] = true;
  });
  var _billH   = Math.round(_billMin / 6) / 10;
  var _wsCount = Object.keys(_wsSeen).length;

  var _st = locals.stats || null;
  var _nEntries = _st ? _st.entries : _entries.length;
  if (_st) { _billH = _st.billableHours; _wsCount = _st.clients; }

  var _mParts = /^(\d{4})-(\d{2})$/.exec(String(month));
  var _mLabel = _mParts
    ? new Date(Number(_mParts[1]), Number(_mParts[2]) - 1, 1).toLocaleDateString('en-GB', { month: 'long', year: 'numeric' })
    : '';
  var _mIn = _mLabel ? 'in ' + _mLabel : 'this month';

  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 _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 _svgDial = '<svg viewBox="0 0 16 16" width="15" height="15" fill="none"><circle cx="8" cy="8" r="5.9" stroke="currentColor" stroke-width="1.3"/><circle cx="8" cy="8" r="2.6" stroke="currentColor" stroke-width="1.3"/></svg>';

  var _acts = [];

  _acts.push({ href: '/staff/team',            lb: 'Team',            ic: _svgUsr });
  _acts.push({ href: '/staff/clients',         lb: 'All clients',     ic: _svgGrid });
  _acts.push({ href: '/staff/mission-control', lb: 'Mission Control', ic: _svgDial });

  if (_acts.length && !_acts.some(function (a) { return a.lead; })) _acts[0].lead = true;
%>

<div id="staff-time-view">
<div class="pg-head" style="margin-bottom:0">
  <div>
    <div class="eyebrow">Operations</div>
  </div>
  <div class="ph-right">
    <%- include('../partials/demo-toggle') %>
    <form method="GET" action="/staff/time" class="inline-form" style="gap:8px">
      <input class="picker" type="month" name="month" value="<%= month %>" onchange="this.form.submit()">
    </form>
  </div>
</div>

<h1 class="claim"><%= title %></h1>
<% if (totals.hours && mine) { %>
  <p class="claim-lede">You logged <em><%= totals.hours %></em> hours <%= _mIn %>.</p>
<% } else if (totals.hours) { %>
  <p class="claim-lede"><em><%= totals.hours %></em> hours logged <%= _mIn %>.</p>
<% } else { %>
  <p class="claim-lede">Nothing has synced from Clockify <%= _mIn %> yet.</p>
<% } %>
<p class="claim-sub"><%
  if (mine) { %>Your hours from Clockify, synced every 15 minutes.<%
  } else { %>Hours from Clockify, synced every 15 minutes. Clients never see 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 %></span></a>
    <% }) %>
  </div>
</div>

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

  <div class="vdark vd-cut vd-cut-sm b12">
    <span class="vn-fillet"></span>
    <% if (money.hours) { %>
      <form class="inline-form js-async-run" method="POST" action="/staff/clockify/sync" style="position:absolute;top:0;right:0">
        <% if (filters.w) { %><input type="hidden" name="slug" value="<%= filters.w %>"><% } %>
        <button class="vn-cut" type="submit"><%= filters.w ? 'Sync this client' : 'Sync now' %>
          <%- _svgClk %>
        </button>
      </form>
    <% } %>
    <div class="vd-k"><%= mine ? 'Your hours' : 'Hours logged' %></div>
    <div class="vd-row">
      <div class="vd-num tnum"><%- totals.hours ? totals.hours + 'h' : '<span class="noval">—</span>' %></div>
    </div>
    <div class="vd-sub">Synced from Clockify for <%= _mLabel || 'this month' %>.</div>

    <div class="ov-strip ov-2" style="margin-top:20px">
      <div class="ov"><div class="ovl">Entries</div><div class="ovv tnum"><%- _nEntries ? _nEntries : '<span class="noval">—</span>' %></div></div>
      <div class="ov"><div class="ovl">Clients touched</div><div class="ovv tnum"><%- _wsCount ? _wsCount : '<span class="noval">—</span>' %></div></div>
      <% if (money.hours) { %>
      <div class="ov"><div class="ovl">Retainers</div><div class="ovv tnum"><%- totals.mrr ? h.money(totals.mrr) : '<span class="noval">—</span>' %></div>
        <% if (totals.mrrUnset) { %><div class="rr-meta" style="margin-top:5px"><%= totals.mrrUnset %> client<%= totals.mrrUnset===1?'':'s' %> not set, not counted</div><% } %>
        <% if (totals.mrrOff) { %><div class="rr-meta" style="margin-top:5px"><%= totals.mrrOff %> paused or ended, not counted</div><% } %></div>
      <div class="ov"><div class="ovl">People logging</div><div class="ovv tnum"><%- (util||[]).length ? (util||[]).length : '<span class="noval">—</span>' %></div></div>
      <% } %>
    </div>
  </div>

  <details class="aa-note b12"><summary>Reading these hours</summary><div class="aa-note-b">Entries come from the Clockify project linked in each client's <b>Settings › Connections</b>. A client with no project linked shows no hours.
      <br><br>
      Filters narrow the entry list only. The figures above always cover the whole month in the picker.</div></details>

  <div class="card shelf-c b3 sc-violet"><div class="cl"><%= mine ? 'Your hours' : 'Hours logged' %></div><div class="cv tnum"><%- totals.hours ? totals.hours : '<span class="noval">—</span>' %></div></div>
  <div class="card shelf-c b3 sc-lime"><div class="cl">Billable hours</div><div class="cv tnum"><%- _billH ? _billH : '<span class="noval">—</span>' %></div></div>
  <div class="card shelf-c b3 sc-navy"><div class="cl">Entries</div><div class="cv tnum"><%- _nEntries ? _nEntries : '<span class="noval">—</span>' %></div></div>
  <div class="card shelf-c b3 sc-sky"><div class="cl">Clients touched</div><div class="cv tnum"><%- _wsCount ? _wsCount : '<span class="noval">—</span>' %></div></div>

  <div class="card b12">
    <div class="card-h">
      <h3>Entries</h3><span class="hint"><% if (_nEntries > _entries.length) { %>latest <%= _entries.length %> of <%= _nEntries %><% } else { %><%= _entries.length %><% } %> <%= _mLabel ? 'in ' + _mLabel : 'this month' %></span>
      <form method="GET" action="/staff/time" class="inline-form" style="margin-left:auto; gap:8px">
        <input type="hidden" name="month" value="<%= month %>">
        <select class="picker picker-sm" name="w" onchange="this.form.submit()">
          <option value="">All clients</option>
          <% workspaces.forEach(function(w){ %><option value="<%= w.slug %>" <%= filters.w===w.slug?'selected':'' %>><%= w.name %><%= w.isDemo ? ' (demo)' : '' %></option><% }) %>
        </select>
        <% if (!mine) { %>
        <select class="picker picker-sm" name="who" onchange="this.form.submit()">
          <option value="">Everyone</option>
          <% staff.forEach(function(s){ %><option value="<%= s._id %>" <%= String(filters.who)===String(s._id)?'selected':'' %>><%= s.name %></option><% }) %>
        </select>
        <% } %>
      </form>
    </div>
    <% if(!_entries.length){ %>
      <div class="card-p rr-meta" style="text-align:center; padding:34px">Nothing logged for this month yet<%= (filters.w||filters.who) ? ' with these filters' : '' %>.</div>
    <% } else { %>
    <div style="overflow-x:auto">
      <table class="tbl">
        <thead><tr><th>Date</th><% if (!mine) { %><th>Who</th><% } %><th>Client</th><th>Work</th><th>Hours</th><th></th></tr></thead>
        <tbody>
          <% _entries.forEach(function(e){ var hrs = Math.round(e.minutes/6)/10; %>
            <tr>
              <td class="muted" style="white-space:nowrap"><%= h.date(e.date) %></td>
              <% if (!mine) { %><td><%- include('../partials/avatar', { url: e.user && e.user.avatarUrl, initials: (e.user && e.user.initials) || '—', color: e.user && e.user.avatarColor, name: e.user && e.user.name, cls: 'fav', size: 22, style: 'display:inline-flex;vertical-align:middle;margin-right:7px;' }) %><%= e.user ? e.user.name : '—' %></td><% } %>
              <td class="muted"><%= e.workspace ? e.workspace.name : '—' %></td>
              <td>
                <%= e.note || (e.task ? e.task.title : '—') %>
                <% if(!e.billable){ %> <span class="chip flat">internal</span><% } %>
              </td>
              <td class="num"><%= hrs %></td>
              <td><% if (e.source === 'clockify') { %><span class="rr-meta" title="Synced from Clockify (remove it there)">synced</span><% } else if (money.hours || String(e.user && e.user._id) === String(currentUser._id)) { %><form method="POST" action="/staff/time/<%= e._id %>/delete" class="inline-form js-delete-form" data-confirm="Remove this entry?" data-refresh="#staff-time-view"><button class="icon-btn" title="Remove" aria-label="Remove time entry">&times;</button></form><% } %></td>
            </tr>
          <% }) %>
        </tbody>
      </table>
    </div>
    <% } %>
  </div>

  <% if (money.hours) { %>

  <div class="card card-p b6">
    <div class="card-h" style="padding:0 0 12px"><h3>By client</h3><span class="hint"><%= _mLabel || 'this month' %></span></div>
    <% var any = (perClient||[]).some(function(c){ return c.hours > 0; }); %>
    <% if(!any){ %><div class="rr-meta">No time logged yet for this month.</div><% } %>
    <div style="display:flex; flex-direction:column; gap:12px">
      <% (perClient||[]).filter(function(c){ return c.hours > 0; }).forEach(function(c){ %>
        <div>
          <div class="row-between"><span style="font-weight:600"><%= c.ws.name %><% if (c.ws.isDemo) { %> <span class="chip flat">Demo</span><% } %></span><span class="num"><%= c.hours %>h</span></div>
          <div class="rr-meta">retainer <%- c.mrr != null ? h.money(c.mrr) : '<span class="noval">—</span>' %></div>
        </div>
      <% }) %>
    </div>
  </div>

  <div class="card card-p b6">
    <div class="card-h" style="padding:0 0 12px"><h3>By person</h3><span class="hint"><%= _mLabel || 'this month' %></span></div>
    <% if(!(util||[]).length){ %><div class="rr-meta">Nobody has logged time for this month.</div><% } %>
    <div style="display:flex; flex-direction:column; gap:11px">
      <% var top = (util||[]).length ? 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>
</div>
