{% extends "app_home/base.html" %}
{% load static %}
{% load i18n %}

{% block navbar_app %}
{% include 'app_home/_sidebar.html' %}
{% endblock %}

{% block title %}
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="{% url 'app_data:ipam_private' %}">{% translate "IPAM" %}</a></li>
    <li class="breadcrumb-item active" aria-current="page">{% translate "Bandwidth Calculator" %}</li>
  </ol>
</nav>
<h3>{% translate "Bandwidth Calculator" %}</h3>
{% endblock %}


{% block content %}

<div class="card mb-4">
  <div class="card-header cv-ipam-tool-card-header">{% translate "Bandwidth & Data Size" %}</div>
  <div class="card-body">

    <div class="row g-3 align-items-end">
      <div class="col-md-6">
        <label class="form-label" for="cvIpamBwInput">{% translate "Bandwidth" %}</label>
        <div class="input-group">
          <input type="number" class="form-control cv-ipam-tool-value" id="cvIpamBwInput" min="0" step="any" value="100">
          <select class="form-select cv-ipam-tool-unit-select" id="cvIpamBwUnit">
            <option value="1">bps</option>
            <option value="1000">Kbps</option>
            <option value="1000000" selected>Mbps</option>
            <option value="1000000000">Gbps</option>
          </select>
        </div>
      </div>
      <div class="col-md-6">
        <label class="form-label" for="cvIpamSizeInput">{% translate "Data Size" %}</label>
        <div class="input-group">
          <input type="number" class="form-control cv-ipam-tool-value" id="cvIpamSizeInput" min="0" step="any" value="10">
          <select class="form-select cv-ipam-tool-unit-select" id="cvIpamSizeUnit">
            <option value="1">Bytes</option>
            <option value="1000">KB</option>
            <option value="1000000">MB</option>
            <option value="1000000000" selected>GB</option>
            <option value="1000000000000">TB</option>
          </select>
        </div>
      </div>
    </div>

    <div class="mt-3">
      <button type="button" class="btn btn-outline-secondary btn-sm cv-ipam-tool-example-btn" data-bandwidth="100" data-bandwidth-unit="1000000" data-size="10" data-size-unit="1000000000">100 Mbps / 10 GB</button>
      <button type="button" class="btn btn-outline-secondary btn-sm cv-ipam-tool-example-btn" data-bandwidth="1" data-bandwidth-unit="1000000000" data-size="1" data-size-unit="1000000000000">1 Gbps / 1 TB</button>
      <button type="button" class="btn btn-outline-secondary btn-sm cv-ipam-tool-example-btn" data-bandwidth="56" data-bandwidth-unit="1000" data-size="1" data-size-unit="1000000">56 Kbps / 1 MB</button>
    </div>

    <div class="alert alert-danger mt-3 d-none" id="cvIpamBwError"></div>
  </div>
</div>

<div class="card mb-4" id="cvIpamBwResults">
  <div class="card-header cv-ipam-tool-card-header">{% translate "Estimated Transfer" %}</div>
  <div class="card-body p-0">
    <table class="table table-sm mb-0">
      <tbody>
        <tr><th class="w-50">{% translate "Data Size" %}</th><td class="cv-ipam-tool-value" id="cvIpamBwOutSize"></td></tr>
        <tr><th>{% translate "Bandwidth" %}</th><td class="cv-ipam-tool-value" id="cvIpamBwOutBandwidth"></td></tr>
        <tr><th>{% translate "Transfer Duration" %}</th><td class="cv-ipam-tool-value" id="cvIpamBwOutDuration"></td></tr>
        <tr><th>{% translate "Exact Duration" %}</th><td class="cv-ipam-tool-value" id="cvIpamBwOutSeconds"></td></tr>
      </tbody>
    </table>
  </div>
</div>

{% endblock %}


{% block script %}
<script>
(function () {
  "use strict";

  var elBandwidth = document.getElementById("cvIpamBwInput");
  var elBandwidthUnit = document.getElementById("cvIpamBwUnit");
  var elSize = document.getElementById("cvIpamSizeInput");
  var elSizeUnit = document.getElementById("cvIpamSizeUnit");
  var elError = document.getElementById("cvIpamBwError");
  var elResults = document.getElementById("cvIpamBwResults");

  /* Turn a seconds count into a "Xd Xh Xm Xs" style humanized string. */
  function humanizeDuration(totalSeconds) {
    if (totalSeconds < 1) {
      return Math.round(totalSeconds * 1000) + " ms";
    }

    var seconds = Math.floor(totalSeconds);
    var days = Math.floor(seconds / 86400);
    seconds -= days * 86400;
    var hours = Math.floor(seconds / 3600);
    seconds -= hours * 3600;
    var minutes = Math.floor(seconds / 60);
    seconds -= minutes * 60;

    var parts = [];
    if (days > 0) parts.push(days + " {% translate 'd' %}");
    if (hours > 0) parts.push(hours + " {% translate 'h' %}");
    if (minutes > 0) parts.push(minutes + " {% translate 'min' %}");
    if (seconds > 0 || parts.length === 0) parts.push(seconds + " {% translate 's' %}");

    return parts.slice(0, 3).join(" ");
  }

  /* Re-read the bandwidth/size inputs, validate them, and refresh the result panel.
     Size units are decimal SI (1 KB = 1000 bytes), matching the bandwidth units
     (1 Kbps = 1000 bps) - consistent base-1000 throughout, not binary (1024). */
  function recompute() {
    var bandwidthValue = parseFloat(elBandwidth.value);
    var sizeValue = parseFloat(elSize.value);

    if (!(bandwidthValue > 0) || !(sizeValue >= 0)) {
      elError.textContent = "{% translate 'Enter a positive bandwidth and a non-negative data size.' %}";
      elError.classList.remove("d-none");
      elResults.classList.add("d-none");
      return;
    }
    elError.classList.add("d-none");
    elResults.classList.remove("d-none");

    var bandwidthBps = bandwidthValue * parseFloat(elBandwidthUnit.value);
    var sizeBytes = sizeValue * parseFloat(elSizeUnit.value);
    var sizeBits = sizeBytes * 8;
    var durationSeconds = sizeBits / bandwidthBps;

    document.getElementById("cvIpamBwOutSize").textContent =
      sizeValue + " " + elSizeUnit.options[elSizeUnit.selectedIndex].text + " (" + sizeBytes.toLocaleString() + " Bytes)";
    document.getElementById("cvIpamBwOutBandwidth").textContent =
      bandwidthValue + " " + elBandwidthUnit.options[elBandwidthUnit.selectedIndex].text + " (" + bandwidthBps.toLocaleString() + " bps)";
    document.getElementById("cvIpamBwOutDuration").textContent = humanizeDuration(durationSeconds);
    document.getElementById("cvIpamBwOutSeconds").textContent =
      durationSeconds.toLocaleString(undefined, {maximumFractionDigits: 3}) + " {% translate 's' %}";
  }

  elBandwidth.addEventListener("input", recompute);
  elBandwidthUnit.addEventListener("change", recompute);
  elSize.addEventListener("input", recompute);
  elSizeUnit.addEventListener("change", recompute);

  var exampleButtons = document.querySelectorAll(".cv-ipam-tool-example-btn");
  for (var i = 0; i < exampleButtons.length; i++) {
    exampleButtons[i].addEventListener("click", function () {
      elBandwidth.value = this.getAttribute("data-bandwidth");
      elBandwidthUnit.value = this.getAttribute("data-bandwidth-unit");
      elSize.value = this.getAttribute("data-size");
      elSizeUnit.value = this.getAttribute("data-size-unit");
      recompute();
    });
  }

  recompute();
})();
</script>
{% endblock %}