{% extends "base.html" %}
{% block title %}Family Tree{% endblock %}
{% block page_title %}Family Tree{% endblock %}
{% block topbar_actions %}
  <a href="/rabbits" class="btn btn-secondary btn-sm">← Rabbits</a>
{% endblock %}

{% set STATUS_BORDER = {
  'Resident': 'var(--green)',
  'Fostering': 'var(--blue)',
  'Rehomed': 'var(--yellow)',
  'Passed': 'var(--red)',
} %}
{% set STATUS_BADGE = {
  'Resident': 'green',
  'Fostering': 'blue',
  'Rehomed': 'yellow',
  'Passed': 'overlay',
} %}

{% block content %}
<style>
  .ft-viewport {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: calc(100vh - 8rem);
    min-height: 400px;
    border: 1px solid var(--surface0);
    border-radius: .5rem;
    background: var(--base);
    cursor: grab;
    touch-action: none;
    user-select: none;
  }
  .ft-viewport.is-dragging { cursor: grabbing; }
  .ft-canvas {
    position: absolute;
    top: 0; left: 0;
    transform-origin: 0 0;
    padding: 1.5rem;
  }
  .ft-controls {
    position: absolute;
    bottom: .75rem;
    right: .75rem;
    z-index: 10;
    display: flex;
    gap: .25rem;
  }
  .ft-ctrl-btn {
    width: 2rem; height: 2rem;
    background: var(--surface1);
    border: 1px solid var(--surface2);
    border-radius: .375rem;
    color: var(--text);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  .ft-ctrl-btn:hover { background: var(--surface2); }
  .ft-family {
    position: relative;
    background: var(--mantle);
    border: 1px solid var(--surface0);
    border-radius: .5rem;
    padding: 1.5rem 1.5rem 1rem;
    margin-bottom: 1.5rem;
    overflow: visible;
  }
  .ft-generation {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 2.5rem;
    flex-wrap: nowrap;
    margin-bottom: 3.5rem;
    position: relative;
    z-index: 1;
  }
  .ft-generation:last-child { margin-bottom: .5rem; }
  .ft-sibling-group {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
  }
  .ft-node {
    background: var(--surface0);
    border: 2px solid var(--surface2);
    border-radius: .5rem;
    padding: .625rem .875rem;
    min-width: 110px;
    max-width: 160px;
    text-align: center;
    position: relative;
    z-index: 1;
  }
  .ft-node-name {
    font-weight: 600;
    font-size: .8125rem;
    color: var(--text);
    margin-bottom: .15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ft-node-hutch {
    font-size: .7rem;
    color: var(--subtext0);
    margin-bottom: .3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ft-lines {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 0;
  }
</style>

{% if families %}
<div class="ft-viewport" id="ft-viewport">
  <div class="ft-canvas" id="ft-canvas">
    {% for family in families %}
      <div class="ft-family" id="ft-family-{{ loop.index0 }}">
        <svg class="ft-lines" id="ft-svg-{{ loop.index0 }}"></svg>
        {% for generation in family %}
          <div class="ft-generation">
            {% for group in generation %}
              <div class="ft-sibling-group">
                {% for rabbit in group %}
                  <div class="ft-node"
                       id="ft-node-{{ rabbit.id }}"
                       data-node-id="{{ rabbit.id }}"
                       data-mother="{{ rabbit.mother_id or '' }}"
                       data-father="{{ rabbit.father_id or '' }}"
                       style="border-color:{{ STATUS_BORDER.get(rabbit.status, 'var(--surface2)') }}">
                    <div class="ft-node-name" title="{{ rabbit.name }}">{{ rabbit.name }}</div>
                    {% if rabbit.hutch %}
                      <div class="ft-node-hutch" title="{{ rabbit.hutch.name }}">{{ rabbit.hutch.name }}</div>
                    {% endif %}
                    <span class="badge badge-{{ STATUS_BADGE.get(rabbit.status, 'overlay') }}">{{ rabbit.status or '—' }}</span>
                  </div>
                {% endfor %}
              </div>
            {% endfor %}
          </div>
        {% endfor %}
      </div>
    {% endfor %}
  </div>
  <div class="ft-controls">
    <button class="ft-ctrl-btn" id="ft-zoom-in"    title="Zoom in">+</button>
    <button class="ft-ctrl-btn" id="ft-zoom-out"   title="Zoom out">−</button>
    <button class="ft-ctrl-btn" id="ft-zoom-reset" title="Reset view" style="font-size:.875rem">↺</button>
  </div>
</div>
{% else %}
  <div style="text-align:center;padding:4rem 2rem;color:var(--subtext0)">
    <div style="font-size:2.5rem;margin-bottom:.75rem">🐇</div>
    <div style="font-size:.9375rem;font-weight:500;color:var(--text);margin-bottom:.5rem">No family connections recorded yet</div>
    <div style="font-size:.8125rem">Edit a rabbit and assign its mother or father to get started.</div>
  </div>
{% endif %}

<script>
(function () {
  var viewport = document.getElementById('ft-viewport');
  var canvas   = document.getElementById('ft-canvas');
  if (!viewport || !canvas) return;

  var scale = 1, panX = 0, panY = 0;
  var MIN_SCALE = 0.1, MAX_SCALE = 3;

  function clamp(v, lo, hi) { return v < lo ? lo : v > hi ? hi : v; }

  function applyTransform() {
    canvas.style.transform = 'translate(' + panX + 'px,' + panY + 'px) scale(' + scale + ')';
    drawAll();
  }

  // ── Mouse drag to pan ───────────────────────────────────────────────────
  var dragging = false, dragStart = { x: 0, y: 0 }, panStart = { x: 0, y: 0 };

  viewport.addEventListener('mousedown', function (e) {
    if (e.button !== 0) return;
    dragging = true;
    dragStart.x = e.clientX; dragStart.y = e.clientY;
    panStart.x  = panX;      panStart.y  = panY;
    viewport.classList.add('is-dragging');
    e.preventDefault();
  });
  window.addEventListener('mousemove', function (e) {
    if (!dragging) return;
    panX = panStart.x + (e.clientX - dragStart.x);
    panY = panStart.y + (e.clientY - dragStart.y);
    applyTransform();
  });
  window.addEventListener('mouseup', function () {
    if (!dragging) return;
    dragging = false;
    viewport.classList.remove('is-dragging');
  });

  // ── Wheel: pan normally, zoom on pinch/Ctrl ─────────────────────────────
  viewport.addEventListener('wheel', function (e) {
    e.preventDefault();
    var vr = viewport.getBoundingClientRect();
    var mx = e.clientX - vr.left;
    var my = e.clientY - vr.top;

    if (e.ctrlKey) {
      var factor    = e.deltaY > 0 ? 0.92 : 1.08;
      var newScale  = clamp(scale * factor, MIN_SCALE, MAX_SCALE);
      panX = mx - (mx - panX) * (newScale / scale);
      panY = my - (my - panY) * (newScale / scale);
      scale = newScale;
    } else {
      var dx = e.deltaX, dy = e.deltaY;
      if (e.deltaMode === 1) { dx *= 20; dy *= 20; }
      panX -= dx;
      panY -= dy;
    }
    applyTransform();
  }, { passive: false });

  // ── Zoom buttons ────────────────────────────────────────────────────────
  function zoomAt(cx, cy, factor) {
    var newScale = clamp(scale * factor, MIN_SCALE, MAX_SCALE);
    panX = cx - (cx - panX) * (newScale / scale);
    panY = cy - (cy - panY) * (newScale / scale);
    scale = newScale;
    applyTransform();
  }

  document.getElementById('ft-zoom-in').addEventListener('click', function () {
    zoomAt(viewport.clientWidth / 2, viewport.clientHeight / 2, 1.25);
  });
  document.getElementById('ft-zoom-out').addEventListener('click', function () {
    zoomAt(viewport.clientWidth / 2, viewport.clientHeight / 2, 0.8);
  });
  document.getElementById('ft-zoom-reset').addEventListener('click', function () {
    scale = 1; panX = 0; panY = 0;
    applyTransform();
  });

  // ── SVG connector drawing ───────────────────────────────────────────────
  // getBoundingClientRect() returns screen-space coords scaled by the canvas
  // transform.  Dividing by `scale` converts them to SVG-local coordinates.
  function drawFamily(familyEl, svgEl) {
    while (svgEl.firstChild) svgEl.removeChild(svgEl.firstChild);
    var FR = familyEl.getBoundingClientRect();
    var s  = scale;

    familyEl.querySelectorAll('.ft-generation').forEach(function (genEl, gi) {
      genEl.querySelectorAll('[data-node-id]').forEach(function (n) { n._gi = gi; });
    });

    var nodeMap = {};
    familyEl.querySelectorAll('[data-node-id]').forEach(function (n) {
      nodeMap[n.dataset.nodeId] = n;
    });

    var groups = {};
    familyEl.querySelectorAll('[data-node-id]').forEach(function (node) {
      var m = node.dataset.mother || '';
      var f = node.dataset.father || '';
      if (!m && !f) return;
      var key = m + ':' + f;
      if (!groups[key]) groups[key] = { m: m, f: f, kids: [] };
      groups[key].kids.push(node);
    });

    var genBarY = {};
    Object.values(groups).forEach(function (g) {
      var pNode = (g.m && nodeMap[g.m]) || (g.f && nodeMap[g.f]);
      if (!pNode) return;
      var gi = pNode._gi;
      [g.m && nodeMap[g.m], g.f && nodeMap[g.f]].filter(Boolean).forEach(function (p) {
        var b = (p.getBoundingClientRect().bottom - FR.top) / s;
        genBarY[gi] = Math.max(genBarY[gi] || 0, b + 14);
      });
    });

    // Stroke width stays constant in screen pixels regardless of zoom.
    var sw = (1.5 / s).toFixed(3);

    function seg(x1, y1, x2, y2) {
      if (Math.abs(x1 - x2) < 0.5 && Math.abs(y1 - y2) < 0.5) return;
      var el = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      el.setAttribute('x1', x1); el.setAttribute('y1', y1);
      el.setAttribute('x2', x2); el.setAttribute('y2', y2);
      el.setAttribute('stroke', '#585b70');
      el.setAttribute('stroke-width', sw);
      el.setAttribute('stroke-linecap', 'round');
      svgEl.appendChild(el);
    }

    function nodeCX(n) {
      var r = n.getBoundingClientRect();
      return (r.left - FR.left + r.width / 2) / s;
    }
    function nodeBottom(n) {
      return (n.getBoundingClientRect().bottom - FR.top) / s;
    }

    Object.values(groups).forEach(function (g) {
      var mNode = g.m ? nodeMap[g.m] : null;
      var fNode = g.f ? nodeMap[g.f] : null;
      var pNode = mNode || fNode;
      if (!pNode) return;

      var barY     = genBarY[pNode._gi];
      var kidRects = g.kids.map(function (k) { return k.getBoundingClientRect(); });
      var kidTopY  = Math.min.apply(null, kidRects.map(function (r) { return (r.top  - FR.top)  / s; }));
      var kidXs    = kidRects.map(function (r) { return (r.left - FR.left + r.width / 2) / s; });
      var juncY    = kidTopY - 12;
      var minKidX  = Math.min.apply(null, kidXs);
      var maxKidX  = Math.max.apply(null, kidXs);
      var midKidX  = (minKidX + maxKidX) / 2;
      var stemX, stemTopY;

      if (mNode && fNode) {
        var mX = nodeCX(mNode), fX = nodeCX(fNode);
        stemX    = (mX + fX) / 2;
        seg(mX, nodeBottom(mNode), mX, barY);
        seg(fX, nodeBottom(fNode), fX, barY);
        seg(Math.min(mX, fX), barY, Math.max(mX, fX), barY);
        stemTopY = barY;
      } else {
        stemX    = nodeCX(pNode);
        stemTopY = nodeBottom(pNode);
      }

      // Elbow-route the stem to the centre of the children so each litter's
      // connector stays in its own horizontal lane between the generations.
      if (Math.abs(stemX - midKidX) < 0.5) {
        seg(stemX, stemTopY, stemX, juncY);
      } else {
        var midY = stemTopY + (juncY - stemTopY) * 0.5;
        seg(stemX, stemTopY, stemX, midY);
        seg(stemX, midY, midKidX, midY);
        seg(midKidX, midY, midKidX, juncY);
      }

      seg(minKidX, juncY, maxKidX, juncY);

      kidXs.forEach(function (kx, i) {
        seg(kx, juncY, kx, (kidRects[i].top - FR.top) / s);
      });
    });
  }

  function drawAll() {
    document.querySelectorAll('.ft-family').forEach(function (fam, i) {
      var svg = document.getElementById('ft-svg-' + i);
      if (svg) drawFamily(fam, svg);
    });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', drawAll);
  } else {
    drawAll();
  }
  window.addEventListener('resize', drawAll);
})();
</script>
{% endblock %}