<%
  var mods = MODULES || {};
  function card(o, mode) {
    return { o: o, mode: mode };
  }
%>

<div id="staff-growth-view">
<div class="pg-head" style="margin-bottom:0">
  <div>
    <div class="eyebrow">Agency / Growth</div>
  </div>
  <div class="ph-right"><%- include('../partials/demo-toggle') %></div>
</div>

<h1 class="claim"><%= title %></h1>
<% if (drafts.length) { %>
  <p class="claim-lede"><em><%= drafts.length %></em> offer<%= drafts.length === 1 ? '' : 's' %> waiting on your approval.</p>
<% } else if (requested.length) { %>
  <p class="claim-lede"><em><%= requested.length %></em> client<%= requested.length === 1 ? '' : 's' %> asked for a quote.</p>
<% } else if (approved.length) { %>
  <p class="claim-lede"><em><%= approved.length %></em> offer<%= approved.length === 1 ? ' is' : 's are' %> live with clients.</p>
<% } else { %>
  <p class="claim-lede">There is nothing to offer anyone right now.</p>
<% } %>
<p class="claim-sub">Services a client isn't on yet that their own numbers support. An offer reaches the client's Grow page only after someone here approves it.</p>

<div class="qbar">
  <div class="qbar-acts">
    <a class="qact qact-lead" href="/staff/recommendations"><svg viewBox="0 0 16 16" width="15" height="15" fill="none"><path d="M8 1.8l1.8 3.9 4.2.5-3.1 2.9.8 4.2L8 11.3l-3.7 2 .8-4.2-3.1-2.9 4.2-.5z" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/></svg><span>Recommendations</span></a>
    <a class="qact" href="/staff/clients"><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><span>All clients</span></a>
    <a class="qact" href="/staff/mission-control"><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><span>Mission Control</span></a>
    <a class="qact" href="/staff/upload"><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><span>Upload centre</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>
    <form class="inline-form js-ajax-form" data-refresh="#staff-growth-view" method="POST" action="/staff/growth/generate" style="position:absolute;top:0;right:0">
      <button class="vn-cut" type="submit">Regenerate
        <svg viewBox="0 0 12 12" fill="none" width="13" height="13" aria-hidden="true"><path d="M10 6a4 4 0 11-1.2-2.85M10 1.6V4H7.6" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </button>
    </form>
    <div class="vd-k">Waiting on you</div>
    <div class="vd-row">
      <div class="vd-num tnum"><%= drafts.length %></div>
    </div>
    <div class="vd-sub">Drafted and not approved, so no client can see any of it yet.</div>
    <div class="ov-strip ov-2" style="margin-top:20px">
      <div class="ov"><div class="ovl">Live with clients</div><div class="ovv tnum"><%= approved.length %></div></div>
      <div class="ov"><div class="ovl">Quote requested</div><div class="ovv tnum"><%= requested.length %></div></div>
      <div class="ov"><div class="ovl">Won</div><div class="ovv tnum"><%= won.length %></div></div>
      <div class="ov"><div class="ovl">Dismissed</div><div class="ovv tnum"><%= dismissed.length %></div></div>
    </div>
  </div>

  <details class="aa-note b12"><summary>The stages</summary><div class="aa-note-b"><b>Waiting on you</b> is drafted but not approved, so the client cannot see it.
      <br><br><b>Live with clients</b> is on their Grow page right now.
      <br><br><b>Quote requested</b> means they asked, which opens a ticket.
      <br><br>An offer is only drafted when a measurement supports it, so some clients have none.</div></details>

<%
  var cl = clients || [];
  var svcNames = { seo: 'SEO & Content', geo: 'AI Search', content: 'Content Center', ppc: 'Paid Media' };
  var openable = cl.filter(function(c){ return c.missing.length; });
  var full = cl.filter(function(c){ return !c.missing.length; });
%>
<details class="addbox b12">
  <summary>+ Write one yourself</summary>
  <form class="addform js-ajax-form" data-refresh="#staff-growth-view" method="POST" action="/staff/growth/new">
    <div class="fld" style="width:210px"><label for="grw-new-client">Client</label>
      <select id="grw-new-client" name="workspace" required>
        <% cl.forEach(function(c){ %><option value="<%= c._id %>"><%= c.name %><%= c.isDemo ? ' (demo)' : '' %></option><% }) %>
      </select>
    </div>
    <div class="fld" style="width:190px"><label for="grw-new-svc">Service</label>
      <select id="grw-new-svc" name="svc">
        <option value="custom">Something else</option>
        <% Object.keys(svcNames).forEach(function(k){ %><option value="<%= k %>"><%= svcNames[k] %></option><% }) %>
      </select>
    </div>
    <div class="fld" style="flex:1; min-width:220px"><label for="grw-new-title">Heading the client reads</label>
      <input id="grw-new-title" name="title" placeholder="e.g. Website rebuild" required></div>
    <div class="fld" style="flex:1 1 100%"><label for="grw-new-pitch">The one line under it</label>
      <input id="grw-new-pitch" name="pitch" placeholder="Why this, for this client, in one sentence"></div>

    <div class="fld" style="flex:1 1 100%">
      <label>Evidence: <span class="rr-meta">at least one row. A label with no measured value doesn't count.</span></label>
      <% [0,1,2].forEach(function(i){ %>
        <div class="formrow" style="margin-bottom:6px">
          <div class="fld" style="flex:1; min-width:170px"><input name="evLabel" placeholder="What was measured"></div>
          <div class="fld" style="width:150px"><input name="evValue" placeholder="The value"></div>
          <div class="fld" style="width:140px"><input name="evSource" placeholder="Where from"></div>
          <div class="fld" style="width:150px"><input name="evLink" placeholder="/page to check it (optional)"></div>
        </div>
      <% }) %>
    </div>
    <div class="fld" style="width:190px"><label for="grw-new-kind">Kind</label>
      <select id="grw-new-kind" name="kind">
        <option value="measured">Argued from a number</option>
        <option value="blind-spot">Argued from a gap</option>
      </select>
    </div>
    <div style="display:flex; gap:8px; align-items:flex-end">
      <button class="btn btn-sm" type="submit" name="publish" value="0">Save as draft</button>
      <button class="btn btn-primary btn-sm" type="submit" name="publish" value="1">Save &amp; show the client</button>
    </div>
  </form>
</details>

<% if (full.length) { %>

<div class="card card-p b12" style="font-size:var(--fs-sm); color:var(--muted)">
  <b style="color:var(--ink)">Already on every service:</b>
  <%= full.map(function(c){ return c.name; }).join(', ') %>. Use <b style="color:var(--ink)">Write one yourself</b> for anything else.
</div>
<% } %>

<div class="card b12">
  <div class="card-h">
    <h3>Asked for a quote</h3>
    <span class="hint">a client is waiting on a number</span>
  </div>
  <div class="card-p" style="padding-top:12px">
    <% if (!requested.length) { %>
      <div class="rr-meta" style="text-align:center; padding:20px">Nobody is waiting.</div>
    <% } else { %>
      <div style="display:flex; flex-direction:column; gap:9px">
        <% requested.forEach(function(o){ %>
          <div class="idea">
            <div class="idea-main">
              <div class="idea-q"><%= o.workspace ? o.workspace.name : '—' %>, <%= o.title %></div>
              <div class="rr-meta" style="margin-top:3px">asked <%= h.timeAgo(o.requestedAt) %></div>
            </div>
            <div class="idea-act">
              <% if (o.ticket) { %><a class="btn btn-sm" href="/staff/view/<%= o.workspace ? o.workspace.slug : '' %>">Open portal</a><% } %>
              <form class="inline-form js-ajax-form" data-refresh="#staff-growth-view" method="POST" action="/staff/growth/<%= o._id %>/won"><button class="btn btn-primary btn-sm" type="submit">Mark won</button></form>
            </div>
          </div>
        <% }) %>
      </div>
    <% } %>
  </div>
</div>

<div class="card b12">
  <div class="card-h">
    <h3>Drafts</h3>
    <span class="hint">nothing here has been seen by a client</span>
  </div>
  <div class="card-p" style="padding-top:12px">
    <% if (!drafts.length) { %>
      <div class="rr-meta" style="text-align:center; padding:24px">
        Nothing waiting. An offer is only generated where there's a measured fact behind it, so
        clients with nothing to cite produce nothing, which is the intended outcome.
      </div>
    <% } else { %>
      <div style="display:flex; flex-direction:column; gap:14px">
        <% drafts.forEach(function(o){ var mod = mods[o.svc] || {}; %>
          <div class="card" style="border-left:3px solid var(--warn)">
            <div class="card-p">
              <div style="display:flex; align-items:baseline; gap:9px; flex-wrap:wrap">

                <b style="font-size:var(--fs-md); color:var(--ink)"><%= o.workspace ? o.workspace.name : '—' %></b>
                <span class="chip teal"><%= o.title %></span>
                <% if (o.kind === 'blind-spot') { %><span class="chip warn">argues from an absence</span><% } %>
                <span class="rr-meta" style="margin-left:auto">generated <%= h.timeAgo(o.generatedAt) %></span>
              </div>

              <div class="gc-ev" style="margin-top:12px">
                <div class="gc-ev-h">Evidence the client will see</div>
                <% (o.evidence || []).forEach(function(e){ %>
                  <div class="gc-ev-row">
                    <span class="gc-ev-l"><%= e.label %></span>
                    <b class="gc-ev-v"><%= e.value %></b>
                    <span class="rr-meta"><%= e.source ? 'from ' + e.source : '' %></span>
                  </div>
                <% }) %>
                <% if (!(o.evidence || []).length) { %>
                  <div class="rr-meta" style="color:var(--neg)">No evidence, so this cannot be approved.</div>
                <% } %>
              </div>

              <form class="js-ajax-form" data-refresh="#staff-growth-view" method="POST" action="/staff/growth/<%= o._id %>/approve" style="margin-top:12px">
                <div class="fld"><label for="<%= 'grw-appr-title-'+o._id %>">Heading the client reads</label><input id="<%= 'grw-appr-title-'+o._id %>" name="title" value="<%= o.title %>"></div>
                <div class="fld" style="margin-top:8px"><label for="<%= 'grw-appr-pitch-'+o._id %>">The one line under it (edit it to fit this account)</label>

                  <textarea id="<%= 'grw-appr-pitch-'+o._id %>" name="pitch" rows="3" style="width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:9px; background:var(--surface); font-family:inherit; font-size:var(--fs-base); color:var(--ink); line-height:1.55"><%= o.pitch %></textarea>
                </div>
                <div style="display:flex; gap:8px; align-items:center; margin-top:10px; flex-wrap:wrap">
                  <button class="btn btn-primary btn-sm" type="submit" <%= (o.evidence||[]).length ? '' : 'disabled' %>>Approve &amp; show the client</button>
                  <span class="rr-meta">Adds <%= (mod.pages || []).join(', ') || 'the module' %> to their portal once they buy it.</span>
                </div>
              </form>
              <form class="formrow js-ajax-form" data-refresh="#staff-growth-view" method="POST" action="/staff/growth/<%= o._id %>/dismiss" style="margin-top:9px">
                <div class="fld" style="flex:1; min-width:220px"><input name="reason" placeholder="Why not? (optional, and for us, not the client)"></div>
                <button class="btn btn-sm" type="submit">Dismiss</button>
              </form>
            </div>
          </div>
        <% }) %>
      </div>
    <% } %>
  </div>
</div>

<div class="card b12">
  <div class="card-h"><h3>Live with clients</h3><span class="hint">visible on their Grow page right now</span></div>
  <div style="overflow-x:auto">
    <% if (!approved.length) { %>
      <div class="card-p rr-meta" style="text-align:center; padding:24px">Nothing is showing to any client.</div>
    <% } else { %>
      <table class="tbl">
        <thead><tr><th>Client</th><th>Offer</th><th>Approved</th><th>By</th><th></th></tr></thead>
        <tbody>
          <% approved.forEach(function(o){ %>
            <tr>
              <td class="strong"><%= o.workspace ? o.workspace.name : '—' %></td>
              <td><%= o.title %><% if (o.kind === 'blind-spot') { %> <span class="chip warn">absence</span><% } %></td>
              <td class="muted"><%= h.timeAgo(o.approvedAt) %></td>
              <td class="muted"><%= o.approvedBy ? o.approvedBy.name : '—' %></td>
              <td><form class="inline-form js-ajax-form" data-refresh="#staff-growth-view" method="POST" action="/staff/growth/<%= o._id %>/unpublish"><button class="btn btn-sm" type="submit">Take down</button></form></td>
            </tr>
          <% }) %>
        </tbody>
      </table>
    <% } %>
  </div>
</div>

<% if (dismissed.length) { %>
<details class="b12">
  <summary class="more" style="cursor:pointer">Dismissed (<%= dismissed.length %>)</summary>
  <div class="card card-p" style="margin-top:9px">
    <% dismissed.forEach(function(o){ %>
      <div class="rr-meta" style="padding:4px 0">
        <b style="color:var(--ink)"><%= o.workspace ? o.workspace.name : '—' %></b>, <%= o.title %>
        <% if (o.dismissedReason) { %> (<%= o.dismissedReason %>)<% } %>
      </div>
    <% }) %>
  </div>
</details>
<% } %>
</div>
</div>
