{% 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 "Subnet Calculator" %}</li>
  </ol>
</nav>
<h3>{% translate "Subnet Calculator" %}</h3>
{% endblock %}


{% block content %}

<div class="card mb-4">
  <div class="card-header cv-ipam-tool-card-header">{% translate "IP Address / CIDR" %}</div>
  <div class="card-body">

    <div class="row g-3 align-items-end">
      <div class="col-md-5">
        <label class="form-label" for="cvIpamCalcIpInput">{% translate "IP Address" %}</label>
        <input type="text" class="form-control cv-ipam-tool-value" id="cvIpamCalcIpInput" value="192.168.1.10" autocomplete="off" spellcheck="false">
      </div>
      <div class="col-md-3">
        <label class="form-label" for="cvIpamCalcCidrInput">{% translate "CIDR prefix" %}</label>
        <div class="input-group">
          <span class="input-group-text">/</span>
          <input type="number" class="form-control cv-ipam-tool-value" id="cvIpamCalcCidrInput" min="0" max="32" value="24">
        </div>
      </div>
      <div class="col-md-4">
        <label class="form-label" for="cvIpamCalcCidrRange">{% translate "Prefix slider" %} (<span id="cvIpamCalcCidrRangeLabel">/24</span>)</label>
        <input type="range" class="form-range" id="cvIpamCalcCidrRange" min="0" max="32" value="24">
      </div>
    </div>

    <div class="mt-3">
      <button type="button" class="btn btn-outline-secondary btn-sm cv-ipam-tool-example-btn" data-example="192.168.1.10/24">192.168.1.10/24</button>
      <button type="button" class="btn btn-outline-secondary btn-sm cv-ipam-tool-example-btn" data-example="10.20.0.0/16">10.20.0.0/16</button>
      <button type="button" class="btn btn-outline-secondary btn-sm cv-ipam-tool-example-btn" data-example="172.16.4.0/22">172.16.4.0/22</button>
      <button type="button" class="btn btn-outline-secondary btn-sm cv-ipam-tool-example-btn" data-example="8.8.8.8/32">8.8.8.8/32</button>
    </div>

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

<div class="row row-cols-1 row-cols-lg-2 g-3 mb-4" id="cvIpamCalcResults">

  <div class="col">
    <div class="card h-100">
      <div class="card-header cv-ipam-tool-card-header">{% translate "Subnet Details" %}</div>
      <div class="card-body p-0">
        <table class="table table-sm mb-0">
          <tbody>
            <tr><th class="w-50">{% translate "IP Address" %}</th><td class="cv-ipam-tool-value" id="cvIpamCalcOutIp"></td></tr>
            <tr><th>{% translate "CIDR notation" %}</th><td class="cv-ipam-tool-value" id="cvIpamCalcOutCidr"></td></tr>
            <tr><th>{% translate "Network Mask" %}</th><td class="cv-ipam-tool-value" id="cvIpamCalcOutNetmask"></td></tr>
            <tr><th>{% translate "Wildcard Mask" %}</th><td class="cv-ipam-tool-value" id="cvIpamCalcOutWildcard"></td></tr>
            <tr><th>{% translate "Network Address" %}</th><td class="cv-ipam-tool-value" id="cvIpamCalcOutNetwork"></td></tr>
            <tr><th>{% translate "Broadcast Address" %}</th><td class="cv-ipam-tool-value" id="cvIpamCalcOutBroadcast"></td></tr>
            <tr><th>{% translate "First Usable Host" %}</th><td class="cv-ipam-tool-value" id="cvIpamCalcOutFirst"></td></tr>
            <tr><th>{% translate "Last Usable Host" %}</th><td class="cv-ipam-tool-value" id="cvIpamCalcOutLast"></td></tr>
            <tr><th>{% translate "Usable Hosts" %}</th><td class="cv-ipam-tool-value" id="cvIpamCalcOutUsable"></td></tr>
            <tr><th>{% translate "Total Addresses" %}</th><td class="cv-ipam-tool-value" id="cvIpamCalcOutTotal"></td></tr>
            <tr><th>{% translate "IP Class" %}</th><td class="cv-ipam-tool-value" id="cvIpamCalcOutClass"></td></tr>
            <tr><th>{% translate "Address Type" %}</th><td id="cvIpamCalcOutType"></td></tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div class="col">
    <div class="card h-100">
      <div class="card-header cv-ipam-tool-card-header">{% translate "Binary Breakdown" %}</div>
      <div class="card-body">
        <p class="text-muted mb-2">
          {% translate "Network bits" %}
          <span class="cv-ipam-subnetcalc-bit-net">&#9632;</span>
          &nbsp; {% translate "Host bits" %}
          <span class="cv-ipam-subnetcalc-bit-host">&#9632;</span>
        </p>
        <div class="mb-3">
          <div class="text-muted small">{% translate "IP Address" %}</div>
          <div class="cv-ipam-subnetcalc-bits" id="cvIpamCalcBinIp"></div>
        </div>
        <div>
          <div class="text-muted small">{% translate "Network Mask" %}</div>
          <div class="cv-ipam-subnetcalc-bits" id="cvIpamCalcBinMask"></div>
        </div>
      </div>
    </div>
  </div>

</div>

<div class="card mb-4" id="cvIpamCalcSplitCard">
  <div class="card-header cv-ipam-tool-card-header">{% translate "Divide into Sub-subnets" %}</div>
  <div class="card-body">

    <div class="row g-3 align-items-end">
      <div class="col-md-4">
        <label class="form-label" for="cvIpamCalcSplitSelect">{% translate "New prefix length" %}</label>
        <select class="form-select" id="cvIpamCalcSplitSelect"></select>
      </div>
      <div class="col-md-3">
        <button type="button" class="btn btn-primary" id="cvIpamCalcSplitButton">
          <i class="fa fa-th-large"></i> {% translate "Generate subnets" %}
        </button>
      </div>
      <div class="col-md-5">
        <p class="text-muted mb-0" id="cvIpamCalcSplitSummary"></p>
      </div>
    </div>

    <div class="alert alert-warning mt-3 d-none" id="cvIpamCalcSplitWarning"></div>

    <div class="cv-ipam-tool-table-wrap mt-3">
      <table class="table table-sm table-hover mb-0">
        <thead class="sticky-top bg-body">
          <tr>
            <th>#</th>
            <th>{% translate "Network" %}</th>
            <th>{% translate "Netmask" %}</th>
            <th>{% translate "First Host" %}</th>
            <th>{% translate "Last Host" %}</th>
            <th>{% translate "Broadcast" %}</th>
            <th>{% translate "Usable Hosts" %}</th>
          </tr>
        </thead>
        <tbody id="cvIpamCalcSplitBody"></tbody>
      </table>
    </div>

  </div>
</div>

{% endblock %}


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

  var MAX_LISTED_SUBNETS = 256;

  var elIp = document.getElementById("cvIpamCalcIpInput");
  var elCidr = document.getElementById("cvIpamCalcCidrInput");
  var elCidrRange = document.getElementById("cvIpamCalcCidrRange");
  var elCidrRangeLabel = document.getElementById("cvIpamCalcCidrRangeLabel");
  var elError = document.getElementById("cvIpamCalcIpError");
  var elResults = document.getElementById("cvIpamCalcResults");
  var elSplitCard = document.getElementById("cvIpamCalcSplitCard");
  var elSplitSelect = document.getElementById("cvIpamCalcSplitSelect");
  var elSplitButton = document.getElementById("cvIpamCalcSplitButton");
  var elSplitSummary = document.getElementById("cvIpamCalcSplitSummary");
  var elSplitWarning = document.getElementById("cvIpamCalcSplitWarning");
  var elSplitBody = document.getElementById("cvIpamCalcSplitBody");

  var lastNetworkInt = null;
  var lastCidr = null;

  /* Parse "a.b.c.d" into a 32-bit unsigned integer, or null if invalid. */
  function ipToInt(ip) {
    var parts = String(ip).trim().split(".");
    if (parts.length !== 4) {
      return null;
    }
    var bytes = [];
    for (var i = 0; i < 4; i++) {
      if (!/^\d{1,3}$/.test(parts[i])) {
        return null;
      }
      var n = parseInt(parts[i], 10);
      if (n < 0 || n > 255) {
        return null;
      }
      bytes.push(n);
    }
    return ((bytes[0] << 24) | (bytes[1] << 16) | (bytes[2] << 8) | bytes[3]) >>> 0;
  }

  /* Format a 32-bit unsigned integer as "a.b.c.d". */
  function intToIp(n) {
    return [(n >>> 24) & 255, (n >>> 16) & 255, (n >>> 8) & 255, n & 255].join(".");
  }

  /* Build the 32-bit netmask integer for a given CIDR prefix length. */
  function maskForCidr(cidr) {
    if (cidr <= 0) {
      return 0;
    }
    return (0xFFFFFFFF << (32 - cidr)) >>> 0;
  }

  /* Classify a network's first octet into a legacy IP class letter. */
  function ipClass(firstOctet) {
    if (firstOctet < 128) return "A";
    if (firstOctet < 192) return "B";
    if (firstOctet < 224) return "C";
    if (firstOctet < 240) return "D ({% translate 'multicast' %})";
    return "E ({% translate 'reserved' %})";
  }

  /* Describe the address type/scope (private, loopback, link-local, public...). */
  function addressType(ipInt) {
    var a = (ipInt >>> 24) & 255;
    var b = (ipInt >>> 16) & 255;
    if (a === 10) return {label: "{% translate 'Private' %} (RFC1918)", cls: "text-bg-secondary"};
    if (a === 172 && b >= 16 && b <= 31) return {label: "{% translate 'Private' %} (RFC1918)", cls: "text-bg-secondary"};
    if (a === 192 && b === 168) return {label: "{% translate 'Private' %} (RFC1918)", cls: "text-bg-secondary"};
    if (a === 127) return {label: "{% translate 'Loopback' %}", cls: "text-bg-warning"};
    if (a === 169 && b === 254) return {label: "{% translate 'Link-local' %}", cls: "text-bg-warning"};
    if (a >= 224 && a < 240) return {label: "{% translate 'Multicast' %}", cls: "text-bg-info"};
    if (a >= 240) return {label: "{% translate 'Reserved' %}", cls: "text-bg-info"};
    return {label: "{% translate 'Public' %}", cls: "text-bg-success"};
  }

  /* Render a 32-bit value as dotted-octet binary, coloring network vs host bits. */
  function renderBinary(target, value, cidr) {
    target.innerHTML = "";
    for (var octet = 0; octet < 4; octet++) {
      if (octet > 0) {
        var sep = document.createElement("span");
        sep.className = "cv-ipam-subnetcalc-octet-sep";
        sep.textContent = ".";
        target.appendChild(sep);
      }
      for (var bit = 0; bit < 8; bit++) {
        var globalBit = octet * 8 + bit;
        var bitValue = (value >>> (31 - globalBit)) & 1;
        var span = document.createElement("span");
        span.className = globalBit < cidr ? "cv-ipam-subnetcalc-bit-net" : "cv-ipam-subnetcalc-bit-host";
        span.textContent = String(bitValue);
        target.appendChild(span);
      }
    }
  }

  /* Compute all derived subnet fields for a given network integer + CIDR. */
  function computeSubnet(networkInt, cidr) {
    var maskInt = maskForCidr(cidr);
    var wildcardInt = (~maskInt) >>> 0;
    var broadcastInt = (networkInt | wildcardInt) >>> 0;
    var totalAddresses = Math.pow(2, 32 - cidr);
    var usableHosts, firstHostInt, lastHostInt;

    if (cidr >= 31) {
      usableHosts = totalAddresses;
      firstHostInt = networkInt;
      lastHostInt = broadcastInt;
    } else {
      usableHosts = totalAddresses - 2;
      firstHostInt = networkInt + 1;
      lastHostInt = broadcastInt - 1;
    }

    return {
      networkInt: networkInt,
      maskInt: maskInt,
      wildcardInt: wildcardInt,
      broadcastInt: broadcastInt,
      totalAddresses: totalAddresses,
      usableHosts: usableHosts,
      firstHostInt: firstHostInt,
      lastHostInt: lastHostInt
    };
  }

  /* Rebuild the "new prefix length" <select> options for the current CIDR. */
  function rebuildSplitOptions(cidr) {
    elSplitSelect.innerHTML = "";
    for (var newCidr = cidr + 1; newCidr <= 32; newCidr++) {
      var count = Math.pow(2, newCidr - cidr);
      var size = Math.pow(2, 32 - newCidr);
      var opt = document.createElement("option");
      opt.value = String(newCidr);
      opt.textContent = "/" + newCidr + " — " + count + " {% translate 'subnets' %} × " + size + " {% translate 'addresses' %}";
      elSplitSelect.appendChild(opt);
    }
    elSplitCard.classList.toggle("d-none", cidr >= 32);
  }

  /* Clear the generated sub-subnet table and summary text. */
  function clearSplitTable() {
    elSplitBody.innerHTML = "";
    elSplitSummary.textContent = "";
    elSplitWarning.classList.add("d-none");
  }

  /* Generate and render the sub-subnet table for the selected new prefix length. */
  function generateSplit() {
    if (lastNetworkInt === null || !elSplitSelect.value) {
      return;
    }
    var newCidr = parseInt(elSplitSelect.value, 10);
    var count = Math.pow(2, newCidr - lastCidr);
    var step = Math.pow(2, 32 - newCidr);
    var listCount = Math.min(count, MAX_LISTED_SUBNETS);

    elSplitBody.innerHTML = "";
    for (var i = 0; i < listCount; i++) {
      var subnetInt = (lastNetworkInt + i * step) >>> 0;
      var info = computeSubnet(subnetInt, newCidr);
      var tr = document.createElement("tr");
      tr.innerHTML =
        "<td>" + (i + 1) + "</td>" +
        "<td class=\"cv-ipam-tool-value\">" + intToIp(info.networkInt) + "/" + newCidr + "</td>" +
        "<td class=\"cv-ipam-tool-value\">" + intToIp(info.maskInt) + "</td>" +
        "<td class=\"cv-ipam-tool-value\">" + intToIp(info.firstHostInt) + "</td>" +
        "<td class=\"cv-ipam-tool-value\">" + intToIp(info.lastHostInt) + "</td>" +
        "<td class=\"cv-ipam-tool-value\">" + intToIp(info.broadcastInt) + "</td>" +
        "<td>" + info.usableHosts + "</td>";
      elSplitBody.appendChild(tr);
    }

    elSplitSummary.textContent = count + " {% translate 'subnets total' %}";
    if (count > MAX_LISTED_SUBNETS) {
      elSplitWarning.textContent =
        "{% translate 'Showing the first' %} " + MAX_LISTED_SUBNETS + " {% translate 'of' %} " + count + " {% translate 'subnets.' %}";
      elSplitWarning.classList.remove("d-none");
    } else {
      elSplitWarning.classList.add("d-none");
    }
  }

  /* Re-read the IP/CIDR inputs, validate them, and refresh every panel. */
  function recompute() {
    var cidr = parseInt(elCidr.value, 10);
    if (isNaN(cidr) || cidr < 0 || cidr > 32) {
      cidr = Math.min(32, Math.max(0, cidr || 0));
      elCidr.value = cidr;
    }
    elCidrRange.value = cidr;
    elCidrRangeLabel.textContent = "/" + cidr;

    var ipInt = ipToInt(elIp.value);
    if (ipInt === null) {
      elError.textContent = "{% translate 'Enter a valid IPv4 address, e.g. 192.168.1.10' %}";
      elError.classList.remove("d-none");
      elResults.classList.add("d-none");
      elSplitCard.classList.add("d-none");
      lastNetworkInt = null;
      return;
    }
    elError.classList.add("d-none");
    elResults.classList.remove("d-none");

    var info = computeSubnet(ipInt & maskForCidr(cidr), cidr);
    lastNetworkInt = info.networkInt;
    lastCidr = cidr;

    document.getElementById("cvIpamCalcOutIp").textContent = intToIp(ipInt);
    document.getElementById("cvIpamCalcOutCidr").textContent = "/" + cidr;
    document.getElementById("cvIpamCalcOutNetmask").textContent = intToIp(info.maskInt);
    document.getElementById("cvIpamCalcOutWildcard").textContent = intToIp(info.wildcardInt);
    document.getElementById("cvIpamCalcOutNetwork").textContent = intToIp(info.networkInt) + "/" + cidr;
    document.getElementById("cvIpamCalcOutBroadcast").textContent = intToIp(info.broadcastInt);
    document.getElementById("cvIpamCalcOutFirst").textContent = intToIp(info.firstHostInt);
    document.getElementById("cvIpamCalcOutLast").textContent = intToIp(info.lastHostInt);
    document.getElementById("cvIpamCalcOutUsable").textContent = info.usableHosts.toLocaleString();
    document.getElementById("cvIpamCalcOutTotal").textContent = info.totalAddresses.toLocaleString();
    document.getElementById("cvIpamCalcOutClass").textContent = ipClass((info.networkInt >>> 24) & 255);

    var type = addressType(info.networkInt);
    var outType = document.getElementById("cvIpamCalcOutType");
    outType.innerHTML = "";
    var badge = document.createElement("span");
    badge.className = "badge " + type.cls;
    badge.textContent = type.label;
    outType.appendChild(badge);

    renderBinary(document.getElementById("cvIpamCalcBinIp"), ipInt, cidr);
    renderBinary(document.getElementById("cvIpamCalcBinMask"), info.maskInt, cidr);

    rebuildSplitOptions(cidr);
    clearSplitTable();
  }

  elIp.addEventListener("input", recompute);
  elCidr.addEventListener("input", recompute);
  elCidrRange.addEventListener("input", function () {
    elCidr.value = elCidrRange.value;
    recompute();
  });
  elSplitButton.addEventListener("click", generateSplit);

  var exampleButtons = document.querySelectorAll(".cv-ipam-tool-example-btn");
  for (var i = 0; i < exampleButtons.length; i++) {
    exampleButtons[i].addEventListener("click", function () {
      var parts = this.getAttribute("data-example").split("/");
      elIp.value = parts[0];
      elCidr.value = parts[1];
      recompute();
    });
  }

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