<%
function typeTag(t){ var m={urgent:'background:var(--neg);color:#fff',bug:'background:var(--neg);color:#fff',request:'background:var(--navy-tint);color:var(--navy)',feature:'background:var(--teal-tint);color:var(--teal-600)',question:'background:var(--surface-2);color:var(--muted)'}; return '<span class="ktag" style="'+(m[t]||m.question)+'">'+t.charAt(0).toUpperCase()+t.slice(1)+'</span>'; }

var canManage = locals.showStaff;

var _all      = tickets || [];

var _total    = (typeof total === 'number') ? total : _all.length;
var _open     = (typeof openAll === 'number') ? openAll : _all.filter(function(t){ return t.status === 'open'; }).length;
var _resolved = Math.max(0, _total - _open);

var rm = locals.reqMod || null;
var subj = rm ? ('Request: ' + rm.name) : '';
var detail = rm ? (rm.line || '') : '';

var _openForm = rm || (locals.query && locals.query.new);

var _arrow = '<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>';
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 _svgMsg  = '<svg viewBox="0 0 16 16" width="15" height="15" fill="none"><path d="M13.6 10.2a1.4 1.4 0 0 1-1.4 1.4H4.9L2.4 14V3.2a1.4 1.4 0 0 1 1.4-1.4h8.4a1.4 1.4 0 0 1 1.4 1.4z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg>';
var _svgList = '<svg viewBox="0 0 16 16" width="15" height="15" fill="none"><path d="M5.4 4.2h8M5.4 8h8M5.4 11.8h8M2.6 4.2h.01M2.6 8h.01M2.6 11.8h.01" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>';

var _svgCheck = '<svg viewBox="0 0 16 16" width="11" height="11" fill="none"><path d="M3.4 8.4l3 3 6.2-6.8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';

var _acts = [];

_acts.push({ href:'/messages', lb: canManage ? 'Messages' : 'Message us', ic:_svgMsg });
_acts.push({ href:'/roadmap',  lb:'The plan', ic:_svgList });

  if (_acts.length && !_acts.some(function (a) { return a.lead; })) _acts[0].lead = true;
%>
<div class="pg-head" style="margin-bottom:0">
  <div>
    <div class="eyebrow">Business</div>
  </div>
  <div class="ph-right">
    <%- include('../partials/range-picker') %></div>
</div>

<h1 class="claim"><%= title %></h1>
<% if (_open) { %>
  <p class="claim-lede"><em><%= _open %></em> ticket<%= _open===1?'':'s' %> still open with <%= canManage ? 'this client' : 'your team' %>.</p>
<% } else if (_total) { %>
  <p class="claim-lede">No open tickets. <%= _total === 1 ? 'The one ticket raised has' : 'All ' + _total + ' tickets have' %> been resolved.</p>
<% } else { %>
  <p class="claim-lede">No tickets yet.</p>
<% } %>
<p class="claim-sub">Report a bug, ask a question or request work. Replies land here. <%- h.ihelp('What to expect',
  'Tickets go to your delivery team, and replies also appear in notifications. '
  + 'If a ticket needs work, it becomes a task and the ticket links to it.') %></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" id="tickets-body" style="margin-top:22px">

  <div class="vdark vd-cut vd-cut-sm b12">
    <span class="vn-fillet"></span>
    <a class="vn-cut js-panel-open" data-panel="#newticket" href="/tickets?new=1#newticket">New ticket <%- _arrow %></a>
    <div class="vd-k">Open tickets</div>
    <div class="vd-row">
      <div class="vd-num tnum"><%= _open %></div>
    </div>
    <div class="vd-sub">Waiting on a reply or a fix.</div>
    <div class="ov-strip ov-2" style="margin-top:20px">
      <div class="ov"><div class="ovl">Resolved</div><div class="ovv tnum"><%= _resolved %></div></div>
      <div class="ov"><div class="ovl">Raised, all time</div><div class="ovv tnum"><%= _total %></div></div>
    </div>
  </div>

  <div class="grid b12 split-320" style="align-items:start">
    <div class="card">

      <div class="card-h"><h3>Tickets</h3><span class="hint"><%= _open %> open<%
        if (typeof total !== 'undefined' && total > _all.length) { %> · <%= _all.length %> of <%= h.int(total) %><% } %></span></div>
      <div class="card-p" style="display:flex; flex-direction:column; gap:8px; padding-top:12px">
        <% _all.forEach(function(t){ var isActive = active && String(active._id)===String(t._id); %>
          <a href="/tickets?t=<%= t._id %>" style="border:1px solid <%= isActive?'var(--teal)':'var(--line)' %>; <%= isActive?'background:var(--teal-tint);':'' %> <%= t.status==='resolved'?'opacity:.65;':'' %> border-radius:var(--r); padding:12px; display:block">
            <div class="row-between"><%- typeTag(t.type) %><span class="rr-meta">#<%= t.number %></span></div>

            <div style="font-weight:600; font-size:var(--fs-sm); margin-top:8px"><%= t.subject %></div>
            <% if (t.status === 'resolved') { %>
              <div style="margin-top:8px"><span class="chip pos"><%- _svgCheck %>Resolved</span></div>
            <% } else { %>
              <div class="rr-meta" style="margin-top:8px">Updated <%= h.timeAgo(t.updatedAt) %></div>
            <% } %>
          </a>
        <% }) %>
        <% if (!_all.length) { %>

          <% if (typeof total !== 'undefined' && total) { %>
            <div class="rr-meta">Nothing raised in <%= range.label.toLowerCase() %>.
              <b><%= h.int(total) %></b> ticket<%= total === 1 ? '' : 's' %> in total. Choose a longer period to see them.</div>
          <% } else { %>
            <div class="rr-meta">No tickets yet.</div>
          <% } %>
        <% } %>
      </div>
    </div>

    <div class="card" style="display:flex; flex-direction:column; min-height:520px">
      <% if (active) { %>
      <div class="card-h" style="padding-bottom:16px; box-shadow:inset 0 -1px 0 var(--line)"><%- typeTag(active.type) %><h3 style="margin-left:4px"><%= active.subject %></h3><span class="more" style="cursor:default;margin-left:auto">#<%= active.number %> · <% if (active.status==='open') { %><span class="chip flat">Open</span><% } else { %><span class="chip pos"><%- _svgCheck %>Resolved</span><% } %></span><% if (active.status==='open' && canManage) { %><form class="inline-form js-ajax-form" data-refresh="#tickets-body" method="POST" action="/api/tickets/<%= active._id %>/resolve" style="margin-left:8px"><button class="btn btn-sm" type="submit">Resolve</button></form><% } %></div>

      <% if (locals.outsideRange) { %>
        <div class="rr-meta" style="padding:10px 16px; background:var(--warn-tint,rgba(255,190,80,.12)); border-bottom:1px solid var(--line)">
          This ticket was raised outside <b><%= range.label.toLowerCase() %></b>, so it isn't in the list.
        </div>
      <% } %>
      <div class="chat" style="flex:1">
        <% (active.messages||[]).forEach(function(m){ var mine = m.senderRole==='client'; %>
          <div class="msg-row <%= mine?'me':'' %>">
            <span class="msg-av" style="background:<%= mine?'var(--navy)':'var(--grad)' %>"><%= (m.senderName||'?').split(' ').map(function(w){return w[0]}).join('').slice(0,2) %></span>
            <div><div class="bubble"><%= m.body %></div><div class="msg-time"><%= m.senderName %> · <%= h.time(m.at) %></div></div>
          </div>
        <% }) %>
      </div>

      <% if (active.status === 'resolved') { %>
        <div class="card-p muted" style="text-align:center; box-shadow:inset 0 1px 0 var(--line)">This ticket is resolved. Open a new ticket if you need anything else.</div>
      <% } else { %>
      <form method="POST" action="/api/tickets/<%= active._id %>/reply" class="js-ajax-form" data-refresh="#tickets-body" style="padding:14px 18px; box-shadow:inset 0 1px 0 var(--line); display:flex; gap:10px">
        <input name="body" class="search" style="max-width:none; flex:1" placeholder="Write a reply…" autocomplete="off" required>
        <button class="btn btn-primary btn-sm" type="submit">Send</button>
      </form>
      <% } %>
      <% } else { %>

        <% if (_all.length) { %><div class="card-p muted">Pick a ticket from the list to read it.</div>
        <% } else if (!_total) { %><%- include('../partials/empty', { title: 'No tickets yet', line: 'Report a bug, ask a question or request work.', cta: { href: '/tickets?new=1#newticket', label: 'New ticket', cls: 'js-panel-open', attrs: ' data-panel="#newticket"' } }) %><% } %>
      <% } %>
    </div>
  </div>

  <div class="card card-p b12" id="newticket"<%= _openForm ? '' : ' hidden' %>>
    <div class="card-h" style="padding:0 0 12px"><h3>New ticket</h3><span class="rr-end"><a class="more js-panel-cancel" data-panel="#newticket" href="/tickets">Cancel</a></span></div>
    <% if (rm) { %>
      <div class="rr-meta" style="margin-top:10px;max-width:720px">You're asking for <b style="color:var(--ink)"><%= rm.name %></b>: <%= rm.value || rm.line %> Nothing is billed until you approve it.</div>
    <% } %>

    <form class="addform js-ajax-form" id="newticketform" method="POST" action="/api/tickets"
          data-refresh="#tickets-body" data-hide-after="#newticket" data-reset-after="#newticketform">
      <div class="fld" style="flex:1;min-width:240px"><label for="ticket-new-subject">Subject</label><input id="ticket-new-subject" name="subject" value="<%= subj %>" placeholder="Briefly describe the issue" required></div>
      <div class="fld"><label for="ticket-new-type">Type</label>
        <select id="ticket-new-type" name="type">
          <% [['question','Question'],['bug','Bug'],['request','Request'],['urgent','Urgent'],['feature','Feature']].forEach(function(o){ %>
            <option value="<%= o[0] %>" <%= (rm && o[0]==='feature') ? 'selected' : '' %>><%= o[1] %></option>
          <% }) %>
        </select>
      </div>
      <div class="fld" style="flex:1;min-width:220px"><label for="ticket-new-body">Details</label><input id="ticket-new-body" name="body" value="<%= detail %>" placeholder="Optional details"></div>
      <button class="btn btn-primary btn-sm" type="submit">Open ticket</button>
    </form>
  </div>
</div>
