{% extends 'dcim/device/base.html' %}

{% block content %}
{% if ledger_enabled and has_mounts %}
  {% include 'netbox_cabinet_view/inc/slot_ledger.html' %}
{% endif %}
<div class="row mb-3">
  <div class="col-12">
    <div class="card">
      <h5 class="card-header d-flex justify-content-between align-items-center">
        <span>Cabinet Layout</span>
        <div class="d-flex gap-2">
          {% if has_bays %}
          <form method="post" action="{% url 'plugins:netbox_cabinet_view:auto_provision' %}" class="d-inline">
            {% csrf_token %}
            <input type="hidden" name="device_pk" value="{{ object.pk }}">
            <button type="submit" class="btn btn-sm btn-outline-success"
                    title="Auto-create a mount + one placement per bay on this device">
              <i class="mdi mdi-auto-fix"></i> Auto-provision from bays
            </button>
          </form>
          {% endif %}
          <a href="{% url 'plugins:netbox_cabinet_view:mount_add' %}?host_device={{ object.pk }}"
             class="btn btn-sm btn-primary">
            <i class="mdi mdi-plus-thick"></i> Add Mount
          </a>
        </div>
      </h5>
      <div class="card-body text-center p-0">
        {% if has_mounts %}
          {% if has_face_specific %}
            {# Feature 1 (v0.5.0): dual-SVG rendering when mounts have explicit faces. #}
            {# v0.7.1: data-src instead of data — JS populates data with ?theme= appended. #}
            <div class="row g-0">
              <div class="col-6 border-end">
                <div class="small text-muted py-1 border-bottom">Front</div>
                <object type="image/svg+xml"
                        id="cabinet-layout-svg-embed"
                        class="cabinet-svg-embed"
                        data-src="{% url 'dcim:device_cabinet_layout_svg' pk=object.pk %}?face=front"
                        style="max-width: 100%; height: auto;">
                  Cabinet layout (front) for {{ object }}
                </object>
              </div>
              <div class="col-6">
                <div class="small text-muted py-1 border-bottom">Rear</div>
                <object type="image/svg+xml"
                        class="cabinet-svg-embed"
                        data-src="{% url 'dcim:device_cabinet_layout_svg' pk=object.pk %}?face=rear"
                        style="max-width: 100%; height: auto;">
                  Cabinet layout (rear) for {{ object }}
                </object>
              </div>
            </div>
          {% else %}
            <object type="image/svg+xml"
                    id="cabinet-layout-svg-embed"
                    class="cabinet-svg-embed"
                    data-src="{% url 'dcim:device_cabinet_layout_svg' pk=object.pk %}"
                    style="max-width: 100%; height: auto;">
              Cabinet layout for {{ object }}
            </object>
          {% endif %}
        {% else %}
          {# ========================================================== #}
          {# Finding B (v0.4.0): empty-state scale-reference canvas.     #}
          {#                                                             #}
          {# When the device has a profile but no mounts yet, render a   #}
          {# dashed rectangle sized to the internal_width/height_mm so   #}
          {# users see the cabinet's actual scale before they pick a    #}
          {# mount type. Centered CTA button offers the "+ first mount"  #}
          {# flow. If the profile has no internal dims, degrade to a     #}
          {# plain card with just the CTA.                               #}
          {# ========================================================== #}
          {% if internal_width_mm and internal_height_mm %}
            {# 2 px per mm, matches CabinetLayoutSVG.DEFAULT_MM_TO_PX   #}
            {% widthratio internal_width_mm 1 2 as canvas_w %}
            {% widthratio internal_height_mm 1 2 as canvas_h %}
            <div style="padding: 24px;">
              <svg xmlns="http://www.w3.org/2000/svg"
                   viewBox="0 0 {{ canvas_w }} {{ canvas_h }}"
                   style="max-width: 100%; max-height: 420px; height: auto;">
                <rect x="2" y="2"
                      width="{{ canvas_w|add:'-4' }}"
                      height="{{ canvas_h|add:'-4' }}"
                      fill="none"
                      stroke="#6c7078"
                      stroke-width="2"
                      stroke-dasharray="6 4"
                      rx="4" />
                <foreignObject x="0" y="0" width="{{ canvas_w }}" height="{{ canvas_h }}">
                  <div xmlns="http://www.w3.org/1999/xhtml"
                       style="display: flex; flex-direction: column;
                              align-items: center; justify-content: center;
                              width: 100%; height: 100%;
                              font-family: -apple-system, 'Segoe UI', sans-serif;">
                    <div style="font-size: 14px; color: #9aa2ad; margin-bottom: 4px;">
                      No mounts defined
                    </div>
                    <div style="font-size: 11px; color: #6c7078; margin-bottom: 12px;">
                      Interior: {{ internal_width_mm }} × {{ internal_height_mm }} mm
                    </div>
                    <a href="{% url 'plugins:netbox_cabinet_view:mount_add' %}?host_device={{ object.pk }}"
                       class="btn btn-sm btn-primary">
                      <i class="mdi mdi-plus-thick"></i> Add the first mount
                    </a>
                  </div>
                </foreignObject>
              </svg>
            </div>
          {% else %}
            <div class="text-muted py-5">
              <div class="mb-2">No mounts defined for this device.</div>
              <a href="{% url 'plugins:netbox_cabinet_view:mount_add' %}?host_device={{ object.pk }}"
                 class="btn btn-sm btn-primary">
                <i class="mdi mdi-plus-thick"></i> Add the first mount
              </a>
            </div>
          {% endif %}
        {% endif %}
      </div>
    </div>
  </div>
</div>

{% if has_mounts %}
{# =================================================================== #}
{# v0.7.1: propagate NetBox dark/light theme into <object>-embedded    #}
{# SVGs via a server-side `?theme=dark|light` query param.  The        #}
{# <object> elements use `data-src` (not `data`) so the SVG never      #}
{# loads without the theme param.  This script reads the active theme  #}
{# from localStorage/data-bs-theme and sets the real `data` attribute  #}
{# with `&theme=<mode>` appended, triggering the initial load.  On     #}
{# theme toggle, it reloads all SVGs with the new theme.               #}
{# =================================================================== #}
<script>
(function() {
  function getTheme() {
    return localStorage.getItem('netbox-color-mode') ||
           document.documentElement.getAttribute('data-bs-theme') || 'light';
  }

  function buildUrl(baseSrc, mode) {
    var sep = baseSrc.indexOf('?') >= 0 ? '&' : '?';
    return baseSrc + sep + 'theme=' + mode + '&_t=' + Date.now();
  }

  // Initial load: set `data` from `data-src` + theme.  Deferred to
  // DOMContentLoaded so NetBox's own colorMode init has run first
  // (it writes localStorage on `window.load`, but data-bs-theme is
  // set synchronously during its inline script).
  function initSVGs() {
    var mode = getTheme();
    document.querySelectorAll('.cabinet-svg-embed').forEach(function(obj) {
      if (obj.getAttribute('data')) return;  // already initialized
      var baseSrc = obj.getAttribute('data-src');
      if (baseSrc) obj.setAttribute('data', buildUrl(baseSrc, mode));
    });
  }
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initSVGs);
  } else {
    initSVGs();
  }

  // On theme toggle, update SVG URLs. The browser may or may not
  // re-fetch — if it doesn't, the user can refresh manually.  We
  // avoid page-reload (causes infinite loops) and DOM replacement
  // (unreliable in Safari).
  window.addEventListener('netbox.colorModeChanged', function(evt) {
    var newMode = (evt.detail && evt.detail.netboxColorMode) || getTheme();
    document.querySelectorAll('.cabinet-svg-embed').forEach(function(obj) {
      var baseSrc = obj.getAttribute('data-src');
      if (baseSrc) obj.setAttribute('data', buildUrl(baseSrc, newMode));
    });
  });
})();
</script>

{# =================================================================== #}
{# Finding C (v0.4.0): 2D click-anywhere handler for mounting plates.  #}
{#                                                                      #}
{# The SVG renderer emits one transparent `.slot.empty-slot.mount-2d`   #}
{# rect per 2D mount, tagged with data-mount-pk + data-mm-per-px +      #}
{# data-origin-x/y. On click, we read the pointer's offset inside that  #}
{# rect, convert to mm relative to the mount's origin, round to the    #}
{# nearest mm, and navigate to the PlacementForm with mount, position_x #}
{# and position_y pre-filled. 1D and grid mounts already have per-slot  #}
{# <a> hyperlinks; they don't need this JS.                             #}
{# =================================================================== #}
<script>
(function() {
  const obj = document.getElementById('cabinet-layout-svg-embed');
  if (!obj) return;
  const placementAddUrl = "{% url 'plugins:netbox_cabinet_view:placement_add' %}";

  function wireUp2DClicks() {
    const doc = obj.contentDocument;
    if (!doc) return;
    const rects = doc.querySelectorAll('.slot.empty-slot.mount-2d');
    rects.forEach(function(rect) {
      if (rect.dataset.wired) return;
      rect.dataset.wired = '1';
      rect.addEventListener('click', function(evt) {
        const mountPk = rect.getAttribute('data-mount-pk');
        const mmPerPx = parseFloat(rect.getAttribute('data-mm-per-px') || '0.5');
        const originX = parseFloat(rect.getAttribute('data-origin-x') || '0');
        const originY = parseFloat(rect.getAttribute('data-origin-y') || '0');
        // svgwrite rects with fill_opacity=0 still receive pointer
        // events; offsetX/offsetY on the SVGGraphicsElement map to
        // the viewBox's user space, same coordinate system as
        // originX/originY.
        const pt = rect.ownerSVGElement.createSVGPoint();
        pt.x = evt.clientX;
        pt.y = evt.clientY;
        const ctm = rect.getScreenCTM();
        if (!ctm) return;
        const local = pt.matrixTransform(ctm.inverse());
        const mmX = Math.max(0, Math.round((local.x - originX) * mmPerPx));
        const mmY = Math.max(0, Math.round((local.y - originY) * mmPerPx));
        const href = placementAddUrl
          + '?mount=' + encodeURIComponent(mountPk)
          + '&position_x=' + mmX
          + '&position_y=' + mmY;
        // Navigate the parent window (same behaviour as the <a>
        // hyperlinks on 1D/grid empty slots).
        window.location.href = href;
      });
    });
  }

  if (obj.contentDocument && obj.contentDocument.readyState === 'complete') {
    wireUp2DClicks();
  } else {
    obj.addEventListener('load', wireUp2DClicks);
  }
})();
</script>

{# =================================================================== #}
{# v0.7.0 Feature 2: drag-to-place.                                    #}
{#                                                                      #}
{# Populated placement rects carry data-placement-pk + mount geometry   #}
{# attributes. On drag, a ghost rect follows the cursor with grid snap. #}
{# On drop, PATCH /api/plugins/netbox-cabinet-view/placements/<pk>/     #}
{# with the new position. On success, reload the SVG via cache-buster.  #}
{# Click vs. drag distinguished by a 5px threshold — if the mouse       #}
{# doesn't move enough, we navigate to the device detail URL instead.   #}
{# =================================================================== #}
<script>
(function() {
  var DRAG_THRESHOLD = 5;
  var API_BASE = '/api/plugins/netbox-cabinet-view/placements/';

  function getCsrfToken() {
    var m = document.cookie.match(/csrftoken=([^;]+)/);
    return m ? m[1] : '';
  }

  function wireDragToPlace(svgObj) {
    var doc = svgObj.contentDocument;
    if (!doc) return;
    var slots = doc.querySelectorAll('.slot[data-placement-pk]');
    if (!slots.length) return;

    var dragging = null;
    var ghost = null;
    var startPt = null;
    var dragStarted = false;
    var origX, origY;

    slots.forEach(function(rect) {
      rect.addEventListener('mousedown', function(evt) {
        if (evt.button !== 0) return;  // left click only
        evt.preventDefault();
        dragging = rect;
        dragStarted = false;
        origX = parseFloat(rect.getAttribute('x') || 0);
        origY = parseFloat(rect.getAttribute('y') || 0);
        var pt = doc.documentElement.createSVGPoint();
        pt.x = evt.clientX;
        pt.y = evt.clientY;
        var ctm = rect.getScreenCTM();
        if (!ctm) return;
        startPt = pt.matrixTransform(ctm.inverse());
      });
    });

    doc.addEventListener('mousemove', function(evt) {
      if (!dragging || !startPt) return;
      var pt = doc.documentElement.createSVGPoint();
      pt.x = evt.clientX;
      pt.y = evt.clientY;
      var ctm = dragging.getScreenCTM();
      if (!ctm) return;
      var local = pt.matrixTransform(ctm.inverse());
      var dx = local.x - startPt.x;
      var dy = local.y - startPt.y;

      if (!dragStarted) {
        if (Math.sqrt(dx * dx + dy * dy) < DRAG_THRESHOLD) return;
        dragStarted = true;
        ghost = dragging.cloneNode(true);
        ghost.setAttribute('opacity', '0.5');
        ghost.setAttribute('stroke', '#00c853');
        ghost.setAttribute('stroke-width', '2');
        ghost.setAttribute('stroke-dasharray', '4 2');
        ghost.style.pointerEvents = 'none';
        ghost.removeAttribute('data-placement-pk');
        doc.documentElement.appendChild(ghost);
        doc.documentElement.style.cursor = 'grabbing';
      }

      if (ghost) {
        ghost.setAttribute('x', origX + dx);
        ghost.setAttribute('y', origY + dy);
      }
    });

    doc.addEventListener('mouseup', function(evt) {
      if (!dragging) return;

      if (!dragStarted) {
        // Click — navigate to the device detail URL.
        var link = dragging.closest('a');
        if (link) {
          var href = link.getAttribute('href') || link.getAttributeNS('http://www.w3.org/1999/xlink', 'href');
          if (href) window.parent.location.href = href;
        }
        dragging = null;
        startPt = null;
        return;
      }

      // Compute new position from ghost coordinates.
      var pk = dragging.getAttribute('data-placement-pk');
      var mountType = dragging.getAttribute('data-mount-type') || '';
      var mmPerPx = parseFloat(dragging.getAttribute('data-mm-per-px') || '0.5');
      var mmPerUnit = parseFloat(dragging.getAttribute('data-mm-per-unit') || '1');
      var ghostX = parseFloat(ghost.getAttribute('x') || 0);
      var ghostY = parseFloat(ghost.getAttribute('y') || 0);

      // Snap and compute the PATCH body.
      var patchBody = {};
      var is1D = (mountType === 'din_rail' || mountType === 'subrack' || mountType === 'busbar');
      var isGrid = (mountType === 'grid');
      var is2D = (mountType === 'mounting_plate');

      if (is1D) {
        // Convert pixel offset along mount axis to mount units.
        // The mount's origin is encoded in the initial rect position.
        var deltaAlongAxis = (ghostX - origX) * mmPerPx;
        var origPos = parseInt(dragging.getAttribute('data-orig-position') || '0', 10);
        // Estimate new position by rounding the delta in units.
        var deltaUnits = Math.round(deltaAlongAxis / mmPerUnit);
        var currentPos = origPos || 1;
        var newPos = Math.max(1, currentPos + deltaUnits);
        patchBody.position = newPos;
      } else if (isGrid) {
        var deltaX = (ghostX - origX) * mmPerPx;
        var deltaY = (ghostY - origY) * mmPerPx;
        var deltaUnits = Math.round(deltaX / mmPerUnit);
        var rowHeightPx = parseFloat(dragging.getAttribute('data-row-height-px') || '20');
        var deltaRows = Math.round((ghostY - origY) / rowHeightPx);
        var currentRow = parseInt(dragging.getAttribute('data-row') || '1', 10);
        var rows = parseInt(dragging.getAttribute('data-rows') || '0', 10);
        var newRow = Math.max(1, Math.min(currentRow + deltaRows, rows || 999));
        var origGridPos = parseInt(dragging.getAttribute('data-orig-position') || '0', 10) || 1;
        patchBody.position = Math.max(1, origGridPos + deltaUnits);
        patchBody.row = newRow;
      } else if (is2D) {
        // Absolute mm from the top-left of the placement area.
        var newXmm = Math.max(0, Math.round((ghostX - origX) * mmPerPx) +
                     parseInt(dragging.getAttribute('data-orig-position-x') || '0', 10));
        var newYmm = Math.max(0, Math.round((ghostY - origY) * mmPerPx) +
                     parseInt(dragging.getAttribute('data-orig-position-y') || '0', 10));
        patchBody.position_x = newXmm;
        patchBody.position_y = newYmm;
      }

      // PATCH the placement.
      fetch(API_BASE + pk + '/', {
        method: 'PATCH',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRFToken': getCsrfToken(),
        },
        body: JSON.stringify(patchBody),
      })
      .then(function(resp) {
        if (!resp.ok) {
          return resp.json().then(function(data) {
            throw new Error(JSON.stringify(data));
          });
        }
        // Reload the SVG by bumping a cache-buster query param.
        var src = svgObj.getAttribute('data');
        var sep = src.indexOf('?') >= 0 ? '&' : '?';
        svgObj.setAttribute('data', src.replace(/[&?]_t=\d+/, '') + sep + '_t=' + Date.now());
      })
      .catch(function(err) {
        alert('Move failed: ' + err.message);
      });

      // Clean up.
      if (ghost) ghost.remove();
      ghost = null;
      dragging = null;
      startPt = null;
      dragStarted = false;
      doc.documentElement.style.cursor = '';
    });
  }

  // Wire up all SVG <object> elements (handles dual-face rendering).
  var objects = document.querySelectorAll('object[type="image/svg+xml"]');
  objects.forEach(function(obj) {
    if (obj.contentDocument && obj.contentDocument.readyState === 'complete') {
      wireDragToPlace(obj);
    } else {
      obj.addEventListener('load', function() { wireDragToPlace(obj); });
    }
  });
})();
</script>
<div class="row mb-3">
  <div class="col-12">
    <div class="card">
      <h5 class="card-header">Mounts</h5>
      <div class="card-body table-responsive">
        <table class="table table-hover">
          <thead>
            <tr>
              <th>Name</th>
              <th>Type</th>
              <th>Subtype</th>
              <th>Unit</th>
              <th>Size</th>
              <th>Placements</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {% for mount in mounts %}
            <tr>
              <td><a href="{{ mount.get_absolute_url }}">{{ mount.name }}</a></td>
              <td>{{ mount.get_mount_type_display }}</td>
              <td>{{ mount.get_subtype_display|default:"—" }}</td>
              <td>{{ mount.get_unit_display }}</td>
              <td>
                {% if mount.length_mm %}
                  {{ mount.length_mm }} mm ({{ mount.capacity_units }} units)
                {% else %}
                  {{ mount.width_mm }} × {{ mount.height_mm }} mm
                {% endif %}
              </td>
              <td>{{ mount.placements.count }}</td>
              <td class="text-end">
                <a href="{% url 'plugins:netbox_cabinet_view:placement_add' %}?mount={{ mount.pk }}"
                   class="btn btn-sm btn-outline-primary">
                  <i class="mdi mdi-plus-thick"></i> Placement
                </a>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
{% endif %}
{% endblock content %}