{% extends "base.html" %}{% block title %}routing{% endblock %}
{% block content %}
<div class="phead">
  <div class="kicker">Routing</div>
  <h1>Meetings still looking for a customer</h1>
  <p class="lede">Attribution is an append-only decision, never a rewrite. Naming a
    customer once claims every meeting that mentions it — the ones already waiting
    here as well as the ones still to arrive.</p>
  <div class="stats" id="stats" style="margin-top:24px"></div>
</div>

<section id="suggest-section" style="display:none">
  <p class="section-title">Counterparties worth naming</p>
  <div class="panel">
    <div class="panel-body" style="padding-bottom:0">
      <p class="muted" style="max-width:62ch">These keep appearing on unclaimed
        meetings. Creating a customer here also re-runs the resolver, so the queue
        shrinks immediately rather than from the next sync onward.</p>
    </div>
    <div class="scroll"><table><thead><tr>
      <th>counterparty</th><th class="num">meetings</th><th>found via</th>
      <th>example</th><th></th></tr></thead><tbody id="suggest"></tbody></table></div>
  </div>
</section>

<section>
  <p class="section-title">Queue</p>
  <div class="panel">
    <div class="scroll"><table><thead><tr>
      <th>meeting</th><th>when</th><th>hints</th><th>assign</th>
    </tr></thead><tbody id="queue"></tbody></table></div>
    <div id="queue-empty" style="display:none"><div class="empty">
      <div class="big">queue is clear</div>
      <p>Every meeting in raw memory is attributed. New ones route themselves
         against the customers you have named.</p></div></div>
  </div>
</section>

<section>
  <p class="section-title">Customers</p>
  <div class="panel">
    <div class="scroll"><table><thead><tr>
      <th>customer</th><th>slug</th><th>domains</th></tr></thead>
      <tbody id="customers"></tbody></table></div>
    <div class="panel-body" style="border-top:1px solid var(--divider)">
      <details><summary>Add a customer manually</summary>
        <div class="row">
          <input id="cslug" placeholder="slug (acme)" size="14">
          <input id="cname" placeholder="Acme Inc" size="18">
          <input id="cdom" placeholder="domains, comma-separated" size="28">
          <button class="primary" onclick="addCustomer()">add</button>
        </div>
      </details>
    </div>
  </div>
</section>

<script>
let customers = [];

async function pageInit() {
  customers = await api("/v1/console/customers");
  const q = await api("/v1/console/unrouted");
  await renderSuggestions();
  renderCustomers();

  document.getElementById("stats").innerHTML = [
    ["unrouted", q.items.length, true],
    ["customers", customers.length, false],
    ["suggestions", (window._suggestions || []).length, false],
  ].map(([l, n, a]) => `<div class="stat"><div class="n${a ? " accent" : ""}">${n}</div>
    <div class="l">${l}</div></div>`).join("");

  const opts = customers.map(c =>
    `<option value="${esc(c.slug)}">${esc(c.name)}</option>`).join("");
  document.getElementById("queue").innerHTML = q.items.map(u => `
    <tr><td>${esc(u.name)}</td>
        <td class="stamp">${esc((u.occurred_at || "").slice(0, 10))}</td>
        <td class="faint mono">${esc(((u.hints && u.hints.email_domains) || [])
            .join(", ") || "no external attendees")}</td>
        <td><div class="row">
            <select id="sel-${u.container_id}"><option value="">—</option>${opts}</select>
            <button onclick="route('${u.container_id}')">route</button></div></td></tr>`
  ).join("");
  document.getElementById("queue-empty").style.display = q.items.length ? "none" : "block";
}

function renderCustomers() {
  document.getElementById("customers").innerHTML = customers.map(c => `
    <tr><td>${esc(c.name)}</td><td class="mono">${esc(c.slug)}</td>
        <td class="faint mono">${esc((c.domains || []).join(", ") || "—")}</td></tr>`
  ).join("") || `<tr><td colspan="3" class="muted">no customers named yet</td></tr>`;
}

async function renderSuggestions() {
  const [byDomain, byTitle] = await Promise.all([
    api("/v1/console/routing-suggestions"),
    api("/v1/console/title-suggestions"),
  ]);
  const rows = [
    ...byDomain.filter(x => !x.already_customer).map(x => ({
      who: x.domain, label: x.suggested_slug, meetings: x.meetings,
      example: x.example, domain: x.domain, why: "email domain"})),
    ...byTitle.map(x => ({
      who: x.label, label: x.suggested_slug, meetings: x.meetings,
      example: x.example, domain: null, why: "named in title"})),
  ];
  window._suggestions = rows;
  document.getElementById("suggest-section").style.display = rows.length ? "block" : "none";
  document.getElementById("suggest").innerHTML = rows.map((x, i) => `
    <tr><td>${esc(x.who)}</td>
        <td class="num">${x.meetings}</td>
        <td class="faint mono">${esc(x.why)}</td>
        <td class="faint">${esc((x.example || "").slice(0, 34))}</td>
        <td><button class="primary" onclick="claim(${i})">create customer</button></td>
    </tr>`).join("");
}

async function claim(i) {
  const x = window._suggestions[i];
  const name = x.who.includes(".") ? x.label : x.who;
  await api("/v1/console/customers", {method: "POST", body: JSON.stringify({
    slug: x.label,
    name: name.charAt(0).toUpperCase() + name.slice(1),
    domains: x.domain ? [x.domain] : []})});
  await api("/v1/console/reroute", {method: "POST"});
  await pageInit();
}

async function addCustomer() {
  await api("/v1/console/customers", {method: "POST", body: JSON.stringify({
    slug: document.getElementById("cslug").value.trim(),
    name: document.getElementById("cname").value.trim(),
    domains: document.getElementById("cdom").value.split(",")
      .map(s => s.trim()).filter(Boolean),
  })});
  await pageInit();
}

async function route(cid) {
  const slug = document.getElementById(`sel-${cid}`).value || null;
  await api("/v1/console/route", {method: "POST",
    body: JSON.stringify({container_id: cid, customer_slug: slug})});
  await pageInit();
}
</script>
{% endblock %}