<%

function pct(g){ if(!g.target) return 0; return Math.min(100, Math.round(((g.current||0)/g.target)*100)); }
var canManage = locals.showStaff;

var onTrack  = goals.filter(function(g){ return g.status==='on_track' || g.status==='achieved'; }).length;
var atRisk   = goals.filter(function(g){ return g.status==='at_risk'; }).length;
var achieved = goals.filter(function(g){ return g.status==='achieved'; }).length;

var holding  = goals.filter(function(g){ return g.status==='on_track'; }).length;

var whoHelp = h.ihelp('Who sets these',
  'Your VOCTOS team sets the targets and marks each goal on track or not. '
  + 'Progress comes from AI Visibility, SEO Performance and Citation Center.'
  + '<br><br>If a target looks wrong, message your team.');
%>
<div class="pg-head" style="margin-bottom:0">
  <div>
    <div class="eyebrow">Overview / Goals</div>

  </div>
  <div class="ph-right">
    <%- include('../partials/range-picker') %></div>
</div>

<h1 class="claim"><%= title %></h1>
<% if (goals.length && onTrack) { %>
  <p class="claim-lede">You are on track for <em><%= onTrack %></em> of <%= goals.length %> goal<%= goals.length===1?'':'s' %>.</p>
<% } else if (goals.length) { %>
  <p class="claim-lede">None of your goals is on track yet.</p>
<% } else { %>
  <p class="claim-lede">No goals set yet.</p>
<% } %>
<%

  var _bits = [];
  if (atRisk)   _bits.push('<b>' + atRisk + '</b> flagged at risk');
  if (achieved) _bits.push('<b>' + achieved + '</b> already achieved');
  var _tone = atRisk ? 'warn' : 'pos';
%>
<% if (goals.length && _bits.length) { %>
  <%- include('../partials/claim-alert', { html: _bits.join(', ') + '.', tone: _tone }) %>
<% } %>

<p class="claim-sub"><% if (goals.length) { %>Targets and progress, set by your VOCTOS team.<% } else { %>Your VOCTOS team sets these from your measured pages.<% } %></p>

<% if (canManage) { %>

<% var _addOpen = !!(locals.query && locals.query.new); %>
<div class="card card-p" id="newgoal" style="margin-top:22px"<%= _addOpen ? '' : ' hidden' %>>
  <div class="card-h" style="padding:0 0 12px"><h3>New goal</h3><span class="rr-end"><a class="more js-panel-cancel" data-panel="#newgoal" href="/goals">Cancel</a></span></div>

  <form class="addform gform js-ajax-form" id="newgoalform" method="POST" action="/api/goals"
        data-refresh="#goals-body" data-hide-after="#newgoal" data-reset-after="#newgoalform">
    <input class="gkind-r" type="radio" name="kind" id="gk-metric" value="metric" checked>
    <input class="gkind-r" type="radio" name="kind" id="gk-mile" value="milestone">

    <div class="gkind" role="group" aria-label="Kind of goal">
      <label for="gk-metric"><b>A number to reach</b><span>90 AI Visibility, 40 citations</span></label>
      <label for="gk-mile"><b>Something to finish</b><span>a piece of work, by a date</span></label>
    </div>

    <div class="gfields">
      <div class="fld" style="flex:1;min-width:220px"><label for="goal-new-name">Goal</label><input id="goal-new-name" name="name" placeholder="e.g. Reach 90 AI Visibility" required></div>

      <div class="only-metric fld" style="width:90px"><label for="goal-new-current">Current</label><input id="goal-new-current" name="current" type="number" value="0"></div>
      <div class="only-metric fld" style="width:90px"><label for="goal-new-target">Target</label><input id="goal-new-target" name="target" type="number"></div>
      <div class="only-metric fld" style="width:70px"><label for="goal-new-unit">Unit</label><input id="goal-new-unit" name="unit" placeholder="% / k"></div>

      <div class="only-mile fld" style="width:170px"><label for="goal-new-due">By when <span class="opt">optional</span></label><input id="goal-new-due" name="due" type="date"></div>

      <div class="fld" style="flex:1;min-width:200px"><label for="goal-new-forecast">Note <span class="opt">optional</span></label><input id="goal-new-forecast" name="forecast" placeholder="On pace, ~6 weeks"></div>
      <button class="btn btn-primary btn-sm" type="submit">Add goal</button>
    </div>
  </form>
</div>
<% } %>

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

  <% if (goals.length) { %>

  <div class="vdark vd-cut b12">
    <span class="vn-fillet"></span>
    <% if (canManage) { %>

      <a class="vn-cut js-panel-open" data-panel="#newgoal" href="/goals?new=1#newgoal">New goal
        <svg viewBox="0 0 12 12" fill="none" width="13" height="13" aria-hidden="true"><path d="M6 2.4v7.2M2.4 6h7.2" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
      </a>
    <% } else { %>

      <a class="vn-cut" href="/messages">Ask your team
        <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">On track <%- whoHelp %></div>

    <div class="vd-row">
      <div class="vd-num tnum"><%= onTrack %><small> of <%= goals.length %></small></div>
    </div>

    <div class="vd-sub">An achieved goal counts as on track.</div>

  </div>

  <div class="card shelf-c b6 sc-lime"><div class="cl">At risk</div><div class="cv tnum"><%= atRisk %></div></div>
  <div class="card shelf-c b6 sc-navy"><div class="cl">Achieved</div><div class="cv tnum"><%= achieved %></div></div>

  <% goals.forEach(function(g){ var p = pct(g); var isMile = g.kind === 'milestone'; %>
    <div class="card goal b6">

      <% if (isMile) { %>
        <div class="g-top"><span class="g-name"><%= g.name %></span><span class="g-chip <%= g.status %>"><%= g.status==='achieved' ? 'Done' : (g.status==='at_risk' ? 'At risk' : 'In progress') %></span></div>
        <div class="g-when tnum"><% if (g.due) { %><%= h.dateLong ? h.dateLong(g.due) : h.date(g.due) %><% } else { %>No date set<% } %></div>
      <% } else { %>
        <div class="g-top"><span class="g-name"><%= g.name %></span><span class="g-val tnum"><%= g.current %><%= g.unit %> / <%= g.target %><%= g.unit %></span></div>
        <div class="gbar"><span style="width:<%= p %>%; <%= g.status==='at_risk'?'background:var(--warn)':'' %>"></span></div>
      <% } %>
      <div class="g-foot" style="<%= g.status==='at_risk'?'color:var(--warn-ink)':'' %>"><% if(g.status==='achieved' && !isMile){ %><b>Achieved</b>: <% } %><%= g.forecast %></div>
      <% if (canManage) { %>
      <div style="display:flex; gap:6px; align-items:center; margin-top:12px; padding-top:12px; border-top:1px solid var(--line-2)">
        <form method="POST" action="/api/goals/<%= g._id %>/update" class="inline-form js-ajax-form" data-refresh="#goals-body" style="display:flex; gap:6px; align-items:center">

          <% if (isMile) { %>
            <input name="due" type="date" value="<%= g.due ? new Date(g.due).toISOString().slice(0,10) : '' %>" style="width:140px;padding:6px 9px;border:1px solid var(--line);border-radius:8px;font-size:var(--fs-sm)" title="Due date (clear it to remove)">
          <% } else { %>
            <input name="current" type="number" value="<%= g.current %>" style="width:74px;padding:6px 9px;border:1px solid var(--line);border-radius:8px;font-size:var(--fs-sm)" title="Current value">
          <% } %>
          <select name="status" style="padding:6px 9px;border:1px solid var(--line);border-radius:8px;font-size:var(--fs-sm)"><option value="on_track" <%= g.status==='on_track'?'selected':'' %>><%= isMile ? 'In progress' : 'On track' %></option><option value="at_risk" <%= g.status==='at_risk'?'selected':'' %>>At risk</option><option value="achieved" <%= g.status==='achieved'?'selected':'' %>><%= isMile ? 'Done' : 'Achieved' %></option></select>
          <button class="btn btn-sm" style="padding:6px 12px" type="submit">Save</button>
        </form>
        <form method="POST" action="/api/goals/<%= g._id %>/delete" class="inline-form js-delete-form" data-confirm="Delete this goal?" data-refresh="#goals-body" style="margin-left:auto"><button class="icon-btn" title="Delete" aria-label="Delete goal">&times;</button></form>
      </div>
      <% } %>
    </div>
  <% }) %>

  <% } else { %>

  <div class="voff b12">
    <div class="voff-h"><b>No goals yet.</b> Your VOCTOS team sets them. <%- whoHelp %></div>
    <div class="voff-i">
      <span class="n">Targets, progress and status</span>

      <% if (canManage) { %><a class="js-panel-open" data-panel="#newgoal" href="/goals?new=1#newgoal">Set the first goal</a><% } else { %><a href="/messages">Ask your team to set them</a><% } %>
    </div>
  </div>
  <% } %>
</div>
