{% extends "templates/web.html" %}

{% block page_content %}
<style>
  .pw-cdr-wrap { max-width: 900px; margin: 0 auto; }
  .pw-cdr-wrap h1 { color: #1e3a5f; margin: 0 0 1rem; }
  .pw-cdr-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 1.25rem 1.5rem; margin: 1rem 0; }
  .pw-cdr-card h2 { color: #1e3a5f; font-size: 1.15rem; margin: 0 0 .75rem; }
  .pw-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
  .pw-table th, .pw-table td { padding: .5rem .7rem; border-bottom: 1px solid #f0f4f8; text-align: left; }
  .pw-pill {
    padding: .1rem .5rem; border-radius: 10px; font-weight: 600; font-size: .75rem;
  }
  .pw-pill-w { background: #dbeafe; color: #1e40af; }
  .pw-pill-r { background: #dcfce7; color: #166534; }
  .pw-pill-u { background: #f1f5f9; color: #475569; }
  .pw-btn { padding: .6rem 1.25rem; border: 0; border-radius: 6px; background: #059669; color: #fff; font-weight: 600; cursor: pointer; }
</style>

<div class="pw-cdr-wrap">
  <h1>Wholesale / Retail Mapping</h1>
  <p>
    Tag each of your trunk groups and customer account IDs as
    <strong>wholesale</strong> or <strong>retail</strong>. The 499-A handler uses this
    to split revenue between Block 3 (carrier-to-carrier) and Block 4-A
    (end-user). Calls whose trunk group / account isn&apos;t tagged show up
    as <em>unknown</em> &mdash; tag them so your study is complete.
  </p>

  {% if not profile %}
    <div class="pw-cdr-card">
      <p>No CDR profile yet &mdash; <a href="/cdr-settings">configure ingestion first</a>.</p>
    </div>
  {% else %}
  <div class="pw-cdr-card">
    <h2>Trunk groups ({{ trunk_groups|length }})</h2>
    {% if not trunk_groups %}
      <p>No trunk groups seen in the last 90 days yet. Upload some CDRs or wait for the puller's next run.</p>
    {% else %}
    <table class="pw-table">
      <thead><tr><th>Trunk Group ID</th><th>Bucket</th></tr></thead>
      <tbody>
        {% for tg in trunk_groups %}
          {% set current = "unknown" %}
          {% for m in existing if m.match_type == "trunk_group" and m.match_value == tg %}
            {% set current = m.bucket %}
          {% endfor %}
          <tr>
            <td><code>{{ tg }}</code></td>
            <td>
              <select data-match-type="trunk_group" data-match-value="{{ tg }}" class="bucket-select">
                <option value=""           {% if current == "unknown" %}selected{% endif %}>Unknown</option>
                <option value="wholesale"  {% if current == "wholesale" %}selected{% endif %}>Wholesale</option>
                <option value="retail"     {% if current == "retail" %}selected{% endif %}>Retail</option>
              </select>
            </td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
    {% endif %}
  </div>

  <div class="pw-cdr-card">
    <h2>Customer account IDs ({{ account_ids|length }})</h2>
    {% if not account_ids %}
      <p>No distinct customer account IDs seen in the last 90 days.</p>
    {% else %}
    <table class="pw-table">
      <thead><tr><th>Account ID</th><th>Bucket</th></tr></thead>
      <tbody>
        {% for aid in account_ids %}
          {% set current = "unknown" %}
          {% for m in existing if m.match_type == "account_id" and m.match_value == aid %}
            {% set current = m.bucket %}
          {% endfor %}
          <tr>
            <td><code>{{ aid }}</code></td>
            <td>
              <select data-match-type="account_id" data-match-value="{{ aid }}" class="bucket-select">
                <option value=""           {% if current == "unknown" %}selected{% endif %}>Unknown</option>
                <option value="wholesale"  {% if current == "wholesale" %}selected{% endif %}>Wholesale</option>
                <option value="retail"     {% if current == "retail" %}selected{% endif %}>Retail</option>
              </select>
            </td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
    {% endif %}
  </div>

  <div style="text-align: right; margin: 2rem 0;">
    <button id="save_mappings" class="pw-btn">Save mappings</button>
  </div>
  {% endif %}
</div>

<script>
(function () {
  const btn = document.getElementById("save_mappings");
  if (!btn) return;
  const profileId = {{ profile.id if profile else "null" }};
  btn.addEventListener("click", async () => {
    const mappings = [];
    document.querySelectorAll(".bucket-select").forEach((sel) => {
      const bucket = sel.value;
      if (!bucket) return;
      mappings.push({
        match_type:  sel.dataset.matchType,
        match_value: sel.dataset.matchValue,
        bucket:      bucket,
      });
    });
    try {
      const resp = await fetch(`/api/v1/cdr/profile/${profileId}/bucket-mappings`, {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        credentials: "same-origin",
        body: JSON.stringify({ mappings }),
      });
      if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
      alert(`Saved ${mappings.length} mapping(s).`);
    } catch (err) {
      alert("Save failed: " + err.message);
    }
  });
})();
</script>
{% endblock %}